:root{
      --bg1:#09111f;
      --bg2:#14243c;
      --panel:rgba(12,22,38,.86);
      --line:rgba(255,255,255,.12);
      --text:#edf4ff;
      --muted:#9fb0c8;
      --accent:#ffd166;
      --danger:#ff6b6b;
      --good:#76e6a7;
      --cyan:#72d6ff;
    }
    *{box-sizing:border-box}
    html,body{min-height:100%}
    body{
      margin:0;
      background:
        radial-gradient(circle at 15% 15%, rgba(76,135,255,.15), transparent 28%),
        radial-gradient(circle at 85% 20%, rgba(255,209,102,.12), transparent 24%),
        linear-gradient(160deg,var(--bg1),var(--bg2));
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;
      overflow-x:hidden;
    }
    .app-shell{max-width:1180px;margin:0 auto;padding:20px}
    .title-wrap h1{font-size:clamp(1.5rem,2vw,2.2rem);font-weight:800;letter-spacing:.02em;margin:0}
    .title-wrap p{color:var(--muted);margin:.35rem 0 0}
    .glass{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:0 18px 50px rgba(0,0,0,.24);
      backdrop-filter:blur(10px);
    }
    .hud{
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:10px;
      padding:12px;
      margin:14px 0;
    }
    .stat{
      min-height:72px;
      padding:10px 12px;
      border-radius:14px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.07);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .stat-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
    .stat-value{font-size:1.35rem;font-weight:800;line-height:1.15;margin-top:4px}
    .lives{font-size:1.25rem;letter-spacing:.08em;white-space:nowrap}
    .control-panel{
      padding:12px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .control-left,.control-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    select,button{min-height:40px}
    .btn-game{
      border:0;
      border-radius:12px;
      padding:.6rem 1rem;
      font-weight:700;
    }
    .btn-start{background:var(--accent);color:#182033}
    .btn-secondary-game{background:rgba(255,255,255,.09);color:var(--text);border:1px solid rgba(255,255,255,.12)}
    .game-frame{
      position:relative;
      overflow:hidden;
      border-radius:18px;
      margin-top:14px;
      border:1px solid rgba(255,255,255,.12);
      background:#0b1423;
    }
    #gameCanvas{
      display:block;
      width:100%;
      height:auto;
      aspect-ratio:3/2;
      background:#0d1829;
    }
    .overlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:rgba(3,8,15,.60);
      backdrop-filter:blur(5px);
      z-index:5;
    }
    .overlay.hidden{display:none}
    .overlay-card{
      width:min(560px,92%);
      border-radius:20px;
      padding:24px;
      background:rgba(13,25,43,.96);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 24px 70px rgba(0,0,0,.35);
    }
    .overlay-card h2{font-weight:850;margin-bottom:.5rem}
    .overlay-card p{color:var(--muted)}
    .result-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
      margin:16px 0;
    }
    .result-item{
      padding:12px;
      border-radius:12px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.07)
    }
    .result-item small{color:var(--muted)}
    .result-item strong{display:block;font-size:1.4rem;margin-top:4px}
    .legend{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:.9rem;
      margin-top:12px;
    }
    .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px}
    .help{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.65;
      margin-top:14px;
    }
    .mini-badge{
      display:inline-flex;
      align-items:center;
      padding:.28rem .55rem;
      border-radius:999px;
      font-size:.78rem;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:var(--muted);
    }
    @media (max-width:900px){
      .hud{grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    @media (max-width:560px){
      .app-shell{padding:10px}
      .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
      .stat{min-height:62px}
      .stat-value{font-size:1.1rem}
      .result-grid{grid-template-columns:1fr}
    }

/* Results remain readable even when a round contains many review words. */
.overlay-card{max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.word-review{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(114,214,255,.04)}
.word-review h3{font-size:1.1rem;margin:0 0 8px;color:var(--accent)}
.word-review p{font-size:.85rem;line-height:1.6;margin:8px 0}
.word-review p:empty{display:none}
#reviewList{list-style:none;margin:0;padding:0}
#reviewList li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
#reviewList strong{color:var(--text);overflow-wrap:anywhere}
#reviewList span{color:#ffb4a4;font-size:.9rem}
@media(max-width:560px){
  .overlay{padding:10px}
  .overlay-card{width:100%;padding:16px}
  .game-frame:has(.overlay:not(.hidden)){min-height:520px}
  .result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .result-item{padding:8px}
}