:root{--bg:#08111f;--panel:#101d31;--panel2:#172844;--ink:#f8fafc;--muted:#a8b7cc;--orange:#f97316;--yellow:#facc15;--green:#34d399;--red:#fb7185;--blue:#38bdf8;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,rgba(56,189,248,.12),transparent 32%),linear-gradient(160deg,#07101d,#101b31 55%,#1d1733);color:var(--ink);font-family:"Segoe UI","Microsoft JhengHei",system-ui,sans-serif}
button,select{font:inherit}
button{cursor:pointer}
.topbar{max-width:1180px;margin:auto;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.back{color:#fff;text-decoration:none;font-weight:800;border:1px solid var(--line);border-radius:999px;padding:9px 15px;background:rgba(255,255,255,.05)}
.game-title{text-align:center;padding:16px 20px 24px}
.game-title .emoji{font-size:54px;display:block;margin-bottom:4px}
.game-title h1{margin:0;font-size:clamp(34px,6vw,64px);line-height:1.1}
.game-title p{max-width:720px;margin:12px auto 0;color:var(--muted);font-size:17px;line-height:1.7}
.shell{max-width:1180px;margin:auto;padding:0 22px 54px}
.panel{border:1px solid var(--line);border-radius:24px;background:rgba(16,29,49,.9);box-shadow:0 24px 55px rgba(0,0,0,.25)}
.setup{padding:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end;margin-bottom:18px}
.field{display:grid;gap:7px}.field label,.field .label{font-size:13px;font-weight:900;color:#cbd5e1;letter-spacing:.04em}
select{width:100%;border:1px solid var(--line);border-radius:13px;background:#0b1729;color:#fff;padding:12px}
.mode-row{display:flex;gap:8px;flex-wrap:wrap}
.mode-button{border:1px solid var(--line);background:#0b1729;color:#cbd5e1;border-radius:12px;padding:10px 13px;font-weight:800}
.mode-button.active{background:#0ea5e9;color:#fff;border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.14)}
.start{border:0;border-radius:14px;padding:13px 22px;background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;font-weight:950;box-shadow:0 10px 24px rgba(249,115,22,.3)}
.scorebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.score{padding:13px 15px;border:1px solid var(--line);border-radius:16px;background:rgba(16,29,49,.88);text-align:center}
.score b{display:block;font-size:clamp(22px,4vw,38px);color:var(--yellow);line-height:1.15}.score span{font-size:12px;color:var(--muted);font-weight:800}
.playfield{position:relative;overflow:hidden;min-height:440px;padding:20px}
.message{position:absolute;inset:0;z-index:20;display:grid;place-items:center;text-align:center;background:rgba(3,8,18,.82);backdrop-filter:blur(8px);padding:24px}
.message[hidden]{display:none}.message-box{max-width:620px}.message h2{font-size:clamp(28px,5vw,52px);margin:0 0 12px}.message p{color:#d6e2f2;font-size:17px;line-height:1.7}.message .start{font-size:18px;margin-top:8px}
.keys{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}.key{min-width:42px;padding:7px 10px;border-radius:9px;background:#e2e8f0;color:#0f172a;font-weight:950;box-shadow:inset 0 -3px 0 #94a3b8}
.note{margin-top:16px;padding:14px 16px;border-left:4px solid var(--orange);background:rgba(15,23,42,.7);color:#cbd5e1;border-radius:10px;line-height:1.65;font-size:13px}
.result-list{display:grid;gap:7px;margin:14px auto;max-width:480px}.result-row{display:flex;justify-content:space-between;gap:18px;padding:10px 13px;border-radius:10px;background:rgba(255,255,255,.08)}
@media(max-width:820px){.setup{grid-template-columns:1fr 1fr}.scorebar{grid-template-columns:1fr 1fr}.playfield{min-height:400px}}
@media(max-width:520px){.topbar,.shell{padding-left:13px;padding-right:13px}.setup{grid-template-columns:1fr}.scorebar{gap:7px}.score{padding:10px 7px}.playfield{padding:12px;min-height:390px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}