:root{--ink:#153e3c;--cream:#fff9e9;--gold:#edb94f;--green:#176b60}*{box-sizing:border-box}body{margin:0;background:#f1eedf;color:var(--ink);font-family:'PingFang SC','Microsoft YaHei',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #efb841;outline-offset:4px}button:active{transform:translateY(2px)}button:disabled{opacity:.5;cursor:wait}.shell{max-width:1500px;margin:auto;padding:24px 38px 16px}header{display:flex;align-items:center;justify-content:space-between;padding:0 0 20px}.brand{text-decoration:none;color:var(--ink);font-size:23px;font-weight:900;display:flex;gap:13px;align-items:center}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:4px}.crest{font-size:34px;color:var(--green)}.header-actions{display:flex;gap:8px}.header-actions button{border:1px solid #153e3c25;background:transparent;padding:10px 16px;border-radius:30px;font-size:13px}.stage{height:min(73vh,780px);min-height:530px;position:relative;border-radius:28px;overflow:hidden;background:#214d43;box-shadow:0 18px 55px #1b503423}canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0}.hidden{display:none!important}[hidden]{display:none!important}.intro{display:flex;align-items:center;background:linear-gradient(90deg,#fff9e9f5 0%,#fff9e9ed 37%,#fff9e940 68%,#ffffff00);padding:40px 5%;gap:0}.intro-copy{width:51%;z-index:2}.eyebrow{display:block;color:#46726c;font-size:11px;font-weight:700;letter-spacing:2px}h1{font-family:'Songti SC','STSong',serif;font-size:clamp(38px,4vw,64px);line-height:1.16;letter-spacing:-2px;margin:18px 0 20px}h1 span{color:#2c8475}p{font-size:14px;line-height:1.9;color:#54756b}.choose-label{font-size:12px;font-weight:700;margin:22px 0 11px}.riders{display:flex;gap:10px;max-width:420px}.rider{background:#fffdf3ad;border:1.5px solid #d4dcc8;border-radius:16px;padding:12px;display:flex;align-items:center;gap:9px;flex:1;text-align:left}.rider.selected{border-color:#1b806c;background:#f5ffef;box-shadow:0 4px 0 #1b806c15}.rider b{display:block;font-size:19px}.rider small{display:block;font-size:10px;color:#678373;margin-top:4px}.rider i{margin-left:auto;visibility:hidden;color:#278270}.rider.selected i{visibility:visible}.avatar{width:43px;height:49px;border-radius:12px;background-image:url('assets/duo.webp');background-repeat:no-repeat;background-size:215px auto;background-color:#e1eed7}.avatar.lucy{background-position:-86px -21px}.avatar.bella{background-position:-115px -11px}.primary{background:var(--green);color:#fffdf0;padding:16px 23px;border-radius:14px;font-weight:700;font-size:16px;box-shadow:0 5px 0 #104a40;transition:background .15s}.primary:hover{background:#208271}.intro .primary{margin-top:20px;width:min(420px,100%);display:flex;justify-content:space-between}.controls-help{font-size:10px;margin-top:17px;color:#728978}.hero-art{width:57%;margin-left:-8%;position:relative;align-self:center;pointer-events:none}.hero-art img{width:118%;filter:drop-shadow(0 22px 18px #183b3725);animation:float 4s ease-in-out infinite}.hero-note{margin-left:34%;background:#fff9e9db;padding:12px 20px;border-radius:40px;font-size:12px;display:inline-flex;gap:20px;white-space:nowrap;transform:rotate(-4deg)}@keyframes float{50%{transform:translateY(-15px) rotate(1deg)}}#hud{position:absolute;inset:20px 20px auto;display:flex;justify-content:space-between;pointer-events:none}.pill{background:#fff9e9eb;backdrop-filter:blur(10px);border:1px solid #ffffff55;border-radius:18px;padding:12px 18px;box-shadow:0 4px 20px #152b3320}#hearts{color:#cc5c60;font-size:21px;letter-spacing:3px}#shield{display:block;font-size:11px;margin-top:4px}.route{min-width:165px;font-size:12px}.route b{float:right;margin-left:25px}.track{height:5px;background:#cddbcc;border-radius:4px;margin-top:9px;overflow:hidden}.track i{display:block;background:#259381;height:100%;width:0;transition:width .3s}#toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:#fff9e9ed;padding:10px 18px;border-radius:30px;font-size:13px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}.modal{display:flex;align-items:center;justify-content:center;background:#11362d76;backdrop-filter:blur(7px);z-index:10;padding:20px}.dialog{background:var(--cream);border:1px solid #fff5c9;border-radius:26px;padding:30px 35px;text-align:center;width:min(520px,100%);box-shadow:0 20px 80px #082c3640}.dialog h2{font-family:'Songti SC',serif;font-size:30px;margin:16px 0 7px}.dialog .eyebrow{font-size:10px;letter-spacing:1px}.fruit,.treasure{font-size:49px;color:#daa029;text-shadow:0 3px #fce3a0}.feed-actions{display:flex;gap:13px;margin-top:22px}.feed-actions button{width:50%;padding:21px 10px;border-radius:18px;background:#e9efdc;border:2px solid transparent}.feed-actions button:hover{border-color:#388775}.feed-actions button span{display:block;font-size:29px;color:#d25e65}.feed-actions b{display:block;margin:10px 0}.feed-actions small{line-height:1.8;font-size:11px;color:#5c7467}.text-btn{display:block;margin:18px auto 0;background:none;text-decoration:underline;font-size:12px;color:#6e8678}#loot{color:#bd8720;font-size:36px;font-weight:900;margin:20px}footer{display:flex;justify-content:space-between;font-size:10px;color:#718375;padding:18px 3px;gap:12px}footer i{font-style:normal;margin:0 8px;color:#b5bda8}.loading{position:absolute;inset:0;background:#fff9e9;display:grid;place-items:center;z-index:30}.touch-controls{position:absolute;right:18px;bottom:18px;display:flex;gap:10px}.touch-controls button{border-radius:50%;width:54px;height:54px;background:#fff9e9d9;font-size:26px;touch-action:none}.stage.playing{cursor:crosshair}@media(max-width:800px),(max-height:500px) and (orientation:landscape){.shell{padding:15px 12px}.brand{font-size:19px}header{padding-bottom:14px}.brand small{font-size:7px}.header-actions button{padding:9px 11px;font-size:11px}.stage{height:76vh;min-height:590px;border-radius:22px}.intro{align-items:flex-end;padding:25px 24px;background:linear-gradient(0deg,#fff9e9 0%,#fff9e9f5 52%,#fff9e900 95%)}.intro-copy{width:100%}h1{font-size:37px;line-height:1.05;margin:10px 0}p{font-size:12px;line-height:1.6}.intro-copy>p{max-width:270px}.hero-art{position:absolute;width:70%;right:10%;top:3%;margin:0}.hero-art img{width:100%}.hero-note{display:none}.eyebrow{font-size:9px;letter-spacing:1px}.choose-label{margin-top:14px}.riders{max-width:none}.intro .primary{width:100%;margin-top:14px}.controls-help{font-size:9px}footer{line-height:1.8;flex-direction:column;gap:1px;font-size:9px}footer i{margin:0 3px}.dialog{padding:26px 20px}.dialog h2{font-size:26px}#hud{inset:12px 12px auto}.pill{padding:10px 12px}#hearts{font-size:15px}.route{min-width:125px}.route b{margin-left:12px}#toast{font-size:11px;bottom:83px}}@media(prefers-reduced-motion:reduce){.hero-art img{animation:none}*{scroll-behavior:auto!important}}
#loot small{display:block;font-size:15px;color:#718377;margin-top:9px}

.route-preview{margin:14px 0;color:#295a50}.route-preview b{font-size:15px}.route-preview p{font-size:12px!important;line-height:1.6!important;margin:5px 0!important}@media(max-width:600px){.route-preview{margin:8px 0}.route-preview p{font-size:11px!important}}

#enemy-status{display:block;font-size:11px;margin-top:5px;color:#a64848}.spray{position:absolute;bottom:20px;left:20px;background:#d9f8ff;border:2px solid #4cb7d7;border-radius:22px;padding:13px 20px;color:#136578;font-weight:700;touch-action:none;z-index:4}.spray small{display:block;font-size:10px;margin-top:3px}.spray:active{background:#8ee5fc}@media(max-width:600px){#enemy-status{font-size:9px}.spray{padding:10px 15px;bottom:18px;left:12px}}

#energy-controls{position:absolute;top:116px;left:20px;display:flex;gap:6px;align-items:center;background:#fff9e9e8;border-radius:14px;padding:7px 10px;font-size:11px}#energy-controls button{background:#dcebd5;border-radius:9px;padding:9px 10px;font-size:11px}#energy-controls button:disabled{cursor:default;opacity:.45}@media(max-width:600px){#energy-controls{top:105px;left:12px;gap:4px;padding:6px;font-size:10px}#energy-controls button{font-size:10px;padding:8px 6px}}

.spray.empty{background:#e3e9e7;border-color:#a6b7b5;color:#6a8180}

.riders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rider{min-width:0;padding:9px}.rider b{font-size:17px}.avatar{flex-shrink:0}.avatar.shuaiwang{background-image:url('assets/shuaiwang.webp');background-size:245px auto;background-position:-114px -19px}.avatar.mama{background-image:url('assets/mama.webp');background-size:245px auto;background-position:-113px -20px}@media(max-width:800px),(max-height:500px) and (orientation:landscape){.stage{min-height:690px}.intro{padding:20px}.hero-art{width:56%;right:20%;top:0}.intro h1{font-size:32px}.intro .choose-label{margin-top:10px}.rider{padding:8px}.rider small{font-size:9px}.rider .avatar{width:38px;height:43px}.intro .controls-help{margin-top:12px}}@media(min-width:801px){.intro h1{font-size:clamp(34px,3.5vw,54px);margin:12px 0}.intro .choose-label{margin-top:14px}.intro .primary{margin-top:12px}.stage{min-height:650px}}
#ranking{border:0;border-radius:26px;background:#fff9e9;color:#194f49;padding:28px;width:min(620px,90vw);max-height:85vh;box-sizing:border-box;box-shadow:0 20px 90px #133b4455}#ranking::backdrop{background:#123d4277;backdrop-filter:blur(5px)}.ranking-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.ranking-head h2{margin:8px 0}.ranking-head button{border:0;background:#e9eddd;border-radius:50%;width:36px;height:36px;cursor:pointer}.ranking-rule,.ranking-foot{font-size:12px;line-height:1.7;opacity:.75}.ranking-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #21584920}.ranking-row>strong{width:28px;font-size:23px}.ranking-row>div{flex:1}.ranking-row small{display:block;font-size:11px;margin-top:6px;line-height:1.6}.ranking-row>b{color:#a16c22;font-size:14px}.ranking-empty{text-align:center;padding:35px 12px;line-height:1.9}#rank-result{font-size:13px}#end-ranking{display:block;margin:0 auto 10px}@media(max-width:600px){.header-actions{gap:4px}.header-actions button{padding:8px;font-size:11px}#ranking{padding:20px}.ranking-row{gap:8px}.ranking-row>b{font-size:12px}}

.avatar.gonggong{background-image:url('assets/gonggong.webp');background-size:245px auto;background-position:-111px -18px}.avatar.popo{background-image:url('assets/popo.webp');background-size:245px auto;background-position:-112px -20px}@media(min-width:801px){.stage{min-height:750px}}@media(max-width:800px),(max-height:500px) and (orientation:landscape){.stage{min-height:780px}}

.player-name-field{margin-top:12px;display:grid;gap:5px;max-width:360px}.player-name-field label{font-size:13px;font-weight:700}.player-name-field input{box-sizing:border-box;width:100%;padding:10px 13px;border:1px solid #7caaa2;border-radius:12px;background:#fffcf3;color:#194f49;font:inherit;font-size:16px}.player-name-field input:focus{outline:2px solid #dfb54c;outline-offset:2px}.player-name-field input[aria-invalid=true]{border-color:#b74438}.player-name-field small{font-size:10px;color:#607b71}.ranking-row>div{min-width:0;overflow-wrap:anywhere}@media(min-width:801px){.stage{min-height:850px}}@media(max-width:800px),(max-height:500px) and (orientation:landscape){.stage{min-height:880px}}
/* Mobile: scroll the character lobby; keep the flight controls inside the viewport. */
@media(max-width:800px),(max-height:500px) and (orientation:landscape){
 .shell{padding:12px max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom))}
 header{gap:8px;flex-wrap:wrap}.brand{font-size:17px}.brand small{letter-spacing:1px}.crest{font-size:26px}.header-actions{margin-left:auto}
 .stage:not(.in-game){height:auto;min-height:0}.intro{position:relative;display:flex;flex-direction:column-reverse;align-items:stretch;padding:18px;background:linear-gradient(0deg,#fff9e9 70%,#fff9e950)}
 .hero-art{position:relative;top:auto;right:auto;width:62%;height:125px;margin:0 auto;align-self:center}.hero-art img{height:100%;width:100%;object-fit:contain;animation:none}
 .intro-copy{width:100%}.intro h1{font-size:29px}.intro-copy>p{max-width:none}.player-name-field{max-width:none}.riders{gap:6px}.rider{min-height:60px}.intro .controls-help{line-height:1.7}
 .stage.in-game{height:calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:300px;border-radius:16px}
 body.game-active{overscroll-behavior:none}body.game-active footer{display:none}body.game-active .shell{padding-top:max(8px,env(safe-area-inset-top))}body.game-active header{padding-bottom:8px;flex-wrap:nowrap}
 body.game-active .brand small{display:none}.header-actions button{min-height:42px}
 #hud{inset:8px 8px auto;gap:5px}.pill{padding:8px}.route{min-width:100px;font-size:10px}#hearts{letter-spacing:1px}#enemy-status{font-size:9px}.route b{margin-left:5px}
 .touch-controls{bottom:18px;right:12px;z-index:5}.touch-controls button{width:58px;height:58px;user-select:none}.spray{min-width:100px;min-height:60px;user-select:none}#toast{white-space:normal;text-align:center;width:max-content;max-width:85%;bottom:90px;padding:8px 12px}
 .modal{padding:10px}.dialog{max-height:90%;overflow-y:auto}.dialog h2{margin:8px 0}.dialog p{line-height:1.5}.feed-actions{margin-top:12px}.feed-actions button{padding:12px 8px}
}
@media(max-height:500px) and (orientation:landscape){.stage.in-game{height:calc(100dvh - 62px);min-height:220px}.dialog{padding:12px}.dialog .treasure,.dialog .fruit{display:none}.dialog h2{font-size:22px}.dialog .primary{padding:10px 18px}#loot{font-size:22px;margin:6px}.touch-controls button{width:48px;height:48px}.spray{min-height:48px;padding:8px 12px}}
@media(max-width:800px),(max-height:500px) and (orientation:landscape){.stage:not(.in-game)>canvas{position:absolute;inset:0}}
/* Laptop/desktop: allocate the available viewport instead of a growing minimum height. */
@media(min-width:801px) and (min-height:501px){
 .shell{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:14px 26px 10px;gap:10px}
 header{padding:0;min-height:42px}.stage{height:100%;min-height:0;border-radius:22px}footer{padding:0;line-height:1.5}
 .intro{padding:18px 4%;height:100%;align-items:center}.intro-copy{width:59%;max-height:100%;overflow-y:auto;padding:2px 8px 8px 2px;scrollbar-width:thin}
 .intro h1{font-size:clamp(30px,4.8vh,48px);line-height:1.1;margin:8px 0}.intro-copy>p{margin:6px 0;font-size:12px;line-height:1.6}
 .intro .eyebrow{font-size:10px;letter-spacing:1px}.player-name-field{margin-top:8px;gap:3px;max-width:420px}.player-name-field input{padding:8px 12px}.player-name-field label{font-size:12px}
 .intro .choose-label{margin:10px 0 6px}.riders{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;gap:6px}.rider{padding:7px;gap:6px;border-radius:12px;min-height:58px}.rider b{font-size:15px}.rider small{font-size:9px;line-height:1.4}.rider .avatar{width:34px;height:40px}.rider i{font-size:10px}
 .route-preview{margin:8px 0}.route-preview b{font-size:13px}.route-preview p{margin:3px 0!important;font-size:11px!important}.intro .primary{margin-top:8px;padding:12px 18px;max-width:420px;font-size:15px}.intro .controls-help{margin-top:9px;line-height:1.5}
 .hero-art{width:46%;margin-left:-5%;max-height:88%;display:flex;flex-direction:column;align-items:center}.hero-art img{width:100%;max-height:58vh;object-fit:contain}.hero-note{margin:0;font-size:11px;padding:9px 15px}
 .modal .dialog{max-height:calc(100% - 12px);overflow-y:auto}
}
@media(min-width:801px) and (min-height:501px) and (max-height:700px){
 .shell{padding:10px 22px 8px;gap:8px}.intro{padding:10px 3%}.intro h1{font-size:30px;margin:5px 0}.intro-copy>p{font-size:11px;line-height:1.4;margin:4px 0}.intro .choose-label{margin:7px 0 4px}.player-name-field{margin-top:5px}.player-name-field input{padding:6px 10px}.rider{min-height:50px;padding:5px}.rider .avatar{height:34px;width:30px}.route-preview{margin:5px 0}.intro .controls-help{margin-top:7px;font-size:9px}.intro .primary{padding:10px 16px;margin-top:5px}.hero-note{display:none}footer{font-size:9px}
}
.difficulty-trigger{display:block;margin-top:7px;padding:7px 13px;border:1px solid #176b6066;border-radius:10px;background:#fff9e9;color:#176b60;font-size:12px;font-weight:700}
#difficulty-dialog{width:min(450px,92vw);max-height:88dvh;overflow:auto;padding:24px;border:0;border-radius:24px;background:var(--cream);color:var(--ink)}#difficulty-dialog::backdrop{background:#123d4277;backdrop-filter:blur(5px)}#difficulty-dialog h2{margin:0;font-size:25px}#difficulty-dialog>p{margin:8px 0 16px}.difficulty-options{display:grid;gap:10px}.difficulty-options button{display:grid;gap:6px;text-align:left;border:2px solid #d4dcc8;border-radius:14px;padding:15px;background:#fffcf3}.difficulty-options button[aria-pressed=true]{border-color:#176b60;background:#e8f4e5}.difficulty-options b{font-size:18px}.difficulty-options span{font-size:12px}.difficulty-options small{font-size:11px;color:#628273}
@media(min-width:801px) and (min-height:501px){.difficulty-trigger{display:inline-block;margin-top:4px}.intro .controls-help{margin-top:6px}}
@media(min-width:801px) and (min-height:501px){.intro .difficulty-trigger{width:150px;vertical-align:middle;margin-right:8px;padding:10px 8px}.intro .primary{display:inline-flex;width:calc(100% - 166px);vertical-align:middle}}

/* Live points remain readable on narrow screens without covering the route. */
#hud{gap:8px}.score-pill{text-align:center;align-self:flex-start}.score-pill b{display:block;font-size:22px;color:#a16c0a;font-variant-numeric:tabular-nums}.score-pill small{display:block;font-size:10px;margin-top:4px}#loot small{display:block;font-size:13px;line-height:1.7;font-weight:500}
@media(max-width:800px),(max-height:500px) and (orientation:landscape){#hud{flex-wrap:wrap}.score-pill{order:3;width:100%;padding:5px 8px;display:flex;align-items:center;justify-content:center;gap:10px}.score-pill b{font-size:17px}.score-pill small{margin:0;font-size:9px}}