/* Beatland Games · shared shell for the quick games: dark violet scene, Max Adventures buttons, HUD, start / menu / end screens */
:root { --o:#34107f; --os:#2a0f6b; --lime:#4efa50; --sun:#ffd84a; --pink:#ff5fae; --c1:#ff7a45; --s1:#b8431a; --c2:#e0a800; --s2:#8a6500; --c3:#ec4899; --s3:#9d1a5c; --cx:#8b5cf6; --sx:#4c1d95; --ink:#2b1b5e; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { background:radial-gradient(120% 80% at 50% 0%,#4a2aa8 0%,#2a1670 40%,#140838 100%) fixed; color:#fff; font:500 1rem/1.4 Fredoka,"Trebuchet MS",system-ui,sans-serif; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.5px) 0 0/14px 14px; opacity:.45; pointer-events:none; }
button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; } a { color:inherit; } img { display:block; max-width:100%; }
:focus-visible { outline:3px solid var(--lime); outline-offset:2px; border-radius:12px; }
.hidden, [hidden] { display:none !important; }

/* layout: HUD on top, the board fills the rest */
.ar { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); gap:10px; }
.hud { width:min(100%,560px); display:flex; align-items:center; gap:8px; flex:none; }
.hud .chip { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; background:linear-gradient(180deg,#7a43e6,#3f1a99); border:3px solid var(--o); box-shadow:0 4px 0 var(--os),inset 0 2px 0 rgba(255,255,255,.4); font:700 clamp(15px,4.2vw,20px)/1 Fredoka,sans-serif; text-shadow:0 2px 0 var(--os); white-space:nowrap; font-variant-numeric:tabular-nums; }
.hud .chip.t { margin-left:auto; } .hud .chip.t.low { background:linear-gradient(180deg,#ff8ab8,#d11f7a); animation:pulse 1s infinite; } @keyframes pulse { 50% { transform:scale(1.05); } }
.hud .chip.b { background:linear-gradient(180deg,#fff2b8,#ffd84a); color:#4a3100; text-shadow:none; }
.rb { width:46px; height:46px; border-radius:50%; border:3px solid var(--o); background:radial-gradient(120% 120% at 30% 18%,#e6c6ff 0%,#a45cff 42%,#6428d6 100%); box-shadow:0 5px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.6),inset 0 -5px 0 rgba(60,10,140,.35); display:grid; place-content:center; gap:5px; flex:none; padding:0; color:#fff; font-size:18px; text-shadow:0 2px 0 var(--os); }
.rb:active { transform:translateY(4px); box-shadow:0 1px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.6); }
.rb i { display:block; width:22px; height:5px; border-radius:6px; background:linear-gradient(180deg,#f0ff9a,#59e83a); border:2px solid var(--o); }
.board { flex:1; min-height:0; width:min(100%,560px); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.msg { position:absolute; left:50%; top:12%; transform:translateX(-50%); padding:8px 20px; border-radius:999px; background:rgba(13,6,48,.85); border:2px solid rgba(255,255,255,.2); font:700 clamp(18px,5vw,26px)/1 Fredoka,sans-serif; color:var(--lime); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s,transform .2s; z-index:4; }
.msg.on { opacity:1; transform:translateX(-50%) translateY(-6px); }
.ar.go .hud { visibility:visible; } .hud { visibility:hidden; }

/* buttons */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 32px; border-radius:999px; border:3px solid var(--o); font:700 clamp(18px,5vw,24px)/1 Fredoka,sans-serif; letter-spacing:.04em; text-decoration:none; box-shadow:0 6px 0 var(--os),0 12px 20px rgba(10,0,50,.45),inset 0 3px 0 rgba(255,255,255,.7); transition:transform .1s; white-space:nowrap; }
.pill.g { background:linear-gradient(180deg,#f0ff9a 0%,#a6ff4a 36%,#42e22b 100%); color:#1b0a55; } .pill.g.big { padding:18px 48px; font-size:clamp(24px,7vw,34px); }
.pill.v { background:linear-gradient(180deg,#dcb1ff 0%,#9d52ff 44%,#6a2bd9 100%); color:#fff; text-shadow:0 2px 0 var(--os); }
.pill.w { background:linear-gradient(180deg,#fff,#e8deff 60%,#cfc0f5); color:#2a1a66; }
.pill.sm { padding:10px 20px; font-size:16px; }
.pill:active { transform:translateY(4px); box-shadow:0 2px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.7); }

/* screens */
.screen { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:20px; background:radial-gradient(120% 90% at 50% 40%,rgba(30,14,90,.72),rgba(14,6,44,.92)); overflow:auto; }
.screen .wm { font-size:clamp(1.5rem,6vw,2.2rem); }
.screen h1 { font:700 clamp(46px,13vw,88px)/.95 Fredoka,sans-serif; letter-spacing:-.01em; text-shadow:0 6px 0 var(--sx),0 14px 30px rgba(0,0,0,.55); } .screen h1 em { font-style:normal; color:#caff6a; }
.screen p { max-width:480px; font-size:clamp(17px,4.6vw,22px); text-shadow:0 2px 10px rgba(0,0,0,.7); }
.screen .art { display:flex; gap:16px; align-items:flex-end; justify-content:center; } .screen .art img { height:clamp(64px,16vw,110px); width:auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)); animation:floatS 4s ease-in-out infinite; } .screen .art img:nth-child(2) { animation-delay:-1.3s; } .screen .art img:nth-child(3) { animation-delay:-2.6s; }
@keyframes floatS { 50% { transform:translateY(-10px) rotate(2deg); } }
.screen .best { font-size:16px; color:#d9ceff; } .screen .back { font-size:16px; color:#d9ceff; text-decoration:underline; }
.screen .how { display:grid; gap:8px; max-width:420px; text-align:left; font-size:clamp(15px,4vw,18px); color:#e6ddff; } .screen .how b { color:var(--lime); }
.panel { width:min(340px,88vw); display:grid; gap:10px; padding:22px; border-radius:30px; background:linear-gradient(180deg,#5b2fc4,#2f1380); border:3px solid var(--o); box-shadow:0 8px 0 var(--os),0 24px 44px rgba(0,0,0,.55),inset 0 3px 0 rgba(255,255,255,.3); }
.panel h2 { font:700 32px/1 Fredoka,sans-serif; text-shadow:0 3px 0 var(--os); margin-bottom:4px; }
.mi { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-radius:999px; border:3px solid var(--o); background:linear-gradient(180deg,#dcb1ff 0%,#9d52ff 44%,#6a2bd9 100%); color:#fff; text-shadow:0 2px 0 var(--os); font:700 19px Fredoka,sans-serif; text-decoration:none; text-align:left; box-shadow:0 5px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.5); }
.mi.primary { justify-content:center; background:linear-gradient(180deg,#f0ff9a 0%,#a6ff4a 36%,#42e22b 100%); color:#1b0a55; text-shadow:none; }
.mi b { background:var(--lime); color:#0d2a0e; border-radius:999px; padding:4px 12px; font-size:14px; text-shadow:none; } .mi b.off { background:rgba(0,0,0,.35); color:#fff; }
.mi:active { transform:translateY(3px); box-shadow:0 2px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.5); }
.stats { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .stats div { padding:10px 18px; border-radius:18px; background:rgba(13,6,48,.6); border:2px solid rgba(255,255,255,.18); min-width:92px; } .stats b { display:block; font-size:clamp(24px,7vw,34px); line-height:1; color:var(--sun); text-shadow:0 3px 0 #7a4d00; } .stats span { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#d9ceff; }
.confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:20; } .confetti span { position:absolute; top:-20px; border-radius:3px; animation:fall linear forwards; } @keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion:reduce) { .screen .art img, .hud .chip.t.low { animation:none; } }