:root {
  --ink: #f8edd1;
  --muted: #dfcba6;
  --gold: #f5bd4f;
  --gold-deep: #bc6b22;
  --wine: #8f2d28;
  --wine-dark: #481914;
  --pine: #183b32;
  --night: #24140f;
  --panel: rgba(47, 27, 18, 0.9);
  --line: rgba(250, 205, 112, 0.28);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: #21120e;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #21120e; }
button { font: inherit; }

.app-shell { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% -15%, #744223, #25140e 60%); }
.page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 34px; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: Georgia, "Songti SC", serif; font-weight: 800; letter-spacing: .07em; font-size: clamp(18px, 2vw, 26px); }
.crest { display:grid; place-items:center; width:38px; height:42px; color:#fff2c7; background:linear-gradient(145deg,#c64b32,#6c1e18); clip-path: polygon(50% 0, 96% 15%, 87% 76%, 50% 100%, 13% 76%, 4% 15%); border:1px solid #f8c75e; font-size:20px; }
.top-actions, .row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.quiet-btn, .gold-btn, .outline-btn, .gear, .control { border: 0; cursor:pointer; transition: transform .16s ease, filter .16s ease, background .16s ease; }
.quiet-btn:hover, .gold-btn:hover, .outline-btn:hover, .gear:hover, .control:hover { transform: translateY(-1px); filter:brightness(1.08); }
.quiet-btn { color:var(--muted); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); padding:8px 12px; border-radius:9px; font-size:13px; }
.gold-btn { color:#401d0c; background:linear-gradient(#ffd870,#e89a2d); border:1px solid #ffe29a; box-shadow: inset 0 1px rgba(255,255,255,.55), 0 4px 14px rgba(0,0,0,.22); padding:11px 17px; border-radius:10px; font-weight:800; }
.outline-btn { color:#fbe9bf; background:rgba(62,25,17,.77); border:1px solid var(--line); padding:10px 14px; border-radius:10px; font-weight:700; }
.title { margin:0; font-family: Georgia, "Songti SC", serif; letter-spacing:.05em; font-size:clamp(31px,5.2vw,64px); line-height:1; text-shadow:0 3px 0 #5a2614, 0 12px 30px rgba(0,0,0,.43); }
.subtitle { color:var(--muted); line-height:1.7; margin:12px 0 0; }

.hero { position:relative; min-height:410px; padding:44px; overflow:hidden; border:1px solid rgba(250,210,127,.38); border-radius:20px; background:linear-gradient(90deg,rgba(31,15,12,.94) 0%,rgba(31,15,12,.74) 42%,rgba(31,15,12,.1) 78%), url('assets/royal-harvest-parade-bg.png') center/cover; box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.hero:after { content:""; position:absolute; inset:auto 0 0; height:50%; background:linear-gradient(transparent,rgba(28,12,8,.66)); pointer-events:none; }
.hero-copy { position:relative; z-index:1; max-width:520px; }
.hero-copy .subtitle { max-width:430px; }
.hero-actions { position:relative; z-index:1; margin-top:24px; display:flex; gap:10px; flex-wrap:wrap; }
.hero-stats { position:absolute; right:28px; bottom:25px; z-index:1; display:flex; gap:10px; }
.stat-tile { min-width:138px; padding:12px 14px; background:rgba(36,16,12,.8); border:1px solid rgba(255,224,153,.35); border-radius:11px; backdrop-filter:blur(5px); }
.stat-tile span { display:block; color:#dfc696; font-size:12px; }
.stat-tile strong { display:block; margin-top:5px; color:#ffe194; font-size:20px; }

.section-head { display:flex; justify-content:space-between; gap:16px; align-items:end; margin:30px 0 13px; }
.section-head h2 { margin:0; font-family:Georgia, "Songti SC", serif; font-size:25px; }
.section-head p { margin:0; color:#cdb68b; font-size:13px; }
.progress-layout { display:grid; grid-template-columns:1.35fr .95fr; gap:16px; }
.panel { background:linear-gradient(145deg,rgba(68,37,22,.94),rgba(35,20,15,.94)); border:1px solid var(--line); border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,.16); }
.panel-pad { padding:18px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; font-weight:800; }
.panel-title small { color:#d4b87d; font-weight:500; }
.track { height:12px; background:#1e100d; border:1px solid rgba(255,255,255,.1); border-radius:20px; overflow:hidden; }
.track > span { display:block; height:100%; width:0; background:linear-gradient(90deg,#d66a28,#ffe179); border-radius:inherit; box-shadow:0 0 15px rgba(250,182,62,.55); transition:width .45s ease; }
.milestones { display:flex; justify-content:space-between; gap:4px; margin-top:11px; color:#d6b984; font-size:11px; }
.member-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid rgba(255,255,255,.08); font-size:13px; }
.member-row:first-of-type { border-top:0; }
.member-row strong { color:#f7d584; }
.avatar { display:inline-grid; place-items:center; width:27px; height:27px; margin-right:7px; background:linear-gradient(135deg,#c05a2c,#53211b); border-radius:50%; font-size:13px; }

.task-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.task { padding:15px; min-height:128px; background:rgba(27,14,11,.38); border:1px solid rgba(255,232,174,.14); border-radius:12px; display:flex; flex-direction:column; gap:7px; }
.task strong { font-size:16px; }.task p { margin:0; color:#cdb997; font-size:13px; line-height:1.5; }.task footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; color:#f4c866; font-size:12px; }
.task.done { background:rgba(60,95,52,.23); border-color:rgba(139,210,111,.32); }
.tag { padding:3px 7px; border-radius:7px; background:rgba(252,201,85,.13); color:#f4ce78; font-size:11px; }

.modal-wrap { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:rgba(18,8,6,.7); backdrop-filter:blur(7px); }
.modal { width:min(540px,100%); padding:25px; background:linear-gradient(145deg,#56301e,#281611); border:1px solid rgba(255,219,138,.42); border-radius:17px; box-shadow:0 24px 70px rgba(0,0,0,.53); text-align:center; }
.modal h2 { margin:0; font-family:Georgia, "Songti SC", serif; font-size:30px; }.modal p { color:#dec9a5; line-height:1.7; }
.modal .gold-btn { margin-top:8px; }

.game-page { width:min(100%, 500px); min-height:100vh; margin:0 auto; padding:12px 10px 18px; background:linear-gradient(180deg,#3f2115,#1b0e0b); box-shadow:0 0 60px rgba(0,0,0,.55); }
.game-top { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 2px 10px; }
.game-title { font-family:Georgia, "Songti SC", serif; font-weight:700; font-size:21px; }.game-sub { color:#d8bf90; font-size:12px; }
.hud { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.hud-card { min-width:88px; padding:7px 11px; border:1px solid rgba(255,220,142,.28); border-radius:9px; background:rgba(77,35,20,.58); }.hud-card span { display:block; color:#dfc494; font-size:10px; }.hud-card strong { display:block; color:#fff0c2; font-size:17px; }
.game-stage { position:relative; isolation:isolate; height:calc(100vh - 245px); min-height:480px; max-height:720px; overflow:hidden; border:1px solid rgba(255,214,126,.52); border-radius:17px; background:#79401e url('assets/royal-harvest-diagonal-road.png') center top/cover; box-shadow:0 18px 44px rgba(0,0,0,.36); transition:background-position .55s ease, filter .3s ease, box-shadow .18s ease; }
.game-stage:before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(27,11,4,.05) 35%,rgba(24,10,6,.32)); }
.game-stage.terrain-slope { background-position:46% 11%; }.game-stage.terrain-bumps { filter:saturate(1.08) contrast(1.03); }.game-stage.terrain-turn { background-position:57% 13%; }
.game-stage.unsteady { animation:stage-wobble .18s linear infinite; }.game-stage.danger { box-shadow:0 0 0 3px rgba(225,68,42,.65), 0 18px 48px rgba(134,23,16,.65); animation:stage-wobble .1s linear infinite; }
.game-stage.danger:after { content:""; position:absolute; inset:0; z-index:9; pointer-events:none; border:11px solid rgba(191,45,28,.32); box-shadow:inset 0 0 35px rgba(183,29,17,.54); animation:danger-pulse .5s ease-in-out infinite alternate; }
@keyframes stage-wobble { 0%,100% { translate:0 0; } 50% { translate:1.5px 0; } } @keyframes danger-pulse { to { opacity:.52; } }
.segment-banner { position:absolute; z-index:7; top:3%; left:50%; transform:translateX(-50%); padding:8px 13px; border:1px solid rgba(255,233,162,.56); border-radius:9px; background:rgba(62,30,15,.74); color:#fff1c4; font-family:Georgia,serif; font-size:16px; white-space:nowrap; box-shadow:0 5px 18px rgba(0,0,0,.2); }
.route-note { position:absolute; z-index:7; top:10%; left:50%; width:80%; transform:translateX(-50%); color:#fff0c3; text-align:center; font-size:12px; text-shadow:0 2px 4px #3b180a; }
.terrain-visual { position:absolute; z-index:1; left:50%; top:31%; width:45%; height:30%; transform:translateX(-50%); pointer-events:none; opacity:.78; }
.terrain-visual.slope { background:repeating-linear-gradient(160deg,transparent 0 17px,rgba(255,239,180,.62) 18px 21px,transparent 22px 36px); clip-path:polygon(13% 100%,50% 0,87% 100%,70% 100%,50% 30%,30% 100%); }
.terrain-visual.bumps { background:repeating-radial-gradient(ellipse at center bottom,transparent 0 12px,rgba(111,57,28,.78) 13px 17px,transparent 18px 31px); }
.terrain-visual.turn:before { content:""; display:block; height:100%; border:5px dotted rgba(255,239,177,.75); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(-25deg); }
.event-chip { position:absolute; top:18%; left:var(--start-x, 68%); z-index:3; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#4a250d; background:radial-gradient(circle at 36% 30%,#ffe8a4,#d58a28 65%,#914312); border:3px solid #ffe7a0; box-shadow:0 5px 12px rgba(0,0,0,.28); font-size:22px; animation: approach var(--event-duration, 2.2s) linear forwards; }
.event-chip.gold { width:67px; height:67px; color:#6b3908; background:radial-gradient(circle at 36% 28%,#fff8be,#f2bf26 54%,#a75a0e); border-color:#fff1a8; box-shadow:0 0 19px #f6c847, 0 5px 12px rgba(0,0,0,.28); }
.event-chip.air { width:58px; height:58px; z-index:13; border-color:#fff2a9; background:radial-gradient(circle at 36% 28%,#fff4bd,#d57824 63%,#72320c); box-shadow:0 0 16px rgba(255,220,101,.78), 0 5px 12px rgba(0,0,0,.28); animation-timing-function:cubic-bezier(.18,.68,.34,1); color:#542809; font-size:11px; font-weight:900; text-align:center; line-height:1.1; animation-name:air-approach; }
.event-chip.air-low { border-color:#d4f2ff; background:radial-gradient(circle at 36% 28%,#f4fcff,#74c1dc 63%,#286e90); color:#143b50; animation-name:air-low-approach; }
.event-chip.air-high { border-color:#fff0a5; background:radial-gradient(circle at 36% 28%,#fff8c5,#e4a01d 60%,#8d3d08); color:#5b2605; animation-name:air-high-approach; }
.event-chip.normal { width:55px; height:54px; border-radius:11px; border-color:#f3c66d; background:linear-gradient(90deg,#653014 0 17%,#ca7b2c 18% 42%,#744017 43% 57%,#d88b36 58% 82%,#653014 83%); color:#fff4ce; font-size:11px; font-weight:900; white-space:pre-line; line-height:1.15; text-align:center; }
.event-chip.normal.front { border-color:#ffd27a; box-shadow:0 0 12px rgba(231,129,63,.72), 0 5px 12px rgba(0,0,0,.28); }
.event-chip.normal.rear { border-color:#a9e5ef; box-shadow:0 0 12px rgba(116,189,209,.6), 0 5px 12px rgba(0,0,0,.28); }
.game-stage:has(.event-chip.air) .toast { opacity:0 !important; }
.event-chip.station { width:88px; height:57px; border-radius:12px; color:#fff2c4; background:linear-gradient(160deg,#8c3520,#4d2015); border:2px solid #f1ba4e; font-size:12px; text-align:center; padding:5px; }
@keyframes approach { 0% { top:18%; left:var(--start-x,68%); opacity:0; transform:translateX(-50%) scale(.34) rotate(-12deg); } 12% { opacity:1; } 82% { opacity:1; } 100% { top:64%; left:var(--end-x,51%); opacity:.06; transform:translateX(-50%) scale(1.32) rotate(-15deg); } }
.wagon { position:absolute; z-index:4; left:53%; bottom:8%; width:min(278px,68vw); transform-origin:50% 76%; will-change:transform; filter:drop-shadow(0 15px 9px rgba(35,13,5,.5)); transition:filter .12s ease; }
.wagon.unsteady { filter:drop-shadow(0 15px 9px rgba(35,13,5,.5)) saturate(1.18); }.wagon.danger { filter:drop-shadow(0 15px 12px rgba(97,9,4,.9)) saturate(1.3) contrast(1.08); }.wagon.airborne { filter:drop-shadow(0 25px 14px rgba(35,13,5,.34)) saturate(1.1); }
.game-stage.airborne .wagon:before { transform:translateY(104px) scaleX(1.5); opacity:.45; }
.game-stage.airborne.descending .wagon:before { transform:translateY(62px) scaleX(1.22); opacity:.62; }
.wagon:before { content:""; position:absolute; z-index:-1; left:20%; right:20%; bottom:2%; height:18px; border-radius:50%; background:rgba(44,19,7,.42); filter:blur(8px); }.wagon img { display:block; width:100%; height:auto; }.wagon .load { position:absolute; right:20%; top:37%; color:#fff3cc; font-size:13px; text-shadow:0 1px 3px #4d1a0b; }
.impact { position:absolute; z-index:8; left:50%; bottom:36%; color:#fff2bf; font-weight:800; font-size:14px; text-align:center; white-space:nowrap; text-shadow:0 2px 4px #5c1e0c; animation:pop .9s ease forwards; }
@keyframes pop { 0%{opacity:0; transform:translateY(8px) scale(.8)} 25%{opacity:1} 100%{opacity:0; transform:translateY(-28px) scale(1.1)} }
.balance-unit { position:absolute; z-index:6; left:50%; bottom:18px; transform:translateX(-50%); width:min(310px,57vw); text-align:center; }.balance-unit label { display:block; margin-bottom:6px; font-size:12px; font-weight:800; text-shadow:0 1px 3px #3a140a; }.balance-track { position:relative; height:16px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,243,184,.68); background:linear-gradient(90deg,#b0402e 0 23%,#466e48 35% 65%,#b0402e 77%); box-shadow:0 2px 8px rgba(0,0,0,.35); }.balance-center { position:absolute; left:50%; top:-3px; width:2px; height:20px; background:#fff4ce; }.balance-marker { position:absolute; top:2px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#ffdd79; box-shadow:0 0 8px #fff4bd; transition:left .07s linear; }
.balance-readout { position:absolute; z-index:10; left:50%; bottom:34%; transform:translateX(-50%); width:max-content; max-width:80%; padding:5px 10px; border-radius:8px; color:#fff1c9; background:rgba(69,31,16,.66); border:1px solid rgba(255,225,157,.25); font-size:11px; font-weight:800; }.balance-readout.warn { background:rgba(134,67,20,.82); }.balance-readout.danger { background:rgba(143,34,23,.9); border-color:#ffac87; }
.landing-guide { position:absolute; z-index:9; width:72px; height:20px; opacity:0; pointer-events:none; transform-origin:center bottom; transition:opacity .14s; }.landing-guide.show { opacity:1; }.landing-guide i { position:absolute; inset:8px 0 auto; border-top:3px dashed #9cf0ff; filter:drop-shadow(0 1px 2px #12485b); }.landing-guide span { position:absolute; left:50%; top:-9px; transform:translateX(-50%) rotate(0deg); width:max-content; color:#d8fbff; font-size:9px; font-weight:900; text-shadow:0 1px 2px #17455d; }
.speed-trail { position:absolute; z-index:3; left:8%; top:47%; width:42%; opacity:0; pointer-events:none; transition:opacity .15s; }.speed-trail i { display:block; height:2px; margin:7px 0; border-radius:4px; background:linear-gradient(90deg,transparent,#fff2bc); transform-origin:right; animation:trail-run .34s linear infinite; }.speed-trail i:nth-child(2){ width:72%; animation-delay:.11s; }.speed-trail i:nth-child(3){ width:48%; animation-delay:.21s; } .game-stage.speed-mid .speed-trail{opacity:.38}.game-stage.speed-high .speed-trail{opacity:.85}.game-stage.speed-high .wagon img{filter:drop-shadow(-8px 0 6px rgba(255,231,156,.34));}.game-stage.speed-high .terrain-svg #terrain-line{stroke:#d9f16c;}@keyframes trail-run{to{transform:translateX(45px);opacity:.08}}
.ridge-projection { position:absolute; inset:0; z-index:9; pointer-events:none; opacity:0; transition:opacity .16s; }.ridge-projection.show { opacity:1; }.projected-reward { position:absolute; display:grid; place-items:center; width:42px; height:42px; padding:2px; border:2px dashed rgba(255,246,191,.7); border-radius:50%; background:rgba(71,37,15,.48); color:#fff6cd; font-size:9px; font-weight:900; line-height:1.05; text-align:center; transform:translateX(-50%) scale(.88); transition:transform .14s,filter .14s,background .14s; }.projected-reward b{font-size:11px}.projected-reward.low{border-color:#9deeff;color:#d9fbff;box-shadow:0 0 9px rgba(92,209,239,.46)}.projected-reward.high{width:48px;height:48px;border-color:#ffe277;color:#fff3ab;box-shadow:0 0 11px rgba(255,190,47,.54)}.projected-reward.selected{transform:translateX(-50%) scale(1.1);background:rgba(255,198,72,.3);filter:brightness(1.25)}
.balance-unit.locked .balance-track{border-color:#9cf6ff;box-shadow:0 0 12px rgba(100,230,255,.72)}.balance-unit.locked .balance-marker{background:#b5faff;box-shadow:0 0 12px #b5faff;}.balance-unit.locked label::after{content:'  已对准';margin-left:6px;color:#b9faff;font-size:10px}
.landing-calibration{position:absolute;z-index:13;left:7%;bottom:22%;display:grid;gap:2px;padding:6px 8px;border:1px solid rgba(125,230,255,.8);border-radius:8px;background:rgba(20,63,82,.78);color:#d9fbff;font-size:10px;opacity:0;transform:translateX(-8px);transition:opacity .13s,transform .13s;pointer-events:none}.landing-calibration.show{opacity:1;transform:none;animation:calibrate-pulse .48s ease-in-out infinite alternate}.landing-calibration b{font-size:11px}.landing-calibration span{font-size:9px}.landing-calibration.locked{border-color:#fff0a2;background:rgba(102,71,25,.84);color:#fff3c4;animation:none}@keyframes calibrate-pulse{to{box-shadow:0 0 14px rgba(100,225,255,.76)}}
.spill-barrel { position:absolute; z-index:11; left:52%; bottom:28%; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:#512806; background:radial-gradient(circle at 37% 28%,#ffe49a,#b45d1d 65%,#633014); border:2px solid #ffe090; box-shadow:0 3px 6px rgba(0,0,0,.4); animation:spill-out .86s cubic-bezier(.14,.7,.41,1) forwards; }.spill-barrel.right { animation-name:spill-out-right; } @keyframes spill-out { to { translate:-175px 120px; rotate:-420deg; opacity:0; } } @keyframes spill-out-right { to { translate:175px 120px; rotate:420deg; opacity:0; } }
.toast { position:absolute; bottom:7px; left:50%; z-index:8; transform:translateX(-50%); width:max-content; max-width:72%; padding:5px 10px; text-align:center; background:rgba(53,22,12,.82); border:1px solid rgba(255,223,146,.32); border-radius:10px; color:#fff1ca; font-weight:700; font-size:11px; opacity:0; transition:opacity .2s; pointer-events:none; }.toast.show { opacity:1; }
.game-bottom { display:grid; grid-template-columns:.78fr 1.7fr .78fr; align-items:end; gap:7px; margin-top:10px; }
.control { min-height:74px; color:#fff2cb; border:1px solid rgba(255,223,144,.38); border-radius:15px; background:linear-gradient(145deg,#85402a,#461e17); box-shadow:inset 0 1px rgba(255,255,255,.15), 0 8px 17px rgba(0,0,0,.22); font-weight:900; font-size:17px; user-select:none; touch-action:none; }.control small { display:block; margin-top:4px; color:#e3be83; font-size:11px; font-weight:600; }.control.pressed { transform:translateY(3px); filter:brightness(.82); }
.control.jump { background:linear-gradient(145deg,#4e8b55,#1d4c35); border-color:#b5e88b; }.control.gas { background:linear-gradient(145deg,#a24e20,#592016); }
.speed-note { min-height:71px; display:grid; align-content:center; gap:5px; padding:8px; border:1px solid var(--line); border-radius:15px; background:rgba(43,21,14,.8); text-align:center; }.speed-note strong { color:#ffe09a; font-size:12px; }.speed-note strong.ready { color:#fff0a7; text-shadow:0 0 9px rgba(255,204,74,.7); }.speed-note strong.overdrive { color:#ffb19b; animation:overdrive-pulse .55s ease-in-out infinite alternate; }.speed-note span { color:#d1b584; font-size:10px; line-height:1.35; }.charge-track { display:block; width:78%; height:5px; margin:auto; overflow:hidden; border-radius:10px; background:#392219; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }.charge-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d18032,#ffe178); transition:width .08s linear; }
.speed-note strong.gold-line{color:#fff0a1;text-shadow:0 0 12px rgba(255,203,56,.98)}.speed-note span b{color:#ffe37e}.charge-track{position:relative;overflow:hidden}
.gear-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }.gear-selector button { min-height:27px; color:#dfc394; border:1px solid rgba(255,231,171,.2); border-radius:7px; background:#30170f; font-size:11px; font-weight:900; }.gear-selector button.active { color:#48200c; border-color:#ffe4a0; background:linear-gradient(#ffe17c,#e7972f); box-shadow:0 0 8px rgba(255,192,67,.34); }
@keyframes overdrive-pulse { to { text-shadow:0 0 10px rgba(255,83,46,.85); } }
.gear-box { padding:10px; border:1px solid var(--line); border-radius:15px; background:rgba(43,21,14,.8); }.gear-label { color:#e0c494; text-align:center; font-size:11px; margin-bottom:7px; }.gears { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.gear { padding:9px 2px; color:#dfc394; border:1px solid rgba(255,231,171,.17); border-radius:7px; background:#30170f; font-weight:800; }.gear.active { color:#48200c; border-color:#ffe4a0; background:linear-gradient(#ffe17c,#e7972f); }
.game-help { margin-top:8px; text-align:center; color:#c9ad7d; font-size:11px; line-height:1.5; }

/* Hill-climb revision: portrait KC shell, side-view physics playfield. */
.game-page { width:min(100%, 540px); }
.game-stage { height:min(56vh, 430px); min-height:320px; max-height:none; border-radius:15px; background:#7ac2e5; }
.hill-world { position:absolute; inset:0 auto 0 0; z-index:0; width:300%; height:100%; background:url('assets/royal-harvest-hills.png') left bottom/33.3334% 100% repeat-x; will-change:transform; }
.terrain-svg { position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; pointer-events:none; }.terrain-svg #terrain-fill { fill:#5a3820; fill-opacity:.94; }.terrain-svg #terrain-line { fill:none; stroke:#a9d84d; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 0 rgba(52,42,13,.65)); }
.game-stage.terrain-slope .hill-world { filter:brightness(1.04); }.game-stage.terrain-bumps .hill-world { filter:saturate(1.08) contrast(1.03); }.game-stage.terrain-turn .hill-world { filter:brightness(.98) saturate(1.08); }
.terrain-visual { display:none; }
.segment-banner { top:5%; font-size:15px; }.route-note { display:none; }
.terrain-preview { position:absolute; z-index:12; top:20%; left:50%; transform:translateX(-50%); max-width:78%; padding:4px 9px; border-radius:8px; color:#fff0be; background:rgba(55,28,14,.66); border:1px solid rgba(255,222,145,.22); font-size:10px; font-weight:800; white-space:nowrap; }
.terrain-preview[data-cue="charge"] { color:#fff0ae; border-color:rgba(255,204,73,.75); box-shadow:0 0 12px rgba(255,184,44,.24); }
.terrain-preview[data-cue="brake"] { color:#dff8ff; border-color:rgba(112,211,237,.72); box-shadow:0 0 12px rgba(70,185,220,.18); }
.terrain-preview[data-cue="valley"] { color:#ffd2a0; border-color:rgba(255,151,67,.68); }
.terrain-preview[data-cue="cargo"] { color:#e8ffbf; border-color:rgba(182,222,98,.52); }
.event-chip { top:auto; bottom:var(--start-y, 48%); left:var(--start-x, 108%); z-index:3; width:44px; height:44px; animation:hill-approach var(--event-duration, 2.2s) linear forwards; }
.event-chip.air-target { z-index:10; width:48px; height:48px; animation:none; opacity:1; transform:translateX(-50%); white-space:pre-line; color:#fff7cf; font-size:10px; font-weight:900; line-height:1.1; text-align:center; pointer-events:none; transition:opacity .12s, filter .12s; }
.event-chip.air-target.air-low { border-color:#a6f1ff; background:radial-gradient(circle at 36% 30%,#d7fbff,#3979a0 66%,#17384f); box-shadow:0 0 12px rgba(115,225,255,.72); }
.event-chip.air-target.air-high { width:54px; height:54px; border-color:#ffe28c; background:radial-gradient(circle at 36% 30%,#fff2a7,#cd7821 66%,#74320e); box-shadow:0 0 15px rgba(255,195,62,.85); }
.run-obstacle{position:absolute;z-index:8;width:42px;height:38px;transform:translateX(-50%);pointer-events:none}.run-obstacle.fence{border:5px solid #8a431d;border-top-width:8px;border-radius:4px;background:repeating-linear-gradient(90deg,#c07a34 0 7px,#6d3117 8px 11px);box-shadow:0 3px 5px rgba(38,16,6,.42)}.run-obstacle.fence i{position:absolute;bottom:-7px;width:5px;height:48px;background:#6c3218}.run-obstacle.fence i:first-child{left:5px}.run-obstacle.fence i:nth-child(2){right:5px}.run-obstacle.fence b{display:none}.run-obstacle.thorns{height:26px;border-radius:60% 60% 8px 8px;background:repeating-linear-gradient(125deg,#427228 0 7px,#8bb94b 8px 12px);border-top:5px solid #b6dc58;box-shadow:0 2px 6px rgba(20,45,14,.55)}.run-obstacle.thorns i{font-style:normal;color:#edff9d;font-size:8px;font-weight:900}.run-obstacle.hit{filter:grayscale(1);opacity:.42;transform:translateX(-50%) scale(.82)}.run-platform{position:absolute;z-index:7;width:78px;height:18px;display:grid;place-items:center;border:3px solid #f6c85c;border-radius:5px;background:repeating-linear-gradient(90deg,#8d4720 0 9px,#d68c35 10px 16px);box-shadow:0 5px 8px rgba(43,17,7,.4);transform:translateX(-50%);color:#fff2bd;font-size:9px;font-weight:900}.run-platform:after{content:'';position:absolute;left:9px;right:9px;bottom:-15px;height:13px;background:linear-gradient(90deg,transparent 0 13%,#6d3519 14% 21%,transparent 22% 78%,#6d3519 79% 86%,transparent 87%)}.run-platform i{position:absolute;top:-19px;color:#fff0a4;font-style:normal;font-size:10px;text-shadow:0 1px 2px #4b200c}.run-platform.claimed{filter:grayscale(.7);opacity:.35}
.event-chip.gold { width:57px; height:57px; }.event-chip.station { width:84px; height:50px; }.event-chip.normal, .event-chip.gold, .event-chip.station { animation-name:road-approach; }
@keyframes hill-approach { 0% { left:var(--start-x,108%); bottom:var(--start-y,48%); opacity:0; transform:scale(.58) rotate(0); } 10% { opacity:1; } 78% { opacity:1; } 100% { left:var(--end-x,31%); bottom:var(--end-y,30%); opacity:.06; transform:scale(1.1) rotate(-22deg); } }
@keyframes road-approach { 0% { left:var(--start-x,108%); bottom:var(--start-y,38%); opacity:0; transform:scale(.76); } 10%,78% { opacity:1; } 100% { left:var(--end-x,31%); bottom:var(--end-y,32%); opacity:.05; transform:scale(1); } }
@keyframes air-approach { 0% { left:var(--start-x,72%); bottom:var(--start-y,72%); opacity:0; transform:scale(.7) rotate(-8deg); } 12% { opacity:1; } 52% { left:52%; bottom:80%; opacity:1; transform:scale(1.05) rotate(4deg); } 100% { left:var(--end-x,35%); bottom:var(--end-y,60%); opacity:.06; transform:scale(1.08) rotate(12deg); } }
@keyframes air-low-approach { 0% { left:72%; bottom:43%; opacity:0; transform:scale(.7) } 12%,72% { opacity:1 } 100% { left:35%; bottom:45%; opacity:.08; transform:scale(1.05) } }
@keyframes air-high-approach { 0% { left:72%; bottom:55%; opacity:0; transform:scale(.72) } 12%,72% { opacity:1 } 100% { left:35%; bottom:57%; opacity:.08; transform:scale(1.06) } }
.wagon { left:31%; bottom:24%; width:min(148px,35vw); transform-origin:48% 76%; }.wagon:before { left:12%; right:12%; bottom:-1%; }
.wagon .load { right:18%; top:35%; }.balance-readout { bottom:auto; top:18%; z-index:12; }.balance-unit { bottom:15px; z-index:12; width:min(300px,67vw); }
.cargo-status { position:absolute; z-index:12; top:11%; right:4%; display:flex; gap:5px; }.cargo-status span { padding:4px 6px; border:1px solid rgba(255,234,165,.42); border-radius:7px; background:rgba(48,24,13,.73); color:#ecd09a; font-size:10px; white-space:nowrap; }.cargo-status b { color:#fff1bd; font-size:12px; }.balance-unit { bottom:36px; }.toast { top:auto; bottom:6px; z-index:12; max-width:68%; font-size:10px; }.game-stage.unsteady { animation:hill-shake .16s linear infinite; }.game-stage.danger { animation:hill-shake .075s linear infinite; }
.station-choice { position:absolute; z-index:15; left:50%; top:42%; width:min(280px,76%); transform:translate(-50%,-50%); padding:10px; border:1px solid rgba(255,220,129,.78); border-radius:12px; background:linear-gradient(145deg,rgba(104,47,24,.96),rgba(50,22,14,.96)); box-shadow:0 10px 26px rgba(28,9,4,.48); text-align:center; }.station-choice strong { display:block; color:#fff0bf; font-size:14px; }.station-choice small { display:block; margin:3px 0 8px; color:#f2ca7b; font-size:11px; }.station-choice > div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.station-choice button { min-height:53px; border:1px solid rgba(255,227,157,.4); border-radius:9px; color:#fff2c8; background:#5f2a1a; font-weight:800; font-size:13px; }.station-choice button:last-child { border-color:#f1b74d; background:linear-gradient(145deg,#9a471f,#5f2417); }.station-choice button b,.station-choice button em { display:block; }.station-choice button b { color:#ffe17f; font-size:15px; }.station-choice button em { margin-top:2px; color:#d8b585; font-size:10px; font-style:normal; font-weight:600; }
@keyframes hill-shake { 0%,100% { translate:0 0; } 50% { translate:2px 1px; } }
.spill-barrel { left:31%; bottom:30%; }.game-bottom { grid-template-columns:.85fr 1.55fr .85fr; }.control { min-height:71px; }.game-help { padding:0 8px; }

.result-hero { text-align:center; padding:28px; border-radius:16px; background:linear-gradient(145deg,#633620,#281611); border:1px solid rgba(255,214,131,.42); }.rating { color:#ffdc79; font-family:Georgia,serif; font-size:58px; line-height:1; text-shadow:0 4px #6c2a14; }.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:21px 0; }.result-item { padding:12px; border-radius:10px; background:rgba(0,0,0,.17); border:1px solid rgba(255,225,160,.12); }.result-item span { display:block; color:#d5ba8c; font-size:12px; }.result-item strong { display:block; margin-top:5px; color:#fff0bd; font-size:22px; }
.rank-list { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.rank-row { display:flex; align-items:center; gap:9px; padding:11px; border-bottom:1px solid rgba(255,255,255,.08); }.rank-row.you { background:rgba(237,164,49,.12); }.rank-num { width:24px; color:#f7ca68; font-weight:900; }.rank-row strong { margin-left:auto; color:#ffe29c; }
.title-card { display:flex; align-items:center; gap:14px; padding:15px; }.title-seal { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:radial-gradient(#e8b94d,#7b2d20); border:2px solid #ffe19a; font-size:25px; }.title-card small { display:block; color:#cdb68a; margin-top:4px; }

@media (max-width: 760px) { .page { width:min(100% - 20px, 620px); padding-top:12px; }.topline { align-items:flex-start; }.top-actions { justify-content:flex-end; }.hero { min-height:470px; padding:27px 20px; background:linear-gradient(180deg,rgba(31,15,12,.84),rgba(31,15,12,.35) 64%,rgba(31,15,12,.8)), url('assets/royal-harvest-parade-bg.png') center/cover; }.hero-stats { left:20px; right:20px; bottom:20px; }.stat-tile { min-width:0; flex:1; }.progress-layout, .task-grid, .rank-list { grid-template-columns:1fr; }.section-head { align-items:flex-start; flex-direction:column; }.game-page { padding:9px; }.game-top { align-items:flex-start; }.hud { justify-content:flex-start; }.hud-card { min-width:72px; }.game-stage { min-height:320px; height:min(56vh,430px); }.wagon { left:31%; width:min(148px,35vw); bottom:24%; }.game-bottom { gap:7px; grid-template-columns:.85fr 1.55fr .85fr; }.control { min-height:67px; font-size:15px; }.gear { padding:8px 1px; font-size:12px; }.result-grid { grid-template-columns:1fr 1fr; }.balance-unit { width:72vw; } }
.run-platform{width:172px;height:20px}.run-platform:before{content:'●  ●  ●  ●  ●  ●';letter-spacing:8px;color:#fff1a4;font-size:11px;position:absolute;top:-21px;white-space:nowrap}
.balance-unit,.balance-readout,.landing-guide,.terrain-preview{display:none!important}.run-platform{width:310px!important}.run-platform:before{content:'●  ●  ●  ●  ●  ●  ●  ●'!important;letter-spacing:18px!important;left:25px!important}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.runner-pickup{position:absolute;z-index:10;width:28px;height:28px;display:grid;place-items:center;transform:translateX(-50%);border:2px solid #ffe7a1;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff6b7,#bd6d24 67%,#6b3010);box-shadow:0 2px 8px rgba(48,20,6,.55);color:#fff8c6;font-size:13px;font-weight:900;pointer-events:none;transition:opacity .15s,transform .15s}.runner-pickup.low{border-color:#a9eaff;background:radial-gradient(circle at 35% 28%,#effdff,#4383aa 68%,#183f5e)}.runner-pickup.lane{width:25px;height:25px;border-color:#ffe893;background:radial-gradient(circle at 35% 28%,#fff7c5,#cc7826 68%,#70320f)}.runner-pickup.gold{width:36px;height:36px;border-color:#fff0a2;background:radial-gradient(circle at 35% 28%,#fffbc5,#d99a2a 66%,#78370c);box-shadow:0 0 16px rgba(255,195,56,.75)}.runner-pickup.collected{opacity:0;transform:translateX(-50%) scale(1.8)}.ridge-projection{display:none!important}
.run-obstacle.warning:before{content:'!';position:absolute;left:50%;top:-29px;translate:-50% 0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e8a324;border:2px solid #fff0a6;color:#5a210b;font:900 14px/1 Arial;box-shadow:0 0 0 0 rgba(255,201,71,.7);animation:hazard-pulse 1s infinite}.run-obstacle.warning.hit:before{display:none}.game-stage.obstacle-hit{filter:saturate(1.24) contrast(1.06)}@keyframes hazard-pulse{70%{box-shadow:0 0 0 10px rgba(255,201,71,0)}}
.jump-cue{display:block;color:#ffe4a0;font-size:10px;font-style:normal;line-height:1.1}.jump-cue.held{color:#fff4bd;text-shadow:0 0 9px rgba(255,213,91,.85)}.lane-entry{position:absolute;z-index:9;display:grid;place-items:center;width:38px;height:38px;translate:-50% 50%;border:2px solid #ffe6a0;border-radius:50% 50% 7px 7px;background:linear-gradient(135deg,#dc9e31,#754019);color:#fff6c7;font:900 23px/1 Arial;box-shadow:0 0 14px rgba(255,202,73,.72);animation:entry-beacon .85s ease-in-out infinite alternate}.lane-entry:after{content:'跑道入口';position:absolute;top:-18px;white-space:nowrap;color:#fff0b1;font-size:10px;text-shadow:0 1px 2px #4a220d}.lane-entry.entered{opacity:.38;animation:none}.runner-pickup:not(.focus){opacity:.58;filter:saturate(.76)}.runner-pickup.focus{z-index:11;transform:translateX(-50%) scale(1.12);box-shadow:0 0 15px rgba(255,219,113,.82)}@keyframes entry-beacon{to{translate:-50% 46%;filter:brightness(1.22)}}
.lane-entry,.lane-exit{opacity:0;pointer-events:none;transition:opacity .18s}.lane-entry.visible,.lane-exit.visible{opacity:1}.lane-exit{position:absolute;z-index:9;display:grid;place-items:center;width:34px;height:34px;translate:-50% 50%;border:2px solid #c9eff7;border-radius:7px 7px 50% 50%;background:linear-gradient(135deg,#5796a7,#244764);color:#e8fbff;font:900 21px/1 Arial;box-shadow:0 0 12px rgba(157,236,251,.7);animation:exit-beacon .85s ease-in-out infinite alternate}.lane-exit:after{content:'回归主路';position:absolute;top:-18px;white-space:nowrap;color:#d6f5ff;font-size:10px;text-shadow:0 1px 2px #183346}@keyframes exit-beacon{to{translate:-50% 55%;filter:brightness(1.24)}}
.runner-pickup.recovery{border-color:#c9f59b;background:radial-gradient(circle at 35% 28%,#f2ffd5,#5e9a43 66%,#254b2b);box-shadow:0 0 13px rgba(159,237,110,.72);color:#efffd0}.runner-pickup.lane{transition:opacity .15s,transform .15s,filter .15s}.run-platform.entered{box-shadow:0 0 18px rgba(255,218,107,.85),0 5px 8px rgba(43,17,7,.4)}
.run-platform.middle{border-color:#8eeaff;background:repeating-linear-gradient(90deg,#215f82 0 9px,#4da8c7 10px 16px);color:#e4fbff}.run-platform.upper{border-color:#ffe48e;background:repeating-linear-gradient(90deg,#8c4d17 0 9px,#e8aa35 10px 16px);box-shadow:0 0 12px rgba(255,198,65,.58),0 5px 8px rgba(43,17,7,.4)}.run-platform.upper.locked{opacity:.3;filter:grayscale(.7)}.run-platform.middle:after,.run-platform.upper:after{content:attr(data-route)}.run-platform.middle{--route:'中跑道'}.run-platform.upper{--route:'上跑道'}
.lane-entry.coast-rule{border-color:#a9e393}.lane-entry.charge-rule{border-color:#ffe19a}.lane-entry.tap-rule{border-color:#dce58f}.run-platform.middle.coast{border-color:#9adf86;background:repeating-linear-gradient(90deg,#356c35 0 9px,#79b85b 10px 16px)}.run-platform.middle.tap{border-color:#d5dc8d;background:repeating-linear-gradient(90deg,#777335 0 9px,#b7af59 10px 16px)}
.game-stage.intro-clean .run-platform,.game-stage.intro-clean .run-obstacle,.game-stage.intro-clean .lane-entry,.game-stage.intro-clean .lane-exit{display:none!important}
.terrain-preview{display:block!important;top:17%!important;z-index:14!important;max-width:88%!important;white-space:normal!important;text-align:center;line-height:1.25}.game-stage.need-speed .terrain-preview{border-color:#9bdaf1;background:rgba(21,58,73,.78)}.game-stage.jump-ready .terrain-preview{border-color:#bce978;background:rgba(44,71,30,.78)}.game-stage.high-route-ready .terrain-preview{border-color:#ffe07a;background:rgba(92,51,12,.8);box-shadow:0 0 16px rgba(255,192,55,.42)}
.run-platform{opacity:.18;filter:saturate(.42) brightness(.56);transition:opacity .16s,filter .16s,box-shadow .16s}.run-platform.route-muted{opacity:.08;filter:grayscale(.82) brightness(.42)}.run-platform.focus-route,.run-platform.entered{opacity:1;filter:none;box-shadow:0 0 20px rgba(255,224,117,.82),0 5px 8px rgba(43,17,7,.4)}
.run-obstacle{opacity:.45;transition:opacity .16s,filter .16s,transform .16s}.run-obstacle.focus{opacity:1;filter:drop-shadow(0 0 10px rgba(255,188,67,.95));transform:translateX(-50%) scale(1.14)}.run-obstacle.focus:after{content:'前方障碍 · 跳跃躲避';position:absolute;left:50%;top:-46px;translate:-50% 0;white-space:nowrap;padding:4px 6px;border-radius:5px;color:#fff4be;background:rgba(76,33,14,.84);font:800 10px/1 Arial}
.lane-entry:after{content:attr(data-route);top:-28px;padding:3px 6px;border-radius:5px;background:rgba(71,35,13,.82);line-height:1.25;text-align:center;min-width:104px}.lane-entry{width:46px;height:46px}.lane-entry.visible{box-shadow:0 0 20px rgba(255,210,72,.95)}
.lane-entry.upper-entry{width:54px;height:54px;border-color:#fff19d;background:linear-gradient(135deg,#efba3d,#9d4a17);box-shadow:0 0 22px rgba(255,205,71,.92)}.lane-entry.upper-entry:after{top:-34px;background:rgba(97,48,11,.9);color:#fff3ad}.runner-pickup.route-muted{opacity:.12!important;filter:grayscale(.85) brightness(.58)!important}.runner-pickup.focus,.run-platform.focus-route{animation:route-focus-pulse .85s ease-in-out infinite alternate}@keyframes route-focus-pulse{to{filter:brightness(1.16);}}
.run-platform.upper.ghost{height:12px!important;opacity:.42;filter:grayscale(.55);border:1px dashed rgba(235,244,255,.82);background:repeating-linear-gradient(90deg,rgba(177,220,241,.54) 0 7px,transparent 8px 15px);box-shadow:none;pointer-events:none;font-size:0}.run-platform.upper.ghost:before{content:'🔒  上跑道暂未开放';position:absolute;left:50%;top:-23px;translate:-50% 0;white-space:nowrap;color:#d7effa;font:700 10px/1 Arial;letter-spacing:0;text-shadow:0 1px 2px #234255}.run-platform.upper.ghost:after{display:none}.run-obstacle.lane-hazard{box-shadow:0 0 12px rgba(255,108,54,.82),0 3px 5px rgba(38,16,6,.42)}