:root { --bg:#101621; --ink:#EAF2FF; --accent:#00D1FF; --ok:#5CF28E; --warn:#FFC14D; }
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto; background:var(--bg); color:var(--ink);}
#game{width:100vw;height:100vh}
.ph-ui{position:absolute; left:0; top:0; width:100%; pointer-events:none}
.lang-toggle,.voice-toggle,.repeat-btn{position:absolute; z-index:10; pointer-events:auto; background:#0e2a38; color:var(--ink);
  border:1px solid #1f5a73; border-radius:10px; padding:8px 12px; font-weight:700}
.lang-toggle{right:16px; top:12px}
.voice-toggle{right:132px; top:12px}
.repeat-btn{right:258px; top:12px}
.subtitle{position:absolute; left:50%; transform:translateX(-50%); bottom:7vh; text-align:center; width:min(92vw,1100px)}
.subtitle .en{font-size:28px; line-height:1.2; font-weight:700; text-shadow:0 2px 8px #000}
.subtitle .ru{font-size:18px; opacity:.9; margin-top:6px}
.toast{position:absolute; left:50%; transform:translateX(-50%); top:10vh; background:#0f2d2f; color:#d6fff1; padding:10px 14px; border-radius:12px; border:1px solid #1b6b6b; display:none}
.choice-bar{position:absolute; left:50%; transform:translateX(-50%); bottom:16vh; display:flex; gap:12px; pointer-events:auto}
.choice{background:#192636; color:#EAF2FF; border:2px solid #2c4d6b; border-radius:12px; padding:12px 16px; font-size:18px; cursor:pointer}
.choice.correct{border-color:var(--ok)}
.hint{position:absolute; left:16px; bottom:16px; font-size:14px; opacity:.85}
.hud{position:absolute; left:16px; top:14px; background:#0d1b28b0; border:1px solid #1e3e58; padding:8px 10px; border-radius:10px; pointer-events:none}
.panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,520px); background:#0e2233; border:1px solid #2e5f82; border-radius:16px; padding:18px; display:none; pointer-events:auto}
.panel h3{margin:0 0 10px 0}
.panel label{display:block; margin:10px 0 4px}
.panel input,.panel select{width:100%; padding:10px; font-size:16px; border-radius:10px; border:1px solid #315d7a; background:#0b1a28; color:var(--ink)}
.panel .actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
.panel button{background:#1b3850; color:var(--ink); border:1px solid #2d5a7b; border-radius:10px; padding:10px 14px; cursor:pointer}