/* Legacy layout and paint share one cascade layer. Theme recipes own opt-in appearance. */
@layer legacy {
  :root {
    color-scheme: dark;
    --paper: #080c15;
    --ink: #e3edf5;
    --muted: #94a5ba;
    --line: #263447;
    --accent: #65e6da;
    --safe: #65e6da;
    --danger: #ff749c;
  }
  body {
    background: #080c15;
    font-family: var(--fk-font-mono, monospace);
  }
  body.game-shell {
    --paper: #080c15;
    --ink: #e3edf5;
    --muted: #94a5ba;
    --line: #263447;
    --accent: #65e6da;
    --safe: #65e6da;
    --danger: #ff749c;
  }
  button,
  input,
  select,
  textarea {
    color: var(--ink);
  }
  select,
  input,
  textarea {
    background: #101927;
    border-color: #38495f;
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible {
    outline-color: #65e6da;
  }
  .button,
  .icon-button,
  .text-button {
    border-radius: 2px;
  }
  .button.primary {
    background: #65e6da;
    color: #061a21;
    border-color: #65e6da;
  }
  .button.secondary,
  .icon-button {
    color: #e3edf5;
    background: #132132;
    border-color: #344960;
  }
  .text-button {
    color: #b7d3e8;
  }
  dialog {
    background: #0d1522;
    color: #e3edf5;
    border: 1px solid #425e78;
    border-radius: 2px;
    box-shadow: 0 20px 100px #000c;
    max-height: calc(var(--dialog-viewport-height, 100dvh) - 24px);
  }
  dialog::backdrop {
    background: #030710e8;
  }
  .game-shell .dialog-close {
    min-width: 44px;
    min-height: 44px;
  }
  dialog h2,
  dialog h3,
  .eyebrow {
    color: inherit;
  }
  dialog input,
  dialog select,
  dialog textarea {
    background: #101927;
    color: #e3edf5;
  }
  .game-shell .masthead,
  .game-shell .page-footer,
  .game-shell .edition,
  .game-shell .minor-controls {
    display: none;
  }
  .shell-bar {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 20px;
    border-bottom: 1px solid #263447;
  }
  .shell-bar button {
    min-height: 40px;
    padding: 6px 12px;
    color: #bfd2e2;
    background: transparent;
    border: 1px solid transparent;
    font-size: 12px;
  }
  .shell-bar button:hover {
    border-color: #65e6da;
    color: #fff;
  }
  #shell-menu {
    color: #65e6da;
    font-weight: 800;
    letter-spacing: 2px;
  }
  .shell-edition {
    flex: 1;
    color: #6a849e;
    font-size: 10px;
    letter-spacing: 2px;
  }
  .game-shell main {
    max-width: none;
    margin: 0;
    padding: 12px 18px 0;
  }
  .game-shell .game-layout {
    display: block;
  }
  .game-shell .arena-panel {
    max-width: min(
      100%,
      calc((100dvh - 225px - var(--safe-top) - var(--safe-bottom)) * var(--board-aspect, 1.333333))
    );
  }
  .game-shell .telemetry {
    height: 54px;
    gap: 12px;
  }
  .game-shell .telemetry strong {
    font-size: 19px;
  }
  .game-shell .telemetry #lives {
    color: #ff80b2;
  }
  .game-shell .arena-shell {
    border: 1px solid #41546a;
    background: #000;
    box-shadow: 0 0 35px #53cccd0b;
    border-radius: 0;
  }
  .game-shell .game-overlay {
    background: #040910bd;
  }
  .game-shell .overlay-card {
    background: #0c1423f5;
    color: #e3edf5;
    border: 1px solid #38536b;
    border-radius: 2px;
  }
  .game-shell .overlay-card h1 {
    color: #f1f8ff;
  }
  .game-shell .reading-toolbar,
  .game-shell .overlay-message {
    background: transparent;
    color: inherit;
  }
  .game-shell .flight-status {
    color: #b1c6d8;
    border-color: #273c51;
  }
  .game-shell .controls-row {
    margin-top: 8px;
  }
  .game-shell .run-message {
    color: #94aec4;
    min-height: 20px;
    margin: 5px 0;
    font-size: 11px;
  }
  .game-shell .dpad button {
    background: #152237;
    color: #c7dce9;
    border-color: #3e5570;
    border-radius: 2px;
  }
  .game-shell .dpad button.pressed {
    color: #041921;
    background: #65e6da;
  }
  .game-shell #stop-button {
    visibility: hidden;
  }
  .game-shell .direction-controls button {
    background: #152237;
    color: #c7dce9;
    border-color: #3e5570;
    border-radius: 2px;
  }
  .game-shell .direction-controls button.pressed {
    color: #041921;
    background: #65e6da;
  }
  .game-shell .play-controls {
    margin-top: 8px;
  }
  .game-shell .play-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .game-shell .play-controls .direction-controls {
    display: flex;
    gap: 4px;
  }
  .game-shell .play-controls .direction-controls button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    background: #152237;
    color: #c7dce9;
    border-color: #3e5570;
  }
  .game-shell .play-controls .direction-controls button.pressed {
    color: #041921;
    background: #65e6da;
  }
  .game-shell .play-controls .ability-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .game-shell .play-controls .ability-buttons .button {
    padding: 8px 10px;
    min-height: 44px;
  }
  .game-shell #ability-state {
    display: none;
  }
  .game-shell .play-controls .utility-buttons {
    display: flex;
    flex-direction: row;
    gap: 4px;
  }
  .game-shell .flight-deck {
    padding: 0;
    border: 0;
    width: auto;
    background: transparent;
  }
  .game-shell .deck-footer {
    display: none;
  }
  .game-shell .mission,
  .game-shell .mission-card,
  .game-shell .gallery-card {
    background: #142033;
    color: #d3e5f3;
    border-color: #304962;
  }
  .game-shell .field,
  .game-shell .micro-note,
  .game-shell .class-description {
    color: #b5c8d9;
  }
  .game-shell .field select {
    color: #e3edf5;
    background: #101c2d;
  }
  .game-shell .warning {
    background: #352333;
    color: #ffc4d6;
    border-color: #90607a;
  }
  .game-shell .shell-home {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: clamp(24px, 6vw, 100px);
    overflow: auto;
    background: #070d18;
  }
  .shell-home[open] {
    display: grid;
    grid-template-columns: minmax(260px, 580px) 1fr;
    align-items: center;
  }
  .home-content {
    position: relative;
    z-index: 1;
  }
  .title-character {
    display: block;
    width: clamp(72px, 10vh, 112px);
    height: auto;
    aspect-ratio: 1;
    margin: 0 0 4px;
    pointer-events: none;
  }
  .title-character[hidden] {
    display: none;
  }
  @media (max-height: 560px) {
    .title-character {
      display: none;
    }
  }
  .home-content .eyebrow {
    color: #7fabbc;
    letter-spacing: 3px;
    font-size: 10px;
  }
  .home-family-context {
    margin: 0 0 1rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  #shell-title {
    margin: 20px 0;
    color: #f0f9ff;
    font: 900 clamp(44px, 7vw, 94px) / 0.93 var(--fk-font-mono, monospace);
    letter-spacing: -5px;
  }
  #shell-title span {
    display: block;
    color: #65e6da;
  }
  .home-copy {
    color: #98b0c7;
    font-size: 14px;
    line-height: 1.8;
  }
  .home-actions {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 460px;
  }
  .home-actions .button {
    text-align: left;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 12px;
    text-decoration: none;
  }
  #shell-play,
  #shell-featured {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
  }
  .home-hint {
    color: #849db6;
    font-size: 10px;
    margin-top: 22px;
  }
  .shell-tools {
    color: #8298ae;
    font-size: 11px;
    margin-top: 22px;
  }
  .shell-tools nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
  }
  .home-art {
    position: absolute;
    inset: 0 0 0 40%;
    overflow: hidden;
    background: radial-gradient(ellipse at 60% 40%, #1a3943 0, #0a1b2b 36%, #070d18 70%);
  }
  .home-art::before {
    content: '';
    position: absolute;
    inset: 12%;
    transform: rotate(-12deg);
    background-image:
      linear-gradient(#466b7b18 1px, transparent 1px),
      linear-gradient(90deg, #466b7b18 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse, #000, transparent 75%);
  }
  .home-flight-path {
    position: absolute;
    width: 35%;
    height: 31%;
    right: 22%;
    top: 28%;
    border: 3px solid #65e6da;
    border-left-color: #224453;
    box-shadow:
      14px 14px 0 #122c3c,
      40px 60px 0 -2px #123447;
    transform: rotate(-12deg);
  }
  .home-craft {
    position: absolute;
    right: 21%;
    top: 28%;
    color: #ffe897;
    font-size: 48px;
    transform: rotate(-12deg);
    text-shadow: 0 0 24px #72f0da;
  }
  .shell-missions {
    width: min(940px, calc(var(--dialog-viewport-width, 100vw) - 24px));
    padding: 24px;
  }
  .shell-dialog-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
  }
  .shell-dialog-heading h2 {
    margin: 0;
  }
  #shell-mission-content .flight-deck {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
  }
  #shell-mission-content .deck-heading,
  #shell-mission-content .content-switcher,
  #shell-mission-content .missions,
  #shell-mission-content .section-line,
  #shell-mission-content .mission-brief {
    grid-column: 1 / -1;
  }
  #shell-briefing {
    margin-top: 20px;
  }
  @media (max-width: 680px) {
    .shell-bar {
      padding: 4px 6px;
      gap: 2px;
    }
    .shell-bar button {
      font-size: 10px;
      padding: 4px 8px;
      min-height: 44px;
    }
    #shell-menu span,
    .shell-edition {
      display: none;
    }
    #shell-menu {
      margin-right: auto;
    }
    .game-shell main {
      padding: 10px 6px 0;
    }
    .game-shell .arena-panel {
      max-width: 100%;
    }
    .game-shell .play-controls {
      flex-wrap: wrap;
      justify-content: center;
    }
    .game-shell .telemetry {
      gap: 5px;
    }
    .game-shell .telemetry > div {
      padding-left: 7px;
    }
    .game-shell .shell-home {
      padding: 28px 24px;
    }
    .shell-home[open] {
      grid-template-columns: 1fr;
    }
    .home-art {
      inset: 0;
      opacity: 0.35;
    }
    .home-actions {
      max-width: none;
    }
    #shell-title {
      font-size: 60px;
    }
    #shell-mission-content .flight-deck {
      grid-template-columns: 1fr;
    }
    .shell-missions {
      padding: 16px;
    }
  }
  @media (max-height: 600px) and (min-width: 681px) {
    .game-shell .arena-panel {
      max-width: min(100%, calc((100dvh - 152px) * var(--board-aspect, 1.333333)));
    }
    .game-shell .shell-bar {
      height: 44px;
    }
    .game-shell main {
      padding-top: 4px;
    }
    .game-shell .telemetry {
      height: 40px;
    }
    .game-shell .run-message,
    .game-shell .flight-status {
      display: none;
    }
    .game-shell .controls-row {
      margin: 4px 0 0;
    }
    .home-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 32px;
    }
    .home-content > .eyebrow,
    .home-copy,
    #shell-title {
      grid-column: 1;
    }
    .home-actions {
      grid-column: 2;
      grid-row: 1 / 5;
      margin: 0;
    }
    .home-hint,
    .shell-tools {
      grid-column: 1 / -1;
      margin: 0;
    }
    .shell-home[open] {
      display: block;
    }
  }

  .game-shell .play-controls .ability-buttons .button {
    background: #152237;
    color: #c7dce9;
    border-color: #3e5570;
  }

  /* Portrait briefings are native menu overlays, independent of the shallow wide arena. */
  @media (max-width: 680px) {
    .game-shell .game-overlay {
      position: fixed;
      inset: 62px 8px auto;
      height: auto;
      max-height: calc(100dvh - 78px);
      z-index: 40;
      padding: 16px;
      background: #080f1ff5;
      border: 1px solid #38536b;
      align-items: flex-start;
    }
    .game-shell .overlay-card {
      width: 100%;
      max-height: calc(100dvh - 112px);
      overflow: auto;
      padding: 12px;
    }
    .game-shell .play-controls {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .game-shell .play-controls .direction-controls,
    .game-shell .play-controls .utility-buttons {
      justify-content: center;
    }
    .game-shell .play-controls .ability-buttons {
      min-width: 100%;
      flex: none;
      display: flex;
      flex-wrap: nowrap;
    }
    .game-shell .play-controls .ability-buttons .button {
      flex: 1 1 0;
      min-width: 0;
      padding: 8px 4px;
      overflow-wrap: normal;
      justify-content: center;
    }
  }
  @media (max-width: 680px) {
    .game-shell .play-controls .ability-buttons {
      flex-direction: row;
      align-items: stretch;
    }
  }
  @media (min-width: 681px) and (max-height: 500px) {
    .game-shell .arena-panel,
    .game-shell .arena-panel:has(> .encounter-status:not([hidden])) {
      max-width: 100%;
    }
    .game-shell .arena-panel > .arena-shell,
    .game-shell .arena-panel:has(> .encounter-status:not([hidden])) > .arena-shell {
      max-width: min(100%, calc((100dvh - 100px) * var(--board-aspect, 1.333333)));
    }
    .game-shell .play-controls {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas: 'directions' 'actions' 'utilities';
      align-items: start;
      padding: 0;
      margin: 0;
    }
    .game-shell .play-controls .direction-controls {
      display: grid;
      grid-template-columns: 44px 44px;
      grid-template-rows: 44px 44px;
    }
    .game-shell .play-controls .direction-controls button {
      grid-column: auto;
      grid-row: auto;
    }
    .game-shell .play-controls .ability-buttons {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .game-shell .play-controls .utility-buttons {
      flex-direction: row;
    }
    .game-shell .game-overlay {
      position: fixed;
      inset: 50px 8px 8px;
      padding: 12px;
      z-index: 40;
      background: #080f1ff5;
      border: 1px solid #38536b;
    }
    .game-shell .overlay-card {
      width: min(760px, 100%);
      height: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .game-shell #overlay-reading {
      min-height: 0;
      overflow: auto;
    }
    .game-shell .reading-toolbar,
    .game-shell .overlay-actions {
      flex-shrink: 0;
      margin-top: 6px;
    }
    .game-shell .overlay-footnote {
      display: none;
    }
  }
  .theme-preparation:has(> p[hidden]):has(> button[hidden]) {
    display: none;
  }
}