:root{
    --bg:#0d1117;
    --panel:#161b22;
    --line:#2d333b;
    --ink:#e6edf3;
    --muted:#8b949e;
    --p1:#ff5d73;
    --p2:#39d0d8;
    --win:#f2cc60;
    --shadow:0 10px 30px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    background:
      radial-gradient(1200px 600px at 50% -10%, #1b2230 0%, transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
    min-height:100dvh;
    display:flex;flex-direction:column;align-items:center;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom));
    gap:14px;overflow-x:hidden;
  }
  .wrap{width:100%;max-width:480px;display:flex;flex-direction:column;gap:14px}

  header{text-align:center;position:relative}
  .mute-btn{position:absolute;top:2px;right:0;width:36px;height:36px;border-radius:10px;
    border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:17px;line-height:1;padding:0}
  .mute-btn:active{transform:scale(.94)}
  .title{font-size:clamp(20px,6.2vw,28px);font-weight:800;letter-spacing:.5px;margin:0}
  .title .a{color:var(--p1)} .title .b{color:var(--p2)}
  .now-playing{margin-top:4px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:2px}

  /* ---------- Picker ---------- */
  .picker{background:var(--panel);border:1px solid var(--line);border-radius:18px;
    padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
  .picker h2{margin:0;font-size:16px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center}
  .pick-grid{display:flex;flex-direction:column;gap:12px}
  .pick{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:14px;align-items:center;text-align:left;cursor:pointer;
    background:#0f141b;border:2px solid var(--line);border-radius:14px;padding:14px;
    color:var(--ink);font-family:inherit;transition:border-color .15s,transform .06s,background .15s}
  .pick:active{transform:scale(.985)}
  .pick:hover{border-color:var(--p2)}
  .pick-ico{grid-row:1 / span 2;width:54px;height:54px;border-radius:12px;
    background:#0b0f15;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
  .pick-ico svg{width:38px;height:38px;display:block}
  .pick-name{font-weight:800;font-size:17px;align-self:end}
  .pick-desc{font-size:12px;color:var(--muted);align-self:start}

  /* ---------- Setup ---------- */
  .setup{background:var(--panel);border:1px solid var(--line);border-radius:18px;
    padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px}
  .setup h2{margin:0;font-size:16px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center}
  .pset{display:flex;flex-direction:column;gap:10px;border:2px solid var(--line);border-radius:14px;padding:14px}
  .pset .head{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14px}
  .pset .mark{font-size:20px;font-weight:800;margin-left:auto}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
  .field input[type=text]{background:#0f141b;border:1px solid var(--line);border-radius:10px;
    color:var(--ink);font:inherit;font-size:16px;padding:11px 12px;width:100%}
  .field input:focus{outline:2px solid currentColor;outline-offset:0}
  .swatches{display:flex;gap:9px;flex-wrap:wrap}
  .swatch{width:38px;height:38px;border-radius:10px;cursor:pointer;border:3px solid transparent;
    position:relative;transition:transform .06s}
  .swatch:active{transform:scale(.92)}
  .swatch.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg) inset}
  .swatch.sel::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;color:#08121f;font-weight:900;font-size:18px}

  /* ---------- Scoreboard ---------- */
  .score{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
  .pcard{background:var(--panel);border:2px solid var(--line);border-radius:14px;
    padding:10px 12px;display:flex;flex-direction:column;gap:2px;
    transition:border-color .2s, box-shadow .2s, transform .2s;min-width:0}
  .pcard .name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pcard .pts{font-size:26px;font-weight:800;line-height:1}
  .dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
  .dot.d1{background:var(--p1)} .dot.d2{background:var(--p2)}
  .pcard.c1 .name{color:var(--p1)} .pcard.c2 .name{color:var(--p2)}
  .pcard.active{box-shadow:0 0 0 2px currentColor inset, var(--shadow);transform:translateY(-2px)}
  .pcard.c1.active{border-color:var(--p1);color:var(--p1)}
  .pcard.c2.active{border-color:var(--p2);color:var(--p2)}
  .vs{display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800;font-size:13px}

  /* ---------- Board ---------- */
  .board-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;
    padding:14px;box-shadow:var(--shadow);position:relative}
  .turn{text-align:center;font-weight:700;font-size:15px;margin:0 0 12px;padding:0 30px;
    display:flex;align-items:center;justify-content:center;gap:9px;min-height:22px;flex-wrap:wrap}
  .turn .sub{color:var(--muted);font-weight:600;font-size:13px;width:100%}
  .rules-btn{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
    border:1px solid var(--line);background:#0f141b;color:var(--muted);cursor:pointer;
    font:inherit;font-weight:800;font-size:14px;line-height:1;padding:0}
  .rules-btn:active{transform:scale(.94)}
  .rules-box{display:none;background:#0f141b;border:1px solid var(--line);border-radius:10px;
    padding:10px 12px;font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 12px}
  .rules-box.show{display:block}

  /* Tic-Tac-Toe */
  #ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;aspect-ratio:1/1}
  .cell{background:#0f141b;border:2px solid var(--line);border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:clamp(38px,16vw,72px);font-weight:800;cursor:pointer;
    user-select:none;transition:background .12s,border-color .12s,transform .06s}
  .cell:active{transform:scale(.97)}
  .cell.p1{color:var(--p1)} .cell.p2{color:var(--p2)}
  .cell.win{border-color:var(--win);background:rgba(242,204,96,.15)}

  /* Connect 4 */
  #c4{background:#10243f;border-radius:14px;padding:8px;
    display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .slot{aspect-ratio:1/1;background:var(--bg);border-radius:50%;
    cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
  .disc{position:absolute;inset:8%;border-radius:50%;transform:translateY(-650%)}
  .disc.show{animation:drop .32s cubic-bezier(.34,.05,.42,1.2) forwards}
  .disc.p1{background:radial-gradient(circle at 35% 30%,#ffffff66,var(--p1))}
  .disc.p2{background:radial-gradient(circle at 35% 30%,#ffffff66,var(--p2))}
  .slot.win .disc{box-shadow:0 0 0 3px var(--win), 0 0 14px var(--win)}
  @keyframes drop{to{transform:translateY(0)}}

  /* Dots & Boxes */
  #dab{width:100%;aspect-ratio:1/1;display:block;touch-action:manipulation}

  /* Hex */
  #hex{width:100%;display:block;touch-action:manipulation}

  /* Hangman */
  #hang{display:block}
  .hang-pane{display:flex;flex-direction:column;gap:13px;align-items:center}
  .hang-big{font-size:clamp(19px,5.5vw,24px);font-weight:800;margin:0;text-align:center}
  .hang-sub{font-size:13px;color:var(--muted);margin:0;text-align:center;line-height:1.4}
  .hang-field{display:flex;gap:8px;width:100%;max-width:330px}
  #hangWord{flex:1;min-width:0;background:#0f141b;border:1px solid var(--line);border-radius:10px;
    color:var(--ink);font:inherit;font-size:18px;letter-spacing:2px;padding:12px;text-align:center}
  #hangWord:focus{outline:2px solid var(--p1);outline-offset:0}
  .hang-eye{flex:0 0 auto;background:transparent;border:1px solid var(--line);border-radius:10px;
    color:var(--muted);font:inherit;font-weight:700;font-size:13px;padding:0 14px;cursor:pointer}
  .hang-eye:active{filter:brightness(1.3)}
  .hang-hint{width:100%;max-width:330px;background:#0f141b;border:1px solid var(--line);border-radius:10px;
    color:var(--ink);font:inherit;font-size:15px;padding:11px 12px;text-align:center}
  .hang-hint:focus{outline:2px solid var(--p2);outline-offset:0}
  .hang-err{color:#ff6b6b;font-size:13px;font-weight:700;margin:0;min-height:1.1em;text-align:center}
  #hangCanvas{width:100%;max-width:240px;aspect-ratio:4/5;display:block;margin:0 auto}
  .hang-hint-show{font-size:13px;color:var(--muted);margin:0;text-align:center;min-height:1.1em}
  .hang-hint-show b{color:var(--ink);font-weight:700}
  .hang-word{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
  .hang-slot{width:26px;height:38px;display:flex;align-items:flex-end;justify-content:center;
    font-size:24px;font-weight:800;border-bottom:3px solid var(--line);padding-bottom:3px}
  .hang-slot.filled{border-bottom-color:var(--p2)}
  .hang-slot.miss{color:#ff6b6b;border-bottom-color:#ff6b6b}
  .hang-lives{font-size:13px;color:var(--muted);margin:0;letter-spacing:1px}
  .hang-keys{display:flex;flex-direction:column;gap:6px;width:100%;max-width:420px}
  .hang-row{display:flex;gap:5px;justify-content:center}
  .key{flex:1 1 0;min-width:0;height:44px;border-radius:8px;border:1px solid var(--line);
    background:#1b222c;color:var(--ink);font:inherit;font-weight:800;font-size:16px;cursor:pointer;
    transition:background .12s,transform .06s,opacity .12s;text-transform:uppercase}
  .key:active{transform:translateY(1px)}
  .key.good{background:#1f7a4d;border-color:#1f7a4d;color:#fff}
  .key.bad{background:#0d1117;color:#3a424d;border-color:#222;opacity:.55}
  .key:disabled{cursor:default}

  /* Trivia */
  #trivia{display:block}
  .triv-pane{display:flex;flex-direction:column;gap:14px;align-items:center}
  .triv-packs{display:flex;flex-direction:column;gap:10px;width:100%}
  .triv-pack{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;cursor:pointer;position:relative;
    background:#0f141b;border:2px solid var(--line);border-radius:12px;padding:14px;padding-right:42px;color:var(--ink);
    font-family:inherit;transition:border-color .15s,transform .06s,background .15s}
  .triv-pack:active{transform:scale(.99)}
  .triv-pack:hover{border-color:var(--p2)}
  .triv-pack.sel{border-color:var(--win);background:#161d2b}
  .tp-check{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:var(--win);
    font-weight:900;font-size:20px;opacity:0;transition:opacity .12s}
  .triv-pack.sel .tp-check{opacity:1}
  .tp-name{font-weight:800;font-size:16px}
  .tp-count{font-size:12px;color:var(--muted)}
  .triv-hint{font-size:12px;color:var(--muted);margin:0;text-align:center;min-height:1.1em;font-weight:700}
  .btn:disabled{opacity:.45;cursor:default;filter:grayscale(.3)}
  .triv-import{width:100%;background:#0f141b;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .triv-import summary{cursor:pointer;color:var(--muted);font-weight:700;font-size:14px;list-style:none}
  .triv-import summary::-webkit-details-marker{display:none}
  .triv-json{width:100%;min-height:120px;margin-top:10px;background:#0b0f15;border:1px solid var(--line);
    border-radius:8px;color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
    padding:10px;resize:vertical;line-height:1.4}
  .triv-json:focus{outline:2px solid var(--p2);outline-offset:0}
  .triv-import .btn{margin-top:6px}
  .triv-lives{display:flex;justify-content:space-between;gap:10px;width:100%;font-size:14px;font-weight:800}
  .triv-meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin:0;text-align:center}
  .triv-q{font-size:clamp(17px,4.8vw,21px);font-weight:800;text-align:center;margin:0;line-height:1.35;min-height:2.2em;
    display:flex;align-items:center;justify-content:center}
  .triv-opts{display:flex;flex-direction:column;gap:10px;width:100%}
  .triv-opt{width:100%;text-align:left;background:#1b222c;border:2px solid var(--line);border-radius:12px;
    padding:15px 16px;color:var(--ink);font:inherit;font-weight:700;font-size:16px;cursor:pointer;
    transition:background .12s,border-color .12s,transform .06s}
  .triv-opt:active{transform:scale(.99)}
  .triv-opt.good{background:#1f7a4d;border-color:#1f7a4d;color:#fff}
  .triv-opt.bad{background:#7a2b2b;border-color:#7a2b2b;color:#fff}
  .triv-opt:disabled{cursor:default}

  /* Checkers */
  #chk{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1/1;width:100%;max-width:440px;
    margin:0 auto;border:3px solid #20262f;border-radius:10px;overflow:hidden;touch-action:manipulation}
  .ccell{position:relative;display:flex;align-items:center;justify-content:center}
  .ccell.lite{background:#6b7689}
  .ccell.dark{background:#333b48;cursor:pointer}
  .ccell.sel{box-shadow:inset 0 0 0 3px var(--win)}
  .ccell.dest::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;
    background:var(--win);opacity:.75;pointer-events:none}
  .ccell.dest.cap::after{width:62%;height:62%;background:transparent;border:3px solid var(--win);opacity:.85}
  .cpiece{width:78%;height:78%;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:clamp(15px,5vw,26px);line-height:1;color:var(--win);
    box-shadow:0 2px 4px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -3px 5px rgba(0,0,0,.3)}
  .cpiece.cp1{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),var(--p1))}
  .cpiece.cp2{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),var(--p2))}
  .cpiece.king{box-shadow:0 2px 4px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.4), 0 0 0 2px var(--win)}

  /* ---------- Buttons ---------- */
  .btn{appearance:none;border:none;border-radius:12px;cursor:pointer;
    font-family:inherit;font-weight:800;font-size:15px;padding:13px 16px;
    color:#08121f;background:linear-gradient(180deg,#f6d36b,var(--win));
    transition:transform .06s,filter .15s;width:100%}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
  .btn.ghost:active{filter:brightness(1.2)}
  .controls{display:flex;gap:10px}
  .controls .btn{width:auto;flex:1}

  .overlay{position:absolute;inset:0;border-radius:18px;overflow:hidden;
    background:rgba(8,12,18,.82);backdrop-filter:blur(3px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:24px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s}
  .overlay.show{opacity:1;pointer-events:auto}
  .result{font-size:clamp(24px,8vw,34px);font-weight:800;margin:0}
  .overlay.show .result{animation:pop .38s cubic-bezier(.2,1.6,.4,1)}
  @keyframes pop{from{transform:scale(.55);opacity:0}}
  .confetti{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;
    pointer-events:none;animation:confetti-fall linear forwards}
  @keyframes confetti-fall{to{transform:translateY(var(--fall)) rotate(var(--rot));opacity:.25}}
  .result.draw{color:var(--muted)}
  .sub-result{font-size:14px;color:var(--muted);margin:-6px 0 0}
  .next-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin:0}
  .overlay .btn{max-width:280px}
  footer{font-size:11px;color:var(--muted);text-align:center;letter-spacing:1px}
  .hidden{display:none!important}