:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{height:100%;margin:0;background:#fff;font-family:system-ui,Arial,sans-serif;overflow:hidden;color:#111}
#c{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
#hud{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);display:flex;justify-content:space-between;padding:10px 16px;font-weight:800;font-size:20px;pointer-events:none}
#hud span{background:#fffc;border:2px solid #111;border-radius:12px;padding:2px 10px}
.ov{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#fffd}
.ov h1{font-size:clamp(40px,12vw,84px);margin:0;letter-spacing:2px;color:#111;text-shadow:3px 3px 0 #9bd23c}
.ov p{font-size:18px;max-width:420px;margin:12px 0 20px}
button{font:800 22px system-ui;padding:12px 34px;border:3px solid #111;border-radius:16px;background:#9bd23c;color:#111;cursor:pointer}
#cd{position:fixed;inset:0;display:none;align-items:center;justify-content:center;font-size:120px;font-weight:900;pointer-events:none;color:#111;text-shadow:4px 4px 0 #9bd23c}
.hide{display:none!important}
#burst{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;font:900 18px system-ui;padding:10px 20px;border:3px solid #111;border-radius:14px;background:#fff;color:#111}
#burst.rdy{animation:pul .45s infinite alternate}@keyframes pul{from{transform:scale(1)}to{transform:scale(1.14)}}
#snd{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;font-size:15px;padding:6px 14px;border-radius:12px;background:#fff;color:#111}
#lbl{width:min(92vw,380px);margin:10px 0;text-align:left}.row{display:flex;gap:8px;padding:5px 8px;border-bottom:2px solid #111;font-weight:700}.row b{margin-left:auto}.row.me{background:#9bd23c}
input,select{font:700 16px system-ui;padding:8px;border:3px solid #111;border-radius:12px;background:#fff;color:#111;max-width:46vw}
#sv{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}.sb{font-size:16px!important;padding:8px 20px!important;margin:6px}
#qend{width:min(92vw,380px);margin:4px 0}.qrow{display:flex;gap:8px;padding:5px 8px;border-bottom:2px solid #111;font-weight:700;font-size:14px;text-align:left;width:100%;box-sizing:border-box}.qrow.ok{background:#d9f7c8}
.hg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(92vw,380px)}.hb{background:#fff;border:3px solid #111;border-radius:14px;padding:6px;font:700 15px system-ui;color:#111;display:flex;flex-direction:column;align-items:center}.hb.sel{background:#9bd23c}.hb.lock{opacity:.5}
.ov{overflow:auto}
#bear{display:inline-block;margin:10px 0 4px;font:800 16px system-ui;color:#111;text-decoration:underline;text-decoration-color:#9bd23c;text-decoration-thickness:3px;text-underline-offset:4px}
.ov p.lbn{font-size:14px;margin:6px 0 0}
/* Start and end screens: auto margins centre the content but never cut it off when it is taller than the screen */
.ov>:first-child{margin-top:auto!important}.ov>:last-child{margin-bottom:auto!important}
/* Modals (MY BEST SCORES, DAILY QUESTS, HATS): dark dim over everything, opaque card in the middle */
.ov.modal{z-index:20;background:rgba(17,17,17,.9);padding:16px;justify-content:flex-start}
.card{margin:auto;width:min(100%,440px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:22px 18px 20px;background:#fff;border:3px solid #111;border-radius:22px;box-shadow:6px 6px 0 #9bd23c}
.card h1{font-size:clamp(30px,8.5vw,44px)!important;line-height:1.1}
.card #lbl,.card #ql,.card .hg{width:100%}
#ql{margin:12px 0 4px}#ql .qrow{font-size:16px}
.card p{margin:10px 0 14px;max-width:none}
.hb canvas{width:64px;height:56px}
@media (min-width:900px) and (min-height:640px){
 .card{width:600px;padding:30px 36px 28px;border-radius:26px}
 .card h1{font-size:56px!important}
 .card .row,.card .qrow{font-size:21px!important;padding:9px 12px}
 .card p{font-size:20px}.card p.lbn{font-size:17px}
 .card .hg{gap:14px}.hb{font-size:19px;padding:8px}.hb canvas{width:90px;height:79px}
}