:root{color-scheme:dark;--bg: #070910;--field: #05070c;--panel: rgba(14, 18, 27, .92);--line: #1e2635;--text: #dbe1ee;--dim: #6f7994;--accent: #ffb545;--danger: #ff5c5c;--good: #7dffa8}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(900px 600px at 50% -10%,#101726 0%,transparent 70%),var(--bg);color:var(--text);font:13px/1.55 ui-monospace,SF Mono,Menlo,monospace;overflow:hidden}#app{height:100vh;display:flex;gap:24px;align-items:center;justify-content:center}.stage{position:relative;flex:0 0 auto}canvas{display:block;background:var(--field);border:1px solid var(--line);box-shadow:0 0 0 1px #0c1018,0 24px 60px #0000008c}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#05070cd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:auto}.panel{width:100%;max-width:460px;padding:28px 30px}.panel.small{max-width:300px}.panel h1{margin:0;font-size:56px;letter-spacing:.22em;font-weight:700;color:var(--accent);text-shadow:0 0 28px rgba(255,181,69,.25)}.panel h2{margin:0 0 14px;font-size:17px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}.panel h2.win{color:var(--good)}.panel h2.lose{color:var(--danger)}.panel h3{margin:16px 0 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}.tagline{color:var(--dim);letter-spacing:.1em;margin:4px 0 26px}.lead{color:var(--dim);margin:0 0 14px}.foot{margin-top:18px;color:#4d556b;font-size:11px}ul.menu{list-style:none;margin:0;padding:0}ul.menu li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:7px 12px;border-left:2px solid transparent;color:var(--dim)}ul.menu li b{color:#59627c;font-weight:400;font-size:11px}ul.menu li.sel{color:var(--text);border-left-color:var(--accent);background:#ffb54512}ul.menu li.sel b{color:var(--accent)}ul.menu li .mk{color:var(--accent);visibility:hidden;flex:0 0 auto}ul.menu li.sel .mk{visibility:visible}ul.menu li .lb{flex:1 1 auto}ul.menu li.off{opacity:.35}p.hint{margin:12px 0 0;padding-left:14px;border-left:1px solid var(--line);color:var(--dim);font-size:11px;line-height:1.5;height:50px;overflow:hidden}p.hint:empty{border-left-color:transparent}table.keys{border-collapse:collapse;margin-bottom:16px}table.keys td{padding:3px 12px 3px 0;color:var(--dim);vertical-align:top}kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;color:var(--text);background:#121824}table.book{width:100%;border-collapse:collapse;margin-bottom:8px}table.book td{padding:3px 0;color:var(--dim)}table.book td.num{text-align:right;color:#59627c;font-size:11px}table.book tr.got td{color:var(--text)}table.book tr.got td:first-child{color:var(--accent)}.result{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin-bottom:18px}.result div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid #151b28}.result span{color:var(--dim)}.result b{font-weight:600}.hud{width:206px;flex:0 0 206px;align-self:center}.hud-top{margin-bottom:14px}.hud-top .score{font-size:22px;color:var(--accent);letter-spacing:.04em}.hud-top .sub{color:var(--dim);font-size:11px;letter-spacing:.1em}.hud-row{display:flex;justify-content:space-between;padding:2px 0}.hud-row>span:first-child{color:var(--dim)}.hud-row.dim,.hud-row.dim>span{color:#4d556b;font-size:11px}.pips{color:var(--good);letter-spacing:2px}.pips.bomb{color:var(--accent)}.pips .off{color:#2a3244}.bar{height:3px;background:#161d2b;margin:4px 0 12px}.bar>i{display:block;height:100%;background:var(--accent)}.boss{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.boss-name{color:var(--dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.spell-name{color:var(--danger);margin:2px 0 6px}.spell-name.dim{color:#4d556b}.boss-bar>i{background:var(--danger)}.clean{color:var(--good)}.dirty{color:var(--danger)}.dots{display:flex;gap:4px;margin-top:8px}.dots i{width:8px;height:8px;background:#222a3a;border-radius:50%}.dots i.sp{border-radius:1px;transform:rotate(45deg)}.dots i.done{background:#39445c}.dots i.now{background:var(--danger)}.hud-foot{margin-top:18px;color:#414a5f;font-size:11px}.dim{color:var(--dim)}