:root{color-scheme:dark;--ink: #102a26;--paper: #fff8e4;--tea: #d8f57d;--osmanthus: #f3bd3e;--lake: #4db0ba;--jade: #2f8d61;--brick: #b24a38;--night: rgba(13, 35, 32, .78);--edge: rgba(255, 255, 255, .22)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#91d4dc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}button{font:inherit}#game-shell{position:relative;width:100vw;height:100vh;height:100dvh;min-height:100vh;overflow:hidden;background:linear-gradient(#92d4df,#d5eed9 54%,#50895f)}#game-root,#game-root canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.is-selecting .hud,.is-selecting .mobile-controls,.is-paused .mobile-controls{display:none}.loading-screen{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:24px;color:var(--paper);background:linear-gradient(180deg,#92d4dff5,#f5dd9bf0 52%,#50895ff5),repeating-linear-gradient(170deg,#2f8d612e 0 18px,#fff8e424 18px 34px);transition:opacity .28s ease,visibility .28s ease}.loading-screen[hidden]{display:none}.loading-screen.is-hidden{visibility:hidden;opacity:0}.loading-panel{width:min(420px,100%);display:grid;justify-items:center;gap:14px;padding:22px;background:#123229d6;border:1px solid rgba(255,255,255,.24);border-radius:8px;box-shadow:0 24px 70px #081c163d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.loading-mark{width:54px;height:54px;display:block;background:linear-gradient(135deg,transparent 0 35%,var(--tea) 36% 64%,transparent 65%),linear-gradient(45deg,var(--brick) 0 50%,var(--lake) 50% 100%);border:2px solid rgba(255,255,255,.42);border-radius:8px;box-shadow:0 12px 28px #081c163d}.loading-panel strong{font-size:clamp(25px,5vw,38px);line-height:.95}.loading-bar{width:min(300px,100%);height:9px;overflow:hidden;background:#fff8e429;border:1px solid rgba(255,255,255,.2);border-radius:999px}#loading-progress{--progress: 0;width:calc(var(--progress) * 100%);height:100%;display:block;background:linear-gradient(90deg,var(--tea),var(--osmanthus));border-radius:inherit;transition:width .12s ease}.character-select{position:absolute;inset:0;z-index:30;display:grid;align-items:center;overflow:hidden;padding:clamp(18px,4vw,46px);color:var(--paper);pointer-events:auto;background:linear-gradient(180deg,#0a221f0d,#0a221f75),linear-gradient(135deg,#b6e3de,#f5dd9b 47%,#548d64)}.character-select[hidden]{display:none}.select-backdrop{position:absolute;inset:-2%;background:radial-gradient(circle at 18% 18%,rgba(255,248,228,.58),transparent 18%),linear-gradient(165deg,transparent 0 38%,rgba(68,125,93,.42) 39% 52%,transparent 53%),repeating-linear-gradient(168deg,#2f8d612e 0 18px,#fff8e41f 18px 34px);transform:scale(1.04)}.select-backdrop:before{position:absolute;left:7%;top:24%;width:34vw;max-width:480px;aspect-ratio:1 / .68;content:"";background:radial-gradient(ellipse at 50% 50%,rgba(77,176,186,.82) 0 58%,transparent 59%),radial-gradient(ellipse at 42% 54%,rgba(255,248,228,.52) 0 7%,transparent 8%),radial-gradient(ellipse at 64% 34%,rgba(255,248,228,.44) 0 6%,transparent 7%);filter:drop-shadow(0 24px 36px rgba(12,42,36,.18))}.select-backdrop:after{position:absolute;right:-4%;bottom:0;width:74vw;height:45vh;content:"";background:linear-gradient(172deg,transparent 0 24%,rgba(59,120,89,.55) 25% 38%,transparent 39%),repeating-linear-gradient(174deg,#20744c85 0 15px,#d6f57d7a 15px 26px);clip-path:polygon(0 34%,100% 0,100% 100%,0 100%)}.select-shell{position:relative;z-index:1;width:min(1180px,100%);display:grid;grid-template-columns:minmax(280px,.78fr) minmax(500px,1.22fr);align-items:end;gap:clamp(18px,4vw,42px);margin:0 auto}.select-copy{max-width:420px;text-shadow:0 2px 18px rgba(11,29,24,.23)}.select-kicker,.pause-kicker{display:inline-flex;min-height:30px;align-items:center;padding:5px 9px;color:var(--paper);background:#0d2320b8;border:1px solid rgba(255,255,255,.24);border-radius:8px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.select-copy h1{margin:18px 0 10px;color:var(--paper);font-size:clamp(48px,8vw,92px);line-height:.9;letter-spacing:0}.select-copy p{margin:0 0 10px;color:#12342d;font-size:clamp(21px,3vw,34px);font-weight:950}.select-copy strong{display:block;color:#153d35;font-size:clamp(15px,2vw,19px);line-height:1.35}.route-map{position:relative;min-height:278px;overflow:hidden;margin-top:16px;padding:12px;color:var(--paper);text-shadow:none;background:linear-gradient(140deg,#0d2320db,#1f5b4ead),linear-gradient(180deg,#4db0ba33,#2f8d6138);border:1px solid rgba(255,255,255,.18);border-radius:8px;box-shadow:0 18px 52px #081c162e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.route-map-heading{position:absolute;top:12px;left:12px;z-index:2;display:grid;gap:3px}.route-map-heading span{color:#fff8e4ad;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.route-map-heading strong{color:var(--paper);font-size:18px;font-weight:950;line-height:1}.route-map-art{position:absolute;inset:22px 8px 42px;width:calc(100% - 16px);height:calc(100% - 64px);overflow:visible}.lake-shape{fill:#89dcde52;stroke:#fff8e4c7;stroke-width:3.2}.canal-shape{fill:none;stroke:#89dcde6b;stroke-width:24;stroke-linecap:round}.route-line{fill:none;stroke:#f3bd3eeb;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9 10}.route-node{--route-x: .5;--route-y: .5;position:absolute;left:calc(8px + (100% - 16px) * var(--route-x));top:calc(22px + (100% - 64px) * var(--route-y));z-index:1;width:38px;min-width:38px;height:38px;min-height:38px;display:grid;place-items:center;padding:0;color:inherit;text-align:center;background:#123229c2;border:1px solid rgba(255,255,255,.2);border-radius:50%;box-shadow:0 12px 24px #081c1638;cursor:pointer;transform:translate(-50%,-50%)}.route-node strong{width:32px;height:32px;display:grid;place-items:center;color:#123229;background:var(--osmanthus);border:2px solid rgba(255,248,228,.92);border-radius:50%;box-shadow:0 7px 18px #081c163d;font-size:14px;font-weight:950}.route-node span{position:absolute;top:44px;left:50%;display:none;min-width:116px;max-width:132px;gap:1px;padding:5px 7px;background:#123229e0;border:1px solid rgba(243,189,62,.34);border-radius:8px;box-shadow:0 12px 22px #081c1633;pointer-events:none;transform:translate(-50%)}.route-node b,.route-node small{overflow:hidden;color:#fff8e4db;text-overflow:ellipsis;white-space:nowrap}.route-node b{font-size:10px;font-weight:900}.route-node small{color:#fff8e4a8;font-size:10px;font-weight:850}.route-node.is-locked strong{color:#fff8e4e0;background:#ffffff29;border-color:#ffffff4d}.route-node.is-complete strong{background:#7ddfa8}.route-node.is-selected{background:#1a5644e0;border-color:#f3bd3e9e}.route-node.is-selected strong{box-shadow:0 0 0 4px #f3bd3e42,0 7px 18px #081c163d}.route-node.is-selected span,.route-node:hover span,.route-node:focus-visible span{display:grid}.route-node:focus-visible,.character-card:focus-visible,.character-start:focus-visible,.hud-icon-button:focus-visible,.dialog-action:focus-visible{outline:3px solid rgba(255,248,228,.96);outline-offset:3px}.route-map-detail{position:absolute;right:12px;bottom:11px;left:12px;min-height:22px;overflow:hidden;color:#fff8e4c7;font-size:12px;font-weight:900;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.select-stack{display:grid;gap:10px}.character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.character-card{position:relative;min-height:430px;display:grid;grid-template-rows:1fr auto auto auto auto;align-items:end;justify-items:start;gap:8px;overflow:hidden;padding:18px;color:var(--paper);background:linear-gradient(180deg,#ffffff2e,#ffffff0f),#123229c7;border:2px solid rgba(255,255,255,.22);border-radius:8px;box-shadow:0 24px 70px #081c163d;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.character-card:before{position:absolute;inset:14px 14px auto;height:196px;content:"";background:linear-gradient(180deg,rgba(255,248,228,.2),transparent 64%),repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 2px,transparent 2px 18px);border:1px solid rgba(255,255,255,.16);border-radius:8px}.character-card.is-selected{border-color:#f3bd3ef2;box-shadow:0 0 0 3px #f3bd3e47,0 24px 70px #081c1642}.hero-portrait{position:relative;justify-self:center;align-self:center;width:min(190px,68%);aspect-ratio:1 / 1.18;margin:0 auto 12px;background-repeat:no-repeat;background-size:400% 100%;filter:drop-shadow(0 20px 18px rgba(8,28,22,.25))}.hero-cheng{background-image:url(/assets/hero-cheng-sheet-BBTw5WSM.png)}.hero-yu{background-image:url(/assets/hero-yu-sheet-C1l87S8k.png)}.hero-portrait:before{position:absolute;left:8%;right:8%;bottom:3%;height:9%;content:"";background:#09201842;border-radius:50%}.hero-face{position:absolute;left:50%;top:23%;z-index:2;width:31%;aspect-ratio:1;background:#f2b47d;border-radius:50%;box-shadow:inset -5px -4px #75392a24;transform:translate(-50%)}.hero-face,.hero-body,.hero-satchel{display:none}.hero-face:before,.hero-face:after{position:absolute;top:40%;width:4px;height:4px;content:"";background:#1d2b2a;border-radius:50%}.hero-face:before{left:30%}.hero-face:after{right:30%}.hero-body{position:absolute;left:50%;bottom:18%;z-index:1;width:42%;height:42%;background:linear-gradient(155deg,#2d8061 0 54%,#1e5b70 55%);border-radius:18px 18px 12px 12px;transform:translate(-50%)}.hero-yu .hero-body{background:linear-gradient(155deg,#b24a38 0 48%,#704f9a 49%)}.hero-face,.hero-body,.hero-satchel{animation:selectBob 2.2s ease-in-out infinite}.hero-yu .hero-face,.hero-yu .hero-body,.hero-yu .hero-satchel{animation-delay:.16s}.hero-satchel{position:absolute;left:54%;bottom:28%;z-index:3;width:18%;height:18%;background:#f3bd3e;border:3px solid rgba(34,55,42,.45);border-radius:8px;transform:rotate(-8deg)}@keyframes selectBob{0%,60%,to{translate:0 0}32%{translate:0 7px}}.character-name{position:relative;z-index:1;font-size:30px;font-weight:950;line-height:.95}.character-title,.character-role,.character-stat,.character-start{position:relative;z-index:1}.character-title{color:var(--osmanthus);font-size:15px;font-weight:900;letter-spacing:.05em}.character-role{color:#fff8e4c7;font-size:15px;font-weight:800}.character-stat{min-height:28px;display:inline-flex;align-items:center;padding:5px 8px;color:#123229;background:#d8f57deb;border-radius:8px;font-size:13px;font-weight:900}.character-start{width:100%;min-height:42px;display:grid;place-items:center;margin-top:8px;color:var(--paper);background:#b24a38eb;border:0;border-radius:8px;font-size:15px;font-weight:950;cursor:pointer}.local-record{min-height:42px;display:flex;align-items:center;gap:10px;padding:8px 12px;color:#123229;background:#fff8e4e0;border:1px solid rgba(255,255,255,.28);border-radius:8px;box-shadow:0 14px 36px #081c1629}.local-record[hidden]{display:none}.local-record span:first-child{color:#123229b8;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.local-record strong{font-size:18px;font-weight:950}.local-record span:last-child{margin-left:auto;font-size:13px;font-weight:900}.hud{position:absolute;inset:0;z-index:10;pointer-events:none}.hud-top{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));left:max(14px,env(safe-area-inset-left));display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}.hud-chip{min-height:46px;display:flex;align-items:center;gap:8px;padding:8px 11px;color:var(--paper);background:var(--night);border:1px solid var(--edge);border-radius:8px;box-shadow:0 8px 24px #0d18122e;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}.brand-chip{font-weight:900}.brand-mark{width:18px;height:18px;display:inline-block;background:linear-gradient(135deg,transparent 0 36%,var(--tea) 37% 63%,transparent 64%),linear-gradient(45deg,var(--brick) 0 50%,var(--lake) 50% 100%);border:1px solid rgba(255,255,255,.38);border-radius:4px}.hud-label{display:block;color:#fff8e4b8;font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.hud-chip strong{font-size:18px;line-height:1;white-space:nowrap}.score-chip strong{min-width:82px}.power-chip{min-width:126px}.objective-chip{max-width:min(360px,100%);margin-left:auto}.objective-chip strong{font-size:15px;line-height:1.2;white-space:normal}.hud-icon-button{width:46px;height:46px;display:grid;place-items:center;color:var(--paper);background:var(--night);border:1px solid var(--edge);border-radius:8px;box-shadow:0 8px 24px #0d18122e;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}.pause-icon{width:18px;height:22px;display:block;border-right:6px solid var(--paper);border-left:6px solid var(--paper)}.health-pips{display:grid;grid-template-columns:repeat(var(--heart-count, 3),17px);gap:5px}.health-pips span{width:17px;height:17px;display:block;overflow:hidden;background:#fff8e447;border:1px solid rgba(255,255,255,.35);border-radius:5px}.health-pips span.is-filled{background:linear-gradient(135deg,#e65451,#ffb25d)}.toast{position:absolute;left:50%;bottom:104px;max-width:min(420px,calc(100vw - 28px));padding:9px 13px;color:var(--paper);font-weight:850;text-align:center;background:#152c27cc;border:1px solid rgba(255,255,255,.22);border-radius:8px;box-shadow:0 16px 36px #081c1638;transform:translate(-50%);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}.pause-menu,.results-panel{position:absolute;inset:0;z-index:25;display:grid;place-items:center;padding:18px;background:#0816147a;pointer-events:auto;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.pause-menu[hidden],.results-panel[hidden]{display:none}.dialog-panel,.results-shell{width:min(760px,calc(100vw - 32px));display:grid;gap:18px;padding:clamp(18px,3vw,26px);color:var(--paper);background:linear-gradient(180deg,#17302af0,#0d1f1cf0);border:1px solid rgba(255,255,255,.22);border-radius:8px;box-shadow:0 28px 74px #0818146b}.dialog-panel{width:min(380px,calc(100vw - 36px))}.dialog-panel h2,.results-heading h2{margin:0;font-size:clamp(34px,4vw,54px);line-height:.94;letter-spacing:0}.results-heading p{margin:0;color:#fff8e4c7;font-size:15px}.result-stars{min-height:34px;display:flex;gap:6px;align-items:center}.result-stars span{width:32px;height:32px;display:grid;place-items:center;color:#fff8e43d;background:#fff8e417;border:1px solid rgba(255,255,255,.16);border-radius:8px;font-size:22px;font-weight:950;line-height:1}.result-stars span.is-filled{color:#123229;background:linear-gradient(135deg,#f3bd3e,#fff8e4);border-color:#ffffff6b}.result-route-progress{width:fit-content;max-width:100%;padding:6px 9px;overflow:hidden;color:#123229;background:#d8f57de6;border-radius:8px;font-size:13px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}.dialog-actions,.results-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.dialog-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.dialog-action{min-height:46px;color:var(--paper);background:#fff8e421;border:1px solid rgba(255,255,255,.22);border-radius:8px;font-weight:950;cursor:pointer}.dialog-action.primary{color:#123229;background:var(--osmanthus);border-color:#ffffff6b}.results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.result-card{min-height:108px;display:grid;align-content:space-between;gap:10px;padding:14px;color:#123229;background:#fff8e4f0;border-radius:8px}.result-card span{color:#123229b8;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.result-card strong{font-size:clamp(22px,3vw,34px);line-height:.95}.result-card-score{background:linear-gradient(135deg,#f3bd3efa,#fff8e4fa)}.mobile-controls{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));z-index:20;display:none;align-items:end;justify-content:space-between;pointer-events:none}.joystick,.control-button{pointer-events:auto;touch-action:none;background:#11201ead;border:1px solid rgba(255,255,255,.24);box-shadow:0 14px 34px #08181447;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.joystick{position:relative;width:112px;height:112px;border-radius:50%}.joystick.is-active,.control-button.is-pressed{background:#163a32c7;border-color:#d8f57d9e;box-shadow:0 16px 38px #08181452,0 0 0 5px #d8f57d21}.joystick-ring{position:absolute;inset:12px;border:1px solid rgba(255,248,228,.32);border-radius:50%}.joystick-knob{position:absolute;left:calc(50% - 21px);top:calc(50% - 21px);width:42px;height:42px;display:block;background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.55) 0 12%,transparent 13%),linear-gradient(145deg,#fff8e4,#d7b95b);border:2px solid rgba(70,52,29,.55);border-radius:50%;box-shadow:0 8px 18px #0818144d;transition:transform .12s ease}.control-button{width:72px;height:72px;display:grid;place-items:center;color:var(--paper);border-radius:8px}.jump-icon{width:22px;height:22px;display:block;border-top:5px solid var(--paper);border-left:5px solid var(--paper);transform:rotate(45deg) translateY(4px)}@media(max-width:900px),(pointer:coarse){.character-select{align-items:start;overflow-y:auto;padding:18px 14px 104px}.select-shell{grid-template-columns:1fr;align-items:start;gap:16px}.select-copy{max-width:100%}.select-copy p{max-width:92%}.mobile-controls{display:flex;gap:22px}.hud-top{gap:6px}.brand-chip{display:none}.hud-chip{min-height:40px;padding:7px 9px}.hud-chip strong{font-size:15px}.objective-chip{width:100%;order:10;margin-left:0}}@media(max-width:560px){.character-grid{grid-template-columns:1fr}.character-card{min-height:332px;grid-template-columns:138px 1fr;grid-template-rows:auto auto auto auto auto;align-items:start;column-gap:14px}.character-card:before{inset:12px auto 12px 12px;width:138px;height:auto}.hero-portrait{grid-row:1 / span 5;width:122px;margin:18px auto 0}.route-map{min-height:252px}.hud-label{font-size:8px}.hud-top{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));left:max(8px,env(safe-area-inset-left));gap:5px}.hud-chip{min-height:32px;gap:5px;padding:5px 7px}.hud-chip strong{font-size:13px}.power-chip,.objective-chip{display:none}.mobile-controls{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left))}.joystick{width:104px;height:104px}.control-button{width:70px;height:70px}.health-pips{grid-template-columns:repeat(var(--heart-count, 3),12px);gap:3px}.health-pips span{width:12px;height:12px}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dialog-actions,.results-actions{grid-template-columns:1fr}}