:root{--bg:#101b20;--panel:#14252b;--line:#2c4045;--text:#e4eee8;--muted:#849c99;--gold:#e4c18a;--fire:#ffad72;--ice:#83dfed}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif}body{margin:0;background:radial-gradient(ellipse at 50% 12%,#203b3b66,transparent 60%);overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.shell{max-width:1200px;margin:auto;padding:0 30px}header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #31464480}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-size:21px;font-weight:700;letter-spacing:3px}.brand-icon{font-size:44px;color:var(--gold);font-weight:300}.brand small{display:block;font:8px system-ui;letter-spacing:3px;color:var(--muted);margin-top:3px}.header-note{font-size:11px;color:#9bb0a6;letter-spacing:1px}.live-dot{display:inline-block;background:#8fc7aa;width:5px;height:5px;border-radius:50%;margin:0 6px 2px 0;box-shadow:0 0 8px #8fc7aa}.sep{margin:0 13px;color:#4d635e}.tools{display:flex;gap:8px}.tools button{height:34px;min-width:34px;border:1px solid #3b514b;border-radius:7px;background:#1c302f;color:#b4c7ba;font-size:14px}.tools #sound{font-size:11px;padding:0 11px}.title-row{display:flex;justify-content:space-between;align-items:center;padding:30px 0 25px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.4px;color:var(--gold)}h1{font-size:29px;font-weight:500;margin:10px 0 0;letter-spacing:1px}h1 span{color:var(--gold)}.title-row p{font-size:12px;line-height:1.9;color:#b4c3b8;margin:0}.title-row p span{color:var(--muted)}.chapters{display:flex;gap:8px;margin-bottom:15px}.chapters button{position:relative;display:flex;align-items:center;gap:8px;border:1px solid #2d4444;border-radius:7px;padding:10px 14px;background:#15272a;flex:1;text-align:left;font-size:10px;color:#829b93;white-space:nowrap}.chapters button strong{font-size:12px;font-weight:500}.chapters button.active{border-color:#b89664;background:#302f29;color:#e7cfa7}.chapters button.done:after{content:'✓';margin-left:auto;color:#9dc6ac}.game{position:relative;overflow:hidden;border-radius:12px;border:1px solid #48635b;box-shadow:0 16px 70px #0004;background:#11252a;aspect-ratio:16/9;isolation:isolate}.game:fullscreen{border:0;border-radius:0;aspect-ratio:auto;width:100vw;height:100dvh}.game canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.game-hud{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:18px 22px;background:linear-gradient(#0b1c24dd,transparent);pointer-events:none}.chapter{display:flex;align-items:center;gap:11px}.chapter>span{font-size:28px;font-weight:300;color:#c3cbbc80}.chapter small{display:block;font-size:7px;letter-spacing:2px;color:#9ab3a3;margin-bottom:5px}.chapter b{font-size:12px;font-weight:500;color:#dde6d7}.hud-right{display:flex;align-items:center;gap:14px;color:#c3d6c8;font-size:12px;font-variant-numeric:tabular-nums}.hud-right #gem-count{color:#8fe6f1}.hud-right button{pointer-events:auto;background:#142c2fbb;border:1px solid #3b5755;border-radius:6px;width:29px;height:29px;font-size:18px}.form-badge{position:absolute;left:22px;bottom:17px;display:flex;align-items:center;gap:7px;background:#1b2526d9;border:1px solid #b2744555;border-radius:30px;padding:7px 12px;font-size:10px;pointer-events:none;color:var(--fire)}.form-badge.ice{border-color:#69c2d166;color:var(--ice)}.form-badge>span{font-size:16px}.form-badge small{padding-left:8px;border-left:1px solid #ffffff25;color:#abc0b1;font-size:9px}.scene-label{position:absolute;right:22px;bottom:27px;color:#98b3a3;font-size:9px;letter-spacing:1px;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:4;background:#07151b8f;backdrop-filter:blur(5px);text-align:center;padding:20px}.overlay-card{max-width:410px;width:100%;padding:24px;border-radius:18px;background:linear-gradient(145deg,#243a38f5,#12272bf7);border:1px solid #70908255;box-shadow:0 20px 80px #0005}.hero-portrait{width:83px;height:83px;margin:0 auto 21px;border:1px solid #b3aa7b;border-radius:50%;background:#f4f0e6;position:relative;box-shadow:0 0 35px #e3a96b20}.hero-portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 50%}.hero-portrait span{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#d9b985;border-radius:3px;padding:3px 7px;color:#233c34;font:7px system-ui;letter-spacing:1px;white-space:nowrap}.overlay h2{font-size:28px;font-weight:500;letter-spacing:1px;margin:12px 0}.overlay p{font-size:12px;line-height:1.9;color:#a9c0b2;margin:12px 0 20px}.primary{display:block;width:100%;border:1px solid #e8c99a;background:#e2c08a;border-radius:6px;padding:13px 20px;color:#243c34;font-size:13px;font-weight:600;letter-spacing:1px;box-shadow:0 5px 25px #c19a5e19}.primary span{float:right;font-size:17px}.secondary{display:block;background:transparent;border:1px solid #57756a;border-radius:6px;width:100%;padding:10px;color:#bcd1c3;margin-top:9px;font-size:12px}.overlay-card>small{display:block;color:#6f9385;font-size:9px;letter-spacing:1px;margin-top:16px}.overlay-card.compact .hero-portrait{display:none}.toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);border:1px solid #d9c08a77;background:#24372dea;border-radius:6px;padding:11px 18px;z-index:3;color:#f0d4a5;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}.toast.visible{opacity:1}.control-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:15px 0 18px}.direction-controls,.action-controls{display:flex;align-items:center;gap:10px}.touch{user-select:none;-webkit-user-select:none;touch-action:none;border:1px solid #3f5952;border-radius:9px;background:#1c302f;box-shadow:inset 0 -3px 0 #0002;color:#d0ded3;height:48px}.touch.held{transform:translateY(2px);background:#365246;box-shadow:none;border-color:#b4c8a5}.arrow{width:52px;font:30px system-ui;line-height:1}.key-hint{font-size:9px;color:#6e8c7f;margin-left:5px}.action-controls .touch{padding:0 18px;display:flex;align-items:center;gap:9px;font-size:12px}.touch small{font-size:8px;opacity:.45}.touch span{font-size:20px}.touch.jump{background:#d7b782;color:#233c32;border-color:#ddc49b;min-width:113px}.touch.jump.held{background:#f4d8a7}.touch.switch{color:#b1d5cf}.control-caption{display:flex;gap:8px;align-items:center;color:#859f91;max-width:360px;font-size:10px;line-height:1.7}.tiny-diamond{color:var(--gold);font-size:14px}.bottom-row{border-top:1px solid #2a4240;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}.legend{display:flex;gap:18px;font-size:9px;color:#8fa79b}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:6px;height:6px;border-radius:50%;display:inline-block}.fire-dot{background:#eda36a}.ice-dot{background:#76c9da}.poison-dot{background:#a4ca73}.gold-dot{background:#dcc087}.save-note{font-size:9px;color:#5f7f73}footer{font-size:8px;color:#567369;letter-spacing:1.2px;display:flex;justify-content:space-between;padding:14px 0 25px}dialog{max-width:560px;width:calc(100% - 30px);color:#dce6db;background:#172c2e;border:1px solid #597667;border-radius:14px;padding:27px;box-shadow:0 30px 90px #0008}dialog::backdrop{background:#041319bb;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head button{background:transparent;border:0;font-size:24px;color:#99b8a6}dialog h2{font-size:24px;font-weight:500}dialog p{font-size:12px;color:#a9c0b1;line-height:1.9}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.help-grid b{font-size:12px;color:#e2c28c}.help-grid p{font-size:11px}.help-tip{color:#749b85!important;border-top:1px solid #39564b;padding-top:12px}body.immersive .shell{max-width:none;padding:0}body.immersive header,body.immersive .title-row,body.immersive .chapters,body.immersive .bottom-row,body.immersive footer{display:none}body.immersive .game{border-radius:0;aspect-ratio:auto;height:calc(100dvh - 78px)}body.immersive .control-bar{margin:10px 20px}
@media(max-width:850px){.shell{padding:0 18px}header{height:76px}.header-note{display:none}.title-row{padding:23px 0 20px}h1{font-size:24px}.title-row p{font-size:10px}.chapters button{padding:9px;font-size:9px;gap:5px}.chapters button strong{font-size:11px}.key-hint{display:none}.control-caption{max-width:230px;font-size:9px}.save-note{font-size:8px}.legend{gap:12px}}
@media(max-width:580px) and (orientation:portrait){.shell{padding:0 12px}header{height:66px}.brand{font-size:17px;gap:7px;letter-spacing:2px}.brand-icon{font-size:33px}.brand small{font-size:6px}.tools{gap:5px}.tools button{height:30px;min-width:30px}.title-row{padding:18px 2px}.title-row .eyebrow{font-size:7px;letter-spacing:2px}h1{font-size:22px;margin-top:7px}.title-row>p{display:none}.chapters{gap:5px;margin-bottom:10px}.chapters button{padding:8px 4px;justify-content:center;font-size:8px;gap:3px}.chapters button strong{font-size:10px}.chapters button.done:after{display:none}.chapter-label{display:none}.game{aspect-ratio:1/1.08;border-radius:9px}.game-hud{padding:12px 11px;gap:3px}.chapter{gap:6px}.chapter>span{font-size:21px}.chapter small{font-size:5px;letter-spacing:1px;margin-bottom:3px}.chapter b{font-size:9px}.hud-right{gap:7px;font-size:10px}.hud-right button{width:24px;height:25px;font-size:16px}.form-badge{bottom:12px;left:10px;padding:4px 8px;font-size:9px;gap:5px}.form-badge small{font-size:7px;padding-left:5px}.scene-label{right:10px;bottom:21px;font-size:7px}.overlay{padding:14px}.overlay-card{padding:18px;max-width:300px;border-radius:12px}.hero-portrait{width:62px;height:62px;margin-bottom:16px}.overlay h2{font-size:23px;margin:9px 0}.overlay p{font-size:10px;margin:10px 0 14px}.overlay .eyebrow{font-size:7px}.overlay-card>small{font-size:8px;margin-top:12px}.primary{padding:12px;font-size:12px}.control-bar{margin:12px 0;gap:7px;flex-wrap:wrap}.direction-controls{gap:7px}.action-controls{gap:7px}.touch{height:57px}.arrow{width:54px;font-size:33px}.action-controls .touch{padding:0 12px;font-size:11px;gap:5px}.touch.jump{min-width:84px}.touch small{display:none}.control-caption{order:3;max-width:100%;width:100%;padding:4px 3px;font-size:10px}.bottom-row{padding:12px 0;align-items:flex-start;flex-direction:column;gap:12px}.legend{width:100%;justify-content:space-between;gap:4px;font-size:8px}.save-note{font-size:8px}footer{padding:7px 0 20px;font-size:6px;letter-spacing:.7px}.toast{font-size:10px;padding:9px;top:24%}dialog{padding:20px}.help-grid{gap:10px;margin:12px 0}dialog h2{font-size:22px}}
@media(max-height:550px) and (orientation:landscape){.shell{padding:0 16px;max-width:1000px}header{height:45px}.brand{font-size:15px}.brand-icon{font-size:28px}.brand small{font-size:5px}.tools button{height:28px;min-width:28px}.title-row,footer,.bottom-row,.chapters{display:none}main{position:relative;padding:7px 0}.game{height:calc(100dvh - 126px);aspect-ratio:auto;max-width:960px;margin:auto}.game-hud{padding:9px 14px}.chapter>span{font-size:22px}.control-bar{margin:8px 0}.touch{height:48px}.overlay-card{padding:16px;max-width:360px}.hero-portrait{display:none}.overlay h2{font-size:23px;margin:9px}.overlay p{font-size:11px;line-height:1.6;margin:10px 0}.overlay-card>small{display:none}.control-caption{max-width:310px}.form-badge{bottom:9px}.scene-label{bottom:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Keep touch controls outside phone notches. */
@media (orientation:landscape){.shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}footer{padding-bottom:max(20px,env(safe-area-inset-bottom))}