@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-800-normal.woff2) format("woff2")}:root{--night: #1d3f6e;--ink: #1e1b3a;--white: #ffffff;--sun: #ffd84a;--panel: rgb(30 27 58 / .78);--line: #8f7dff}*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;place-items:center;background:var(--night);color:var(--white);font-family:"Baloo 2",Trebuchet MS,sans-serif;font-weight:800;overflow:hidden}#frame{position:relative;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16 / 9;container-type:inline-size;overflow:hidden}#canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hidden{display:none!important}#hud{position:absolute;inset:1.2cqw 1.6cqw auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none}#hearts{justify-self:start}#letters{justify-self:end}#hearts{display:flex;gap:.4cqw}#hearts i{width:4.4cqw;aspect-ratio:1;background:url(assets/ui_heart_full.webp) center / contain no-repeat;transition:transform .2s}#hearts i.lost{background-image:url(assets/ui_heart_empty.webp);transform:scale(.86)}.pill{padding:0 2.2cqw;border:.3cqw solid var(--ink);border-radius:2.4cqw;background:var(--white);color:var(--ink);font-size:2.9cqw;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap}#letters{display:flex;align-items:center;gap:.8cqw;padding:0 1.6cqw 0 .9cqw}#letters i{width:3.6cqw;aspect-ratio:1;background:url(assets/ui_envelope.webp) center / contain no-repeat}#letters.bump i{animation:bump .25s}@keyframes bump{40%{transform:scale(1.35)}}#toast{position:absolute;top:6.6cqw;left:50%;transform:translate(-50%);padding:0 1.8cqw;border-radius:1.2cqw;background:var(--sun);color:var(--ink);font-size:2.2cqw;line-height:1.5;white-space:nowrap;opacity:0;pointer-events:none}#toast.show{animation:toast 2.6s forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%) scale(.8)}8%,82%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(1)}}#menu,.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:1.2cqw}#menu{justify-content:center;background:#1d3f6eb3}.overlay{justify-content:center;background:#1d3f6ee0}h1,h2,p{margin:0;text-align:center}h1{font-size:10cqw;line-height:1;letter-spacing:.06em;color:var(--sun);text-shadow:0 .5cqw 0 #c8641f,0 1cqw 0 var(--ink)}h2{font-size:5cqw;line-height:1.1;text-shadow:0 .4cqw 0 var(--ink)}.howto{font-size:2.6cqw;line-height:1.3}.tip{margin-top:.4cqw;font-size:1.9cqw;opacity:.92}kbd{display:inline-block;min-width:2.6cqw;padding:0 .6cqw;margin:0 .15cqw;border-radius:.5cqw;background:var(--white);color:var(--ink);box-shadow:0 .3cqw #9a93c9;font:inherit;line-height:1.35;text-align:center}#final-score{font-size:4cqw;color:var(--sun)}#final-best{font-size:2.4cqw}.row{display:flex;gap:1.6cqw;justify-content:center;margin-top:.6cqw}button.key{min-width:17cqw;padding:.2cqw 2cqw 0;border:0;border-radius:1.3cqw;background:var(--white);color:var(--ink);box-shadow:0 .7cqw #9a93c9;font:inherit;font-size:3cqw;line-height:1.6;cursor:pointer;transition:transform .1s,box-shadow .1s}button.key.go{background:var(--sun);box-shadow:0 .7cqw #c8801c}button.key:hover{transform:translateY(-.2cqw)}button.key:active{transform:translateY(.5cqw);box-shadow:0 .2cqw #9a93c9}button.key:focus-visible{outline:.35cqw solid #5fdcf5;outline-offset:.3cqw}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--night);font-size:3cqw}#mute{position:absolute;right:1.6cqw;bottom:1.4cqw;width:3.2cqw;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--panel);cursor:pointer}#mute:before{content:"";position:absolute;inset:22%;background:var(--white);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(--sun);transform:rotate(-45deg)}