@layer reset, tokens, base, shell, windows, game, apps, responsive, release-polish, card-polish;

@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/space-grotesk-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/space-grotesk-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  button, input { font: inherit; }
  button { color: inherit; }
  img, svg { display: block; max-inline-size: 100%; }
  [hidden] { display: none !important; }
}

@layer release-polish {
  .brand-symbol-crop {
    position: relative;
    display: block;
    overflow: clip;
    background: oklch(18% .006 285);
  }

  .brand-symbol-crop img {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: auto;
  }

  .title-brand-symbol {
    flex: 0 0 28px;
    inline-size: 28px;
    block-size: 18px;
  }

  .brand-app-icon {
    background: oklch(18% .006 285);
    box-shadow: inset 0 0 0 2px oklch(34% .012 285);
  }

  .brand-app-icon .brand-symbol-crop {
    inline-size: 92%;
    block-size: 64%;
    background: transparent;
  }

  .brand-app-icon .brand-symbol-crop img {
    inset-block-start: -5%;
  }

  .brand-mini-icon {
    display: grid;
    place-items: center;
    background: oklch(18% .006 285);
    box-shadow: none;
  }

  .brand-mini-icon .brand-symbol-crop {
    inline-size: 100%;
    block-size: 70%;
  }

  .run-mark {
    inline-size: 24px;
    block-size: 17px;
    margin-inline-end: 3px;
  }

  .wallpaper-mark {
    inset-inline: auto 2.5%;
    inset-block: auto 9%;
    inline-size: clamp(108px, 14%, 168px);
    padding: 5px;
    color: inherit;
    background: oklch(18% .006 285 / .82);
    border: 1px solid oklch(90% .03 340 / .22);
    opacity: .34;
  }

  .wallpaper-mark img {
    inline-size: 100%;
  }

  .docs-hero {
    position: relative;
    min-block-size: 166px;
    padding-inline-end: min(34%, 210px);
  }

  .docs-brand-lockup {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 20px;
    inline-size: min(29%, 176px);
  }

  .docs-brand-lockup img {
    inline-size: 100%;
  }

  @media (max-width: 860px) {
    .title-brand-symbol {
      flex-basis: 30px;
      inline-size: 30px;
      block-size: 20px;
    }

    .docs-hero {
      min-block-size: 0;
      padding-inline-end: 20px;
    }

    .docs-brand-lockup {
      position: static;
      inline-size: 132px;
      margin-block-end: 8px;
    }
  }
}

@layer tokens {
  :root {
    color-scheme: light;
    --room: oklch(22% 0.018 66); --desktop: oklch(76% 0.105 298); --desktop-deep: oklch(66% 0.12 298);
    --chrome: oklch(84% 0.008 248); --chrome-light: oklch(97% 0.012 92); --chrome-mid: oklch(75% 0.01 248); --chrome-dark: oklch(32% 0.014 252);
    --ink: oklch(18% 0.02 272); --ink-soft: oklch(37% 0.024 270); --magenta: oklch(49% 0.205 339); --magenta-deep: oklch(34% 0.155 339);
    --blue: oklch(45% 0.15 245); --teal: oklch(48% 0.105 184); --gold: oklch(61% 0.14 76); --yellow: oklch(90% 0.17 98);
    --board: oklch(22% 0.052 252); --board-deep: oklch(15% 0.036 256); --paper: oklch(96% 0.02 105); --ok: oklch(64% 0.17 144); --danger: oklch(53% 0.19 28);
    --display: "Space Grotesk", Arial, sans-serif; --mono: "IBM Plex Mono", Consolas, monospace;
  }
}

@layer base {
  html { min-block-size: 100%; background: var(--room); scrollbar-color: var(--magenta) var(--chrome); }
  body { min-block-size: 100dvh; overflow: clip; background: var(--room); color: var(--ink); font-family: var(--display); font-size: 14px; -webkit-font-smoothing: antialiased; }
  button { cursor: pointer; touch-action: manipulation; }
  button:disabled { cursor: not-allowed; opacity: .62; }
  :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
  ::selection { color: white; background: var(--magenta); }
}

@layer base {
  @media (min-width: 861px) {
    html, body { block-size: 100%; min-block-size: 100%; overflow: clip; overscroll-behavior: none; }
    body { position: fixed; inset: 0; inline-size: 100%; }
    .room { block-size: 100dvh; min-block-size: 0; }
  }
}

@layer shell {
  .room { position: relative; min-block-size: 100dvh; display: grid; place-items: center; padding: 1.5dvh 2vw; isolation: isolate; overflow: hidden; }
  .desk-shadow { position: absolute; inset: 72% 10% -10%; background: oklch(7% 0.01 70 / .65); filter: blur(38px); z-index: -1; }
  .monitor { position: relative; width: min(96vw, calc(96dvh * 1.599)); aspect-ratio: 1.599; background: url("design/crt-cutout-v5.png") center / contain no-repeat; filter: drop-shadow(0 22px 26px oklch(5% 0.01 60 / .65)); }
  .monitor-brand, .monitor-controls, .note { display: none; }
  .screen-frame { position: absolute; inset-block: 8.6% 14.7%; inset-inline: 16.9% 16.7%; overflow: hidden; border-radius: 4.8% / 5.2%; background: var(--desktop); box-shadow: inset 0 0 20px oklch(12% 0.05 270 / .46); }
  .desktop { position: relative; inline-size: 100%; block-size: 100%; overflow: hidden; background-color: var(--desktop); background-image: radial-gradient(oklch(36% 0.08 296 / .42) .55px, transparent .7px); background-size: 4px 4px; }
  .desktop::before { content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 9999; opacity: .12; background: repeating-linear-gradient(to bottom, transparent 0 3px, oklch(10% 0.02 270 / .25) 3px 4px); mix-blend-mode: multiply; }
  .desktop.no-scanlines::before { display: none; }
  .desktop.no-glow { box-shadow: none; }
  .wallpaper-mark { position: absolute; right: 3%; bottom: 10%; color: oklch(43% 0.1 300 / .18); font: 700 clamp(22px, 3vw, 48px)/.8 var(--display); letter-spacing: -.08em; }
  .desktop-icons { position: absolute; z-index: 2; inset: 3% auto 9% 1.7%; width: 10%; display: grid; align-content: start; gap: clamp(8px, 1.4vh, 16px); }
  .desktop-icon { min-block-size: 58px; border: 0; background: transparent; display: grid; justify-items: center; gap: 3px; padding: 3px; font: 600 clamp(8px, .68vw, 11px)/1.15 var(--mono); }
  .desktop-icon:hover, .desktop-icon:focus-visible { background: oklch(97% 0.02 110 / .35); }
  .pixel-icon { width: clamp(30px, 2.8vw, 44px); aspect-ratio: 1; display: grid; place-items: center; background: var(--chrome-light); border: 2px solid; border-color: white var(--chrome-dark) var(--chrome-dark) white; box-shadow: inset 0 0 0 2px var(--chrome-mid); }
  .pixel-icon svg { width: 68%; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
}

@layer windows {
  .window { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); min-width: 250px; display: flex; flex-direction: column; overflow: hidden; background: var(--chrome); border: 2px solid; border-color: var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light); box-shadow: 5px 8px 18px oklch(10% 0.025 270 / .3); }
  .window.is-active { box-shadow: 7px 12px 24px oklch(10% 0.025 270 / .42); }
  .window-play { min-width: 0; }
  .titlebar { flex: 0 0 29px; display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 8px; color: white; background: var(--magenta); font: 700 13px var(--display); letter-spacing: .02em; user-select: none; }
  .titlebar-blue { background: var(--blue); } .titlebar-teal { background: var(--teal); } .titlebar-gold { background: var(--gold); color: var(--ink); }
  .titlebar h1, .titlebar h2 { min-width: 0; flex: 1; font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .title-icon, .mini-icon { width: 16px; aspect-ratio: 1; background: currentColor; box-shadow: inset 0 0 0 4px var(--ink); }
  .window-actions { display: flex; gap: 3px; }
  .window-actions button { width: 26px; min-height: 24px; border: 2px solid; border-color: white var(--chrome-dark) var(--chrome-dark) white; background: var(--chrome); color: var(--ink); font: 700 15px/1 var(--mono); }
  .window-actions button:active, .bevel-button:active { border-color: var(--chrome-dark) white white var(--chrome-dark); transform: translateY(1px); }
  .menubar { flex: 0 0 40px; display: flex; align-items: center; gap: 8px; padding-inline: 7px; border-bottom: 1px solid var(--chrome-dark); background: var(--chrome-light); }
  .menu-links { display: flex; align-items: center; gap: 2px; }
  .menubar .menu-links button { min-height: 32px; padding-inline: 9px; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
  .menubar button:hover { background: var(--chrome-mid); }
  .app-window { z-index: 80; } .window-status { z-index: 50; }
  .window-statusbar, .app-toolbar { flex: 0 0 auto; min-height: 28px; display: flex; align-items: center; gap: 16px; padding: 5px 10px; border-top: 1px solid var(--chrome-dark); font: 600 11px var(--mono); }
  .app-toolbar { border-top: 0; border-bottom: 1px solid var(--chrome-dark); } .toolbar-end { margin-left: auto; }
  .bevel-button { min-height: 42px; padding: 8px 14px; border: 2px solid; border-color: white var(--chrome-dark) var(--chrome-dark) white; background: var(--chrome); font: 700 13px var(--display); letter-spacing: .01em; }
  .primary-action { color: white; background: var(--magenta); border-color: oklch(75% .14 340) var(--magenta-deep) var(--magenta-deep) oklch(75% .14 340); }
}

@layer game {
  .game-shell { flex: 1; min-height: 0; padding: 7px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 33%); grid-template-rows: 34px minmax(0, 1fr) auto; grid-template-areas: "status status" "board progress" "board footer"; gap: 6px; background: var(--chrome); }
  .game-status { grid-area: status; display: grid; grid-template-columns: minmax(220px, 1fr) 180px 180px; gap: 5px; }
  .round-phase, .counter, .wallet-button { min-height: 34px; padding: 3px 8px; border: 1px solid var(--chrome-dark); background: var(--chrome-light); color: var(--ink); }
  .round-phase span, .counter span, .wallet-button, .collection-panel span, .flip-credit span, .result-message span { font: 600 10px var(--mono); letter-spacing: .04em; }
  .round-phase { display: flex; align-items: center; gap: 7px; } .round-phase span { padding: 3px 6px; color: white; background: var(--ink); } .round-phase strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .round-phase .board-id { color: var(--ink); background: var(--chrome-mid); font-size: 8px; white-space: nowrap; }
  .counter { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .counter strong { color: var(--yellow); background: var(--board-deep); padding: 3px 7px; font: 600 15px var(--mono); font-variant-numeric: tabular-nums; }
  .wallet-button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 7px; align-content: center; text-align: left; }
  .wallet-button .status-light { grid-row: 1 / 3; align-self: center; }
  .wallet-button small { color: var(--ink-soft); font-size: 9px; }
  .status-light.is-demo { background: var(--gold); box-shadow: none; }
  .status-light, .power-light { width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
  .mode-row { margin-inline-start: auto; display: flex; align-items: center; gap: 0; }
  .board-wrap { grid-area: board; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 5px; overflow: clip; background: var(--board); border: 2px solid; border-color: var(--board-deep) oklch(55% .04 240) oklch(55% .04 240) var(--board-deep); }
  .game-board { --size: 5; inline-size: min(100%, 540px); block-size: auto; max-block-size: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--size), minmax(0, 1fr)); grid-template-rows: repeat(var(--size), minmax(0, 1fr)); gap: clamp(4px, .38vw, 6px); }
  .game-board.mode-3 { inline-size: min(100%, 500px); block-size: auto; }
  @media (min-width: 861px) {
    .board-wrap { container-type: size; }
    .game-board { inline-size: min(100cqi, 100cqb, 540px); block-size: min(100cqi, 100cqb, 540px); }
    .game-board.mode-3 { inline-size: min(100cqi, 100cqb, 500px); block-size: min(100cqi, 100cqb, 500px); }
  }
  .tile { position: relative; min-width: 0; min-height: 0; padding: 3px; overflow: clip; border: 1px solid var(--chrome-dark); background: var(--chrome-mid); box-shadow: inset 0 0 0 1px oklch(98% 0.008 90 / .45); transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease; }
  .tile:not(.is-revealed) { color: oklch(84% 0.012 95); background: oklch(34% 0.018 250); box-shadow: inset 0 1px 0 oklch(92% 0.01 95 / .22), inset 0 -8px 16px oklch(12% 0.015 250 / .16); }
  .tile:not(.is-revealed) { background-image: linear-gradient(to bottom, transparent calc(100% - 17px), oklch(80% 0.01 95 / .34) calc(100% - 17px), oklch(80% 0.01 95 / .34) calc(100% - 16px), transparent calc(100% - 16px)); }
  .tile:not(.is-revealed)::before { content: "R/R"; position: absolute; inset: 0 0 17px; display: grid; place-items: center; font: 600 clamp(11px, 1vw, 16px) var(--mono); letter-spacing: .06em; }
  .tile:not(.is-revealed)::after { content: attr(data-ticket); position: absolute; inset-inline-end: 6px; inset-block-end: 4px; color: oklch(78% 0.012 95); font: 600 8px var(--mono); }
  .tile:not(.is-revealed):not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: inset 0 1px 0 oklch(98% 0.01 95 / .35), 0 3px 7px oklch(10% 0.02 250 / .28); }
  .tile:disabled:not(.is-revealed) { opacity: .7; cursor: not-allowed; }
  .tile.is-revealed { background: var(--paper); box-shadow: inset 0 0 0 1px oklch(78% 0.018 90); cursor: help; }
  .tile.is-new { animation: tile-flip 420ms cubic-bezier(.2,.8,.2,1); }
  .tile.is-complete::after { content: "✓"; position: absolute; inset-inline-end: 3px; inset-block-start: 3px; width: 17px; aspect-ratio: 1; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font: 700 10px var(--mono); border: 1px solid var(--ink); }
  @keyframes tile-flip { 0% { transform: perspective(500px) rotateY(82deg); filter: brightness(1.4); } 48% { box-shadow: inset 0 0 0 3px var(--yellow), 0 0 9px oklch(90% .17 98 / .55); } 100% { transform: perspective(500px) rotateY(0); filter: none; } }
  .stock-face { position: absolute; inset: 3px; display: grid; grid-template-rows: minmax(0, 1fr) 17px; place-items: center; gap: 1px; padding: 16px 4px 3px; border-top: 2px solid var(--sector-color); }
  .stock-sector { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; max-width: calc(100% - 6px); padding: 1px 4px; overflow: hidden; color: var(--ink); background: color-mix(in oklch, var(--sector-color) 22%, var(--paper)); font: 600 8px/1.2 var(--mono); letter-spacing: .04em; white-space: nowrap; }
  .stock-logo { grid-row: 1; min-width: 0; min-height: 0; width: 78%; height: 88%; display: grid; place-items: center; overflow: clip; padding: 1px; background: transparent; }
  .stock-logo img { inline-size: 100%; block-size: 100%; max-inline-size: none; min-inline-size: 0; min-block-size: 0; object-fit: contain; aspect-ratio: auto; transform: scale(var(--logo-scale)); }
  .stock-logo.is-wide { width: 96%; height: 96%; }
  .stock-logo.is-light { width: 78%; height: 78%; padding: 5px; background: #10273a; border: 1px solid #294459; }
  .stock-logo.is-light.is-wide { width: 90%; }
  .stock-ticker { grid-row: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 700 clamp(10px, .82vw, 13px)/1 var(--mono); letter-spacing: .04em; }
  .collection-panel { grid-area: progress; min-height: 0; display: flex; flex-direction: column; overflow: clip; border: 1px solid var(--chrome-dark); background: var(--chrome-light); }
  .collection-heading { padding: 12px 13px 10px; border-bottom: 1px solid var(--chrome-dark); }
  .collection-heading h2 { font-size: 19px; line-height: 1.05; } .collection-heading p { margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
  .sector-progress { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .sector-chip { border-bottom: 1px solid var(--chrome-mid); }
  .sector-chip summary { min-height: 42px; padding: 5px 9px; display: grid; grid-template-columns: 8px minmax(0, 1fr) minmax(48px, 76px) auto 12px; column-gap: 7px; align-items: center; cursor: pointer; list-style: none; }
  .sector-chip summary::-webkit-details-marker { display: none; }
  .sector-chip summary::after { content: "+"; font: 600 13px var(--mono); }
  .sector-chip[open] summary::after { content: "−"; }
  .sector-chip summary i { width: 8px; aspect-ratio: 1; background: var(--sector-color); }
  .sector-chip summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-size: 12px; } .sector-chip summary strong { font: 600 13px var(--mono); }
  .sector-chip.is-complete summary strong { background: var(--yellow); padding-inline: 5px; }
  .sector-dots { min-width: 0; display: flex; gap: 3px; }
  .sector-dots b { width: 100%; max-width: 26px; height: 5px; background: var(--chrome-mid); border: 1px solid var(--chrome-dark); } .sector-dots b.is-on { background: var(--sector-color); }
  .sector-detail { padding: 0 10px 10px 24px; color: var(--ink-soft); font: 400 11px/1.35 var(--mono); }
  .sector-detail p { margin-block-end: 6px; font-weight: 600; }
  .sector-detail ul { display: grid; gap: 3px; padding: 0; list-style: none; }
  .sector-detail li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; opacity: .72; }
  .sector-detail li.is-owned { opacity: 1; color: var(--ink); }
  .sector-detail li.is-owned span::before { content: ""; width: 6px; aspect-ratio: 1; display: inline-block; margin-inline-end: 4px; background: var(--ok); border: 1px solid var(--ink); }
  .sector-detail small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
  .pool-note, .settlement-state { flex: 0 0 auto; padding: 6px 9px; display: grid; gap: 1px; border-top: 1px solid var(--chrome-dark); }
  .pool-note { margin-top: auto; background: var(--chrome); } .pool-note strong, .settlement-state strong { font-size: 12px; }
  .pool-note small, .settlement-state small { color: var(--ink-soft); font-size: 10px; line-height: 1.35; } .settlement-state.is-ready { background: var(--yellow); }
  .game-footer { grid-area: footer; display: grid; grid-template-columns: 94px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 6px; align-items: stretch; }
  .flip-credit, .result-message { min-width: 0; display: grid; align-content: center; padding: 6px 10px; border: 2px solid; border-color: var(--chrome-dark) white white var(--chrome-dark); background: var(--chrome-light); }
  .flip-credit { grid-template-columns: 1fr auto; gap: 8px; } .flip-credit strong { color: var(--magenta-deep); font: 700 23px var(--mono); }
  .result-message { grid-column: 1 / -1; grid-row: 2; min-height: 38px; display: grid; grid-template-columns: 94px minmax(0, 1fr); align-items: center; gap: 6px; border-width: 1px 0 0; background: transparent; }
  .settlement-button { grid-column: 1 / -1; }
  .result-message p { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.15; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .settlement-button { background: var(--yellow); }
  .primary-action { display: grid; place-content: center; gap: 1px; }
  .primary-action small { font: 600 8px var(--mono); letter-spacing: .045em; opacity: .8; }
  .mobile-board-progress { display: none; }
}

@layer game {
  .token-lock { min-block-size: 31px; padding-inline: 9px; display: grid; align-content: center; border: 1px solid var(--chrome-dark); background: var(--board-deep); color: white; }
  .token-lock strong { color: var(--yellow); font: 700 12px var(--mono); }
  .token-lock small { font: 600 7px var(--mono); letter-spacing: .08em; }
  .season-tag { min-block-size: 31px; padding-inline: 10px; display: flex; align-items: center; border: 1px solid var(--chrome-dark); background: var(--chrome); font: 600 9px var(--mono); }
  .faction-picker { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block-end: 1px solid var(--chrome-dark); background: var(--chrome); }
  .faction-button { min-inline-size: 0; min-block-size: 42px; padding: 4px; display: grid; grid-template-rows: 3px 1fr auto; gap: 2px; border: 0; border-inline-end: 1px solid var(--chrome-dark); background: var(--chrome-light); text-align: center; }
  .faction-button:last-child { border-inline-end: 0; }
  .faction-button i { inline-size: 100%; block-size: 4px; background: var(--sector-color); }
  .faction-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 8px var(--mono); }
  .faction-button strong { font: 700 11px var(--mono); }
  .faction-button:not(:disabled):hover { background: color-mix(in oklch, var(--sector-color) 20%, var(--paper)); }
  .faction-button.is-selected { color: white; background: var(--board-deep); box-shadow: inset 0 0 0 2px var(--sector-color); }
  .faction-button.is-selected i { background: var(--yellow); }
  .faction-button:disabled:not(.is-selected) { opacity: .48; }
  .collection-panel.is-scouting .faction-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 5px; border-block-end: 0; }
  .collection-panel.is-scouting .faction-button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .collection-panel.is-scouting .faction-button { min-block-size: 44px; grid-template-columns: 5px minmax(0, 1fr) auto; grid-template-rows: 1fr; gap: 9px; align-items: center; padding-inline: 7px 10px; border: 1px solid var(--chrome-dark); text-align: start; }
  .collection-panel.is-scouting .faction-button i { inline-size: 5px; block-size: 100%; }
  .collection-panel.is-scouting .faction-button span { overflow: visible; white-space: normal; text-overflow: clip; font-size: 9px; line-height: 1.08; }
  .collection-panel.is-scouting .sector-progress, .collection-panel.is-scouting .settlement-state { display: none; }
  .sector-chip.is-camp summary { background: color-mix(in oklch, var(--sector-color) 13%, var(--paper)); box-shadow: inset 3px 0 0 var(--sector-color); }
  .game-board.is-binder .tile:not(.is-revealed) { opacity: 1; cursor: default; }
  .game-board.is-binder .tile:not(.is-revealed)::before { content: "SEALED"; font-size: clamp(8px, .75vw, 11px); letter-spacing: .09em; }
  .tile.is-burned { background: oklch(29% 0.025 32); color: oklch(85% 0.04 70); opacity: .78; }
  .burned-face { position: absolute; inset: 4px; display: grid; place-content: center; gap: 3px; border: 1px dashed oklch(70% 0.06 55); transform: rotate(-2deg); }
  .burned-face strong { font: 700 clamp(8px, .8vw, 12px) var(--mono); }
  .burned-face small { font: 600 6px var(--mono); }
  .collection-heading { padding-block: 8px 7px; }
  .collection-heading h2 { font-size: 17px; }
  .sector-chip summary { min-height: 35px; padding-block: 3px; }
  .pool-note, .settlement-state { padding-block: 4px; }
  .collection-panel .pool-note { display: none; }
  .game-footer { grid-template-columns: 94px minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .craft-button { grid-column: 1 / -1; min-inline-size: 0; min-block-size: 34px; padding: 4px 8px; background: var(--chrome-mid); font-size: 10px; }
  .result-message { grid-column: 1 / -1; grid-row: auto; }
}

@layer apps {
  .status-table { padding: 8px; display: grid; gap: 5px; font: 11px var(--mono); } .status-table div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--chrome-dark); }
  .demo-note { margin-top: auto; padding: 8px; background: var(--chrome-mid); font: 9px var(--mono); }
  .sector-directory { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); }
  .sector-column { padding: 10px; border-right: 1px solid var(--chrome-dark); } .sector-column h3 { padding-bottom: 6px; border-bottom: 4px solid var(--sector-color); font-size: 14px; }
  .sector-column ul { list-style: none; padding: 0; } .sector-column li { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px dotted var(--chrome-dark); }
  .sector-column li > span:first-child { width: 30px; height: 30px; padding: 3px; display: grid; place-items: center; background: white; }
  .sector-column img { width: 100%; height: 100%; object-fit: contain; } .sector-column b, .sector-column small { display: block; } .sector-column b { font: 600 12px var(--mono); } .sector-column small { font-size: 10px; }
  .vault-total { padding: 18px; display: grid; gap: 5px; background: var(--board-deep); color: white; } .vault-total strong { color: var(--yellow); font: 700 30px var(--mono); } .vault-total span, .vault-total small { font: 10px var(--mono); }
  .allocation-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 54px; } .allocation-meter span { min-width: 0; display: grid; place-content: center; gap: 2px; padding: 6px; border-inline-end: 1px solid var(--ink); background: var(--yellow); text-align: center; } .allocation-meter span:last-child { border-inline-end: 0; } .allocation-meter span:nth-child(2) { background: var(--chrome-mid); } .allocation-meter span:nth-child(3) { background: oklch(73% .08 230); } .allocation-meter span:nth-child(4) { background: oklch(57% .1 30); color: white; } .allocation-meter strong, .allocation-meter small { overflow-wrap: anywhere; font: 600 8px/1.15 var(--mono); } .allocation-meter small { font-size: 7px; opacity: .82; }
  .vault-list { flex: 1; overflow: auto; } .vault-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px dotted var(--chrome-dark); } .vault-row i { height: 10px; background: var(--sector-color); } .vault-row strong { font: 600 11px var(--mono); }
  .claim-content, .settings-form, .readme-content { flex: 1; overflow: auto; padding: 18px; }
  .claim-content { display: grid; align-content: start; gap: 12px; } .claim-stamp { width: 64px; padding: 5px; border: 3px solid var(--danger); color: var(--danger); text-align: center; transform: rotate(-5deg); font: 700 16px var(--mono); }
  .claim-content h3 { font-size: 21px; } .claim-content p, .readme-content { line-height: 1.55; } .claim-content dl { display: grid; gap: 4px; } .claim-content dl div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--chrome-dark); }
  .claim-actions { display: grid; gap: 6px; }
  .ledger-head, .ledger-list li { display: grid; grid-template-columns: 100px 1fr 150px; gap: 10px; } .ledger-head { padding: 8px 10px; background: var(--board-deep); color: white; font: 600 10px var(--mono); }
  .ledger-list { flex: 1; overflow: auto; list-style: none; padding: 0; } .ledger-list li { padding: 9px 10px; border-bottom: 1px dotted var(--chrome-dark); font-size: 12px; } .ledger-list time, .ledger-list li span:last-child { font-family: var(--mono); }
  .settings-form fieldset { margin-bottom: 14px; padding: 12px; } .settings-form label { display: block; padding: 5px; } .settings-form p, .legal-copy { margin-top: 8px; color: var(--ink-soft); font-size: 12px; }
  .readme-content h3 { margin-block: 12px 5px; font-size: 19px; } .readme-content ol { padding-left: 24px; }
  .start-menu { position: absolute; z-index: 9000; left: 0; bottom: 37px; width: 330px; max-height: 76%; display: grid; grid-template-columns: 44px 1fr; background: var(--chrome); border: 2px solid; border-color: white var(--chrome-dark) var(--chrome-dark) white; box-shadow: 7px -7px 18px oklch(10% .02 270 / .35); }
  .start-brand { display: flex; align-items: end; justify-content: center; padding-bottom: 10px; color: white; background: var(--magenta-deep); font: 700 24px/.85 var(--display); }
  .start-links { padding: 5px; } .start-links button { width: 100%; min-height: 46px; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; border: 0; background: transparent; text-align: left; } .start-links button:hover { background: var(--blue); color: white; } .start-links strong, .start-links small { display: block; } .start-links small { font-size: 10px; }
  .taskbar { position: absolute; z-index: 8000; inset: auto 0 0; height: 37px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px; padding: 3px; background: var(--chrome); border-top: 2px solid white; }
  .mobile-nav { display: none; }
  .run-button, .task-button, .network-status, .system-clock { min-width: 0; border: 2px solid; border-color: white var(--chrome-dark) var(--chrome-dark) white; background: var(--chrome); font: 600 10px var(--mono); }
  .run-button { min-width: 68px; } .task-buttons { min-width: 0; display: flex; gap: 4px; overflow: hidden; } .task-button { min-width: 110px; padding-inline: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .task-button.is-active { background: var(--magenta); color: white; }
  .network-status { padding-inline: 10px; display: flex; gap: 7px; align-items: center; } .system-clock { display: grid; place-items: center; min-width: 78px; padding-inline: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .toast { position: absolute; z-index: 10000; right: 2%; bottom: 48px; max-width: 360px; padding: 11px 14px; border: 2px solid white; background: var(--board-deep); color: white; box-shadow: 4px 6px 14px oklch(10% .02 270 / .4); font-size: 12px; }
  dialog { margin: auto; padding: 0; width: min(460px, calc(100% - 28px)); border: 0; background: transparent; } dialog::backdrop { background: oklch(10% .02 270 / .68); }
  .dialog-window { background: var(--chrome); border: 2px solid; border-color: white var(--chrome-dark) var(--chrome-dark) white; } .dialog-body { padding: 18px; display: grid; gap: 14px; line-height: 1.5; } .wallet-card { padding: 12px; display: grid; gap: 4px; background: var(--chrome-light); border: 2px inset var(--chrome-dark); } .wallet-card strong { font-family: var(--mono); }
  .wallet-card strong { min-width: 0; overflow-wrap: anywhere; }
  .wallet-card span:not(:first-child) { margin-block-start: 7px; }
  .wallet-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-actions > button:only-child { grid-column: 1 / -1; }
  .wallet-error, .claim-feedback { margin: 0; padding: 9px 10px; border: 1px solid var(--danger); background: oklch(92% .05 25); color: oklch(34% .15 25); font: 600 11px/1.4 var(--mono); overflow-wrap: anywhere; }
  .claim-feedback.is-success { border-color: var(--ok); background: oklch(92% .06 145); color: oklch(31% .09 145); }
  .claim-feedback a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
  .wallet-button[data-status="connected"] .status-light,
  .network-status[data-status="connected"] .status-light { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
  .wallet-button[data-status="wrong-network"] .status-light,
  .network-status[data-status="wrong-network"] .status-light,
  .wallet-button[data-status="error"] .status-light,
  .network-status[data-status="error"] .status-light { background: var(--danger); box-shadow: none; }
  .wallet-button[data-status="connecting"] .status-light,
  .wallet-button[data-status="switching"] .status-light,
  .network-status[data-status="connecting"] .status-light,
  .network-status[data-status="switching"] .status-light { background: var(--yellow); box-shadow: none; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .craft-dialog-body { max-block-size: min(620px, calc(100dvh - 80px)); overflow: auto; }
  .craft-options { min-inline-size: 0; padding: 8px; border: 1px solid var(--chrome-dark); }
  .craft-options legend { padding-inline: 5px; font: 600 10px var(--mono); }
  #craft-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .craft-option { min-inline-size: 0; min-block-size: 46px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--chrome-dark); background: var(--chrome-light); cursor: pointer; }
  .craft-option:has(input:checked) { color: white; background: var(--board-deep); box-shadow: inset 3px 0 0 var(--yellow); }
  .craft-option input { inline-size: 18px; block-size: 18px; accent-color: var(--magenta); }
  .craft-ticket { min-inline-size: 0; display: grid; }
  .craft-ticket strong { font: 700 12px var(--mono); }
  .craft-ticket small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
  .craft-output { padding: 10px 12px; display: grid; gap: 2px; color: white; background: var(--board-deep); border: 1px solid var(--ink); }
  .craft-output span, .craft-output small { font: 600 9px var(--mono); }
  .craft-output strong { color: var(--yellow); font: 700 13px var(--mono); }
}

@layer apps {
  .docs-layout { flex: 1; min-block-size: 0; display: grid; grid-template-columns: 145px minmax(0, 1fr); background: var(--chrome-light); }
  .docs-nav { padding: 12px 8px; display: grid; align-content: start; gap: 3px; border-inline-end: 1px solid var(--chrome-dark); background: var(--chrome); }
  .docs-nav a { min-block-size: 34px; padding: 8px; color: var(--ink); font: 600 10px var(--mono); text-decoration: none; }
  .docs-nav a[aria-current="location"] { color: white; background: var(--blue); }
  .docs-nav a:focus-visible:not([aria-current="location"]) { color: var(--ink); background: var(--yellow); }
  @media (hover: hover) { .docs-nav a:hover:not([aria-current="location"]) { color: var(--ink); background: var(--chrome-mid); } }
  .docs-nav a[aria-current="location"]::before { content: "> "; color: var(--yellow); }
  .readme-content { scroll-behavior: auto; scrollbar-gutter: stable; overscroll-behavior: contain; font-size: 14px; }
  .readme-content section { padding-block: 12px 20px; border-block-end: 1px dotted var(--chrome-dark); scroll-margin-block-start: 12px; }
  .readme-content section:last-child { border-block-end: 0; }
  .readme-content::after { content: ""; display: block; block-size: 50dvh; }
  .readme-content p, .readme-content li, .docs-table { max-inline-size: 70ch; text-wrap: pretty; }
  .docs-hero { margin: -18px -18px 12px; padding: 22px 24px 24px; color: white; background: var(--board-deep); }
  .docs-status { display: flex; flex-wrap: wrap; gap: 5px; }
  .docs-status span { padding: 3px 6px; border: 1px solid oklch(78% .02 250); color: var(--yellow); background: oklch(22% .04 255); font: 600 8px var(--mono); letter-spacing: .06em; }
  .docs-hero h3 { max-inline-size: 25ch; margin-block: 12px 7px; font-size: clamp(25px, 3vw, 36px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
  .docs-hero p { color: oklch(89% 0.015 250); font-size: 13px; }
  .docs-table { display: grid; }
  .docs-table div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; padding-block: 8px; border-block-end: 1px dotted var(--chrome-dark); }
  .docs-table dt { font: 600 11px var(--mono); }
  .docs-table dd { margin: 0; }
  .docs-steps { display: grid; gap: 6px; padding-inline-start: 24px; }
  .docs-steps li::marker { color: var(--magenta); font: 600 12px var(--mono); }
  .docs-callout { margin-block-start: 12px; padding: 10px 12px; border: 1px solid var(--chrome-dark); background: color-mix(in oklch, var(--yellow) 28%, var(--paper)); }
  .doc-state { display: inline-block; min-inline-size: 52px; margin-inline-end: 5px; padding: 2px 4px; color: white; background: var(--blue); text-align: center; font: 600 7px/1.2 var(--mono); letter-spacing: .04em; vertical-align: 1px; }
  .doc-state.is-plan { background: var(--magenta-deep); }
  .doc-state.is-tbd { color: var(--ink); background: var(--chrome-mid); border: 1px solid var(--chrome-dark); }
  .readme-content code { padding: 1px 4px; color: var(--yellow); background: var(--board-deep); font: 600 .86em var(--mono); }
  .docs-limits { display: grid; gap: 7px; padding-inline-start: 22px; }
}

@layer responsive {
  @media (max-width: 900px), (max-height: 680px) {
    .game-shell { grid-template-columns: minmax(0, 1.65fr) minmax(190px, .8fr); padding: 7px; gap: 6px; }
    .collection-heading { padding: 8px 10px; } .collection-heading h2 { font-size: 16px; } .sector-chip { padding: 6px 9px; } .pool-note, .settlement-state { padding: 7px 9px; }
    .game-footer { grid-template-columns: 90px minmax(0, 1fr); }
  }
  @media (max-width: 860px) {
    html, body { min-width: 0; overflow-x: hidden; overflow-y: auto; background: var(--desktop); }
    .room { display: block; min-height: 100dvh; padding: 0; overflow: visible; } .desk-shadow { display: none; }
    .monitor { width: 100%; min-width: 0; min-height: 100dvh; aspect-ratio: auto; background: none; filter: none; }
    .screen-frame { position: relative; inset: auto; width: 100%; min-height: 100dvh; overflow: visible; border-radius: 0; box-shadow: none; }
    .desktop { min-height: 100dvh; height: auto; padding-bottom: 48px; overflow: visible; } .desktop::before { opacity: .07; position: fixed; }
    .wallpaper-mark, .desktop-icons, .window-status { display: none !important; }
    .window { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-width: 0; box-shadow: none; }
    .window:not(.window-play) { position: fixed; z-index: 8500 !important; inset: 0 0 46px !important; overflow: auto; }
    .window-play { inline-size: 100%; max-inline-size: 100vw; border: 0; background: var(--chrome); } .window-play > .titlebar { position: sticky; top: 0; z-index: 20; }
    .window-actions [data-minimize="play"], .window-actions [data-close="play"] { display: none; }
    .menubar { inline-size: 100%; min-inline-size: 0; max-inline-size: 100vw; height: auto; flex-basis: auto; flex-wrap: wrap; overflow: clip; padding-block: 4px; }
    .menu-links { width: 100%; justify-content: stretch; }
    .menu-links button[data-open="sectors"], .menu-links button[data-open="ledger"] { display: none; }
    .menubar .menu-links button { min-width: max-content; min-height: 40px; padding-inline: 7px; }
    .menubar .menu-links button { flex: 1; }
    .game-shell { inline-size: 100%; min-inline-size: 0; max-inline-size: 100vw; display: flex; flex-direction: column; min-height: auto; padding: 8px; gap: 8px; overflow: clip; }
    .game-status { display: grid; grid-template-columns: 1fr 1fr; } .round-phase { grid-column: 1 / -1; flex-wrap: wrap; } .round-phase strong { flex-basis: 100%; white-space: normal; }
    .wallet-button { min-width: 0; overflow: hidden; } .wallet-button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mode-row { width: 100%; min-width: 0; margin-inline-start: 0; overflow: clip; } .token-lock, .season-tag { flex: 1 1 0; min-width: 0; min-block-size: 42px; justify-content: center; text-align: center; }
    .season-tag { padding-inline: 4px; white-space: normal; font-size: 7px; }
    .game-shell.is-scouting .collection-panel { order: 2; }
    .board-wrap { order: 3; inline-size: min(100%, 620px); max-inline-size: calc(100vw - 16px); align-self: center; padding: 6px; overflow: clip; } .game-board, .game-board.mode-3 { inline-size: 100%; min-inline-size: 0; block-size: auto; aspect-ratio: 1; } .game-board { gap: 4px; }
    .tile { min-height: 0; aspect-ratio: 1; padding: 2px; }
    .stock-face { inset: 2px; grid-template-rows: minmax(0, 1fr) 14px; padding: 13px 2px 2px; border-top-width: 2px; }
    .stock-sector { inset-block-start: 2px; inset-inline-start: 2px; padding: 1px 3px; font-size: clamp(7px, 1.8vw, 9px); }
    .stock-logo { width: 80%; height: 88%; padding: 0; }
    .stock-logo.is-wide { width: 96%; height: 94%; }
    .stock-logo.is-light { width: 76%; height: 76%; padding: 3px; }
    .stock-logo.is-light.is-wide { width: 88%; }
    .stock-ticker { font-size: clamp(8px, 2.5vw, 10px); }
    .mobile-board-progress { order: 4; min-height: 35px; display: grid; grid-template-columns: auto auto 1fr; gap: 7px; align-items: center; padding: 5px 8px; color: white; background: var(--board-deep); border: 1px solid var(--chrome-dark); }
    .mobile-board-progress span { padding: 2px 5px; color: var(--ink); background: color-mix(in oklch, var(--sector-color) 24%, var(--paper)); font: 600 8px var(--mono); }
    .mobile-board-progress strong { color: var(--yellow); font: 700 14px var(--mono); }
    .mobile-board-progress small { justify-self: end; font: 600 8px var(--mono); letter-spacing: .05em; }
    .game-footer { order: 5; display: grid; grid-template-columns: 92px 1fr; } .flip-credit, .primary-action, .settlement-button { min-height: 48px; }
    .craft-button { grid-column: 1 / -1; min-block-size: 44px; }
    .result-message { grid-column: 1 / -1; min-height: 54px; } .result-message p { white-space: normal; } .settlement-button { grid-column: 1 / -1; }
    .collection-panel { order: 6; max-height: none; overflow: visible; } .collection-heading h2 { font-size: 20px; } .sector-progress { overflow: visible; } .sector-chip summary { min-height: 50px; } .pool-note { margin-top: 0; }
    .collection-panel .pool-note { display: grid; }
    .taskbar { position: fixed; height: 52px; display: block; padding: 3px; } .taskbar > :not(.mobile-nav) { display: none; }
    .mobile-nav { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
    .mobile-nav button { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid; border-color: white var(--chrome-dark) var(--chrome-dark) white; background: var(--chrome); font: 600 10px var(--mono); }
    .mobile-nav button:active { border-color: var(--chrome-dark) white white var(--chrome-dark); }
    .mobile-nav button.is-current { color: white; background: var(--magenta-deep); }
    .mobile-nav svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
    .start-menu { position: fixed; bottom: 46px; width: min(340px, 92vw); max-height: calc(100dvh - 62px); overflow: auto; }
    .sector-directory { grid-template-columns: 1fr; } .ledger-head, .ledger-list li { grid-template-columns: 70px 1fr; } .ledger-head span:last-child, .ledger-list li span:last-child { display: none; }
    .window:not(.window-play).readme-window { overflow: hidden; }
    .readme-window .titlebar { flex-basis: 44px; }
    .readme-window .window-actions button { inline-size: 40px; min-block-size: 38px; }
    .docs-layout { min-block-size: 0; display: flex; flex-direction: column; }
    .docs-nav { flex: 0 0 auto; display: flex; gap: 3px; padding: 4px; overflow-x: auto; overscroll-behavior-inline: contain; border-inline-end: 0; border-block-end: 1px solid var(--chrome-dark); scrollbar-width: thin; }
    .docs-nav a { flex: 0 0 auto; min-inline-size: 104px; min-block-size: 44px; display: grid; place-items: center; padding: 5px 8px; text-align: center; font-size: 9px; }
    .readme-content { min-block-size: 0; padding: 18px 18px 76px; font-size: 16px; line-height: 1.55; }
    .readme-content h3 { font-size: 22px; }
    .docs-hero { margin-inline: -18px; padding-inline: 20px; }
    .docs-hero h3 { font-size: clamp(28px, 9vw, 38px); }
    .docs-hero p { font-size: 15px; }
    .docs-table div { grid-template-columns: 1fr; gap: 4px; padding-block: 11px; }
    .docs-table dt { font-size: 12px; }
    .allocation-meter { grid-template-columns: 1fr; }
    .allocation-meter span { min-block-size: 44px; border-inline-end: 0; border-block-end: 1px solid var(--ink); }
    .allocation-meter span:last-child { border-block-end: 0; }
    dialog { width: min(100% - 16px, 460px); }
    .dialog-body { padding: 12px; }
    .dialog-actions { grid-template-columns: 1fr; }
    .toast { position: fixed; left: 10px; right: 10px; bottom: 56px; max-width: none; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
  @media (prefers-contrast: more) { :focus-visible { outline-width: 4px; } .doc-state, .docs-status span { border: 2px solid currentColor; } }
  @media (forced-colors: active) { .desktop::before { display: none; } .tile.is-complete { outline: 3px solid Highlight; } .status-light { forced-color-adjust: none; } }
}

/* The CRT establishes the world; the game owns the screen. */
@layer release-polish {
  .bevel-button,
  .desktop-icon,
  .faction-button,
  .tile,
  .window-actions button,
  .menubar button,
  .mobile-nav button {
    transition-property: transform, filter, color, background-color, box-shadow;
    transition-duration: 120ms;
    transition-timing-function: ease-out;
  }

  .bevel-button:not(:disabled):active,
  .desktop-icon:not(:disabled):active,
  .faction-button:not(:disabled):active,
  .tile:not(:disabled):active,
  .window-actions button:not(:disabled):active,
  .menubar button:not(:disabled):active,
  .mobile-nav button:not(:disabled):active { transform: scale(.96); }

  .primary-action:disabled {
    color: var(--ink-soft);
    background: var(--chrome-mid);
    border-color: white var(--chrome-dark) var(--chrome-dark) white;
    filter: saturate(.25);
  }

  @media (min-width: 861px) {
    .room { padding: 0; }
    .monitor { width: min(112vw, calc(106dvh * 1.599)); }
    .screen-frame { inset-block: 8.55% 14.65%; inset-inline: 16.85% 16.65%; }

    .desktop-icons {
      inset: 3% auto 9% 1%;
      width: 7.5%;
      gap: clamp(5px, .9vh, 10px);
    }
    .desktop-icon { min-block-size: 54px; padding: 2px; font-size: clamp(7px, .58vw, 9px); }
    .pixel-icon { width: clamp(30px, 2.35vw, 39px); }

    .window-play { left: 8.5%; top: 1%; width: 90.5%; height: 94.5%; }
    .window-play > .titlebar { flex-basis: 32px; padding-inline-start: 10px; font-size: 14px; }
    .window-play > .menubar { flex-basis: 42px; padding-inline: 9px; }
    .menubar .menu-links button { min-height: 36px; padding-inline: 11px; }

    .game-shell {
      padding: 9px;
      gap: 8px;
      grid-template-columns: minmax(0, 1fr) minmax(286px, 31%);
      grid-template-rows: 40px minmax(0, 1fr) auto;
    }
    .game-status { grid-template-columns: minmax(0, 1fr) 166px; gap: 7px; }
    .game-status .wallet-button { display: none; }
    .round-phase,
    .counter { min-height: 40px; padding-inline: 10px; }
    .round-phase strong { font-size: 15px; }

    .board-wrap {
      padding: 10px;
      border-color: oklch(10% .025 255) oklch(48% .04 245) oklch(48% .04 245) oklch(10% .025 255);
      background-color: var(--board-deep);
      background-image: radial-gradient(oklch(54% .06 250 / .18) .55px, transparent .7px);
      background-size: 6px 6px;
    }
    .game-board { inline-size: min(100%, 600px); max-inline-size: 600px; gap: clamp(5px, .42vw, 7px); }
    .board-wrap .game-board { inline-size: min(100cqi, 100cqb, 600px); block-size: min(100cqi, 100cqb, 600px); }

    .tile {
      padding: 0;
      border: 0;
      box-shadow: 0 0 0 1px oklch(8% .02 250 / .65), 0 3px 8px oklch(7% .02 250 / .28);
    }
    .tile:not(.is-revealed) {
      color: oklch(81% .018 93);
      background: linear-gradient(180deg, oklch(32% .025 249), oklch(25% .024 252));
      box-shadow: 0 0 0 1px oklch(58% .025 245 / .32), inset 0 1px 0 oklch(93% .012 95 / .13);
    }
    .tile:not(.is-revealed)::before { inset: 0; color: oklch(84% .015 95); font-size: 10px; }
    .tile:not(.is-revealed)::after { inset-inline-end: 6px; inset-block-end: 5px; color: oklch(74% .015 95); }
    .tile.is-revealed {
      background: var(--paper);
      box-shadow: 0 0 0 1px oklch(18% .02 270 / .6), 0 4px 10px oklch(6% .02 250 / .32), inset 0 0 0 1px oklch(100% 0 0 / .65);
    }
    .tile.is-revealed:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--sector-color), 0 7px 14px oklch(6% .02 250 / .38); }
    .tile.is-revealed.is-target { box-shadow: 0 0 0 2px var(--sector-color), 0 5px 12px oklch(6% .02 250 / .35); }

    .stock-face {
      inset: 0;
      grid-template-rows: minmax(0, 1fr) 23px;
      gap: 0;
      padding: 20px 7px 5px;
      border-top: 4px solid var(--sector-color);
    }
    .stock-sector {
      inset-block-start: 5px;
      inset-inline-start: 6px;
      max-width: calc(100% - 12px);
      padding: 1px 4px;
      color: color-mix(in oklch, var(--sector-color) 70%, var(--ink));
      background: transparent;
      font-size: 7px;
      letter-spacing: .08em;
    }
    .stock-logo,
    .stock-logo.is-wide {
      width: 72%;
      height: 66%;
      padding: 0;
      overflow: visible;
    }
    .stock-logo.is-wide { width: 91%; height: 58%; }
    .stock-logo.is-light { width: 66%; height: 66%; padding: 5px; }
    .stock-logo.is-light.is-wide { width: 82%; height: 58%; }
    .stock-logo img { outline: 0; }
    .stock-ticker {
      align-self: stretch;
      display: grid;
      place-items: center;
      color: var(--ink);
      font-size: clamp(11px, .86vw, 14px);
      letter-spacing: .06em;
    }
    .stock-face[data-ticker="ON"] .stock-logo { width: 94%; }
    .stock-face[data-ticker="SPCX"] .stock-logo { width: 88%; height: 64%; }
    .stock-face[data-ticker="AEHR"] .stock-logo,
    .stock-face[data-ticker="TEAM"] .stock-logo { width: 94%; height: 50%; }

    .collection-panel { box-shadow: 0 0 0 1px oklch(0 0 0 / .08); }
    .collection-heading { padding: 12px 14px 11px; }
    .collection-heading h2 { font-size: 20px; }
    .collection-heading p { max-inline-size: 34ch; font-size: 12px; line-height: 1.35; }
    .collection-panel.is-scouting .faction-picker {
      flex: 1;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, minmax(48px, 1fr));
      gap: 7px;
      padding: 8px;
    }
    .collection-panel.is-scouting .faction-button:last-child:nth-child(odd) { grid-column: auto; }
    .collection-panel.is-scouting .faction-button {
      min-block-size: 48px;
      grid-template-columns: 7px minmax(0, 1fr) auto;
      padding-inline: 9px 13px;
      background: color-mix(in oklch, var(--sector-color) 7%, var(--chrome-light));
    }
    .collection-panel.is-scouting .faction-button:hover,
    .collection-panel.is-scouting .faction-button:focus-visible {
      background: color-mix(in oklch, var(--sector-color) 20%, var(--paper));
      box-shadow: inset 0 0 0 2px var(--sector-color);
    }
    .collection-panel.is-scouting .faction-button span { font-size: 11px; }
    .collection-panel.is-scouting .faction-button strong { font-size: 14px; }
    .sector-chip summary { min-height: 45px; padding-inline: 11px; }
    .sector-chip summary span { font-size: 11px; }
    .sector-dots b { height: 6px; }

    .game-footer { gap: 6px 8px; }
    .game-footer .bevel-button { min-height: 46px; }
    .flip-credit { min-height: 46px; }
    .result-message { min-height: 38px; }
  }
}

@layer card-polish {
  /* One stable receipt-card skeleton for every original stock logo. */
  .tile {
    isolation: isolate;
  }

  .tile.is-revealed {
    cursor: pointer;
    background-color: var(--paper);
    background-image:
      repeating-linear-gradient(
        0deg,
        oklch(42% .025 92 / .035) 0,
        oklch(42% .025 92 / .035) 1px,
        transparent 1px,
        transparent 4px
      );
    box-shadow:
      0 0 0 1px oklch(18% .02 270 / .72),
      0 3px 8px oklch(6% .02 250 / .3),
      inset 0 0 0 1px oklch(100% 0 0 / .58);
  }

  .tile.is-revealed:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 2px var(--sector-color),
      0 6px 12px oklch(6% .02 250 / .36),
      inset 0 0 0 1px oklch(100% 0 0 / .64);
  }

  .tile.is-revealed.is-target {
    box-shadow:
      0 0 0 2px var(--sector-color),
      0 4px 9px oklch(6% .02 250 / .34),
      inset 0 0 0 1px oklch(100% 0 0 / .64);
  }

  .tile.is-complete,
  .tile.is-complete:hover {
    background-color: color-mix(in oklch, var(--sector-color) 7%, var(--paper));
    box-shadow:
      0 0 0 2px var(--yellow),
      0 0 0 4px var(--sector-color),
      0 5px 11px oklch(6% .02 250 / .38);
  }

  .tile.is-complete::after {
    inset-block-start: auto;
    inset-block-end: 5px;
    inset-inline-end: 5px;
    inline-size: 18px;
    border-color: oklch(20% .02 270);
    box-shadow: 0 1px 0 oklch(100% 0 0 / .65);
  }

  .stock-face {
    inset: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 20px minmax(0, 1fr);
    gap: 0;
    padding: 0 7px 6px;
    border-block-start: 3px solid var(--sector-color);
  }

  .stock-sector {
    position: static;
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    align-self: center;
    max-inline-size: 100%;
    padding: 1px 4px;
    overflow: hidden;
    color: color-mix(in oklch, var(--sector-color) 72%, var(--ink));
    background: color-mix(in oklch, var(--sector-color) 12%, var(--paper));
    font: 600 8px/1.2 var(--mono);
    letter-spacing: .065em;
    white-space: nowrap;
  }

  .stock-logo,
  .stock-logo.is-wide,
  .stock-logo.is-light,
  .stock-logo.is-light.is-wide {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: center;
    inline-size: 72%;
    block-size: 78%;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
  }

  .stock-logo.is-wide {
    inline-size: 94%;
    block-size: 78%;
  }

  .stock-logo.is-light {
    inline-size: 70%;
    block-size: 80%;
    padding: 4px;
    overflow: clip;
    background: var(--board-deep);
    box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .12);
  }

  .stock-logo.is-light.is-wide {
    inline-size: 88%;
    block-size: 78%;
  }

  .stock-logo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: contrast(1.04) saturate(.96);
    transform: scale(var(--logo-scale));
    transform-origin: center;
  }

  .stock-logo.is-light img {
    mix-blend-mode: normal;
    filter: none;
  }

  .stock-ticker {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: end;
    inline-size: auto;
    padding-inline-start: 5px;
    border: 0;
    color: var(--ink);
    font: 700 clamp(9px, .68vw, 11px)/1 var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: .055em;
  }

  .stock-face[data-ticker="AEHR"] .stock-logo,
  .stock-face[data-ticker="TEAM"] .stock-logo,
  .stock-face[data-ticker="MTSI"] .stock-logo,
  .stock-face[data-ticker="MXL"] .stock-logo,
  .stock-face[data-ticker="P"] .stock-logo,
  .stock-face[data-ticker="DELL"] .stock-logo,
  .stock-face[data-ticker="CIEN"] .stock-logo {
    inline-size: 94%;
    block-size: 82%;
  }

  .stock-face[data-ticker="SPCX"] .stock-logo,
  .stock-face[data-ticker="ON"] .stock-logo {
    inline-size: 94%;
    block-size: 82%;
  }

  .stock-face[data-ticker="PNR"] .stock-logo,
  .stock-face[data-ticker="SATS"] .stock-logo,
  .stock-face[data-ticker="CRWD"] .stock-logo,
  .stock-face[data-ticker="WDAY"] .stock-logo {
    inline-size: 75%;
    block-size: 82%;
  }

  /* Spent receipts must recede so the live stock set remains the result. */
  .tile.is-revealed.is-burned,
  .tile.is-revealed.is-burned:hover {
    opacity: .74;
    cursor: not-allowed;
    transform: none;
    color: oklch(72% .035 80);
    background-color: oklch(28% .022 55);
    background-image:
      repeating-linear-gradient(
        -45deg,
        oklch(64% .035 68 / .055) 0,
        oklch(64% .035 68 / .055) 3px,
        transparent 3px,
        transparent 8px
      );
    box-shadow:
      0 0 0 1px oklch(12% .02 55 / .8),
      inset 0 1px 0 oklch(92% .02 88 / .08);
  }

  .burned-face {
    inset: 9px;
    gap: 4px;
    border-color: oklch(66% .055 68 / .62);
    transform: none;
  }

  .burned-face strong {
    font-size: clamp(8px, .7vw, 11px);
    letter-spacing: .08em;
  }

  .burned-face small {
    color: oklch(70% .035 76 / .72);
    font-size: 6px;
    letter-spacing: .06em;
  }

  @media (max-width: 860px) {
    .stock-face {
      grid-template-rows: 15px minmax(0, 1fr);
      padding: 0 3px 3px;
      border-block-start-width: 2px;
    }

    .stock-sector {
      max-inline-size: 100%;
      padding-inline: 2px;
      font-size: clamp(6px, 1.65vw, 8px);
      letter-spacing: .035em;
    }

    .stock-logo,
    .stock-logo.is-wide,
    .stock-logo.is-light,
    .stock-logo.is-light.is-wide {
      inline-size: 74%;
      block-size: 80%;
    }

    .stock-logo.is-wide { inline-size: 94%; block-size: 78%; }
    .stock-logo.is-light { inline-size: 70%; block-size: 80%; padding: 3px; }
    .stock-logo.is-light.is-wide { inline-size: 88%; block-size: 78%; }

    .stock-ticker {
      padding-inline-start: 2px;
      font-size: clamp(7px, 2vw, 9px);
      letter-spacing: .025em;
    }

    .tile.is-complete::after {
      inset-block-start: auto;
      inset-block-end: 2px;
      inset-inline-end: 2px;
      inline-size: 14px;
      font-size: 8px;
    }

    .burned-face { inset: 5px; }
    .burned-face small { display: none; }
  }
}