/* One viewport, one arena. Touch controls only occupy space on touch devices. */
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#102c30;color:#f5eed7;font-family:system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ffe0a2;outline-offset:-3px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}#app{height:var(--app-height,100dvh);width:100%;margin:auto;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);position:relative;background:#102e32}header{height:52px;flex:none;display:flex;align-items:center;gap:12px;padding:5px max(16px,env(safe-area-inset-left));background:#0c272bef;border-bottom:1px solid #d0dbc018;z-index:5}.home,header button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #c9d9c222;border-radius:12px;background:#ffffff06;text-decoration:none;color:#efe4c7;font-size:22px}.chapter{display:grid;gap:2px}.chapter small{font-size:9px;color:#aac9c2;letter-spacing:1.5px}.chapter strong{font-size:14px}.header-actions{display:flex;gap:6px;margin-left:auto}#stage{flex:1;min-height:0;position:relative;overflow:hidden;background:#72a2a0}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}#hud{position:absolute;inset:0;pointer-events:none}.vitals{position:absolute;top:16px;left:20px;display:grid;gap:7px}#hearts{color:#ffe6c2;font-size:20px;letter-spacing:2px;text-shadow:0 2px 5px #152e43}.stamina{display:block;width:112px;height:5px;background:#17353c99;border-radius:9px;overflow:hidden}.stamina i{display:block;height:100%;background:#92f0d4;width:100%}.counter-focus{display:flex;gap:5px;height:9px}.counter-focus i{width:18px;height:5px;transform:skewX(-20deg);border:1px solid #ffe0a57a;background:#163f4499}.counter-focus[data-charge="1"] i:first-child,.counter-focus[data-charge="2"] i:nth-child(-n+2){background:#ffe3a0;box-shadow:0 0 6px #ffd07499}.boss-health{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:clamp(104px,24%,280px);text-align:center}.boss-health small{font-size:11px;text-shadow:0 2px 5px #102a37}.boss-health>div{height:7px;background:#1a373a99;margin-top:7px;border-radius:5px;overflow:hidden}#boss-life{display:block;height:100%;background:linear-gradient(90deg,#ea9570,#ffda98);transition:width .18s}.score{position:absolute;top:14px;right:20px;display:grid;text-align:right}.score b{font-size:23px;font-variant-numeric:tabular-nums}.score span{font-size:11px;color:#ffde7f;min-height:14px}.journey{position:absolute;bottom:10px;left:25%;width:50%;height:3px;background:#12373755;border-radius:3px}.journey i{display:block;height:100%;background:#fae2a4}.journey span{position:absolute;right:-22px;top:-6px;font-size:10px}#encounter{position:absolute;top:53px;left:50%;transform:translateX(-50%);font-size:10px;color:#f8edcf;text-shadow:0 1px 5px #092f32;pointer-events:none;white-space:nowrap}.menu-open #encounter{display:none}#cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;text-align:center;background:#123d3de6;border:1px solid #d1e1c32a;border-radius:20px;padding:7px 14px;font-size:12px;pointer-events:none}#cue:empty{display:none}#feedback{position:absolute;top:23%;left:50%;transform:translateX(-50%);font-size:clamp(22px,3vw,36px);font-weight:900;color:#fff2b3;text-shadow:0 3px 0 #296368,0 0 20px #123737;pointer-events:none;max-width:95%;text-align:center}
#overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;padding:24px clamp(24px,6vw,100px);background:linear-gradient(90deg,#0a2b34f5,#123c40a6 44%,#173c4100 85%);overflow-y:auto}.menu{width:min(430px,100%);position:relative;flex:none;max-height:100%;margin-block:auto}.eyebrow{font-size:10px;letter-spacing:2px;color:#cad9be}h1{font-size:clamp(38px,5.2vw,66px);letter-spacing:-2px;line-height:1.08;margin:12px 0 16px}h1 em{font-style:normal;color:#ffdc92}#description{line-height:1.6;color:#cee0d5;font-size:13px;margin:0 0 18px;word-break:keep-all}.difficulty{display:flex;gap:8px}.difficulty button{flex:1;padding:10px 14px;border:1px solid #adcabe44;background:#0b292f99;border-radius:12px;text-align:left;font-size:14px;font-weight:750}.difficulty small{display:block;color:#b0c6bd;font-size:10px;margin-top:5px;font-weight:400}.difficulty [aria-pressed=true]{border-color:#f2d08c;background:#77846a33;box-shadow:inset 0 0 0 1px #f2d08c33}.chapters{display:flex;gap:7px;margin:12px 0 18px}.chapters button{flex:1;background:#0e30374d;border:1px solid #d7dcb71a;border-radius:10px;padding:8px 0;color:#a6c0b4;font-size:10px}.chapters span{display:block;margin:4px 0 0;font-size:12px}.chapters [aria-pressed=true]{border-color:#d3bc7c;color:#ffe5aa;background:#a6b78412}.primary{width:100%;border:1px solid #ffeac0;background:linear-gradient(#f9dfa4,#e7be70);color:#253c35;border-radius:14px;font-weight:850;padding:14px;box-shadow:0 4px 0 #8f743d66,0 8px 25px #081c2c55;font-size:17px}.primary:active{transform:translateY(2px)}.secondary{width:100%;margin-top:10px;padding:10px;border:1px solid #ffffff44;background:#173c3b;border-radius:10px}.instructions{display:flex;justify-content:space-between;gap:10px;margin-top:18px;font-size:10px;color:#aec8bd}.instructions span{line-height:1.6}.instructions b{display:block;font-size:12px;color:#efddb4}#record{display:block;margin-top:12px;font-size:10px;color:#9dbbb0}.keyboard{margin:0;padding:9px 12px;flex:none;text-align:center;font-size:11px;color:#aac3b9;background:#0c272b;border-top:1px solid #d0dbc018}.menu-open .keyboard,.menu-open #controls{display:none!important}
#controls{height:154px;flex:none;padding:10px max(24px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:flex;align-items:flex-end;justify-content:space-between;gap:14px;background:linear-gradient(#173f41,#102e32);border-top:1px solid #b8d5bd22;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.move-pad{position:relative;width:106px;height:106px;flex:none;border:1px solid #bfe6d847;border-radius:50%;background:radial-gradient(circle,#4e827271,#174241 65%);box-shadow:inset 0 5px 13px #071e294d;touch-action:none}.stick-ring{position:absolute;inset:12px;border:1px solid #abcabb2b;border-radius:50%;pointer-events:none}.stick-knob{position:absolute;left:50%;top:50%;width:50px;height:50px;border:1px solid #b0cda277;border-radius:50%;transform:translate(calc(-50% + var(--stick-x,0px)),-50%);background:linear-gradient(145deg,#658e75,#2f5a51);box-shadow:0 4px 8px #081f274f,inset 0 2px #def0c144;pointer-events:none}.engaged .stick-knob{background:linear-gradient(145deg,#a7c690,#53856e)}#controls button{display:flex;align-items:center;justify-content:center;flex-direction:column;touch-action:none;overflow:hidden}#controls svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}#controls .move-pad button{position:absolute;top:0;width:50%;height:100%;background:none;box-shadow:none;border:0;color:#d7ecc7;z-index:1}#controls .move-pad [data-action=left]{left:0;border-radius:100px 0 0 100px}#controls .move-pad [data-action=right]{right:0;border-radius:0 100px 100px 0}#controls .move-pad svg{width:18px;height:21px}.action-pad{position:relative;width:182px;height:124px;flex:none}#controls .action-pad button{position:absolute;border:1px solid #a0c2b266;border-radius:50%;box-shadow:0 4px 0 #061e2766,inset 0 2px #e9f8d933;margin:0}#controls .attack{right:0;bottom:0;width:78px;height:78px;background:radial-gradient(circle at 40% 25%,#ffe9a3,#d4a955 75%);color:#294136}#controls .cape{left:0;bottom:0;width:74px;height:74px;background:radial-gradient(circle at 35% 25%,#447d70,#214f4d);color:#d1f8df}#controls .dodge{left:67px;top:0;width:50px;height:50px;background:radial-gradient(circle at 35% 25%,#3e6b79,#193f4d);color:#d1edee}#controls span{font-size:10px;margin-top:3px;font-weight:750}#controls .dodge svg{width:22px;height:22px}#controls button.held{filter:brightness(1.3);transform:translateY(2px)}#controls .cape[aria-pressed=true]{border-color:#e5ffd0;box-shadow:0 0 15px #75edbb55}#controls button i{position:absolute;bottom:0;left:0;height:3px;background:#ffdda3;pointer-events:none}
#stage::after{content:'';position:absolute;inset:0;background:#173d3a;opacity:0;pointer-events:none;transition:opacity .4s;z-index:2}.stage-exit #stage::after{opacity:1}.menu[data-kind=clear]{max-width:390px;padding:24px;border:1px solid #d9d5a044;border-radius:24px;background:linear-gradient(145deg,#143e40ee,#102e32f5);box-shadow:0 18px 50px #09232866}.menu[data-kind=clear] h1{font-size:30px;letter-spacing:-1px;margin:12px 0 20px}#description:empty{display:none}.route-destination{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #bdd8bd22}.route-destination img{width:68px;height:78px;object-fit:contain}.route-destination div{display:grid;gap:7px}.route-destination small{font-size:10px;color:#9dbeb3}.route-destination strong{font-size:22px}.route-destination>span{font-size:30px;color:#e8d69c;margin-left:auto}#route-stats{display:flex;justify-content:space-around;padding:18px 0;color:#9bbab0;font-size:10px;text-align:center}#route-stats span{display:grid;gap:5px}#route-stats b{font-size:23px;color:#f4e3b9}.menu[data-kind=clear] #record{text-align:center}
@media(min-width:900px) and (hover:hover) and (pointer:fine){#controls{display:none}#app{max-width:none}}
@media(max-width:899px),(hover:none),(pointer:coarse){.keyboard{display:none}}
@media(max-width:650px){header{height:48px;padding-inline:12px;gap:9px}.home,header button{width:34px;height:34px}.chapter strong{font-size:13px}.chapter small{font-size:8px}#overlay{padding:22px;background:linear-gradient(90deg,#0c303aed,#123a3d99)}h1{font-size:46px;margin:12px 0}#description{font-size:12px}.menu{width:100%}.vitals{top:12px;left:12px}#hearts{font-size:15px;letter-spacing:0}.stamina{width:80px}.boss-health{top:13px;width:110px}.score{top:11px;right:12px}.score b{font-size:18px}#encounter{font-size:9px;top:48px}#cue{font-size:10px;bottom:23px}.journey{left:20%;width:60%}#feedback{top:22%}.keyboard{font-size:9px}}
@media(max-width:360px){#controls{padding-inline:14px;gap:10px;height:148px}.move-pad{width:96px;height:96px}.action-pad{width:176px}#overlay{padding:16px}h1{font-size:39px}.header-actions{gap:4px}.home,header button{width:31px}}
@media(max-height:620px){#overlay{padding-block:12px}h1{font-size:38px;margin:8px 0}#description{margin-bottom:10px}.instructions{margin-top:12px}.chapters{margin:8px 0 12px}.primary{padding:11px}#record{margin-top:9px}}
@media(orientation:landscape) and (max-height:540px){header{height:42px}#controls{position:relative;inset:auto;height:112px;background:linear-gradient(#173f41,#102e32);z-index:3;border:0;padding:8px 5%}.move-pad{width:90px;height:90px}.action-pad{height:100px;width:222px}#controls .cape{left:61px;width:66px;height:66px}#controls .attack{width:72px;height:72px}#controls .dodge{left:0;top:0}#overlay{padding:12px 6%;background:linear-gradient(90deg,#0c303aef,#123a3d77)}.menu{width:560px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;align-items:center}.eyebrow{grid-column:1}h1{grid-column:1;font-size:36px;margin:0}h1 br{display:none}h1 em{margin-left:.15em}#description{grid-column:1;font-size:11px;margin:0}#choices{grid-column:2;grid-row:1/4}.primary{grid-column:2}.instructions{grid-column:1;grid-row:4;margin:0;font-size:8px}.instructions b{font-size:10px}#record{display:none}.menu[data-kind]{display:block;width:370px;padding:16px}.menu[data-kind] h1{margin:8px 0}.menu[data-kind=clear]{max-width:560px;width:560px}#route-card{display:flex;align-items:center;gap:20px;margin:8px 0}.route-destination{border:0;padding:0}.route-destination img{width:42px;height:48px}.route-destination strong{font-size:17px}#route-stats{padding:0;flex:1;gap:10px}.journey{bottom:8px}#cue{bottom:20px;max-width:45%}}
@media(prefers-reduced-motion:reduce){#stage::after,#boss-life{transition:none}}

.flow-meter{display:flex;align-items:center;gap:3px;font-size:8px;color:#f6dfaa}.flow-meter i{height:3px;width:10px;background:#17373d99;border:1px solid #e8d29b55}.flow-meter i.lit{background:#ffe3a0;box-shadow:0 0 5px #ffd07466}.flow-meter span{margin-right:3px}.flow-active .flow-meter{color:#fff4bc}