:root{color-scheme:dark;--gold:#e5c788;--mint:#8affd2;--ink:#102d34}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#091b23;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#f1ead6;touch-action:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:none}button:focus-visible{outline:2px solid #aeffe8;outline-offset:4px}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#overlay{pointer-events:none}#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #03101680}#hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.identity{display:flex;gap:12px;align-items:center}.crest{width:50px;height:50px;border:1px solid #cfb679;background:linear-gradient(135deg,#37615e,#122a32);display:grid;place-items:center;font-size:37px;color:var(--gold);transform:rotate(0deg);border-radius:12px 2px}.hero-name{font-weight:600;font-size:15px;letter-spacing:2px;text-shadow:0 2px 3px #000}.hero-name span{font-size:12px;color:var(--gold);margin-left:8px}.health{width:190px;height:16px;background:#07181cec;border:1px solid #6d897b80;position:relative;margin-top:7px;overflow:hidden;transform:skewX(-10deg)}.health i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#28836c,#8aebbb);transition:width .15s}.health b{position:absolute;inset:0;text-align:center;font-size:10px;line-height:14px;font-weight:500;letter-spacing:1px;text-shadow:0 1px 2px #000}.energy{height:4px;width:190px;background:#10354b;margin-top:3px;transform:skewX(-10deg)}.energy i{display:block;width:100%;height:100%;background:#78b9e0}.match{text-align:center;background:linear-gradient(90deg,transparent,#071a25c9,transparent);padding:0 28px 10px;min-width:190px;font-size:16px;letter-spacing:3px}.match-sub{margin-top:7px;font-size:12px;color:#d1ddd8;letter-spacing:1px}.match-sub b{font-size:14px;color:var(--gold)}.divider{padding:0 13px;opacity:.4}.utilities{display:flex;gap:7px;pointer-events:auto}.utilities button{height:35px;min-width:36px;border:1px solid #9db7b23f;background:#071a2499;border-radius:5px;font-size:16px}.utilities #sound{font-size:12px;padding:0 10px}#controls{position:absolute;inset:0;pointer-events:none}#joystick{position:absolute;bottom:44px;left:50px;width:138px;height:138px;pointer-events:auto;border:1px solid #dbeee12d;border-radius:50%;background:radial-gradient(circle,#9dd9cd12,#09222f4d);box-shadow:inset 0 0 20px #b6fce414}#joystick:before,#joystick:after{content:"";position:absolute;background:#c6e7dc26}#joystick:before{height:1px;left:12px;right:12px;top:50%}#joystick:after{width:1px;top:12px;bottom:12px;left:50%}.joystick-ring{position:absolute;inset:22px;border:1px solid #accfc72b;border-radius:50%}#stick{width:58px;height:58px;position:absolute;left:39px;top:39px;border:1px solid #bcdfd294;border-radius:50%;background:radial-gradient(circle at 35% 30%,#71a79a94,#14343ccf);box-shadow:0 3px 15px #0005;z-index:1}#joystick>span{position:absolute;bottom:-26px;width:100%;text-align:center;font-size:12px;letter-spacing:3px;opacity:.6}.skills{position:absolute;right:35px;bottom:30px;width:345px;height:215px}.skills button{pointer-events:auto;position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;background:radial-gradient(circle at 35% 25%,#396966d9,#071b2aed 75%);box-shadow:0 4px 18px #0008,inset 0 0 16px #87e7da25;border:1px solid #a6d9cba1}.skills button:active{filter:brightness(1.5);transform:scale(.95)}.skill{width:73px;height:73px}.skills svg{width:35px;height:35px;fill:none;stroke:#cfefdf;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #8de3d08a)}.skill span{position:absolute;bottom:-23px;font-size:12px;letter-spacing:1px;text-shadow:0 2px 4px #000;white-space:nowrap}.skill small{position:absolute;right:0;top:0;width:18px;height:18px;border-radius:50%;background:#11282c;font-size:10px;border:1px solid #667d72}.cool{position:absolute;inset:0;display:none;align-items:center;justify-content:center;border-radius:50%;background:#03121ccb;font-size:22px;color:#f8eed9;font-weight:500}.skill.cooling .cool{display:flex}.skill.cooling svg{opacity:.3}#fan{left:20px;bottom:33px}#dash{left:89px;top:5px}#ult{right:57px;top:-10px;width:82px;height:82px;border-color:#dbc189;background:radial-gradient(circle at 35% 25%,#807042aa,#1e2932ec 70%)}#ult svg{stroke:#fbe0a1}#attack{right:0;bottom:0;width:112px;height:112px;border:2px solid #e6cda0a6;box-shadow:0 3px 18px #0008,inset 0 0 22px #caaa6d22;background:radial-gradient(circle at 35% 25%,#677263dd,#1b303bee 70%)}#attack svg{width:44px;height:44px;stroke:#ffe4ad}#attack span{font-size:14px;letter-spacing:2px}#attack small{font-size:10px;opacity:.6;margin-top:3px}#hint{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:1px;opacity:.7;text-shadow:0 2px 4px #000;pointer-events:none;white-space:nowrap}#announcement{position:absolute;top:22%;left:50%;transform:translate(-50%,-10px);text-align:center;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;text-shadow:0 2px 12px #000;width:80%}#announcement.show{opacity:1;transform:translate(-50%,0)}#announcement strong{font-size:28px;font-weight:500;letter-spacing:7px;color:#f5ddb0}#announcement span{display:block;font-size:13px;letter-spacing:3px;color:#c6e5da;margin-top:10px}#combo{position:absolute;top:32%;right:8%;font-weight:700;font-style:italic;font-size:26px;color:#ffdaa1;text-shadow:0 2px 8px #08272c;pointer-events:none}#aimLabel{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:8px 16px;border:1px solid #85d9ce5c;background:#09202bdc;font-size:13px;color:#b2ffe4}.screen{position:absolute;inset:0;background:linear-gradient(90deg,#04151bea 0%,#051c23c9 32%,#09262d30 72%,#0618204d);display:flex;align-items:center;padding:5vw 8vw}.screen[hidden]{display:none!important}.start-copy{position:relative;z-index:2}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:5px;margin-bottom:22px}h1{font-family:serif;font-weight:500;font-size:clamp(48px,7vw,92px);letter-spacing:14px;line-height:1.12;margin:0;color:#f2e5c5;text-shadow:0 0 35px #87d8b81c}h1 span{display:block;font:400 clamp(17px,2vw,23px) system-ui;letter-spacing:14px;margin-top:20px;color:#a9c8bf}.start-copy p{margin:28px 0 20px;font-size:15px;letter-spacing:6px;color:#dbdfcd}.start-meta{display:flex;gap:18px;font-size:12px;color:#91afa7}.start-meta span+span{border-left:1px solid #88aa9b40;padding-left:18px}.primary{display:block;margin-top:33px;min-width:246px;padding:16px 27px;background:linear-gradient(115deg,#e9d19b,#b69960);border:1px solid #ffe4ad;color:#132d32;letter-spacing:5px;font-weight:650;font-size:16px;box-shadow:0 5px 30px #dfc68017;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}.primary:disabled{opacity:.5;cursor:wait}.primary:hover:not(:disabled){filter:brightness(1.15)}.instruction{font-size:12px;color:#96b1ab;line-height:1.9;margin-top:18px;letter-spacing:1px}.instruction span{font-size:11px;opacity:.7}.start-side{position:absolute;left:60%;top:54%;text-align:center;pointer-events:none}.ranger-title{letter-spacing:3px;font-size:10px;color:#adc5b9;margin-top:75px}.ranger-sub{letter-spacing:7px;font-size:16px;color:#edddb8;margin-top:9px}.credits{position:absolute;bottom:20px;left:8vw;font-size:10px;color:#789790}.modal-card{margin:auto;min-width:320px;text-align:center;padding:35px;background:#09232ef2;border:1px solid #b99c6155;box-shadow:0 20px 80px #0006}.modal-card .eyebrow{margin-bottom:10px}.modal-card h2{font-size:33px;font-weight:500;letter-spacing:7px;margin:18px 0}.modal-card p{color:#a8c9bd;font-size:14px;line-height:1.8}.modal-card .primary{margin:25px auto 15px}.secondary{border:0;background:none;font-size:13px;color:#a4b7ac;padding:10px;letter-spacing:2px}#modal{background:#03161dbb;backdrop-filter:blur(6px);z-index:20}#rotate{display:none;position:absolute;bottom:8px;width:100%;text-align:center;font-size:12px;color:#e7d4a9;pointer-events:none}body.playing #start{display:none}body:not(.playing) #controls,body:not(.playing) #hint,body:not(.playing) #hud{opacity:0;pointer-events:none}body:not(.playing) #controls button,body:not(.playing) #joystick{pointer-events:none}
@media(max-height:520px){#hud{top:12px;left:18px;right:18px}.crest{width:40px;height:40px;font-size:28px}.hero-name{font-size:12px}.health{width:145px;height:12px;margin-top:4px}.health b{font-size:9px;line-height:10px}.energy{width:145px}.match{font-size:14px}.utilities button{height:30px;font-size:13px}.skills{transform:scale(.8);transform-origin:bottom right;right:22px;bottom:22px}#joystick{transform:scale(.8);transform-origin:bottom left;left:28px;bottom:32px}#hint{bottom:12px;font-size:10px}.screen{padding:24px 7vw}.eyebrow{margin-bottom:12px;font-size:10px}h1{font-size:53px}h1 span{margin-top:12px;font-size:17px}.start-copy p{margin:18px 0 13px;font-size:13px}.primary{margin-top:22px;padding:13px 24px;min-width:220px;font-size:14px}.instruction{margin-top:10px;font-size:10px}.credits{bottom:10px}.start-side{top:46%}.ranger-title{margin-top:62px}#announcement strong{font-size:23px}.modal-card{padding:20px}.modal-card h2{font-size:26px}}
@media(orientation:portrait){#rotate{display:block}.screen{padding:8vw;align-items:flex-start;padding-top:16vh}.start-side{display:none}h1{font-size:64px}#hud{left:12px;right:12px}.identity{gap:7px}.crest{display:none}.health,.energy{width:122px}.hero-name{font-size:12px}.match{padding:0 4px;min-width:90px;font-size:12px;letter-spacing:1px}.utilities{gap:4px}.utilities button{min-width:29px;height:30px}.utilities #sound{font-size:10px;padding:0 4px}#joystick{left:20px;bottom:48px;transform:scale(.7);transform-origin:bottom left}.skills{right:12px;bottom:38px;transform:scale(.65);transform-origin:bottom right}#hint{bottom:25px;font-size:10px}#announcement{top:23%}#announcement strong{font-size:23px}#startbtn{margin-top:30px}.credits{bottom:30px;font-size:9px}.instruction span{font-size:10px}}

#map-panel{position:absolute;top:96px;left:24px;width:100px;height:156px;border:1px solid #9ecbb759;border-radius:6px;overflow:hidden;background:#0b2734bb;pointer-events:none}#minimap{width:100%;height:100%;position:static}#map-panel span{position:absolute;bottom:2px;left:0;width:100%;text-align:center;font-size:10px;color:#b3e8df}#mission{position:absolute;top:80px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;background:linear-gradient(90deg,transparent,#0a2435c9,transparent);padding:5px 20px;white-space:nowrap}#mission b{font-size:13px;color:#f5dfb4;font-weight:500;letter-spacing:1px}#mission span{display:block;font-size:11px;margin-top:5px;color:#b9dcd3}#recall{position:absolute;left:210px;bottom:39px;width:51px;height:51px;border-radius:50%;border:1px solid #91b9cc;background:#102c3bbf;font-size:12px}#recall small{display:block;font-size:9px;color:#8bcadd;margin-top:3px}#respawn{position:absolute;top:43%;left:50%;transform:translateX(-50%);padding:15px 30px;background:#0a2439e0;border:1px solid #b9bdad60;color:#ffe5b6;font-size:20px;pointer-events:none}body:not(.playing) #map-panel,body:not(.playing) #mission,body:not(.playing) #recall{display:none}.modal-card p{white-space:pre-line}
@media(max-height:520px){#map-panel{top:73px;left:18px;width:68px;height:107px}#mission{top:61px;padding:3px 10px}#mission b{font-size:11px}#mission span{font-size:10px}#recall{left:157px;bottom:32px;width:43px;height:43px}#announcement{top:32%}}
@media(orientation:portrait){#map-panel{top:90px;left:12px;width:62px;height:98px}#mission{top:70px;left:auto;right:10px;transform:none;padding:5px}#mission b{font-size:11px}#mission span{font-size:9px}#recall{left:126px;bottom:53px;width:40px;height:40px;font-size:11px}#respawn{font-size:16px;white-space:nowrap}}

#recall{width:66px;height:66px;border-color:#a5efcf;box-shadow:0 0 18px #84e9ce35}#recall small{font-size:8px}#recall.blocked{opacity:.5}#recall[hidden]{display:none}#map-panel span{font-size:8px;background:#102e32bb}@media(max-height:520px){#recall{width:55px;height:55px}}@media(orientation:portrait){#recall{width:51px;height:51px}}
/* Compact edge-only combat HUD. */
#hud{top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}.crest,.energy,.hero-name span{display:none}.hero-name{font-size:12px;letter-spacing:1px}.health{width:136px;height:12px;margin-top:4px}.health b{font-size:9px;line-height:10px}.identity{gap:0}.match{position:absolute;right:0;top:42px;min-width:0;width:150px;padding:0;text-align:right;background:none;font-size:12px;letter-spacing:0;text-shadow:0 1px 3px #07181c}.match-sub{font-size:11px;margin-top:3px;letter-spacing:0}.match-sub b{font-size:11px}.divider{padding:0 6px}#core-status{display:block;font-size:11px;color:#b9dcd3;margin-top:3px}.utilities{gap:5px}.utilities button{height:32px;min-width:32px}.utilities #sound{font-size:11px;padding:0 6px}#mission,#combo,#hint,#rotate{display:none!important}
#map-panel{top:58px;left:max(12px,env(safe-area-inset-left));width:78px;height:128px;background:#0b273493}#map-panel span{display:none}
#joystick{left:max(18px,env(safe-area-inset-left));bottom:30px;width:100px;height:100px;transform:none}.joystick-ring{inset:16px}#stick{width:42px;height:42px;left:28px;top:28px}#joystick>span{display:none}
.skills{right:max(14px,env(safe-area-inset-right));bottom:28px;width:210px;height:142px;transform:none}.skill{width:52px;height:52px}.skills svg{width:27px;height:27px}.skill span{bottom:5px;font-size:9px;letter-spacing:0}.skill svg{margin-bottom:10px}.skill small{width:14px;height:14px;font-size:8px;right:-2px;top:-2px}#fan{left:0;bottom:5px;top:auto}#dash{left:33px;top:9px;bottom:auto}#ult{left:98px;right:auto;top:0;width:56px;height:56px}#attack{right:0;bottom:0;width:78px;height:78px}#attack svg{width:33px;height:33px}#attack span{font-size:11px;letter-spacing:1px}#attack small{display:none}.cool{font-size:18px}
#recall{left:130px;bottom:34px;width:48px;height:48px;font-size:11px}#recall small{font-size:8px;margin-top:0}
#announcement,#announcement.show{top:auto;bottom:3px;left:12px;right:12px;width:auto;transform:none;text-align:left;height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none}#announcement strong{font-size:11px;letter-spacing:0;font-weight:500}#announcement span{display:inline;font-size:10px;letter-spacing:0;margin:0 0 0 10px}#respawn{top:auto;bottom:5px;left:auto;right:14px;transform:none;padding:2px 8px;font-size:12px;background:#102a36;border:0}#aimLabel{bottom:5px;left:auto;right:14px;transform:none;padding:0;background:#102a36;border:0;font-size:11px}
@media(orientation:portrait){.match{top:43px;width:134px}.skills{width:195px;right:10px}#dash{left:24px}#ult{left:84px}#recall{left:122px;bottom:144px}#joystick{left:14px;width:94px;height:94px}#stick{left:25px;top:25px}#map-panel{width:67px;height:112px}.health{width:123px}}
/* More forgiving thumb controls, inset from phone edges. */
#joystick{left:max(28px,calc(env(safe-area-inset-left) + 12px));width:116px;height:116px;bottom:32px}#stick{width:50px;height:50px;left:calc(50% - 25px);top:calc(50% - 25px)}
.skills{right:max(22px,calc(env(safe-area-inset-right) + 12px));height:158px}#attack{right:12px;width:92px;height:92px}#attack svg{width:37px;height:37px}#attack span{font-size:12px}#recall{left:158px;bottom:36px}
@media(orientation:portrait){#joystick{left:max(20px,env(safe-area-inset-left));width:110px;height:110px}.skills{right:max(18px,env(safe-area-inset-right));width:195px}#recall{left:137px;bottom:150px}}
#buff-status{display:block;font-size:11px;color:#e7c980;margin-top:3px}#upgrade{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#071a24df;backdrop-filter:blur(7px);padding:16px;touch-action:pan-y;overflow:auto}#upgrade[hidden]{display:none}.upgrade-panel{width:min(690px,94vw);text-align:center}.upgrade-panel h2{font-size:24px;font-weight:500;letter-spacing:3px;margin:8px 0 18px}#upgrade-source{font-size:12px;color:#b5d5c9}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upgrade-choice{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:190px;padding:18px 14px;border:1px solid #a4bd9466;border-radius:10px;background:linear-gradient(160deg,#21463e,#102730);text-align:center}.upgrade-choice:hover,.upgrade-choice:active{border-color:#f2d193;background:linear-gradient(160deg,#486353,#193933)}.upgrade-icon{font-size:32px;color:#f3d99b;height:40px}.upgrade-choice strong{font-size:17px;font-weight:600}.upgrade-choice>span:not(.upgrade-icon){font-size:13px;line-height:1.5;color:#bed6cd}.upgrade-choice small{margin-top:auto;font-size:12px;color:#e7cf9e}.upgrade-panel>p{font-size:12px;color:#93afa6;margin:12px 0 0}@media(max-height:430px){.upgrade-panel h2{font-size:20px;margin:5px 0 10px}.upgrade-choice{min-height:164px;padding:12px;gap:7px}.upgrade-icon{font-size:26px;height:30px}}@media(orientation:portrait){.upgrade-panel{width:min(420px,94vw)}.upgrade-grid{grid-template-columns:1fr;gap:9px}.upgrade-choice{display:grid;grid-template-columns:42px 1fr;min-height:100px;text-align:left;padding:12px;gap:6px 12px}.upgrade-icon{grid-row:1/4}.upgrade-choice strong{font-size:16px}.upgrade-choice small{grid-column:2}}
.modal-card{max-height:92vh;overflow:auto;touch-action:pan-y}
.hero-select{display:flex;gap:9px;margin-top:20px}.hero-select button{background:#102b31b8;border:1px solid #9aafa357;border-radius:5px;padding:8px 12px;font-size:12px}.hero-select button.selected{border-color:#ead09c;color:#f8dfaa}.hero-select button:disabled{opacity:.45}.primary[hidden],.secondary[hidden]{display:none}#continue-run{margin-top:16px}#continue-run:not([hidden])+#startbtn{margin-top:10px;background:#16383bdd;color:#cfddcb;font-size:13px;padding:10px 18px}.instruction{max-width:540px}.start-copy{max-height:92vh;overflow:auto;touch-action:pan-y}@media(max-height:430px){.start-copy p{margin:12px 0 9px}.hero-select{margin-top:12px}.hero-select button{padding:6px 10px}#continue-run{margin-top:10px}.start-meta{font-size:11px}.instruction{font-size:10px}.start-copy .eyebrow{display:none}h1{font-size:42px}h1 span{font-size:15px;margin-top:8px}}

.class-glyph{display:block;font:normal 25px/1.1 Georgia,serif;color:#c0f7e9;margin:0 auto 3px}.hero-select{flex-wrap:wrap}.hero-select button{min-width:88px}#fan:has(.class-glyph:not([style*="none"])) svg{display:none}

.map-select{display:flex;gap:8px;margin-top:16px}.map-select button{background:#0c2639;border:1px solid #728b9e88;padding:8px 14px;border-radius:5px;font-size:14px}.map-select .selected{background:#24475b;border-color:#a1dcdf;color:#d1fff1}#map-description{font-size:12px;color:#a8c4c9;margin-top:7px}@media(max-height:450px){.start-meta,.start-copy>p{display:none}.map-select{margin-top:10px}.hero-select{margin-top:10px}.start-copy .primary{margin-top:13px;padding:10px 20px}.instruction{margin-top:8px}}

#mana-bar{display:block;position:relative;width:136px;height:13px;margin-top:3px;overflow:hidden;border:1px solid #638eae80;background:#091d35;transform:skewX(-10deg)}#manafill{background:linear-gradient(90deg,#257bd0,#8ccffa);transition:width .12s}#manatext{position:absolute;inset:0;text-align:center;font-size:10px;line-height:11px;letter-spacing:.2px;font-weight:500;color:#e0f2ff;text-shadow:0 1px 2px #061426}#map-panel{top:76px}.skills .mana-cost{position:absolute;top:-4px;left:-3px;min-width:21px;padding:2px 3px;border-radius:7px;background:#0c2c4c;border:1px solid #5988af;color:#b6e4ff;font:normal 10px/1 system-ui;z-index:3;pointer-events:none}.skills button.no-mana{border-color:#4c6479;background:radial-gradient(circle,#293c4b,#101e2c)}.skill.no-mana svg,.skill.no-mana .class-glyph{opacity:.35}.skill.no-mana .mana-cost{color:#e5a0a0;border-color:#aa6666}#mana-bar[hidden]{display:none}

#level-panel{width:136px;margin-top:4px;color:#d7dcb6}#level-panel>div:first-child{display:flex;justify-content:space-between;font-size:10px;line-height:13px}#level-label{font-weight:600;color:#f0d386}.xp-track{height:3px;background:#1c303b;margin-top:2px;overflow:hidden}.xp-track i{display:block;height:100%;width:0;background:#edce75;transition:width .2s}#level-panel.level-up{filter:drop-shadow(0 0 4px #f5d279)}#map-panel{top:99px}.modal-card p{white-space:pre-line}
@media(max-height:430px){#map-panel{top:96px;width:64px;height:100px}}@media(max-height:360px){#map-panel{top:92px;width:50px;height:76px}}

.hero-select,.map-select{display:flex;flex-wrap:wrap;gap:6px}.hero-select button{padding:9px 11px}.start-copy{max-height:94dvh;overflow-y:auto}@media(max-height:500px){.start-copy h1{font-size:34px}.hero-select button,.map-select button{padding:6px 9px}.start-meta{display:none}.start-copy .primary{padding:10px 18px;margin-top:8px}}

/* Two-step, thumb-friendly adventure lobby. */
#start{background:linear-gradient(125deg,rgba(7,22,31,.97),rgba(15,37,46,.94));overflow:auto;display:block;padding:max(22px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right));box-sizing:border-box}
.playing #start{display:none}#start .start-copy{position:relative;inset:auto;transform:none;width:min(1080px,100%);max-width:none;margin:auto;padding:0}#start .start-side,#start .credits,#start .start-meta,#start .eyebrow{display:none}#start h1{font-size:30px;line-height:1.1;margin:12px 0}#start h1 span{display:inline;margin-left:16px;font-size:22px;letter-spacing:.05em}#start .start-copy>p{font-size:14px;margin:8px 0 16px;max-width:none}#lobby-steps{font-size:12px;letter-spacing:.1em;color:#b5c8cc}#back-maps{float:right;background:#223e48;border:1px solid #47616a;border-radius:8px;color:#def3f3;padding:10px 16px;cursor:pointer}
#start .map-select,#start .hero-select{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}#start .map-card,#start .hero-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#182f38;border:1px solid #3b525a;border-radius:12px;overflow:hidden;color:#e7efed;padding:12px;cursor:pointer;min-width:0}#start .map-card:hover,#start .hero-card:hover,#start .hero-card.selected{border-color:var(--card-color);background:#24424b;box-shadow:inset 0 0 0 1px var(--card-color)}#start .map-card canvas{width:100%;height:95px;object-fit:cover;margin-bottom:9px;border-radius:5px}#start .card-index{position:absolute;right:20px;top:18px;font-size:12px;color:var(--card-color)}#start .map-card strong,#start .hero-card strong{font-size:16px;color:var(--card-color)}#start .map-card small,#start .hero-card small{font-size:11px;margin-top:6px;color:#bdd0d1}#start .map-card p{font-size:12px;line-height:1.5;margin:8px 0 0;color:#b8c7c8}#start .hero-card b{font-size:34px;color:var(--card-color);line-height:1.1;margin-bottom:8px}#hero-details{background:#102832;border-left:3px solid #98d6ce;padding:12px 16px;display:grid;gap:6px;margin:12px 0}#hero-details span{font-size:14px}#hero-details small{font-size:12px;color:#b7cccc}#start .primary{display:inline-block;width:auto;min-width:200px;margin:5px 10px 5px 0;padding:13px 22px;font-size:16px}#start .instruction{font-size:11px;margin:12px 0 4px}#start #map-description{font-size:13px;color:#b9cfcf}
#start[data-stage=maps] .hero-select,#start[data-stage=maps] #hero-details,#start[data-stage=maps] #startbtn,#start[data-stage=maps] #continue-run,#start[data-stage=maps] .instruction,#start[data-stage=maps] #map-description,#start[data-stage=heroes] .map-select{display:none}#start [hidden]{display:none!important}
@media(max-height:550px) and (orientation:landscape){#start{padding:14px 30px}#start h1{font-size:23px;margin:7px 0}#start h1 span{font-size:19px}#start .start-copy>p{margin:5px 0 10px;font-size:12px}#start .map-select,#start .hero-select{gap:8px;margin:10px 0}#start .map-card{padding:9px}#start .map-card canvas{height:54px;margin-bottom:5px}#start .map-card p{font-size:10px;margin-top:4px}#start .map-card strong,#start .hero-card strong{font-size:13px}#start .hero-card{padding:9px;min-height:72px;padding-left:47px;justify-content:center}#start .hero-card b{position:absolute;left:12px;top:18px;font-size:26px}#hero-details{padding:8px 12px;margin:8px 0}#hero-details span{font-size:12px}#hero-details small{font-size:10px}#start .primary{padding:10px 20px}#start .instruction{margin:7px 0}}
@media(max-width:600px) and (orientation:portrait){#start .map-select,#start .hero-select{grid-template-columns:repeat(2,minmax(0,1fr))}#start{padding:22px 16px}#start h1 span{font-size:18px}#rotate{pointer-events:none}}

#start,#start button{touch-action:pan-y}#start .map-card canvas{position:static;inset:auto;flex:none}#start .map-card p{max-width:none}#start .hero-card{letter-spacing:normal}
#start .map-card canvas{object-fit:contain;background:#142d36}#start .map-card{letter-spacing:normal}
#mode-select{display:flex;gap:8px;margin:12px 0}#mode-select button{background:#19333e;border:1px solid #53656b;border-radius:7px;padding:9px 18px;color:#c7d9d9}#mode-select button.selected{color:#ffe3a3;border-color:#d5ba81;background:#34443e}#start .locked{opacity:.56;filter:saturate(.45);cursor:not-allowed}#start .locked:hover{box-shadow:none;border-color:#3b525a;background:#182f38}#start .stage-status{display:block;color:#e2c888;font-size:12px;margin-top:8px}#start .hero-lock{font-size:11px;color:#d6c39a;margin-top:7px}#next-stage{width:100%;margin-top:10px}#start .map-card strong{font-size:15px}#start .map-card canvas{height:68px}#start .hero-card{min-height:114px}
@media(max-height:550px) and (orientation:landscape){#mode-select{margin:7px 0}#mode-select button{padding:6px 14px;font-size:13px}#start .map-card canvas{height:36px}#start .map-card strong{font-size:12px}#start .map-card p{line-height:1.4;font-size:11px}#start .hero-card{min-height:80px}#start .hero-lock{font-size:10px;margin-top:4px}}
/* The east-west arena uses a landscape minimap to match its playable bounds. */
body.horizontal-arena #map-panel{width:144px;height:80px}
@media(max-height:550px) and (orientation:landscape){body.horizontal-arena #map-panel{width:117px;height:65px}}
/* A focused title screen, followed by the heroes earned so far. */
body:not(.playing) #hud,body:not(.playing) #controls,body:not(.playing) #hint{display:none}
#start{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 70% 22%,#24595160,transparent 62%),linear-gradient(120deg,#07151af5,#0d2730ed);padding:28px max(28px,env(safe-area-inset-right));overflow:auto}
body.playing #start{display:none}
#start .start-copy{max-height:calc(100dvh - 56px);width:min(820px,100%);overflow-y:auto}
#start[data-stage=home] .start-copy{width:min(440px,100%);text-align:center;padding:24px 12px}
#start[data-stage=home] .eyebrow{display:block;font-size:14px;letter-spacing:.45em;color:#a1c8ba;margin:0 0 24px}
#start[data-stage=home] h1{font-size:clamp(60px,10vw,100px);letter-spacing:.24em;padding-left:.24em;margin:0 0 32px;color:#f1deb0}
#start[data-stage=home] h1 span{display:none}
#start #journey-status{display:grid;gap:12px;text-align:center;margin:0 auto 26px;width:min(300px,100%)}
#journey-count{font-size:14px;color:#a1bab8;letter-spacing:.1em}
.journey-track{height:3px;background:#86b4aa26;overflow:hidden}.journey-track i{display:block;height:100%;background:#d4bf86;transition:width .25s}
#current-chapter{font-size:18px;line-height:1.5;font-weight:500;color:#dbe7df}
#start #campaign-play{width:min(300px,100%);min-height:54px;margin:0 auto;font-size:18px;letter-spacing:.18em}
#start[data-stage=home] .hero-select,#start[data-stage=home] #hero-details,#start[data-stage=home] #startbtn,#start[data-stage=home] #continue-run,#start[data-stage=home] .instruction{display:none!important}
#start[data-stage=heroes] #journey-status,#start[data-stage=heroes] #campaign-play{display:none}
#start #back-home{float:right;margin:0 0 12px;font-size:14px;letter-spacing:normal}
#start[data-stage=heroes] h1{font-size:32px;letter-spacing:.12em;clear:both}
#start[data-stage=heroes] h1 span{font-size:20px;letter-spacing:normal}
#start #chapter-intro{font-size:16px;line-height:1.6;letter-spacing:normal;margin:14px 0}
#start .hero-select{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}
#start .hero-card{min-height:96px}#start .hero-card small{font-size:14px;line-height:1.4}
#hero-details{line-height:1.5}#hero-details span{font-size:16px}#hero-details small{font-size:14px}
#start .instruction{font-size:14px;line-height:1.6;letter-spacing:normal}
@media(max-height:550px) and (orientation:landscape){#start{padding:16px 28px}#start .start-copy{max-height:calc(100dvh - 32px)}#start[data-stage=home] .start-copy{padding:4px 12px}#start[data-stage=home] .eyebrow{margin-bottom:12px;font-size:12px}#start[data-stage=home] h1{font-size:58px;margin-bottom:18px}#start #journey-status{gap:8px;margin-bottom:16px}#start #campaign-play{min-height:46px;padding:10px 22px}#start[data-stage=heroes] h1{font-size:24px}#start[data-stage=heroes] h1 span{font-size:18px}#start #chapter-intro{font-size:14px;margin:8px 0}#start .hero-card{min-height:74px}#start .hero-card small{font-size:12px}#hero-details span,#hero-details small,#start .instruction{font-size:12px}}
@media(pointer:coarse){#start .instruction{display:none}}

/* Native fullscreen may be unavailable; a compact portrait hint stays out of the action. */
@media(orientation:portrait){body.playing #rotate{display:block!important;position:fixed;left:50%;bottom:max(5px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:4px 10px;border-radius:5px;background:#09232eee;font-size:12px;line-height:1.4;z-index:8;pointer-events:none}}