:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#060d13;touch-action:none}#canvas{display:block;position:fixed;left:0;top:0;outline:none;border:0;visibility:hidden}#canvas.is-playing{visibility:visible}
#startup{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#060d13;overflow:hidden;isolation:isolate}
#startup-frame{position:relative;width:min(100%,60svh,480px);height:min(100svh,960px);max-height:100%;container-type:inline-size;background:#102536 url('backdrop.jpg') center/cover no-repeat;overflow:hidden}
#startup-frame::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#03101a22,transparent 30%,transparent 65%,#03101a66 88%,#03101aaa)}
#brand{position:absolute;left:5%;top:8%;width:90%;height:17%;object-fit:contain;filter:drop-shadow(0 4px 0 #07111a) drop-shadow(0 4px 12px #0009)}
#edition{position:absolute;top:25%;width:100%;display:flex;justify-content:center;gap:3px}
.ink{display:flex;align-items:center;justify-content:center;gap:1px;min-height:24px;filter:drop-shadow(0 2px 2px #000b)}.ink img{height:22px;width:22px;object-fit:contain}.ink.small img{height:16px;width:16px}.ink.dark{filter:none}.ink.dark img{filter:brightness(0);height:28px;width:28px}#edition img{height:20px;width:20px}
#startup-action{position:absolute;left:8%;right:8%;bottom:max(10%,var(--safe-bottom));display:grid;gap:10px;align-items:center}
#load-status{display:flex;justify-content:space-between;align-items:center;min-height:26px}#load-stage{justify-content:flex-start}#load-percent{justify-content:flex-end}#load-percent img{width:18px;height:22px}
#route-progress{position:relative;width:100%;aspect-ratio:4.3;--progress:0}
#track{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}
#energy-window{position:absolute;left:8%;right:8%;top:27%;height:46%;clip-path:inset(0 calc((1 - var(--progress))*100%) 0 0)}
#energy{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 0 5px #24e7ff)}
#blade-cursor{position:absolute;left:calc(8% + var(--progress)*84%);top:50%;width:17%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 8px #12c9e7aa)}
#blade-cursor img{display:block;width:100%;animation:blade-spin 2s linear infinite}
#route-progress.indeterminate #energy-window{clip-path:inset(0 100% 0 0)}
#start-panel{display:grid;gap:10px;justify-items:center}#start-hint{display:none}#begin-button,#retry-button{display:block;position:relative;width:100%;min-height:64px;aspect-ratio:907/333;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:4px}
.button-plate{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 5px 6px #0006)}.button-label{position:absolute;inset:0}
#begin-button:hover .button-plate,#retry-button:hover .button-plate{filter:brightness(1.12) drop-shadow(0 5px 6px #0006)}#begin-button:active,#retry-button:active{transform:translateY(3px) scale(.985)}#begin-button:focus-visible,#retry-button:focus-visible{outline:3px solid #77efff}#begin-button:disabled{cursor:wait;opacity:.55}
#startup-tagline{position:absolute;bottom:max(4.8%,calc(var(--safe-bottom) + 12px));width:100%;opacity:.88}.word-space{width:10px;display:inline-block}
#error-panel{display:grid;gap:10px}#error-copy{flex-wrap:wrap}#startup [hidden]{display:none!important}
#startup[data-phase=ready] #start-panel{animation:reveal .35s ease-out}#startup[data-phase=ready] #brand{filter:drop-shadow(0 4px 0 #07111a) drop-shadow(0 0 15px #20d4ff33)}
#startup.is-exiting{opacity:0;transition:opacity .22s ease;pointer-events:none}
@keyframes blade-spin{to{transform:rotate(360deg)}}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:600px){#brand{top:5%}#edition{top:23%}#startup-action{bottom:10%;gap:4px}.ink img{height:18px;width:18px}.ink.dark img{height:24px;width:24px}#startup-tagline{bottom:3%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep generated lettering inside the plate's plain inner face, including
   short landscape windows where the portrait startup frame becomes narrow. */
.button-label{inset:14% 15%;gap:1px}
.ink.dark img{width:min(28px,6.5cqw);height:min(28px,6.5cqw);flex:none}
#load-status{gap:8px}
#load-stage img{width:min(16px,6cqw);height:min(16px,6cqw);flex:none}
#load-percent img{width:min(18px,5.5cqw);height:min(22px,6.5cqw);flex:none}