*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10051e}
body{display:grid;place-items:center;font-family:ui-rounded,'Arial Rounded MT Bold',Arial,Helvetica,sans-serif;color:#fff;overscroll-behavior:none}
.game{position:relative;width:min(100vw,56.28svh);aspect-ratio:941/1672;overflow:hidden;background:#160728;box-shadow:0 0 110px #3c15704d;touch-action:none;user-select:none}
.screen,.poster,canvas{position:absolute;inset:0;width:100%;height:100%}
.poster{object-fit:fill}
.screen[hidden],[hidden]{display:none!important}
.poster-button{position:absolute;border:0;background:transparent;color:transparent;font-size:0;cursor:pointer;border-radius:100px;transition:background .15s}
.poster-button:hover{background:#fff2}
.poster-button:focus-visible{outline:3px solid #fff8df;outline-offset:4px}
.poster-button:disabled{cursor:wait}
.start-button{left:21.3%;top:82.05%;width:57.4%;height:6.4%}
.end-button{left:18.6%;top:88.6%;width:63%;height:7.15%}
.hud{position:absolute;top:2.5%;left:4.8%;right:4.4%;display:flex;align-items:center;justify-content:space-between;font-size:clamp(10px,2.45svh,24px);font-weight:900;pointer-events:none;white-space:nowrap;text-shadow:0 2px 3px #0005}
.score-label,.lives-label{display:flex;align-items:center;justify-content:center;gap:.3em;height:5.2svh;max-height:52px;border:2px solid #60308099;border-radius:100px;background:linear-gradient(125deg,#211031b3,#130624c9);box-shadow:inset 0 1px 8px #7e4fb522}
.score-label{width:38%;padding:0 .65em 0 .18em}
.hud strong{font-size:1.16em;font-variant-numeric:tabular-nums;min-width:1.35em}
.elf-badge{position:relative;flex:0 0 1.9em;height:2em;overflow:hidden;margin-left:-.12em}
.elf-badge::before{content:'';position:absolute;width:5.8em;height:2.9em;left:-.53em;top:-.22em;background:url('assets/sprites-winter.png') 0 0/100% 100% no-repeat}
.lives-label{width:41%;padding:0 .65em;gap:.3em}
#lives{display:inline-flex;align-items:center;gap:.09em;color:#ff302c;font-size:1.28em;line-height:1;flex-shrink:0}
.heart{display:block;width:1em;height:1em;flex:0 0 1em;fill:url(#heart-fill);stroke:#ff7972;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #9b001b88)}
.heart[data-active="false"]{fill:transparent;stroke:#c84873}
.result{position:absolute;top:81.4%;left:16%;width:68%;height:5.8%;margin:0;color:white;text-align:center;font-weight:800;font-size:clamp(11px,2.35svh,26px);line-height:1.25;text-shadow:0 2px 5px #160523;white-space:nowrap}
.result strong{color:#28e5f7;font-weight:900}
#pause{position:absolute;left:47.25%;top:3.35%;border:1px solid #a97bd75c;border-radius:50%;width:5.5%;aspect-ratio:1;color:#ead5ff;background:#27103e9c;cursor:pointer;font-size:clamp(9px,1.35svh,15px);font-weight:bold;padding:0}
.pause-panel{position:absolute;inset:0;background:#130621df;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;backdrop-filter:blur(7px)}
.pause-panel h1{font-size:clamp(22px,4svh,36px);margin:0}
.pause-panel p{color:#dbbbea}
.green-button{background:linear-gradient(110deg,#ff9d00,#ff7400);border:0;padding:17px 24px;border-radius:40px;color:#160800;font-size:18px;font-weight:bold;cursor:pointer;box-shadow:0 3px 20px #ff840030}
.sr-only{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}
button{touch-action:manipulation}button:focus-visible{outline:3px solid #ffd68c;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none}}