@font-face{font-family:Lilita One;font-display:swap;src:url(fonts/lilita-one-latin-400-normal.woff2) format("woff2")}:root{--basalt: #1d1917;--stone: #f7eedc;--ember: #f6a13a;--ink: #2b211c;--shadow: .2cqw .2cqw 0 #2b211c}*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;place-items:center;background:var(--basalt);color:var(--stone);font-family:Lilita One,Trebuchet MS,sans-serif;overflow:hidden}#frame{position:relative;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16 / 9;container-type:inline-size;overflow:hidden}#canvas,#canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hidden{display:none!important}#hud{position:absolute;inset:1.2cqw 1.4cqw auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.hud-left{display:grid;gap:.4cqw}.hud-left,#score{transition:opacity .15s}.faded{opacity:.3}#hearts{display:flex;gap:.3cqw}.heart{position:relative;width:4.4cqw;aspect-ratio:1;background:url(assets/ui_heart_empty.webp) center / contain no-repeat}.heart i{position:absolute;inset:0;background:url(assets/ui_heart_full.webp) center / contain no-repeat;transition:clip-path .25s}#streak{display:flex;gap:.28cqw;padding-left:.5cqw}#streak i{width:.9cqw;aspect-ratio:1;border-radius:50%;background:#2b211ca6;border:.1cqw solid var(--stone)}#streak i.on{background:var(--ember)}.plate{border-style:solid;border-width:1.5cqw 1.1cqw;border-image:url(assets/ui_panel.webp) 48 32 48 32 fill stretch}#score{margin-right:1cqw;padding:0 1cqw;font-size:2.4cqw;line-height:1.2;font-variant-numeric:tabular-nums}#score.nudge{animation:nudge .22s}@keyframes nudge{25%{transform:translate(-.5cqw)}75%{transform:translate(.5cqw)}}.floater{position:absolute;transform:translate(-50%,-50%);font-size:2.4cqw;color:#ffe27a;text-shadow:var(--shadow);pointer-events:none;animation:float-up .8s ease-out forwards}@keyframes float-up{to{transform:translate(-50%,-300%);opacity:0}}#toast{position:absolute;top:7cqw;left:50%;transform:translate(-50%);padding:.5cqw 1.6cqw;border-radius:.8cqw;background:#2b211ce0;font-size:2.2cqw;white-space:nowrap;opacity:0;pointer-events:none}#toast.show{animation:toast 2.2s forwards}@keyframes toast{10%,80%{opacity:1}to{opacity:0}}#menu,#setup,.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:1cqw}#menu{padding-top:1.6cqw;background:#1d191780}#menu h2{font-size:3.4cqw}#setup{padding-top:1.6cqw}#setup h1{font-size:6cqw}#back{position:absolute;top:1.2cqw;left:1.4cqw;min-width:11cqw}#modes{display:flex;gap:2.6cqw;margin-top:.6cqw}.game-card{display:grid;justify-items:center;gap:.4cqw;width:37cqw;padding:0 0 1.2cqw;overflow:hidden;color:var(--stone);background:var(--ink);border:.5cqw solid var(--stone);border-radius:1.4cqw;font:inherit;cursor:pointer;transition:transform .14s,border-color .14s}.game-card:hover,.game-card:focus-visible{transform:translateY(-.5cqw) scale(1.02);border-color:var(--ember);outline:none}.game-card img{display:block;width:100%;aspect-ratio:16 / 9}.game-card strong{font-size:3.2cqw;font-weight:400;color:#ffe27a}.game-card span{font-size:1.9cqw}.overlay{justify-content:center;background:#1d19179e}h1,h2,p{margin:0;text-align:center;font-weight:400}h1{font-size:7.4cqw;line-height:1;letter-spacing:.04em;color:var(--stone);text-shadow:.1cqw .1cqw 0 var(--ink),.5cqw .5cqw 0 var(--ink)}h2{font-size:5cqw;text-shadow:.35cqw .35cqw 0 var(--ink)}.howto,#final-score,#final-best{font-size:2.3cqw;-webkit-text-stroke:.3cqw var(--ink);paint-order:stroke fill}#final-score{font-size:3.6cqw;color:#ffe27a}.row{display:flex;gap:1.2cqw;justify-content:center}button.stone{min-width:15cqw;padding:0 1.2cqw;color:var(--stone);background:none;font:inherit;font-size:2.2cqw;line-height:1.1;cursor:pointer;border-style:solid;border-width:1.5cqw 1.1cqw;border-image:url(assets/ui_panel.webp) 48 32 48 32 fill stretch;transition:transform .12s,filter .12s}button.stone:hover{transform:translateY(-.2cqw);filter:brightness(1.35)}button.stone:focus-visible{outline:.25cqw solid var(--ember);outline-offset:-1cqw}button.stone.start{color:#ffe27a}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--basalt);font-size:3cqw}#loading.hidden{display:none}#mute{position:absolute;right:1.4cqw;bottom:1.2cqw;width:3.2cqw;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:#2b211cbf;cursor:pointer}#mute:before{content:"";position:absolute;inset:22%;background:var(--stone);clip-path:polygon(0 32%,28% 32%,62% 0,62% 100%,28% 68%,0 68%)}#mute.off:after{content:"";position:absolute;left:12%;right:12%;top:46%;height:8%;background:var(--ember);transform:rotate(-45deg)}
