:root{
    color-scheme: dark;
    --bg: #080b10;
    --bg-vignette: #0d1420;
    --panel: #0f1620;
    --panel-line: #223142;
    --ink: #e7edf5;
    --muted: #66798d;
    --muted-dim: #3d4d5e;

    --p1: #2dd4e8;
    --p1-dim: #123540;
    --p2: #f0a339;
    --p2-dim: #402c10;
    --p3: #ef4459;
    --p3-dim: #401319;

    --ok: #3ddc84;
    --accent: var(--p1);
    --accent-dim: var(--p1-dim);

  }

  *{ box-sizing: border-box; }
  html{ min-height: 100%; }
  body{
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: max(14px, env(safe-area-inset-top,0px)) max(14px, env(safe-area-inset-right,0px)) max(14px, env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px));
    background: var(--bg);
    color: var(--ink);
    font-family: 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
    overflow: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  img{ max-width: 100%; }
  [hidden]{ display: none !important; }

  .scene{
    position: relative;
    width: min(100%, 1000px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(12px, 2.6vw, 26px);
    gap: 20px;
    border: 1px solid #15242a;
    background: #030809;
  }

  .game-content{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }


  .hud-top{
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--panel-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: .12em;
    z-index: 2;
  }
  .hud-tag{
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: var(--muted);
    text-transform: uppercase;
  }
  .hud-tag .dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
  }
  .hud-clock{
    font-family: 'Orbitron', monospace;
    font-size: 14px; font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }


  .gauge-wrap{
    position: relative;
    width: min(64vw, 300px);
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    flex: 0 1 auto;
  }
  .corner{
    position: absolute;
    width: 26px; height: 26px;
    border: 2px solid var(--panel-line);
    opacity: .8;
  }
  .corner.tl{ top: -6px; left: -6px; border-right: none; border-bottom: none; }
  .corner.tr{ top: -6px; right: -6px; border-left: none; border-bottom: none; }
  .corner.bl{ bottom: -6px; left: -6px; border-right: none; border-top: none; }
  .corner.br{ bottom: -6px; right: -6px; border-left: none; border-top: none; }
  .gauge-wrap.armed .corner{ border-color: var(--accent); }

  svg.ring{ width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .ring-track{ fill: none; stroke: var(--panel-line); stroke-width: 14; }
  .ring-fill{
    fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: butt;
  }

  .readout{
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    pointer-events: none;
  }
  .readout .pct{
    font-family: 'Orbitron', monospace;
    font-weight: 800;
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .readout .phase{
    font-size: 12px; font-weight: 700; letter-spacing: .2em;
    color: var(--accent);
    text-transform: uppercase;
  }


  .pips{ display: flex; gap: 14px; z-index: 2; }
  .pip{
    width: 20px; height: 20px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--panel);
    border: 2px solid var(--muted-dim);
  }
  .pip.done{ background: var(--ok); border-color: var(--ok); }
  .pip.active{ border-color: var(--accent); }


  .controls{
    width: 100%;
    border-top: 1px solid var(--panel-line);
    padding-top: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    z-index: 2;
  }
  .hint{
    font-size: 12px; font-weight: 600; letter-spacing: .1em;
    color: var(--muted); text-transform: uppercase;
  }
  .touch-hint{ display: none; }
  @media (hover: none) and (pointer: coarse){
    body{ touch-action: manipulation; }
    .keyboard-hint{ display: none; }
    .touch-hint{ display: inline; }
  }
  .keycap{
    width: 74px; height: 74px;
    font-family: 'Orbitron', monospace;
    font-size: 26px; font-weight: 800;
    color: var(--ink);
    background: linear-gradient(180deg, #17212c, #0d141c);
    border: 2px solid var(--panel-line);
    clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
  }
  .keycap:active, .keycap.pressed{
    border-color: var(--accent);
  }


  .overlay{
    position: absolute; inset: 0;
    background: rgba(6,9,13,.92);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    padding: 24px;
  }
  .card{
    width: 100%; max-width: 360px;
    background: var(--panel);
    border: 1px solid var(--panel-line);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    padding: 28px 26px 26px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  .card .eyebrow{
    font-size: 11px; font-weight: 700; letter-spacing: .22em;
    color: var(--accent); text-transform: uppercase;
  }
  .card h1{
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    margin: 0;
    letter-spacing: .04em;
    text-wrap: balance;
  }
  .card p{
    margin: 0; color: var(--muted);
    font-size: 15px; line-height: 1.5; font-weight: 600;
    text-wrap: balance;
  }
  .card .stat{
    font-family: 'Orbitron', monospace;
    font-size: 2rem; font-weight: 800; color: var(--ok);
    font-variant-numeric: tabular-nums;
  }
  .go-btn{
    margin-top: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase;
    color: #061014;
    background: var(--accent);
    border: none;
    padding: 13px 26px;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    cursor: pointer;
  }
  .go-btn:hover{ filter: brightness(1.12); }

  :root{--bg:#05090b;--bg-vignette:#07110b;--panel:#07100f;--panel-line:#1b3927;--ink:#d9f4df;--muted:#75a883;--muted-dim:#31543b;--p1:#48db82;--p1-dim:#123b25;--p2:#48db82;--p2-dim:#123b25;--p3:#48db82;--p3-dim:#123b25;--ok:#62ff91;--accent:#48db82;--accent-dim:#123b25}
  body{background:radial-gradient(ellipse at 50% 25%,#0b1b11,#05090b 70%);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
  .hud-top,.hud-clock,.readout .pct,.card h1,.card .stat,.keycap,.go-btn{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
  .corner{border-color:#1b3927}.ring-track{stroke:#1b3927}.ring-fill{stroke:var(--accent)}
  .pip{clip-path:none;border-radius:0;background:#07100f;border-color:#31543b}.pip.done{background:#48db82;border-color:#48db82}.pip.active{border-color:#62ff91}
  .keycap{clip-path:none;background:#0b1a10;border:1px solid #285039;color:var(--green,var(--ok));border-radius:0}
  .card{clip-path:none;background:#07100f;border-color:#285039;box-shadow:0 0 36px #62ff9110}
  .go-btn{clip-path:none;background:#62ff91;color:#061009;padding:13px 26px;font-weight:700}
  .overlay{background:#020607ef}
  .game-nav{position:relative;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:12px;align-self:center;padding:7px 10px;border:1px solid #1b3927;background:#06100b;z-index:11}
  .game-nav .nav-label{color:#48db82;font-size:10px;font-weight:bold;letter-spacing:.15em}
  .game-select{width:min(260px,65%);appearance:none;border:1px solid #285039;background:#0a1b10;color:#a1ffb9;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;padding:8px 10px;cursor:pointer}.game-select:focus-visible{outline:2px solid #48db82;outline-offset:2px}.game-select option{background:#07100f;color:#d9f4df}
  .overlay.result-success{background:rgba(2,15,7,.93)}
  .overlay.result-failure{background:rgba(20,3,6,.94)}
  .overlay.result-success .card{border-color:#48db82;box-shadow:0 0 0 2px #48db8240,0 0 56px #48db8230}
  .overlay.result-failure .card{border-color:#ff6273;box-shadow:0 0 0 2px #ff627340,0 0 56px #ff627330}
  .overlay.result-success .card:before,.overlay.result-failure .card:before{display:block;padding:9px 12px;font-size:12px;font-weight:800;letter-spacing:.18em;margin-bottom:4px}
  .overlay.result-success .card:before{content:"✓  SUCCESS";color:#a1ffb9;background:#123b25;border:1px solid #48db82}
  .overlay.result-failure .card:before{content:"✕  FAILED";color:#ffc0c6;background:#401319;border:1px solid #ff6273}
  .overlay.result-success .go,.overlay.result-success .go-btn{background:#62ff91;color:#041008}
  .overlay.result-failure .go,.overlay.result-failure .go-btn{background:#ff6273;color:#190408}
 .game-nav .game-select{width:65%;max-width:260px;min-width:0;flex:0 1 260px;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,#48db82 50%),linear-gradient(135deg,#48db82 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
.home-link{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid #285039;background:#0a1b10;color:#a1ffb9;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;padding:8px 10px;text-decoration:none;cursor:pointer}.home-link:hover,.home-link:focus-visible{border-color:var(--green);background:#102118;outline:none}
.game-nav .nav-label{margin-right:auto}
.difficulty-group{display:flex;align-items:center;gap:4px;flex:none}.difficulty-btn{border:1px solid #285039;background:#07100f;padding:7px 8px;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;cursor:pointer}.difficulty-btn.easy{color:#48db82}.difficulty-btn.normal{color:#a1ffb9}.difficulty-btn.hard{color:#ff6273}.difficulty-btn[aria-pressed="true"]{border-color:currentColor;background:#0b1a10}.difficulty-btn:focus-visible{outline:2px solid #a1ffb9;outline-offset:2px}.difficulty-btn:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:650px){
  .scene,.game-content{gap:18px}
  .overlay{padding:12px}
  .game-nav{flex-wrap:wrap;gap:8px}
  .game-nav .nav-label{font-size:8px}
  .game-nav .game-select{order:1;flex:1 1 140px;width:auto;max-width:none}
  .difficulty-group{order:2}
  .game-nav .home-link{order:3;margin-left:auto}
}