@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;600;700&display=swap");

:root { --ink:#f4f3ff; --violet:#a98bff; --cyan:#70f7ff; --red:#ff5c7c; --bg:#080812; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-height:100%; margin:0; color:var(--ink); background:var(--bg); overscroll-behavior:none; }
body { background-image:radial-gradient(circle at 50% 40%,#201837 0,transparent 40%),linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:auto,32px 32px,32px 32px;font-family:Space Grotesk,system-ui,sans-serif; }
button,input { color:inherit; font:inherit; }
button { cursor:pointer; }
.game-shell { user-select:none;display:grid;grid-template-rows:auto auto 1fr auto;gap:16px;width:min(100%,720px);min-height:100dvh;margin:auto;padding:22px 24px 18px; }
header { display:flex;align-items:center;justify-content:space-between; }
.brand { display:flex;align-items:center;gap:10px;color:var(--ink);letter-spacing:.12em;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap; }
.brand img { width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 9px #a98bff55); }
.brand .studio-name b { color:var(--cyan); }
.brand .studio-name b,.brand .game-name { font-weight:700; }
.header-actions { display:flex;align-items:center;gap:8px; }
.mode-badge,.lock-count { border:1px solid #a98bff55;border-radius:999px;padding:9px 11px;letter-spacing:.09em;font:500 11px DM Mono,monospace;white-space:nowrap; }
.mode-badge { color:var(--cyan); }
.lock-count { color:var(--violet); }
.lock-count b { display:none; }
.sound { border:1px solid #ffffff2b;border-radius:999px;background:#0004;padding:9px 12px;letter-spacing:.09em;font:500 11px DM Mono,monospace; }
.scorebar { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-block:1px solid #ffffff1f;padding:12px 0; }
.scorebar>div:last-child { text-align:right; }
.scorebar .round { text-align:center; }
.scorebar small { display:block;color:#9693a5;letter-spacing:.13em;font:500 10px DM Mono,monospace; }
.scorebar strong { display:block;margin-top:2px;font:500 21px DM Mono,monospace; }
.arena { touch-action:manipulation;cursor:pointer;display:grid;place-items:center;position:relative;min-height:420px;overflow:hidden; }
canvas { position:absolute;inset:0;width:100%;height:100%; }
.overlay { z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;width:min(92%,410px);text-align:center; }
.eyebrow { margin:-28px 0 32px;color:var(--cyan);letter-spacing:.17em;font:500 11px DM Mono,monospace; }
.overlay h1 { margin:0;letter-spacing:-.07em;font-size:clamp(48px,13vw,80px);font-weight:700;line-height:.8; }
.overlay h1 em { color:var(--violet);font-style:normal;text-shadow:0 0 30px #a98bff4d; }
.overlay>p:not(.eyebrow) { max-width:330px;margin:22px 0;color:#a09daa;font-size:14px;line-height:1.5; }
.mode-picker { pointer-events:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100%,340px);margin-bottom:13px; }
.mode-picker button { min-height:48px;padding:9px 11px;color:#aaa6b8;background:#090912d9;border:1px solid #ffffff25;border-radius:3px;text-align:left; }
.mode-picker b,.mode-picker small { display:block; }
.mode-picker b { letter-spacing:.08em;font-size:11px; }
.mode-picker small { margin-top:2px;color:#777384;letter-spacing:.04em;font:500 8px DM Mono,monospace; }
.mode-picker button.selected { color:#0b0714;background:var(--violet);border-color:var(--violet);box-shadow:0 0 26px #a98bff33; }
.mode-picker button.selected small { color:#2b2147; }
.mode-picker button.completed:not(.selected)::after { content:" ✓";color:var(--cyan); }
.overlay .primary,.overlay .secondary { pointer-events:auto;display:flex;justify-content:space-between;align-items:center;width:220px;padding:15px 17px;border:0;border-radius:2px;letter-spacing:.08em;font-size:12px;font-weight:700; }
.primary { color:#0a0712;background:var(--violet);box-shadow:0 0 34px #a98bff38; }
.secondary { color:var(--ink);background:#090912cc;border:1px solid #ffffff2d!important;box-shadow:none; }
.primary span,.secondary span { font-size:18px; }
.end-actions { pointer-events:auto;display:grid;gap:8px;width:230px; }
.end-actions button { width:100%; }
.controls { margin-top:12px;color:#85818f;letter-spacing:.12em;font:500 10px DM Mono,monospace; }
.daily-reminder { pointer-events:auto;margin-top:11px;padding:0;color:#918d9d;background:transparent;border:0;letter-spacing:.08em;text-decoration:none;font:500 8px DM Mono,monospace; }
.daily-reminder:hover { color:var(--cyan); }
.daily-reminder[data-state="enabled"] { color:var(--cyan); }
.daily-count { margin-top:9px;color:var(--cyan);letter-spacing:.1em;font:500 9px DM Mono,monospace; }
.feedback { z-index:3;pointer-events:none;display:grid;place-items:center;text-align:center;animation:feedback .75s ease-out both; }
.feedback strong { color:var(--cyan);letter-spacing:-.05em;text-shadow:0 0 32px #70f7ffaa;font-size:clamp(54px,14vw,86px);line-height:.85; }
.feedback span { margin-top:15px;color:#fff;letter-spacing:.14em;font:700 18px DM Mono,monospace; }
.feedback.miss strong { color:var(--red);text-shadow:0 0 32px #ff5c7c99; }
.result-card { width:230px;margin-bottom:11px;padding:10px 14px;background:#090912e8;border:1px solid #a98bff55;border-radius:4px;box-shadow:0 0 28px #a98bff1a; }
.result-card small { display:block;color:var(--cyan);letter-spacing:.14em;font:500 9px DM Mono,monospace; }
.result-card strong { display:block;margin:2px 0;letter-spacing:.02em;font:700 28px DM Mono,monospace; }
.result-card span { display:block;letter-spacing:.08em;font-size:20px;line-height:1; }
.share-name { pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;width:230px;margin-bottom:8px; }
.share-name span { color:#85818f;letter-spacing:.09em;text-align:left;font:500 8px DM Mono,monospace; }
.share-name input { width:120px;padding:7px 9px;color:var(--ink);background:#ffffff0a;border:1px solid #ffffff26;border-radius:2px;outline:none;font:500 10px DM Mono,monospace; }
.share-name input:focus { border-color:#a98bff99;box-shadow:0 0 0 2px #a98bff17; }
footer { display:flex;justify-content:space-between;gap:12px;color:#918d9d;letter-spacing:.07em;font:500 10px DM Mono,monospace; }
footer span::before { content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--violet); }
@keyframes feedback { 0%{opacity:0;transform:scale(.45)} 30%{opacity:1;transform:scale(1.08)} 100%{opacity:0;transform:scale(1.25)} }
@media (width<=520px) { .game-shell{gap:10px;padding:18px 18px 14px}.brand{min-width:0;gap:8px;letter-spacing:.1em;font-size:13px}.brand img{width:38px;height:38px}.brand .studio-name,.brand .brand-divider{display:none}.brand .game-name{color:var(--ink)}.header-actions{gap:5px}.mode-badge,.lock-count{padding:8px 9px;font-size:9px}.lock-count span{display:none}.lock-count b{display:inline;font-weight:500}.sound{display:none}.arena{min-height:400px}.overlay>p:not(.eyebrow){margin:17px 0}footer{display:grid;gap:4px;font-size:9px}.scorebar{padding:9px 0} }
@media (height<=720px) { .game-shell{padding-block:12px}.arena{min-height:340px}.eyebrow{margin:-18px 0 24px}.overlay h1{font-size:50px}.overlay>p:not(.eyebrow){margin:13px 0}.mode-picker{margin-bottom:9px}.mode-picker button{min-height:42px;padding-block:6px}.scorebar{padding:7px 0} }