:root {
      --bg: #edf2f7;
      --panel: #ffffff;
      --panel-raised: #f8fafc;
      --ink: #172033;
      --muted: #637087;
      --raised-ink: var(--ink);
      --raised-muted: var(--muted);
      --accent: #3457d5;
      --accent-2: #7444c8;
      --border: #c8d2df;
      --radius: 18px;
      --button-ink: #ffffff;
      --decision-left: #b3475b;
      --decision-right: #207a68;
      --shadow: 0 28px 80px rgba(35, 49, 73, 0.18);
      color-scheme: light;
    }
    :root[data-skin="catppuccin-latte"] {
      --bg: #e6e9ef; --panel: #eff1f5; --panel-raised: #fafafa; --ink: #4c4f69;
      --muted: #6c6f85; --accent: #8839ef; --accent-2: #7287fd; --border: #bcc0cc;
      --decision-left: #d20f39; --decision-right: #179299; --button-ink: #ffffff;
    }
    :root[data-skin="classic"] {
      --bg: #0c0f14; --panel: #171c25; --panel-raised: #202735; --ink: #eee9dc;
      --muted: #9da3ad; --accent: #c9a24b; --accent-2: #6d8fd6; --border: #353d4b;
      --decision-left: #b95a63; --decision-right: #5f9d82; --button-ink: #17120a; color-scheme: dark;
      --shadow: 0 32px 90px rgba(0, 0, 0, 0.52);
    }
    :root[data-skin="arcade"] {
      --bg: #100b19; --panel: #241834; --panel-raised: #332148; --ink: #fff2c9;
      --muted: #c6b8d8; --accent: #ffd34f; --accent-2: #b568ff; --border: #664b86;
      --decision-left: #ff5b81; --decision-right: #4ce6bb; --button-ink: #17111f; color-scheme: dark;
    }
    :root[data-skin="famicom"] {
      --bg: #dfd0b4; --panel: #fff8e8; --panel-raised: #f6ead3; --ink: #211f1c;
      --muted: #6d6256; --accent: #b52222; --accent-2: #275c9a; --border: #24211d;
      --radius: 2px; --decision-left: #b52222; --decision-right: #275c9a; --button-ink: #fff8e8;
      --shadow: 10px 12px 0 rgba(36, 33, 29, 0.22);
    }
    :root[data-skin="phantom"] {
      --bg: #08080a; --panel: #f4f0e8; --panel-raised: #e8e0d3; --ink: #121214;
      --muted: #70695f; --accent: #d71920; --accent-2: #18181b; --border: #d71920;
      --raised-ink: #121214; --raised-muted: #5f584f;
      --radius: 0; --decision-left: #d71920; --decision-right: #18181b; --button-ink: #f7f2e9;
      --shadow: 12px 12px 0 rgba(215, 25, 32, 0.38); color-scheme: dark;
    }
    :root[data-skin="terminal"] {
      --bg: #050d09; --panel: #0c1710; --panel-raised: #13251a; --ink: #daf8e5;
      --muted: #91b89d; --accent: #68ff95; --accent-2: #78c6ff; --border: #28543a;
      --radius: 4px; --decision-left: #ff7b8d; --decision-right: #68ff95; --button-ink: #06100a;
      --shadow: 0 0 54px rgba(104, 255, 149, 0.11); color-scheme: dark;
    }
    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    body {
      margin: 0;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38rem),
        linear-gradient(135deg, color-mix(in srgb, var(--bg) 92%, var(--accent) 8%), var(--bg));
      color: var(--ink);
      font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.18;
      background-image: repeating-linear-gradient(90deg, transparent 0 47px, color-mix(in srgb, var(--ink) 8%, transparent) 48px);
      mask-image: linear-gradient(to bottom, black, transparent 70%);
    }
    button { font: inherit; }
    button, select { color: inherit; }
    .player-shell {
      width: min(1180px, calc(100% - 40px));
      min-height: 100vh;
      margin: 0 auto;
      padding: 28px 0 22px;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 20px;
    }
    .masthead {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 24px;
      padding: 0 4px 18px;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    }
    .eyebrow, .utility-label {
      margin: 0 0 5px;
      color: var(--muted);
      font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .project-title {
      margin: 0;
      max-width: 760px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 0.98;
    }
    .turn-readout { text-align: right; }
    .masthead-tools {
      display: flex;
      justify-content: flex-end;
      gap: 7px;
      margin-bottom: 10px;
    }
    .utility-trigger {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 52%, transparent);
      color: var(--muted);
      cursor: pointer;
      font-family: "Cascadia Mono", Consolas, monospace;
      font-size: 10px;
      letter-spacing: .06em;
      transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
    }
    .utility-trigger:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
    .utility-trigger__count {
      min-width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--accent);
      color: var(--button-ink);
      font-size: 9px;
      font-weight: 700;
    }
    .turn-value {
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 30px;
      line-height: 1;
    }
    .gauges {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .gauge {
      min-width: 0;
      padding: 10px 12px 11px;
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      background: color-mix(in srgb, var(--panel) 76%, transparent);
      backdrop-filter: blur(12px);
      border-radius: calc(var(--radius) * 0.6);
    }
    .gauge__head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
    .gauge__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
    .gauge__value { font-family: "Cascadia Mono", Consolas, monospace; font-weight: 700; }
    .gauge__bar { height: 3px; margin-top: 8px; overflow: hidden; background: color-mix(in srgb, var(--border) 70%, transparent); }
    .gauge__fill { height: 100%; background: var(--accent); transition: width 360ms cubic-bezier(.22,.8,.22,1); }
    .gauge__desc { display: none; }
    .decision-stage {
      min-height: 520px;
      display: grid;
      grid-template-columns: minmax(116px, 1fr) minmax(340px, 560px) minmax(116px, 1fr);
      align-items: center;
      gap: clamp(18px, 4vw, 52px);
      perspective: 1400px;
    }
    .choice-rail {
      min-width: 0;
      opacity: 0.62;
      transition: opacity 180ms ease, transform 220ms ease;
    }
    .choice-rail--right { text-align: right; }
    .choice-rail__line { width: 100%; height: 1px; background: var(--border); }
    .choice-rail__key {
      display: block;
      margin: 12px 0 6px;
      color: var(--muted);
      font-family: "Cascadia Mono", Consolas, monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .choice-rail__label { margin: 0; font-family: Georgia, serif; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.12; }
    .decision-stage[data-intent="left"] .choice-rail--left,
    .decision-stage[data-intent="right"] .choice-rail--right { opacity: 1; transform: translateX(0); }
    .card-wrap { position: relative; min-width: 0; }
    .card-wrap::before, .card-wrap::after {
      content: "";
      position: absolute;
      inset: 18px -12px -12px;
      z-index: -1;
      border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
      border-radius: var(--radius);
      transform: rotate(-1.4deg);
    }
    .card-wrap::after { inset: 9px -7px -6px; transform: rotate(1deg); background: color-mix(in srgb, var(--panel) 38%, transparent); }
    .card {
      position: relative;
      min-height: 430px;
      overflow: hidden;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      padding: clamp(26px, 5vw, 50px);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(155deg, var(--panel-raised), var(--panel));
      box-shadow: var(--player-shadow, 0 28px 80px var(--shadow));
      transform: translate3d(0, 0, 0);
      transform-origin: 50% 88%;
      transition: transform 230ms cubic-bezier(.22,.8,.24,1), opacity 190ms ease, box-shadow 180ms ease;
      touch-action: pan-y;
      user-select: none;
      will-change: transform, opacity;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--decision-left), var(--accent), var(--decision-right));
    }
    .card.is-dragging { transition: box-shadow 120ms ease; cursor: grabbing; }
    .transition-seal {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: 48%;
      width: 72px;
      height: 72px;
      display: grid;
      place-items: center;
      border: 2px solid var(--accent);
      border-radius: 50%;
      background: color-mix(in srgb, var(--panel) 82%, transparent);
      color: var(--accent);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) rotate(-12deg) scale(1.7);
      font-family: Georgia, serif;
      font-size: 24px;
      font-weight: 700;
      box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent);
    }
    .transition-seal.is-stamping { animation: seal-stamp 440ms cubic-bezier(.16,.9,.22,1) both; }
    @keyframes seal-stamp {
      0%, 30% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.7); }
      48% { opacity: .92; transform: translate(-50%, -50%) rotate(-7deg) scale(.88); }
      64% { opacity: .72; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(1.08); }
    }
    .card__content { align-self: center; }
    .card__art {
      width: min(176px, 48%);
      aspect-ratio: 1;
      display: block;
      margin: 0 auto 24px;
      object-fit: contain;
      padding: 16px;
      border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      background: color-mix(in srgb, var(--bg) 45%, transparent);
      border-radius: calc(var(--radius) * 0.72);
    }
    .card__text {
      max-width: 26ch;
      margin: 0 auto;
      text-align: center;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(24px, 3.6vw, 38px);
      line-height: 1.18;
      letter-spacing: -0.018em;
    }
    .choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 34px; }
    .choice-button {
      min-height: 70px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 12px;
      padding: 12px 15px;
      border: 1px solid var(--border);
      border-radius: calc(var(--radius) * 0.72);
      background: color-mix(in srgb, var(--panel-raised) 88%, transparent);
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    }
    .choice-button--right { grid-template-columns: 1fr auto; text-align: right; }
    .choice-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 12%, transparent); }
    .choice-button--left:hover:not(:disabled), .choice-button--left:focus-visible { border-color: var(--decision-left); }
    .choice-button--right:hover:not(:disabled), .choice-button--right:focus-visible { border-color: var(--decision-right); }
    .choice-button:disabled { opacity: 0.42; cursor: default; }
    .choice-button__key {
      width: 32px; height: 32px; display: grid; place-items: center;
      border: 1px solid currentColor; border-radius: 50%; font-family: "Cascadia Mono", Consolas, monospace;
    }
    .choice-button__label { font-size: 14px; font-weight: 650; line-height: 1.2; }
    .player-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 42px; }
    .status { min-width: 0; color: var(--muted); font-size: 12px; }
    .status[data-kind="error"] { color: var(--decision-left); }
    .session-label { color: var(--muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; text-align: right; }
    .restart-button, .load-button {
      border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--ink);
      padding: 9px 16px; cursor: pointer; font-size: 12px; font-weight: 650;
      transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
    }
    .restart-button:hover, .load-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); transform: translateY(-1px); }
    button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 72%, transparent); outline-offset: 3px; }
    .summary { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; }
    .summary__title { margin: 0 0 7px; font-family: Georgia, serif; font-size: 22px; }
    .summary__line { display: inline-block; margin: 2px 7px; color: var(--muted); font-size: 12px; }
    .utility-layer {
      position: fixed;
      z-index: 30;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr minmax(320px, 430px);
    }
    .utility-backdrop {
      border: 0;
      border-radius: 0;
      background: rgba(8, 12, 20, .48);
      cursor: default;
      backdrop-filter: blur(4px);
      animation: backdrop-in 180ms ease both;
    }
    .utility-drawer {
      min-width: 0;
      height: 100%;
      overflow: auto;
      padding: 26px 24px 30px;
      border-left: 1px solid var(--border);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 220px),
        var(--panel);
      box-shadow: -24px 0 70px rgba(7, 12, 24, .28);
      animation: drawer-in 260ms cubic-bezier(.2,.82,.24,1) both;
    }
    @keyframes backdrop-in { from { opacity: 0; } }
    @keyframes drawer-in { from { transform: translateX(100%); } }
    .utility-drawer__head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .utility-drawer__title { margin: 2px 0 0; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
    .icon-button {
      width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%;
      background: transparent; color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1;
    }
    .utility-panel { padding-top: 22px; }
    .utility-copy { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
    .skin-options { display: grid; gap: 8px; }
    .skin-option {
      width: 100%; min-height: 64px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px;
      padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) * .6);
      background: var(--panel-raised); color: var(--raised-ink); cursor: pointer; text-align: left;
    }
    .skin-option:hover, .skin-option[aria-pressed="true"] { border-color: var(--accent); }
    .skin-option[aria-pressed="true"] { box-shadow: inset 3px 0 var(--accent); }
    .skin-option__swatch { width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--raised-ink) 22%, transparent); border-radius: calc(var(--radius) * .45); background: linear-gradient(135deg, var(--skin-bg) 0 60%, var(--skin-accent) 60%); box-shadow: 3px 3px 0 color-mix(in srgb, var(--skin-accent) 32%, transparent); }
    .skin-option__copy { min-width: 0; }
    .skin-option__name { font-weight: 650; }
    .skin-option__description { display: block; margin-top: 3px; color: var(--raised-muted); font-size: 11px; }
    .skin-option__state { color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; text-transform: uppercase; }
    .motion-setting { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
    .motion-setting__label { display: block; margin-bottom: 9px; color: var(--muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
    .motion-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .motion-option { min-height: 44px; border: 1px solid var(--border); border-radius: calc(var(--radius) * .55); background: var(--panel-raised); color: var(--raised-ink); cursor: pointer; font-size: 12px; font-weight: 650; }
    .motion-option[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-raised)); box-shadow: inset 0 -3px var(--accent); }
    .history-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 18px; }
    .history-stat { padding: 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) * .55); background: var(--panel-raised); color: var(--raised-ink); }
    .history-stat strong { display: block; margin-top: 4px; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
    .history-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .history-reign { overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) * .55); background: var(--panel-raised); color: var(--raised-ink); }
    .history-reign summary { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; cursor: pointer; list-style: none; }
    .history-reign summary::-webkit-details-marker { display: none; }
    .history-reign__title { font-family: Georgia, serif; font-size: 21px; }
    .history-reign__meta { color: var(--raised-muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; text-align: right; }
    .history-reign__decisions { display: grid; gap: 1px; margin: 0; padding: 1px 0 0; list-style: none; background: var(--border); }
    .history-entry { padding: 13px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) * .55); background: var(--panel-raised); color: var(--raised-ink); }
    .history-reign .history-entry { border: 0; border-radius: 0; }
    .history-entry__head { display: flex; justify-content: space-between; gap: 12px; color: var(--raised-muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; }
    .history-entry__choice { margin: 9px 0 4px; font-family: Georgia, serif; font-size: 18px; line-height: 1.25; }
    .history-entry__card { margin: 0; color: var(--raised-muted); font-size: 12px; line-height: 1.4; }
    .history-entry__delta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
    .history-delta { padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--raised-muted); font-size: 10px; }
    .history-empty { padding: 36px 18px; border: 1px dashed var(--border); color: var(--muted); text-align: center; line-height: 1.6; }
    .history-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
    .quiet-button, .danger-button { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 650; }
    .danger-button { border-color: var(--decision-left); color: var(--decision-left); }
    .clear-confirm { margin-top: 12px; padding: 12px; border: 1px solid var(--decision-left); background: color-mix(in srgb, var(--decision-left) 7%, transparent); }
    .clear-confirm p { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
    .language-options { display: grid; gap: 8px; }
    .language-option { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) * .55); background: var(--panel-raised); color: var(--raised-ink); cursor: pointer; text-align: left; }
    .language-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
    .language-option small { display: block; margin-top: 3px; color: var(--raised-muted); }
    .language-option__state { color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; text-transform: uppercase; }
    .about-project { margin: 0 0 22px; padding: 18px; border: 1px solid var(--border); border-radius: calc(var(--radius) * .65); background: var(--panel-raised); color: var(--raised-ink); }
    .about-project h3 { margin: 0; font-family: Georgia, serif; font-size: 26px; font-weight: 500; }
    .project-link, .about-project a, .about-engine a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-decoration-thickness: 1px; text-underline-offset: .16em; }
    .project-link { text-decoration: none; }
    .project-link[href]:hover, .about-project a:hover, .about-engine a:hover { color: var(--accent); text-decoration-color: currentColor; }
    .about-project__byline { margin: 5px 0 14px; color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; }
    .about-project__description { margin: 0; color: var(--raised-muted); line-height: 1.65; white-space: pre-wrap; }
    .about-engine { padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

    :root[data-skin="famicom"] body {
      background-color: #efe4cc;
      background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px);
      background-size: 16px 16px;
      font-family: "Cascadia Mono", Consolas, monospace;
    }
    :root[data-skin="famicom"] body::before { opacity: .28; background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--ink) 7%, transparent) 8px 9px); mask-image: none; }
    :root[data-skin="famicom"] .player-shell { border-left: 8px solid var(--accent); border-right: 8px solid var(--accent-2); padding-inline: 18px; }
    :root[data-skin="famicom"] .project-title, :root[data-skin="famicom"] .card__text, :root[data-skin="famicom"] .choice-rail__label { font-family: "Cascadia Mono", Consolas, monospace; font-weight: 800; letter-spacing: -.055em; }
    :root[data-skin="famicom"] .card { border: 4px double var(--ink); background: var(--panel); box-shadow: 8px 8px 0 var(--accent-2); }
    :root[data-skin="famicom"] .card::before { height: 9px; background: repeating-linear-gradient(90deg, var(--accent) 0 18px, var(--panel) 18px 24px, var(--accent-2) 24px 42px, var(--panel) 42px 48px); }
    :root[data-skin="famicom"] .choice-button, :root[data-skin="famicom"] .utility-trigger { border-width: 2px; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }

    :root[data-skin="phantom"] body { background: radial-gradient(circle at 74% 20%, rgba(215,25,32,.21), transparent 26rem), #09090a; }
    :root[data-skin="phantom"] body::before { opacity: .35; background: repeating-linear-gradient(-18deg, transparent 0 13px, rgba(255,255,255,.035) 13px 14px); mask-image: none; }
    :root[data-skin="phantom"] .masthead { border-bottom: 5px solid var(--accent); }
    :root[data-skin="phantom"] .project-title, :root[data-skin="phantom"] .utility-drawer__title { font-family: Impact, "Arial Black", sans-serif; font-weight: 400; letter-spacing: .015em; text-transform: uppercase; }
    :root[data-skin="phantom"] .card { border: 0; clip-path: polygon(2% 0, 100% 1%, 98% 100%, 0 98%); background: #f4f0e8; color: #121214; box-shadow: 16px 15px 0 var(--accent); }
    :root[data-skin="phantom"] .card::before { height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 84% 100%, 7% 65%); }
    :root[data-skin="phantom"] .card__text { font-family: "Arial Black", Impact, sans-serif; font-size: clamp(22px, 3.3vw, 35px); line-height: 1.1; text-transform: uppercase; }
    :root[data-skin="phantom"] .choice-button { background: #121214; color: #f4f0e8; border-color: #121214; }
    :root[data-skin="phantom"] .gauge { border-color: var(--accent); background: #151515; }
    :root[data-skin="phantom"] .utility-drawer { background: linear-gradient(160deg, rgba(215,25,32,.16), transparent 210px), #151515; }
    [hidden] { display: none !important; }
    @media (max-width: 820px) {
      .player-shell { width: min(640px, calc(100% - 24px)); padding-top: 18px; }
      .masthead { align-items: center; }
      .gauges { grid-template-columns: repeat(2, 1fr); }
      .decision-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
      .choice-rail { display: none; }
      .card { min-height: 420px; }
    }
    @media (max-height: 820px) and (min-width: 821px) {
      .player-shell { padding: 14px 0 12px; gap: 10px; }
      .masthead { padding-bottom: 10px; }
      .project-title { font-size: clamp(28px, 3.4vw, 40px); }
      .turn-value { font-size: 25px; }
      .gauge { padding: 7px 10px 8px; }
      .decision-stage { min-height: 420px; }
      .card { min-height: 350px; padding: 24px 34px; }
      .card__art { width: min(120px, 34%); padding: 10px; margin-bottom: 14px; }
      .card__text { font-size: clamp(22px, 2.6vw, 31px); }
      .choice-actions { margin-top: 20px; }
      .choice-button { min-height: 58px; padding: 9px 12px; }
    }
    @media (max-height: 600px) and (min-width: 821px) {
      .player-shell { padding: 10px 0 8px; gap: 7px; }
      .masthead { padding-bottom: 7px; }
      .eyebrow, .utility-label { margin-bottom: 2px; font-size: 9px; }
      .project-title { font-size: 28px; }
      .turn-value { font-size: 21px; }
      .gauge { padding: 5px 8px 6px; }
      .gauge__bar { margin-top: 5px; }
      .decision-stage { min-height: 310px; }
      .card { min-height: 280px; padding: 17px 24px; }
      .card__art { width: min(82px, 28%); padding: 7px; margin-bottom: 9px; }
      .card__text { font-size: 23px; }
      .choice-actions { margin-top: 13px; }
      .choice-button { min-height: 48px; padding: 7px 10px; }
      .choice-button__key { width: 28px; height: 28px; }
      .player-footer { min-height: 34px; }
      .restart-button, .load-button { padding: 7px 14px; }
    }
    @media (max-width: 500px) {
      .masthead { grid-template-columns: minmax(0, 1fr); gap: 12px; }
      .turn-readout { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
      .project-title { white-space: normal; }
      .card { min-height: 390px; padding: 24px 20px; }
      .choice-actions { grid-template-columns: 1fr; }
      .choice-button--right { grid-template-columns: auto 1fr; text-align: left; }
      .choice-button--right .choice-button__key { grid-column: 1; grid-row: 1; }
      .choice-button--right .choice-button__label { grid-column: 2; }
      .player-footer { grid-template-columns: 1fr auto; }
      .session-label { display: none; }
      .masthead-tools { justify-content: flex-start; }
      .utility-layer { grid-template-columns: 1fr; padding-top: 9vh; }
      .utility-backdrop { position: absolute; inset: 0; }
      .utility-drawer { position: relative; border-left: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
    }