:root{--void:#000;--cyan:#00d2d2;--cyan-deep:#009a9a;--magenta:#e23d8a;--magenta-deep:#a01e5c;--gold:#ffe14a;--ink:#000;--paper:#fff;--font-arcade:"Press Start 2P", ui-monospace, monospace}*{box-sizing:border-box}html,body{background:var(--void);height:100%;color:var(--paper);font-family:var(--font-arcade);touch-action:none;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#app{flex-direction:column;height:100svh;display:flex;position:relative}#title{z-index:5;text-align:center;background:#000000c7;place-content:center;place-items:center;margin:0;display:grid;position:absolute;inset:0;overflow:hidden}#title:before,#banner:before{content:"";pointer-events:none;opacity:.35;background:repeating-linear-gradient(#0000 0 2px,#00000038 2px 3px);position:absolute;inset:0}#title>:not(#title-mark),#banner>*{z-index:1;position:relative}#title.hidden{display:none}#title-mark{opacity:.5;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.tuto{aspect-ratio:1;width:min(78vw,420px);overflow:visible;transform:rotate(-12deg)}.tuto-shape{fill:#00c8d0;fill-opacity:0;stroke:#f0f;stroke-width:8px;stroke-linejoin:miter;stroke-linecap:square;stroke-dasharray:240;stroke-dashoffset:240px;animation:3.6s linear infinite tuto-stroke,3.6s linear infinite tuto-fill}.tuto-pawn{fill:var(--paper)}.tuto-pawn-wrap{transform-box:view-box;transform-origin:0 0;animation:3.6s linear infinite tuto-pawn}@keyframes tuto-stroke{0%{stroke-dashoffset:240px}54%,92%{stroke-dashoffset:0}to{stroke-dashoffset:240px}}@keyframes tuto-pawn{0%{transform:translate(20%,80%)}13.5%{transform:translate(20%,20%)}27%{transform:translate(80%,20%)}40.5%{transform:translate(80%,80%)}54%,92%{transform:translate(20%,80%)}to{transform:translate(20%,80%)}}@keyframes tuto-fill{0%,54%{fill-opacity:0}64%,92%{fill-opacity:.8}to{fill-opacity:0}}@media (prefers-reduced-motion:reduce){.tuto-shape,.tuto-pawn-wrap{animation:none}.tuto-shape{stroke-dashoffset:0;fill-opacity:.45}.tuto-pawn-wrap{transform:translate(20%,80%)}}#title-name{font-family:var(--font-arcade);letter-spacing:.08em;color:var(--paper);text-shadow:-3px 0 0 var(--cyan), 3px 0 0 var(--magenta), 0 5px 0 var(--ink);font-size:clamp(38px,18vw,68px);font-weight:400;line-height:1;position:relative}#title-actions{flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px;display:flex;position:relative}#title-actions button,#banner-share,#banner-home{font-family:var(--font-arcade);letter-spacing:.04em;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:0;font-weight:400;transform:translateY(0)}#title-actions button:active,#banner-share:active,#banner-home:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}#title-actions button{color:var(--ink);background:var(--cyan);padding:14px 18px;font-size:clamp(11px,3.2vw,14px)}#title-actions button#play-versus{color:var(--paper);background:var(--magenta)}#app.is-title #hud{display:none}#game{flex:1;width:100%;min-height:0;display:block;position:relative}#hud{z-index:2;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;font-family:var(--font-arcade);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase;color:var(--paper);pointer-events:none;text-shadow:2px 2px 0 var(--ink);background:#000;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;font-size:16px;line-height:1.4;display:flex;position:relative}#banner{z-index:3;text-align:center;padding:32px 22px calc(28px + env(safe-area-inset-bottom));background:#0000009e;place-content:center;place-items:center;gap:14px;margin:0;display:none;position:absolute;inset:0}#banner.visible{display:grid}#banner.level-clear #banner-title{font-size:clamp(28px,11vw,52px)}#banner-title{font-family:var(--font-arcade);letter-spacing:.06em;color:var(--paper);text-shadow:-2px 0 0 var(--cyan), 2px 0 0 var(--magenta), 0 5px 0 var(--ink);font-size:clamp(22px,7vw,40px);font-weight:400;line-height:1.25;position:relative}#banner-stats{font-family:var(--font-arcade);color:var(--cyan);text-shadow:0 3px 0 var(--ink);word-break:break-all;max-width:92vw;font-size:clamp(10px,3vw,16px);font-weight:400;position:relative}#banner-stats:empty{display:none}#banner-recap{font-family:var(--font-arcade);color:var(--paper);text-shadow:0 3px 0 var(--ink);gap:6px;margin:18px 0 0;padding:0;font-size:clamp(10px,3vw,14px);font-weight:400;list-style:none;display:grid}#banner-recap:empty{display:none}#banner-recap li span{color:var(--gold);margin-right:.35em}#banner-hint{max-width:92vw;font-family:var(--font-arcade);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);padding:0 8px;font-size:12px;line-height:1.7;position:relative}#banner-hint:empty{display:none}#banner-invite{gap:10px;width:min(92vw,420px);margin-top:8px;padding:6px;display:none}#banner.has-invite #banner-invite{display:grid}#banner-link{box-sizing:border-box;border:3px solid var(--ink);background:var(--void);width:100%;min-height:52px;color:var(--cyan);font-family:var(--font-arcade);letter-spacing:.01em;text-align:center;word-break:break-all;pointer-events:auto;caret-color:#0000;box-shadow:inset 0 0 0 2px var(--cyan-deep);border-radius:0;margin:0;padding:14px 16px;font-size:10px;font-weight:400}#banner-link:focus{box-shadow:inset 0 0 0 2px var(--gold);outline:none}#banner-share{min-height:52px;color:var(--ink);background:var(--gold);pointer-events:auto;margin:0;padding:14px 18px;font-size:clamp(10px,3vw,12px)}#banner-home{color:var(--paper);background:var(--magenta-deep);pointer-events:auto;margin-top:18px;padding:8px 22px;font-size:clamp(16px,4vw,22px);display:none}#banner.has-home #banner-home{display:inline-block}#banner-title:empty{display:none}#banner-ranks{font-family:var(--font-arcade);letter-spacing:.04em;text-shadow:0 4px 0 var(--ink);gap:2px;margin:4px 0 0;padding:0;font-weight:400;line-height:1.25;list-style:none;display:none}#banner.has-ranks #banner-ranks{display:grid}#banner-ranks li{font-size:clamp(14px,5vw,22px)}#banner-ranks li:first-child{margin-bottom:6px;font-size:clamp(18px,7vw,32px)}#banner.has-winner{background:color-mix(in srgb, var(--winner) 38%, #000000b8)}#banner.end #banner-title{font-family:var(--font-arcade);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-shadow:2px 2px 0 var(--ink);font-size:clamp(10px,3.2vw,14px);font-weight:400}#banner.end #banner-stats{letter-spacing:.04em;color:var(--paper);text-shadow:-2px 0 0 var(--cyan), 2px 0 0 var(--magenta), 0 5px 0 var(--ink);font-size:clamp(22px,8vw,40px);font-weight:400}#banner.end #banner-hint{margin-top:36px}#hud-score{color:var(--gold)}#hud-lives.hud-pips{align-items:center;gap:5px;display:flex}#hud-lives.hud-pips i{background:var(--paper);width:12px;height:12px;box-shadow:2px 2px 0 var(--ink)}#shout{z-index:4;pointer-events:none;text-align:center;place-content:center;place-items:center;margin:0;display:none;position:absolute;inset:0}#shout.visible{animation:.85s ease-out both shout-pop;display:grid}#shout-tier{font-family:var(--font-arcade);letter-spacing:.06em;color:var(--paper);text-shadow:-3px 0 0 var(--cyan), 3px 0 0 var(--magenta), 0 6px 0 var(--ink);font-size:clamp(16px,6vw,28px);font-weight:400;line-height:1.2}#shout-pts{font-family:var(--font-arcade);color:var(--gold);text-shadow:0 3px 0 var(--ink);margin-top:8px;font-size:clamp(12px,4vw,18px);font-weight:400}#shout-up:empty{display:none}#shout-up{font-family:var(--font-arcade);letter-spacing:.08em;color:var(--gold);text-shadow:0 4px 0 var(--ink);margin-top:6px;font-size:clamp(12px,4vw,20px);font-weight:400}@keyframes shout-pop{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1.08)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}
