@font-face{font-family:CabinSketch;src:url(fonts/cabinsketch.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:PatrickHand;src:url(fonts/patrickhand.woff) format('woff');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:#25332E;color:#F2EFE6;font-family:PatrickHand,"Comic Sans MS",cursive;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:50%;transform:translateX(-50%);width:min(100vw,calc(var(--hudw,960px) + 20px));display:flex;gap:6px;align-items:center;padding:calc(18px + env(safe-area-inset-top)) 6px 6px;font:20px PatrickHand,cursive;z-index:5}
#hud span{padding:2px 10px;border:2px solid rgba(242,239,230,.55);border-radius:14px 4px 12px 5px/5px 12px 4px 14px;white-space:nowrap;text-shadow:0 0 3px rgba(242,239,230,.4)}
#h-lv{color:#F6E27A}#h-x{color:#F49AC1;letter-spacing:2px}#h-st{border:none!important;color:#A8E6A1;margin-right:auto}#h-st:empty{padding:0}
.ib{width:40px;height:40px;flex:none;border:2px solid rgba(242,239,230,.7);border-radius:50% 45% 52% 48%;background:rgba(0,0,0,.18);color:#F2EFE6;font:20px PatrickHand,cursive;cursor:pointer}
.ib:active{transform:scale(.94)}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-.4deg);width:min(94vw,540px);max-height:92vh;overflow:auto;background:rgba(30,42,37,.94);border:3px solid rgba(242,239,230,.75);border-radius:255px 18px 225px 18px/18px 225px 18px 255px;box-shadow:0 0 0 6px rgba(107,69,39,.9),0 12px 40px rgba(0,0,0,.5);padding:18px 20px;text-align:center;z-index:10}
h1{font:700 clamp(48px,13vw,78px)/.9 CabinSketch,"Comic Sans MS",cursive;color:#F2EFE6;text-shadow:0 0 6px rgba(242,239,230,.35);margin:4px 0 4px;transform:rotate(-2deg)}
h1 span{color:#F49AC1}
h2{font:700 34px CabinSketch,cursive;margin-bottom:6px;color:#F6E27A;text-shadow:0 0 5px rgba(246,226,122,.35)}
.ver{font-size:13px;opacity:.6}
.small{font-size:16px;margin:8px 0;line-height:1.3;opacity:.95}
a{color:#8FD3F4}
.panel button:not(.lv){display:block;width:100%;margin:8px 0;padding:9px;font:22px PatrickHand,cursive;background:transparent;color:#F2EFE6;border:2px solid rgba(242,239,230,.8);border-radius:15px 225px 15px 255px/255px 15px 225px 15px;cursor:pointer;text-shadow:0 0 3px rgba(242,239,230,.4)}
.panel button:not(.lv):hover{background:rgba(242,239,230,.07)}
#btn-daily{color:#F6E27A!important;border-color:#F6E27A!important}#btn-endless{color:#F49AC1!important;border-color:#F49AC1!important}#btn-next{color:#A8E6A1!important;border-color:#A8E6A1!important}
.panel button:active{transform:scale(.98)}
.row{display:flex;gap:8px}.row button{flex:1}
.lang.on{background:rgba(143,211,244,.18)!important;color:#8FD3F4!important;border-color:#8FD3F4!important}
#levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:12px 0}
.lv{aspect-ratio:1.6;min-width:0;border:2px solid rgba(242,239,230,.7);border-radius:12px 4px 10px 6px/6px 10px 4px 12px;background:transparent;font:22px PatrickHand,cursive;color:#F2EFE6;cursor:pointer;line-height:1;padding:2px}
.lv small{display:block;font-size:12px;color:#F6E27A;margin-top:2px}
.lv.cur{border-color:#F6E27A;box-shadow:0 0 8px rgba(246,226,122,.45)}
.lv:disabled{opacity:.28;cursor:default}
.stars{font-size:40px;color:#F6E27A;letter-spacing:4px;margin:4px 0}
.quip{font-style:italic;color:#8FD3F4;margin:10px 0}
#o-stats{font-size:18px}
#quip,#coach{position:fixed;left:50%;top:var(--quy,60%);transform:translate(-50%,-100%);max-width:min(88vw,620px);padding:8px 14px;border:2px dashed rgba(242,239,230,.6);border-radius:18px 6px 18px 6px;background:rgba(27,38,34,.92);font:19px/1.25 PatrickHand,cursive;text-align:center;z-index:6;pointer-events:none}
#quip{color:#F2EFE6}
#coach{color:#F6E27A;border-color:#F6E27A;border-style:solid;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 14px rgba(246,226,122,.35)}}
@media (max-height:520px){.panel{max-height:96vh;padding:10px 14px}h1{font-size:42px}#levels{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.lv{aspect-ratio:1}}
body.short #quip{top:var(--qby);transform:translate(-50%,-50%);font-size:16px;max-width:min(60vw,520px);padding:4px 12px}
@media (max-width:430px){#hud{font-size:16px;gap:4px}#hud span{padding:2px 6px}.ib{width:36px;height:36px;font-size:18px}}