*{box-sizing:border-box}
:root{--bg:#0b0f14;--fg:#e6e8ea;--muted:#9aa5b1;--panel:#111a24;--chip:#162232;--accent:#4cc9f0;--good:#2dd36f;--bad:#ef476f;--shadow:0 10px 30px rgba(0,0,0,.35)}
html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,'Noto Sans',Arial;background:var(--bg);color:var(--fg)}
.app{max-width:900px;margin:0 auto;padding:20px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.top h1{font-size:22px;margin:0}
.actions{display:flex;gap:8px}
button{border:1px solid transparent;background:var(--chip);color:var(--fg);padding:10px 12px;border-radius:10px;cursor:pointer}
button.primary{background:linear-gradient(135deg,var(--accent),#b5179e);color:#fff;border:none}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;background:var(--panel);padding:10px;border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px;align-items:center}
.toolbar label{display:flex;align-items:center;gap:8px}
.toolbar select{padding:8px 10px;border-radius:10px;background:var(--chip);color:var(--fg);border:1px solid #243248}
.playerTag{margin-left:auto;color:var(--muted);display:flex;gap:8px;align-items:center}
.playerTag #changeBtn{padding:6px 10px;border-radius:8px;background:#1b2a41;border:1px solid #2b3d59;color:#cfe3ff;cursor:pointer}
.playerTag #hardReset{padding:6px 10px;border-radius:8px;background:#7a2534;border:1px solid #a73a4f;color:#ffd9df;cursor:pointer}
.playerTag #changeBtn:hover{filter:brightness(1.1)}
.game{background:var(--panel);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.playfield{position:relative;height:475px;border:1px solid #1b2636;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#0f1722,#0b1420)}
.word{position:absolute;left:50%;transform:translateX(-50%);top:-50px;padding:8px 12px;border-radius:12px;background:#18243a;border:1px solid #2a3951;font-weight:700;letter-spacing:.5px}
.word.ok{background:#0f2a1a;border-color:#2c6847;color:#c9ffd8}
.word.bad{background:#2a1419;border-color:#7a2f3d;color:#ffd0d6}
.word.hit{animation:shake .2s linear 1}
@keyframes shake{0%{transform:translateX(-50%) translateY(0)}25%{transform:translateX(-48%) translateY(-1px)}50%{transform:translateX(-50%) translateY(0)}75%{transform:translateX(-52%) translateY(1px)}100%{transform:translateX(-50%) translateY(0)}}
.paraText{position:absolute;inset:12px 12px auto 12px;top:12px;bottom:auto;line-height:1.8;font-family:ui-monospace,Consolas,monospace;font-size:16px;color:#cfe3ff;display:none}
.paraText .done{opacity:.6}
.paraText .active{background:#20324a;padding:2px 4px;border-radius:6px}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:900;opacity:.2;pointer-events:none}
.comboPop{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-size:28px;font-weight:900;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s; color:#ffe066; text-shadow:0 6px 20px rgba(255, 224, 102, .35)}
.comboPop.show{opacity:1; transform:translateX(-50%) scale(1.05)}
.projectile{position:absolute;z-index:5;width:10px;height:22px;border-radius:5px;background:linear-gradient(180deg,#ffb703,#fb5607,#ff006e);box-shadow:0 0 12px rgba(255,77,0,.95),0 0 28px rgba(255,160,0,.65);transform:translate(-50%,-50%);transition:left .18s linear, top .18s linear}
.impact{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,200,0,.8), rgba(255,80,0,.0) 70%);pointer-events:none;opacity:0;animation:boom .25s ease-out 1}
@keyframes boom{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
.hud{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;color:var(--muted)}
.inputWrap{margin-top:10px}
.type{width:100%;padding:12px 14px;border-radius:10px;background:#111826;color:#cfe3ff;border:1px solid #20314a;font-size:16px}
.foot{margin-top:8px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.powerline{margin-left:auto;font-weight:600;opacity:.75}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.nameForm .stack{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.nameInput{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #243248;background:#0f1520;color:#fff}
.modePick{border:1px solid #243248;padding:8px;border-radius:10px;display:flex;gap:16px}
@media (max-width:720px){.playfield{height:300px}}