* { box-sizing: border-box; }

    :root {
      color-scheme: dark;
      --black: #000;
      --panel: rgba(4, 10, 18, 0.86);
      --panel-soft: rgba(7, 16, 28, 0.82);
      --line: rgba(103, 151, 198, 0.30);
      --line-strong: rgba(67, 218, 255, 0.42);
      --blue: #1477ff;
      --cyan: #45d9ff;
      --green: #4cff68;
      --amber: #ffca73;
      --red: #ff3347;
      --pink: #ff4fd8;
      --violet: #9d5cff;
      --text: #f5f7fb;
      --muted: #a9b5c9;
      --soft: #ced7e6;
    }

    html { min-height: 100%; background: var(--black); }

    body {
      min-height: 100svh;
      margin: 0;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(76, 255, 104, 0.15), transparent 20rem),
        radial-gradient(circle at 84% 13%, rgba(20, 119, 255, 0.18), transparent 24rem),
        radial-gradient(circle at 64% 58%, rgba(157, 92, 255, 0.12), transparent 26rem),
        radial-gradient(circle at 22% 92%, rgba(255, 51, 71, 0.10), transparent 24rem),
        linear-gradient(180deg, #000 0%, #020611 34%, #050813 68%, #000 100%);
      font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.26;
      background:
        linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px) 0 0 / 100% 3px,
        linear-gradient(90deg, rgba(69,217,255,0.04) 1px, transparent 1px) 0 0 / 6rem 100%,
        radial-gradient(circle at center, transparent 0, rgba(0,0,0,0.70) 78%);
      mix-blend-mode: screen;
    }

    .games-shell {
      width: min(72rem, calc(100% - 2rem));
      min-height: 100svh;
      margin-inline: auto;
      padding:
        calc(env(safe-area-inset-top, 0px) + 0.7rem)
        0
        calc(env(safe-area-inset-bottom, 0px) + 2rem);
      display: grid;
      gap: clamp(0.85rem, 3vw, 1.45rem);
      position: relative;
      z-index: 1;
    }

    .back-link {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 0.7rem);
      right: 0;
      z-index: 5;
      justify-self: end;
      width: fit-content;
      min-height: 2.55rem;
      padding: 0.68rem 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      border: 1px solid rgba(91, 134, 171, 0.34);
      border-radius: 999px;
      color: #c4cede;
      background: rgba(3, 10, 18, 0.68);
      text-decoration: none;
      font-size: 0.72rem;
      font-weight: 760;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      box-shadow: inset 0 0 1rem rgba(20, 119, 255, 0.035);
    }

    .back-link::before {
      content: "‹";
      color: var(--green);
      font-size: 1.1rem;
      line-height: 1;
      filter: drop-shadow(0 0 0.35rem rgba(76, 255, 104, 0.45));
    }

    .hero-panel {
      position: relative;
      overflow: hidden;
      padding: clamp(1.05rem, 4vw, 2.15rem);
      padding-right: clamp(1.05rem, 18vw, 8rem);
      border: 1px solid var(--line);
      border-radius: clamp(1.3rem, 4vw, 2.1rem);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 18%),
        linear-gradient(120deg, rgba(20,119,255,0.11), transparent 38%, rgba(76,255,104,0.08)),
        rgba(2, 7, 14, 0.84);
      box-shadow:
        0 1.3rem 3.2rem rgba(0, 0, 0, 0.45),
        0 0 2.4rem rgba(20, 119, 255, 0.10),
        inset 0 0 3rem rgba(69, 217, 255, 0.035);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: -10%;
      opacity: 0.22;
      background:
        radial-gradient(circle at 12% 18%, rgba(76,255,104,0.22), transparent 10rem),
        radial-gradient(circle at 82% 18%, rgba(255,79,216,0.20), transparent 12rem),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 5.8rem),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 6.6rem);
      transform: skewY(-4deg) scale(1.05);
      pointer-events: none;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      max-width: 54rem;
    }

    .eyebrow {
      margin: 0 0 0.9rem;
      color: #9ed8ff;
      font-size: clamp(0.72rem, 2vw, 0.9rem);
      font-weight: 820;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      text-shadow: 0 0 0.7rem rgba(20,119,255,0.28);
    }

    h1 {
      margin: 0;
      font-size: clamp(2.9rem, 12vw, 7.8rem);
      line-height: 0.84;
      letter-spacing: -0.075em;
      text-transform: uppercase;
      text-shadow:
        0 0 1rem rgba(255,255,255,0.12),
        0 0 2rem rgba(20,119,255,0.12),
        0 0 2.8rem rgba(76,255,104,0.07);
    }

    .tagline {
      max-width: 44rem;
      margin: clamp(1rem, 4vw, 1.7rem) 0 0;
      color: #c1c9d8;
      font-size: clamp(1.02rem, 3vw, 1.35rem);
      line-height: 1.65;
      text-wrap: balance;
    }

    .status-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: clamp(1rem, 3vw, 1.45rem);
    }

    .status-pill,
    .debug-badge {
      width: fit-content;
      padding: 0.54rem 0.78rem;
      border: 1px solid rgba(69, 217, 255, 0.32);
      border-radius: 999px;
      color: #cff4ff;
      background: rgba(69, 217, 255, 0.07);
      font-size: 0.68rem;
      font-weight: 820;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .debug-badge {
      display: none;
      border-color: rgba(76, 255, 104, 0.46);
      color: #d7ffdf;
      background: rgba(76, 255, 104, 0.08);
      box-shadow: 0 0 1.2rem rgba(76, 255, 104, 0.12);
    }

    .debug-badge.is-active { display: inline-flex; }

    .boot-panel,
    .section-panel,
    .support-panel {
      border: 1px solid var(--line);
      border-radius: clamp(1rem, 3vw, 1.45rem);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 20%),
        rgba(3, 10, 18, 0.82);
      box-shadow:
        0 1rem 2.3rem rgba(0, 0, 0, 0.30),
        inset 0 0 1.8rem rgba(20, 119, 255, 0.035);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .boot-panel {
      padding: clamp(1rem, 4vw, 1.45rem);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    .boot-output {
      min-height: 14rem;
      margin: 0;
      color: #d7ffdf;
      font-size: clamp(0.82rem, 2vw, 0.98rem);
      line-height: 1.85;
      white-space: pre-wrap;
      text-shadow: 0 0 0.8rem rgba(76, 255, 104, 0.22);
    }

    .boot-alert {
      color: var(--red);
      text-shadow:
        0 0 0.65rem rgba(255, 51, 71, 0.42),
        0 0 1.1rem rgba(255, 51, 71, 0.16);
    }

    .cursor {
      display: inline-block;
      width: 0.62ch;
      height: 1.1em;
      translate: 0 0.18em;
      background: var(--green);
      box-shadow: 0 0 0.65rem rgba(76, 255, 104, 0.58);
      animation: blink 0.9s steps(1) infinite;
    }

    @keyframes blink {
      0%, 48% { opacity: 1; }
      49%, 100% { opacity: 0; }
    }

    .diagnostics-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
    }

    .diagnostic-card {
      min-height: 8rem;
      padding: 1rem;
      border: 1px solid rgba(91, 134, 171, 0.28);
      border-radius: 1rem;
      background: rgba(5, 13, 24, 0.72);
    }

    .diagnostic-card strong {
      display: block;
      color: #fff;
      font-size: 0.82rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .diagnostic-card span {
      display: block;
      margin-top: 0.7rem;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .ring {
      width: 3.4rem;
      aspect-ratio: 1;
      margin-top: 0.8rem;
      border-radius: 50%;
      background:
        conic-gradient(var(--red) 0 82deg, transparent 82deg 96deg, var(--red) 96deg 178deg, transparent 178deg 192deg, rgba(255,255,255,0.18) 192deg 263deg, transparent 263deg 276deg, var(--red) 276deg 348deg, transparent 348deg 360deg);
      box-shadow:
        0 0 1rem rgba(255, 51, 71, 0.22),
        inset 0 0 0 0.75rem rgba(4, 10, 18, 0.96);
      animation: warningPulse 2.2s ease-in-out infinite;
    }

    @keyframes warningPulse {
      0%, 100% { opacity: 0.66; filter: drop-shadow(0 0 0.18rem rgba(255,51,71,0.30)); }
      50% { opacity: 1; filter: drop-shadow(0 0 0.58rem rgba(255,51,71,0.58)); }
    }

    .section-panel,
    .support-panel {
      padding: clamp(1rem, 4vw, 1.7rem);
      display: grid;
      gap: 1rem;
    }

    .section-heading {
      display: grid;
      gap: 0.45rem;
    }

    .section-heading h2 {
      margin: 0;
      font-size: clamp(1.55rem, 5vw, 3rem);
      line-height: 1;
      letter-spacing: -0.045em;
      text-transform: uppercase;
    }

    .section-heading p {
      max-width: 48rem;
      margin: 0;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.65;
    }

    .timeline {
      position: relative;
      display: grid;
      gap: 0.9rem;
    }

    .timeline::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0.78rem;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(69,217,255,0.45), rgba(76,255,104,0.28), transparent);
    }

    .era-card {
      margin: 0.65rem 0 0.1rem 2rem;
      padding: 0.86rem 1rem;
      border: 1px solid rgba(255,202,115,0.24);
      border-radius: 1rem;
      color: #ffe1aa;
      background: rgba(255,202,115,0.055);
      font-size: 0.78rem;
      font-weight: 820;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .era-card span {
      display: block;
      margin-top: 0.34rem;
      color: rgba(255, 225, 170, 0.74);
      font-size: 0.72rem;
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: none;
    }

    .game-card {
      position: relative;
      margin-left: 2rem;
      padding: clamp(1rem, 3vw, 1.25rem);
      display: grid;
      gap: 0.75rem;
      border: 1px solid rgba(91, 134, 171, 0.28);
      border-radius: 1.15rem;
      background:
        linear-gradient(120deg, rgba(255,255,255,0.04), transparent 30%),
        rgba(4, 11, 20, 0.82);
      box-shadow:
        0 0.85rem 1.8rem rgba(0,0,0,0.24),
        inset 0 0 1.1rem rgba(20,119,255,0.025);
      opacity: 0;
      transform: translateY(1.05rem);
      filter: blur(3px);
      transition:
        opacity 620ms ease,
        transform 620ms ease,
        filter 620ms ease,
        border-color 620ms ease,
        box-shadow 620ms ease;
    }

    .game-card.is-interactive {
      cursor: pointer;
    }


    .game-card.is-interactive:hover,
    .game-card.is-interactive:focus-within {
      border-color: rgba(76, 255, 104, 0.46);
      box-shadow:
        0 0.9rem 2rem rgba(0,0,0,0.26),
        0 0 1.45rem rgba(76,255,104,0.09),
        inset 0 0 1.1rem rgba(20,119,255,0.03);
    }

    .game-card-link {
      position: absolute;
      inset: 0;
      z-index: 4;
      border-radius: inherit;
      color: inherit;
      text-decoration: none;
    }

    .game-card-link:focus-visible {
      outline: 2px solid rgba(76, 255, 104, 0.88);
      outline-offset: 0.22rem;
    }

    .game-card::before {
      content: "";
      position: absolute;
      left: -1.58rem;
      top: 1.4rem;
      width: 0.72rem;
      height: 0.72rem;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0.9rem rgba(69,217,255,0.55);
    }

    .game-card.is-visible {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
      border-color: rgba(69, 217, 255, 0.34);
      box-shadow:
        0 0.9rem 2rem rgba(0,0,0,0.26),
        0 0 1.35rem rgba(69,217,255,0.055),
        inset 0 0 1.1rem rgba(20,119,255,0.03);
      animation: game-card-reveal 620ms ease both;
    }

    @keyframes game-card-reveal {
      from {
        opacity: 0;
        transform: translateY(1.05rem);
        filter: blur(3px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    .game-card.is-dbd {
      border-color: rgba(255, 51, 71, 0.36);
      background:
        linear-gradient(120deg, rgba(255,51,71,0.10), transparent 30%),
        linear-gradient(270deg, rgba(76,255,104,0.07), transparent 44%),
        rgba(4, 11, 20, 0.88);
    }

    .game-card.is-dbd::before {
      background: var(--red);
      box-shadow: 0 0 0.9rem rgba(255,51,71,0.65);
    }

    .game-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .year {
      flex: 0 0 auto;
      min-width: 4.8rem;
      color: #9ed8ff;
      font-size: 0.88rem;
      font-weight: 860;
      letter-spacing: 0.16em;
    }

    .game-title {
      margin: 0;
      font-size: clamp(1.1rem, 3vw, 1.55rem);
      line-height: 1.12;
      letter-spacing: -0.02em;
    }

    .game-note {
      margin: 0;
      color: #bfcbdd;
      font-size: 0.95rem;
      line-height: 1.58;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.42rem;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 1.6rem;
      padding: 0.36rem 0.55rem;
      border: 1px solid rgba(103, 151, 198, 0.24);
      border-radius: 999px;
      color: #c7d5e8;
      background: rgba(255,255,255,0.035);
      font-size: 0.65rem;
      font-weight: 820;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .chip.rank-low { border-color: rgba(168,176,192,0.28); color: #d4dae6; }
    .chip.rank-altered { border-color: rgba(69,217,255,0.32); color: #cff4ff; }
    .chip.rank-corrupted { border-color: rgba(255,202,115,0.36); color: #ffe0aa; }
    .chip.rank-labotomiser { border-color: rgba(255,79,216,0.40); color: #ffd5f6; background: rgba(255,79,216,0.06); }

    .entity-file {
      display: grid;
      gap: 0.65rem;
      padding: 0.9rem;
      border: 1px solid rgba(255,51,71,0.32);
      border-radius: 0.95rem;
      background: rgba(255,51,71,0.055);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      color: #f7d3d7;
      font-size: 0.82rem;
      line-height: 1.55;
    }

    .entity-file strong {
      color: #fff;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .receipts-list {
      display: grid;
      gap: 0.55rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .receipt-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.8rem;
      align-items: center;
      padding: 0.72rem 0.85rem;
      border: 1px solid rgba(91, 134, 171, 0.22);
      border-radius: 0.85rem;
      background: rgba(5, 13, 24, 0.66);
    }

    .receipt-row strong { font-weight: 760; }
    .receipt-row span { color: #d7ffdf; font-weight: 850; }

    .case-file {
      display: grid;
      gap: 0.35rem;
      padding: 1rem;
      border: 1px solid rgba(76,255,104,0.30);
      border-radius: 1rem;
      background: rgba(76,255,104,0.055);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    .case-file strong {
      color: #d7ffdf;
      font-size: 0.9rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .case-file span {
      color: #c7d5e8;
      font-size: 0.84rem;
      line-height: 1.55;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem;
    }

    .faq-card {
      padding: 1rem;
      border: 1px solid rgba(91, 134, 171, 0.22);
      border-radius: 1rem;
      background: rgba(5, 13, 24, 0.62);
    }

    .faq-card h3 {
      margin: 0 0 0.45rem;
      color: #fff;
      font-size: 0.96rem;
      line-height: 1.25;
    }

    .faq-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .code-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem;
      align-items: center;
      padding: 1rem;
      border: 1px solid rgba(69,217,255,0.25);
      border-radius: 1rem;
      background: rgba(69,217,255,0.045);
    }

    .code-help {
      display: grid;
      gap: 0.55rem;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.55;
    }

    .code-help strong {
      color: #fff;
      font-size: 0.76rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .dpad {
      display: grid;
      grid-template-columns: repeat(3, 2.7rem);
      grid-template-rows: repeat(3, 2.7rem);
      gap: 0.35rem;
      justify-content: center;
    }

    .dpad button,
    .face-buttons button {
      border: 1px solid rgba(103,151,198,0.34);
      border-radius: 0.75rem;
      color: #e9f7ff;
      background: rgba(3,10,18,0.74);
      font: inherit;
      font-size: 0.9rem;
      font-weight: 850;
      cursor: pointer;
      box-shadow: inset 0 0 0.8rem rgba(20,119,255,0.045);
    }

    .dpad button:hover,
    .dpad button:focus-visible,
    .face-buttons button:hover,
    .face-buttons button:focus-visible {
      outline: none;
      border-color: rgba(76,255,104,0.48);
      box-shadow: 0 0 0.9rem rgba(76,255,104,0.13), inset 0 0 0.8rem rgba(76,255,104,0.055);
    }

    .dpad .up { grid-column: 2; grid-row: 1; }
    .dpad .left { grid-column: 1; grid-row: 2; }
    .dpad .right { grid-column: 3; grid-row: 2; }
    .dpad .down { grid-column: 2; grid-row: 3; }

    .face-buttons {
      display: flex;
      justify-content: center;
      gap: 0.45rem;
      margin-top: 0.45rem;
    }

    .face-buttons button {
      width: 2.7rem;
      height: 2.7rem;
      border-radius: 999px;
    }

    .input-readout {
      min-height: 1.8rem;
      margin-top: 0.55rem;
      color: #d7ffdf;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 0.8rem;
      text-align: center;
    }

    .unlock-panel {
      display: none;
      padding: 1rem;
      border: 1px solid rgba(255,202,115,0.32);
      border-radius: 1rem;
      background: rgba(255,202,115,0.055);
      color: #ffe0aa;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      line-height: 1.6;
      white-space: pre-wrap;
    }

    .unlock-panel.is-active { display: block; }

    .achievement-pop {
      position: fixed;
      right: max(1rem, env(safe-area-inset-right));
      bottom: max(1rem, env(safe-area-inset-bottom));
      z-index: 20;
      width: min(24rem, calc(100vw - 2rem));
      padding: 1rem;
      border: 1px solid rgba(76,255,104,0.38);
      border-radius: 1rem;
      color: #d7ffdf;
      background: rgba(3, 10, 18, 0.94);
      box-shadow:
        0 1rem 2rem rgba(0,0,0,0.45),
        0 0 1.5rem rgba(76,255,104,0.13);
      transform: translateY(130%);
      transition: transform 320ms ease;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    .achievement-pop.is-active { transform: translateY(0); }

    .achievement-pop strong {
      display: block;
      color: #fff;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .achievement-pop span {
      display: block;
      margin-top: 0.4rem;
      color: #d7ffdf;
      line-height: 1.45;
    }

    @media (max-width: 820px) {
      .diagnostics-grid,
      .faq-grid,
      .code-panel {
        grid-template-columns: 1fr;
      }

      .game-top {
        display: grid;
        gap: 0.35rem;
      }

      .year { min-width: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
      }

      .game-card {
        opacity: 1;
        transform: none;
        filter: none;
      }

      .boot-output { min-height: 0; }
    }
  
    .site-footer {
      position: relative;
      z-index: 10;
      padding: 1.5rem 1rem 2rem;
      color: rgba(245, 247, 251, 0.48);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-align: center;
      text-transform: lowercase;
    }

    .site-footer span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.45rem 0.75rem;
      border: 1px solid rgba(145, 196, 255, 0.14);
      border-radius: 999px;
      background: rgba(5, 12, 22, 0.34);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 1rem rgba(20, 119, 255, 0.06);
    }