@font-face{font-family:Pixel;src:url('/assets/PressStart2P-Regular.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;background:#26092e;color:#fff2c6;font-family:Pixel,monospace}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%}
body{overflow:hidden}
/* A definite height keeps percentage anchors stable in mobile Safari.
   dvh follows the visible space when browser toolbars expand or collapse. */
.scene{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;height:100dvh;overflow:hidden;background:#26092e}
.texture{position:absolute;inset:0;z-index:-1;background-image:url('/assets/indie-road-poster.png');background-size:auto 400%;background-position:center top}
/* Source crop windows: logo (0,535,941,520), ending (0,1458,941,120).
   Background positioning avoids intrinsic img height / transformed-image clipping. */
.brand{--art-width:min(100vw,1100px);position:absolute;width:var(--art-width);height:calc(var(--art-width) * 520 / 941);left:50%;top:46.9%;transform:translate(-50%,-50%);background-image:url('/assets/indie-road-poster.png');background-size:100% auto;background-repeat:no-repeat;background-position:center 46.440972%;animation:float 4s steps(4,end) infinite}
.continuation{--ending-width:min(100vw,650px);position:absolute;width:var(--ending-width);height:calc(var(--ending-width) * 120 / 941);right:max(2.4vw,env(safe-area-inset-right));bottom:max(7.3%,calc(env(safe-area-inset-bottom) + 62px));background-image:url('/assets/indie-road-poster.png');background-size:100% auto;background-repeat:no-repeat;background-position:center 93.943299%;animation:continue 2.8s steps(2,end) infinite}
.controls{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:calc(env(safe-area-inset-bottom) + 10px)}
button{min-width:120px;min-height:44px;padding:12px 10px;background:transparent;color:#d7bdd4;border:1px solid transparent;font:9px/1.6 Pixel,monospace;letter-spacing:.03em;cursor:pointer;touch-action:manipulation}
button:hover{color:#fff2c6}button:focus-visible{outline:2px solid #fc5b88;outline-offset:3px}button[aria-pressed=true]{color:#ff6b96}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 5px))}}
@keyframes continue{0%,80%,100%{transform:translateX(0)}90%{transform:translateX(4px)}}
@media(max-width:600px){.brand{--art-width:100vw;top:47.6%}.continuation{--ending-width:100vw;right:0;bottom:max(7%,calc(env(safe-area-inset-bottom) + 62px))}.controls{left:max(14px,env(safe-area-inset-left))}}
@media(max-height:500px) and (orientation:landscape){.brand{--art-width:min(68vw,125dvh,720px);top:43%}.continuation{--ending-width:min(55vw,460px);bottom:max(7%,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.brand,.continuation{animation:none}}