:root {
  color-scheme: dark;
  --bg: #0f172a;
  --bg-2: #0c1012;
  --panel: #111822;
  --panel-2: #151d27;
  --panel-3: #0b0f13;
  --ink: #e3edf7;
  --muted: #95a9ba;
  --line: #2f3f4e;
  --line-strong: #456079;
  --gold: #d6aa48;
  --gold-soft: #ffe4a4;
  --blue: #5ca7d8;
  --red: #e16d61;
  --green: #7ec98f;
  --violet: #a78bd8;
  --shadow: rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(92, 167, 216, 0.1), transparent 300px),
    radial-gradient(circle at 50% -20%, rgba(214, 170, 72, 0.12), transparent 34rem),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.inventoryShell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.inventoryHeader {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(14px, 3vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(12, 16, 18, 0.94);
  backdrop-filter: blur(10px);
  min-width: 0;
}

.inventoryBrand {
  color: var(--ink);
  text-decoration: none;
  display: grid;
  gap: 1px;
  min-width: 140px;
}

.inventoryBrand strong {
  font-size: 15px;
  line-height: 1.15;
}

.inventoryBrand span,
.inventoryMeta,
.inventoryMuted {
  color: var(--muted);
}

.inventoryBrand span {
  font-size: 12px;
}

.inventoryNav {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
}

.inventoryNav a,
.inventoryNav button,
.inventoryAction,
.inventorySegment button,
.inventoryCategoryButton,
.inventorySubcategoryButton {
  min-height: 34px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #111822;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 10px;
  white-space: nowrap;
}

.inventoryNav button {
  color: var(--muted);
}

.inventoryMain {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 32px);
  display: grid;
  gap: 18px;
}

.inventoryStatus,
.inventoryError,
.inventoryPanel,
.inventoryCard,
.inventorySidebar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 24, 34, 0.94);
}

.inventoryStatus,
.inventoryError {
  padding: 18px;
}

.inventoryError {
  border-color: rgba(225, 109, 97, 0.6);
}

.inventoryProductGrid {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.inventorySidebar {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 14px;
  padding: 12px;
}

.inventorySidebarHeader {
  display: grid;
  gap: 3px;
  padding: 4px 2px;
}

.inventorySidebarHeader h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
}

.inventoryCategoryGroup {
  display: grid;
  gap: 8px;
}

.inventoryCategoryButton,
.inventorySubcategoryButton {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.inventoryCategoryButton {
  font-weight: 700;
}

.inventoryCategoryButton[aria-current="true"] {
  border-color: rgba(214, 170, 72, 0.72);
  background: #2d2414;
  color: var(--gold-soft);
}

.inventorySubcategoryList {
  display: grid;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(69, 96, 121, 0.55);
}

.inventorySubcategoryButton {
  min-height: 32px;
  color: var(--muted);
}

.inventorySubcategoryButton[aria-current="page"] {
  color: var(--ink);
  border-color: rgba(92, 167, 216, 0.68);
  background: #132131;
}

.inventorySubcategoryButton:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.inventorySoon {
  color: #8da2b7;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.inventoryCrownsPage {
  display: grid;
  gap: 18px;
}

.inventoryGrid {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.inventoryFocus {
  display: grid;
  gap: 14px;
}

.inventoryPanel {
  padding: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.inventoryPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.inventoryPanelHeader h1,
.inventoryPanelHeader h2,
.inventoryCard h3 {
  margin: 0;
  letter-spacing: 0;
}

.inventoryPanelHeader h1 {
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
}

.inventoryPanelHeader h2 {
  font-size: 17px;
}

.inventoryCard h3 {
  font-size: 15px;
}

.inventorySegment {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1012;
}

.inventorySegment button[aria-pressed="true"],
.inventorySegment button[aria-selected="true"] {
  border-color: rgba(214, 170, 72, 0.7);
  background: #2c2518;
  color: var(--gold-soft);
}

.inventoryStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.inventoryStat {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101a22;
}

.inventoryStat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.inventoryStat strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.inventoryWarning {
  border: 1px solid rgba(214, 170, 72, 0.55);
  border-radius: 8px;
  padding: 10px;
  background: rgba(214, 170, 72, 0.1);
  color: #ffdf8a;
}

.inventoryPreviewStage {
  width: 100%;
  aspect-ratio: 640 / 1080;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(92, 167, 216, 0.12), transparent 42%),
    linear-gradient(145deg, #172333, #0d1116);
  overflow: hidden;
}

.inventoryActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventoryAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inventoryLocalHarness {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(92, 167, 216, 0.48);
  border-radius: 8px;
  background: rgba(19, 33, 49, 0.72);
  color: var(--muted);
  line-height: 1.4;
}

.inventoryLocalHarness strong {
  color: var(--ink);
}

.inventoryAction[data-variant="primary"] {
  border-color: rgba(214, 170, 72, 0.75);
  background: #3a2c12;
}

.inventoryAction[data-variant="pool"] {
  border-color: rgba(92, 167, 216, 0.6);
  background: #172838;
}

.inventoryAction:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.inventoryCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.inventorySelectionPanel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.inventorySelectionPanel > .inventoryCards {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  align-content: start;
  padding-right: 4px;
}

.inventoryCard {
  display: grid;
  gap: 10px;
  padding: 10px;
  text-align: left;
  color: var(--ink);
}

.inventoryCard:hover {
  border-color: rgba(92, 167, 216, 0.56);
}

.inventoryCard[aria-selected="true"] {
  border-color: rgba(214, 170, 72, 0.9);
  box-shadow: 0 0 0 1px rgba(214, 170, 72, 0.32);
}

.inventoryCardPreview {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  min-height: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, var(--crown-preview-glow, rgba(214, 170, 72, 0.28)), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--crown-preview-fill, #214d24) 42%, var(--crown-preview-bg, #131b14)), var(--crown-preview-bg, #131b14) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crown-preview-border, #4d8b51) 54%, transparent);
}

.inventoryBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inventoryBadge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.inventoryBadge[data-tone="selected"] {
  border-color: rgba(214, 170, 72, 0.75);
  color: var(--gold-soft);
}

.inventoryBadge[data-tone="pool"] {
  border-color: rgba(126, 201, 143, 0.65);
  color: #a6e5b3;
}

.inventoryCardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.inventoryCardActions .inventoryAction {
  min-width: 0;
  width: 100%;
  padding-inline: 8px;
}

.crownItemPreview {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
}

.crownItemPreviewStage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 166px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 46%, var(--crown-preview-glow, rgba(214, 170, 72, 0.24)), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--crown-preview-fill, #214d24) 34%, transparent), transparent 58%);
}

.crownItemPreviewSlot {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

.crownItemPreviewCrownHost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.crownItemPreviewNoCrown {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78%, 150px);
  min-height: 54px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px dashed rgba(227, 237, 247, 0.38);
  border-radius: 999px 999px 7px 7px;
  color: rgba(227, 237, 247, 0.62);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.crownItemPreviewImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 13px 18px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px var(--crown-preview-glow, rgba(214, 170, 72, 0.18)));
}

.crownItemPreviewCaptureHost {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.crownItemPreviewLoading {
  width: 58%;
  aspect-ratio: 1.8 / 1;
  border-radius: 999px 999px 8px 8px;
  border: 1px solid rgba(214, 170, 72, 0.34);
  background:
    linear-gradient(90deg, transparent, rgba(255, 228, 164, 0.18), transparent),
    rgba(12, 16, 18, 0.32);
  animation: crownItemPreviewLoadingSweep 1.2s ease-in-out infinite;
}

@keyframes crownItemPreviewLoadingSweep {
  0% {
    filter: brightness(0.75);
  }
  50% {
    filter: brightness(1.15);
  }
  100% {
    filter: brightness(0.75);
  }
}

.kingTilePreview {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
}

.kingTilePreview .mcf-king-pane {
  min-height: 100%;
}

.kingTilePreviewCrownLayer {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.kingTilePreviewInitialFallback {
  position: absolute;
  left: 50%;
  top: 15.75%;
  z-index: 3;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: var(--gold-soft);
  font-size: 54px;
  font-weight: 900;
  pointer-events: none;
}

.crownOverlayProof {
  position: absolute;
  left: calc(var(--crown-fit-x) + var(--crown-fit-offset-x));
  top: calc(var(--crown-fit-y) + var(--crown-fit-offset-y));
  width: var(--crown-fit-width);
  height: var(--crown-fit-height);
  transform: translate(-50%, -50%) scale(var(--crown-fit-scale));
  transform-origin: center center;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.42));
  overflow: visible;
}

.crownOverlayProofComponent {
  position: absolute;
  inset: -80% -50%;
  border-radius: 8px;
  overflow: visible;
  border: 0;
  background: #0b0f16;
  transform-origin: center center;
  will-change: transform, filter;
}

.kingTilePreviewCrownLayer .crownOverlayProofComponent {
  inset: -170% -135%;
  background: transparent;
}

.crownOverlayProofRotating {
  animation: crownOverlayProofBandTurn 3.2s ease-in-out infinite;
}

.crownOverlayProofTexture {
  width: 100%;
  height: 100%;
  display: block;
}

.crownOverlayProofSourceTexture {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.crownOverlayProofWebgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.crownOverlayProofWarning {
  position: absolute;
  inset: auto 6px 6px;
  border-radius: 4px;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.68);
  color: var(--red);
  font-size: 10px;
  text-align: center;
}

.crownOverlayProofThreeCylinder {
  background: transparent;
}

@keyframes crownOverlayProofBandTurn {
  0%,
  100% {
    transform: scaleX(1) rotateZ(-1deg);
    filter: brightness(1);
  }
  25% {
    transform: scaleX(0.28) rotateZ(0deg);
    filter: brightness(0.72);
  }
  50% {
    transform: scaleX(1) rotateZ(1deg);
    filter: brightness(1.08);
  }
  75% {
    transform: scaleX(0.4) rotateZ(0deg);
    filter: brightness(0.84);
  }
}

.inventoryChatPreviewPair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.inventoryChatPreviewPair > div,
.inventoryChatCards .inventoryCardPreview {
  min-width: 0;
}

.inventoryChatPreviewPair .chatCosmeticPreview {
  margin-top: 6px;
  min-height: 150px;
}

.inventoryChatCards .inventoryCardPreview {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.cosmeticComponents {
  display: grid;
  gap: 5px;
  margin: 7px 0;
  min-width: 0;
  color: #c2cfda;
  font-size: 12px;
  line-height: 1.45;
  text-shadow: none;
}

.cosmeticComponents div { min-width: 0; }
.cosmeticComponents dt { color: #8fa5b6; font-size: 11px; font-weight: 600; }
.cosmeticComponents dd { margin: 0; overflow-wrap: anywhere; }
.inventoryCrownFocusPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.inventoryCard[hidden],
[data-inventory-no-matches][hidden] {
  display: none;
}

.inventorySelectionPanel > .inventoryPanelHeader {
  flex-wrap: wrap;
}

.inventoryFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  flex-basis: 100%;
  min-width: 0;
}

.inventoryFilters label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
}

.inventoryFilters select {
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #101a22;
  color: var(--ink);
}

.inventoryEquippedFilter input {
  accent-color: var(--gold-soft);
}
.inventoryCrownViewTabs { justify-self: start; }
.inventoryCrownViewBody { position: relative; min-height: 0; aspect-ratio: 640 / 1080; }
.inventoryCrownFocusPanel .inventoryPreviewStage {
  width: auto;
  max-width: 100%;
  height: 100%;
  margin-inline: auto;
}
.inventoryCrownViewBody > [aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.inventoryCrownDetails {
  position: absolute;
  inset: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
}
.inventoryCrownDetails h2 { margin-top: 0; overflow-wrap: anywhere; }
.biddingIndicatorComponents ul { margin: 0; padding-left: 16px; }
.biddingIndicatorComponents li { padding-left: 2px; }

.inventoryChatCards .inventoryCard[aria-selected="true"] {
  border-color: var(--crown-preview-border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--crown-preview-border) 34%, transparent);
}

.inventoryChatCards .chatCosmeticPreview {
  min-height: 132px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 821px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .inventoryShell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .inventoryMain,
  .inventoryProductGrid,
  .inventoryCrownsPage,
  .inventoryGrid,
  .inventoryFocus {
    min-height: 0;
  }

  .inventoryMain {
    height: 100%;
    overflow: hidden;
  }

  .inventoryProductGrid,
  .inventoryCrownsPage,
  .inventoryGrid {
    height: 100%;
  }

  .inventoryProductGrid,
  .inventoryGrid {
    align-items: stretch;
  }

  .inventorySidebar {
    position: static;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .inventoryFocus {
    grid-template-rows: minmax(0, auto) minmax(180px, 1fr);
    overflow: hidden;
  }

  .inventoryFocus > .inventoryPanel:first-child {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .inventoryCrownViewBody { aspect-ratio: auto; }

  .inventoryChatFocus {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .inventoryChatFocus > [data-role="chat-slot-focus"],
  .inventoryChatFocus > .inventoryChatPreviewPair {
    min-height: 0;
    overflow: hidden;
  }

  .inventoryChatFocus > [data-role="chat-slot-focus"] > .chatCosmeticPreview {
    height: 100%;
    min-height: 0;
  }

  .inventoryChatFocus > .inventoryChatPreviewPair > div {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .inventoryChatFocus > .inventoryChatPreviewPair .chatCosmeticPreview {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .inventoryHeader {
    align-items: start;
    flex-direction: column;
  }

  .inventoryNav {
    width: 100%;
  }

  .inventoryProductGrid,
  .inventoryGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .inventoryFocus, .inventoryCrownFocusPanel { min-width: 0; }
  .inventoryPanelHeader { flex-wrap: wrap; }

  .inventorySidebar {
    position: static;
  }

  .inventoryStats {
    grid-template-columns: 1fr;
  }

  .inventoryPreviewStage {
    min-height: 0;
  }

  .inventoryCardActions {
    grid-template-columns: 1fr;
  }

  .inventoryChatPreviewPair {
    grid-template-columns: 1fr;
  }

  .inventorySelectionPanel {
    max-height: 72dvh;
  }
}

/* Marble previews share the square product presentation. */
.inventoryTrailsPage .inventoryCardPreview { aspect-ratio: 1; background: #182032; }
.inventoryTrailsPage .inventoryMeta { margin: 0; }
.inventoryTrailsPage .inventoryTrailCompanion { margin: 0 0 8px; }
.inventoryTrailsPage .inventorySelectionPanel { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; }
.inventoryTrailsPage [data-trail-focus],
.inventoryTrailsPage [data-trail-card] { position: relative; }
.inventoryTrailsPage [data-trail-focus] > p[role="status"],
.inventoryTrailsPage [data-trail-card] > p[role="status"] {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 8px 10px;
  background: rgba(17, 24, 34, 0.92);
}

.inventoryRoyalTitlesPage {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

/* Only the fixed-height desktop layout needs a separate scroll container.
   On mobile, titles and default tolls scroll with the rest of the page. */
@media (min-width: 821px) {
  .inventoryRoyalTitlesPage {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.inventoryRoyalTitleSlots,
.inventoryRoyalTitleCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 14px;
}
.inventoryRoyalTitleCards .inventoryCard { align-content: start; }

.inventoryRoyalTitleSlot {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line, #344459);
}

.inventoryRoyalTitleSlot label { font-weight: 700; }
.inventoryRoyalTitleSlot select {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  color: var(--ink);
  background: #132131;
  border: 1px solid #5ca7d8;
  border-radius: 0;
  font: inherit;
}
.inventoryRoyalTitleSlot select:focus-visible { outline: 2px solid #e4bc66; outline-offset: 3px; }
.inventoryRoyalTitleSlot select:disabled { opacity: .65; }
.inventoryUnlockHeading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 8px;
  min-width: 0;
}
.inventoryUnlockHeading h3 { min-width: 0; overflow-wrap: anywhere; }
.inventoryUnlockInfo { display: contents; }
.inventoryUnlockInfoButton {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #5ca7d8;
  border-radius: 50%;
  color: var(--ink);
  background: #132131;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.inventoryUnlockInfoButton:focus-visible { outline: 2px solid #e4bc66; outline-offset: 2px; }
.inventoryUnlockPopover {
  position: fixed;
  z-index: 2000;
  box-sizing: border-box;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  border: 1px solid #5ca7d8;
  background: #132131;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.inventoryUnlockPopover [data-unlock-content] { white-space: pre-line; }
.inventoryUnlockPopover[hidden] { display: none; }
.inventoryUnlockClose {
  float: right;
  margin: -4px -6px 4px 8px;
  padding: 3px 7px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.inventoryUnlockClose:focus-visible { outline: 2px solid #e4bc66; outline-offset: 2px; }
@media (min-width: 821px) {
 .inventoryTrailsPage { min-height: 0; height: 100%; }
 .inventoryTrailFocusPanel { min-height: 0; display: block; overflow: auto; }
 .inventoryTrailFocusPanel > [data-trail-focus] { min-width: 0; min-height: 0; height: auto; width: 100%; max-width: 100%; justify-self: center; }
 .inventoryTrailFocusPanel h2 { margin: 14px 0 0; }
}

/* Rarity belongs to the owned-item card, outside the neutral Trail preview. */
.inventoryTrailsPage .inventoryTrailCard {
  border-color: var(--trail-card-border);
  background: linear-gradient(145deg, color-mix(in srgb, var(--trail-card-fill) 22%, var(--trail-card-bg)), var(--trail-card-bg));
}
.inventoryTrailsPage .inventoryTrailCard:hover { box-shadow: inset 0 0 0 1px var(--trail-card-border); }
.inventoryTrailsPage .inventoryTrailCard[aria-selected="true"] {
  border-color: var(--trail-card-border);
  outline: 2px solid var(--gold-soft);
  outline-offset: -3px;
}
.inventoryTrailCard h3 { margin: 0; overflow-wrap: anywhere; }

/* Reserve one status line so a failed Trail update does not move the page. */
.inventoryTrailsPage [data-trail-status] { min-height: 1.5em; }

.inventoryBordersPage .inventoryCardPreview { aspect-ratio: 1; background: #182032; }
.inventoryBordersPage .inventorySelectionPanel { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; }
.inventoryBorderFocusPanel { min-width: 0; overflow: auto; }
.inventoryBorderFocusPanel > [data-border-focus] { max-width: 100%; }
@media (min-width: 821px) {
 .inventoryBordersPage { min-height: 0; height: 100%; }
 .inventoryBorderFocusPanel { min-height: 0; display: block; overflow: auto; }
 .inventoryBorderFocusPanel > [data-border-focus] { min-width: 0; min-height: 0; height: auto; width: 100%; max-width: 100%; justify-self: center; }
 .inventoryBorderFocusPanel h2 { margin: 14px 0 0; }
}
.inventoryBordersPage .inventoryBorderCard { border-color: var(--border-card-border); background: linear-gradient(145deg, color-mix(in srgb, var(--border-card-fill) 22%, var(--border-card-bg)), var(--border-card-bg)); }
.inventoryBordersPage .inventoryBorderCard[aria-selected="true"] { outline: 2px solid var(--gold-soft); outline-offset: -3px; }
.inventoryBorderCard h3 { margin: 0; overflow-wrap: anywhere; }
.inventoryBordersPage [data-border-status] { min-height: 1.5em; }
.inventoryBordersPage .inventoryCardPreview .marbleBorderPreviewNotice { display: none; }
.inventoryBordersPage [data-border-card] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.inventoryBiddingIndicatorsPage .inventoryCardPreview { aspect-ratio: 450 / 116; }
.inventoryBiddingIndicatorsPage [data-border-focus] { aspect-ratio: 450 / 116; }
button,
a[href],
[role='button'],
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.kingWreathPreviewHost { width:100%; min-width:0; aspect-ratio:640/1080; overflow:hidden; }
.kingWreathPreviewHost .kingTilePreview { width:100%; height:100%; min-height:0; }

.kingWreathPreviewHost .crownOverlayProofWarning { display:none; }

.kingWreathPreviewHost { position:relative; }
.kingWreathPreviewHost .kingTilePreview { position:absolute; inset:0; }

.inventoryWreathRotation { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.inventoryWreathRotation select { padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:inherit; font:inherit; }

.inventoryRebellionAurasPage .inventoryCards { grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.inventoryRebellionAurasPage .inventoryCardPreview { aspect-ratio:auto;overflow:visible; }
.inventoryRebellionAurasPage [data-border-card] { display:grid;justify-items:center; }
.inventoryRebellionAurasPage .auraPreviewNotice { padding:0 8px; }