@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700;800&family=Press+Start+2P&display=swap');

:root { color-scheme: dark; --ink:#382546; --site-gray:#e0dfdf; --white:#fff; --periwinkle:#c7cce6; --peach:#f3b39c; --gold:#ffd75e; --violet:#5b4386; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#171126; font-family:'DM Sans',system-ui,sans-serif; }
button { font:inherit; }
.game-shell { position:relative; width:100%; height:100%; height:100dvh; overflow:hidden; touch-action:none; user-select:none; }
canvas { position:absolute; inset:0; width:100%; height:100%; }
.hud { position:absolute; z-index:3; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:max(16px,env(safe-area-inset-top)) clamp(16px,3vw,44px) 12px; pointer-events:none; color:var(--white); text-shadow:0 2px 0 #2f214a; }
.brand { display:flex; align-items:center; gap:10px; text-transform:uppercase; font-weight:800; letter-spacing:.08em; font-size:clamp(12px,1.5vw,17px); }
.brand-mark { display:grid; place-items:center; width:44px; height:34px; background:var(--site-gray); color:var(--ink); text-shadow:none; font:12px 'Press Start 2P'; box-shadow:4px 4px 0 var(--ink); transform:rotate(-3deg); }
.stats { display:flex; gap:clamp(14px,4vw,48px); }
.stats div { display:flex; flex-direction:column; align-items:center; }
.stats span { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.stats strong { color:var(--gold); font:clamp(13px,2vw,20px) 'Press Start 2P'; line-height:1.7; }
.stats div:last-child strong { color:#ff8695; letter-spacing:2px; }
.streak-meter { width:54px; height:5px; overflow:hidden; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.45); }
.streak-meter i { display:block; width:0; height:100%; background:var(--gold); transition:width .2s ease; }
.streak-stat small { margin-top:2px; color:rgba(255,255,255,.8); font-size:8px; line-height:1; }
.icon-button { pointer-events:auto; border:2px solid rgba(255,255,255,.55); border-radius:50%; width:40px; height:40px; background:rgba(36,26,53,.45); color:white; font-size:20px; cursor:pointer; }
.icon-button.muted { opacity:.45; text-decoration:line-through; }
.icon-button.active { background:var(--site-gray); color:var(--ink); border-color:var(--white); text-shadow:none; }
.hud-actions { display:flex; gap:8px; pointer-events:auto; }
.panel-wrap { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:20px; background:rgba(24,16,42,.2); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s; }
.panel-wrap.visible { opacity:1; visibility:visible; }
.panel { width:min(480px,92vw); padding:clamp(25px,5vw,48px); background:rgba(224,223,223,.97); color:var(--ink); border:4px solid var(--ink); box-shadow:10px 10px 0 rgba(199,204,230,.9); transform:translateY(15px); transition:transform .3s; }
.panel > * { max-width:100%; }
.visible .panel { transform:none; }
.eyebrow { margin:0 0 12px; color:#745c93; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
h1,h2 { margin:0; font:clamp(34px,4vw,48px)/1.1 'Press Start 2P'; letter-spacing:-.045em; text-transform:uppercase; }
h1 em,h2 em { color:var(--violet); font-style:normal; }
h2 { font-size:clamp(30px,3.8vw,46px); }
.lede { font-size:clamp(14px,2vh,17px); line-height:1.55; color:#4a3956; overflow-wrap:anywhere; }
.how-to { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.how-to div { display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.72); padding:10px; border:2px solid #b8bdd8; }
.how-to span { font-size:24px; }
.how-to p { margin:0; font-size:12px; line-height:1.35; }
.primary { width:100%; border:0; padding:16px 18px; display:flex; justify-content:space-between; background:var(--ink); color:var(--white); font-weight:800; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; box-shadow:5px 5px 0 #aeb6de; }
.primary:hover { background:#423059; transform:translate(-1px,-1px); }
.best { min-height:18px; margin:16px 0 0; text-align:center; color:#6c5978; font-size:12px; }
.final-score { display:flex; justify-content:space-between; align-items:center; margin:22px 0; padding:15px; background:rgba(255,255,255,.72); border-left:5px solid #858fbe; }
.final-score span { font-size:12px; text-transform:uppercase; font-weight:800; }
.final-score strong { font:22px 'Press Start 2P'; }
.tip { position:absolute; z-index:4; left:50%; bottom:max(26px,env(safe-area-inset-bottom)); transform:translate(-50%,25px); padding:10px 16px; border-radius:99px; background:rgba(56,37,70,.9); color:var(--white); font-size:12px; opacity:0; transition:.3s; pointer-events:none; white-space:nowrap; border:2px solid var(--periwinkle); }
.tip.show { opacity:1; transform:translate(-50%,0); }
.feedback { position:absolute; z-index:4; top:28%; left:50%; min-width:min(300px,82vw); padding:13px 18px; transform:translate(-50%,-12px) scale(.95); opacity:0; pointer-events:none; text-align:center; color:var(--white); background:rgba(56,37,70,.94); border:3px solid var(--periwinkle); box-shadow:5px 5px 0 rgba(36,26,53,.55); font-weight:800; letter-spacing:.04em; text-transform:uppercase; transition:opacity .18s,transform .18s; }
.feedback.show { opacity:1; transform:translate(-50%,0) scale(1); }
.feedback.lost { border-color:#ff8695; }
.feedback.gain { border-color:var(--gold); color:var(--gold); }
@media(max-width:600px){ .hud{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "stats stats";align-items:center;gap:6px 8px;padding:max(8px,env(safe-area-inset-top)) 10px 6px}.brand{grid-area:brand;gap:8px;font-size:10px;line-height:1.2;letter-spacing:.05em}.brand>span:last-child{display:block;max-width:72px}.brand-mark,.game-zoomed .brand-mark{width:52px;height:40px;font-size:13px;box-shadow:4px 4px 0 var(--ink)}.hud-actions{grid-area:actions;gap:6px}.icon-button{width:48px;height:48px;font-size:23px;border-width:2px}.stats{grid-area:stats;display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:6px;padding:3px 4px 5px;background:rgba(36,26,53,.25);border-radius:8px}.stats span,.game-zoomed .stats span{font-size:9px;letter-spacing:.11em}.stats strong,.game-zoomed .stats strong{font-size:18px;line-height:1.45}.streak-meter{width:64px;height:6px}.streak-stat small{font-size:9px}.feedback{top:30%;font-size:14px}.panel-wrap{padding:6px}.panel{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);overflow-y:auto;padding:27px 22px;box-shadow:5px 6px 0 rgba(199,204,230,.9)}.panel .eyebrow{font-size:12px;margin-bottom:14px;line-height:1.4}.panel h1,.panel h2{font-size:clamp(27px,8.5vw,33px);line-height:1.17;letter-spacing:-.035em;overflow-wrap:normal;word-break:keep-all}.panel .lede{font-size:17px;line-height:1.5;margin:18px 0}.how-to{margin:15px 0}.how-to div:first-child{display:none}.how-to{grid-template-columns:minmax(0,1fr)}.how-to div{min-width:0;padding:11px}.how-to span{font-size:25px}.how-to p{font-size:13px;line-height:1.4}.primary{min-width:0;padding:17px 18px;font-size:16px}.best{font-size:13px;margin-top:15px}.final-score{padding:17px;margin:22px 0}.final-score span{font-size:13px}.final-score strong{font-size:22px} }
@media(max-height:650px){ .panel{padding:20px}.lede{margin:10px 0}.how-to{margin:10px 0}h1{font-size:34px}.best{margin-top:10px} }