@font-face{font-family:Bangers;src:url(fonts/bangers.woff) format('woff');font-display:swap}
@font-face{font-family:ComicNeue;src:url(fonts/comicneue.woff) format('woff');font-weight:700;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#F4ECD8;color:#1A1A1A;font-family:ComicNeue,"Comic Sans MS",Arial,sans-serif;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud{position:fixed;top:0;left:0;right:0;display:flex;gap:6px;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 10px 6px;font:20px Bangers,Impact,sans-serif;letter-spacing:1px;z-index:5}
#hud span{background:#FFFDF6;border:3px solid #1A1A1A;padding:3px 9px;box-shadow:3px 3px 0 #1A1A1A;white-space:nowrap}
#h-lv{background:#F5C518!important}#h-burn{color:#E63B7A;margin-right:auto}
.ib{width:42px;height:42px;flex:none;border:3px solid #1A1A1A;background:#00A3E0;color:#FFFDF6;font:22px Bangers,Impact,sans-serif;cursor:pointer;box-shadow:3px 3px 0 #1A1A1A}
.ib:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1A1A1A}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-.6deg);width:min(94vw,540px);max-height:94vh;overflow:auto;background:#FFFDF6 radial-gradient(#00A3E033 1.6px,transparent 1.8px) 0 0/9px 9px;border:5px solid #1A1A1A;box-shadow:9px 9px 0 #1A1A1A;padding:18px;text-align:center;z-index:10}
h1{font:clamp(48px,13vw,76px)/.86 Bangers,Impact,sans-serif;letter-spacing:3px;color:#F5C518;-webkit-text-stroke:2px #1A1A1A;text-shadow:4px 4px 0 #E63B7A,7px 7px 0 #1A1A1A;margin:4px 0 6px;transform:rotate(-3deg)}
h1 span{color:#00A3E0}
h2{font:36px Bangers,Impact,sans-serif;letter-spacing:2px;margin-bottom:6px;color:#E63B7A;-webkit-text-stroke:1px #1A1A1A;text-shadow:3px 3px 0 #1A1A1A}
.ver{font-size:12px;opacity:.6}
.small{font-size:14px;margin:8px 0;line-height:1.35}
a{color:#E63B7A}
.panel button:not(.lv){display:block;width:100%;margin:8px 0;padding:11px;font:22px Bangers,Impact,sans-serif;letter-spacing:1.5px;background:#00A3E0;color:#FFFDF6;border:3px solid #1A1A1A;cursor:pointer;box-shadow:4px 4px 0 #1A1A1A;text-shadow:2px 2px 0 #1A1A1A}
#btn-daily{background:#E63B7A!important}#btn-endless{background:#F5C518!important;color:#1A1A1A!important;text-shadow:none!important}
.panel button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #1A1A1A}
.row{display:flex;gap:8px}.row button{flex:1}
.lang{background:#FFFDF6!important;color:#1A1A1A!important;text-shadow:none!important}.lang.on{background:#F5C518!important}
#levels{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:12px 0}
.lv{aspect-ratio:1.25;border:3px solid #1A1A1A;background:#FFFDF6;font:22px Bangers,Impact,sans-serif;color:#1A1A1A;cursor:pointer;line-height:1;padding:2px;box-shadow:3px 3px 0 #1A1A1A}
.lv small{display:block;font-size:12px;color:#E63B7A;margin-top:2px;font-family:Arial,sans-serif}
.lv:disabled{opacity:.3;cursor:default;box-shadow:none}
.lv.cur{background:#F5C518}
.stars{font-size:44px;color:#F5C518;letter-spacing:6px;-webkit-text-stroke:2px #1A1A1A}
.quip{font-style:italic;margin:10px 0;font-size:15px;background:#F5C518;border:3px solid #1A1A1A;padding:8px}
#quip{position:fixed;left:50%;top:var(--qy,40%);transform:translateX(-50%) rotate(-1deg);max-width:min(88vw,560px);background:#F5C518;color:#1A1A1A;border:3px solid #1A1A1A;box-shadow:4px 4px 0 #1A1A1A;padding:7px 12px;font-size:15px;z-index:6;text-align:left;text-transform:uppercase;pointer-events:none}
#coach{position:fixed;left:50%;top:var(--cy,30%);transform:translateX(-50%);width:max-content;max-width:min(90vw,560px);background:#FFFDF6;color:#1A1A1A;border:4px solid #E63B7A;box-shadow:4px 4px 0 #1A1A1A;padding:8px 14px;font-size:16px;z-index:7;text-align:center;pointer-events:none}