: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"] {
  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;
}

.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;
  }

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

  .inventoryCrownFocusPanel .inventoryPreviewStage {
    width: auto;
    max-width: 100%;
    height: 100%;
    justify-self: center;
  }

  .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: 1fr;
  }

  .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;
  }
}