:root{color-scheme:dark;--ink:#eef4e8;--muted:#829b91;--line:rgba(173,211,184,.13);--mint:#a9e3b8;--gold:#e6bf76;--bg:#081414;--panel:#0d1d1c;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:'Avenir Next',Avenir,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{min-width:320px;background:var(--bg);-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(ellipse at 51% -15%,#17302a 0,transparent 52%),linear-gradient(180deg,#0a1918,#071211 75%);min-height:100vh;touch-action:none;overscroll-behavior:none;-webkit-touch-callout:none}
html.is-touch,html.is-touch body{position:fixed;inset:0;width:100vw;height:100%;height:100svh;height:100dvh;overflow:hidden;touch-action:none;overscroll-behavior:none}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.shell{width:min(1500px,100%);margin:0 auto;padding:0 42px;position:relative}
.masthead{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#8ea49a}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#e5efe4;font-weight:500;letter-spacing:.17em}.brand-light{color:#c29e64;margin:0 3px}.brand-mark{display:inline-flex;align-items:end;gap:3px;height:20px}.brand-mark span{width:4px;background:#b3e0ad;border-radius:4px 4px 1px 1px;transform:skew(-21deg)}.brand-mark span:nth-child(1){height:10px}.brand-mark span:nth-child(2){height:16px}.brand-mark span:nth-child(3){height:13px}
.chapter{display:flex;align-items:center;gap:12px;color:#b8c8bd}.chapter b{font-weight:500;color:#e0ca91}.chapter-dot{width:5px;height:5px;border-radius:50%;background:#c7ae7b;box-shadow:0 0 10px #e5bd72}.chapter-line{height:1px;width:35px;background:#42554a}.sound-state{display:flex;align-items:center;gap:9px;border:0;padding:8px 0;background:transparent;color:#8ea49a;font:10px var(--mono);letter-spacing:.12em;cursor:pointer;touch-action:none}.sound-state:hover{color:#c8ddbf}.sound-bars{display:flex;gap:2px;align-items:center;height:14px}.sound-bars i{display:block;width:2px;background:#9ab99e;height:5px;transform-origin:bottom}.sound-state.playing .sound-bars i{animation:equalize .7s ease-in-out infinite alternate}.sound-state.playing .sound-bars i:nth-child(2){animation-delay:-.45s}.sound-state.playing .sound-bars i:nth-child(3){animation-delay:-.2s}.sound-state.muted .sound-bars i{animation:none;transform:scaleY(.28);background:#53665a}@keyframes equalize{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

/* Rotate overlay */
.rotate-screen{display:none;position:fixed;inset:0;z-index:9999;background:radial-gradient(ellipse at 50% 40%,#152f28 0%,#071312 85%);color:#eef4e8;align-items:center;justify-content:center;padding:30px;text-align:center;touch-action:none}
.rotate-box{max-width:380px;display:flex;flex-direction:column;align-items:center}
.rotate-animation{position:relative;width:76px;height:76px;margin-bottom:24px}
.rotate-device{width:44px;height:64px;border:3px solid #e1caa0;border-radius:9px;position:absolute;top:6px;left:16px;box-shadow:0 0 25px rgba(225,202,160,.25);animation:rotateLandscape 2.8s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center center}
.rotate-device::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#a9e3b8}
.rotate-arrow{position:absolute;top:-4px;right:-4px;font-size:26px;color:#a9e3b8;animation:rotatePulse 2.8s ease-in-out infinite}
@keyframes rotateLandscape{0%,15%{transform:rotate(0deg)}45%,70%{transform:rotate(-90deg)}90%,100%{transform:rotate(0deg)}}
@keyframes rotatePulse{0%,20%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}80%,100%{opacity:.3;transform:scale(.9)}}
.rotate-box h2{font-size:24px;margin:0 0 10px;color:#e6bf76;letter-spacing:-.02em}
.rotate-box p{font-size:14px;line-height:1.6;color:#bdcfc0;margin:0 0 16px}
.rotate-hint{font:11px var(--mono);color:#7b9487;letter-spacing:.08em}
@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (max-width: 900px), html.is-touch:is(:root) and (orientation: portrait){
  .rotate-screen{display:flex}
}

.game-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px;padding:36px 0 20px}.side-rail{position:relative;border-right:1px solid var(--line);padding:7px 23px 18px 2px;display:flex;flex-direction:column}.rail-label,.stat-label,.gear-slot small,.location small,.stage-progress>span,.eyebrow{font:9px var(--mono);letter-spacing:.13em;color:#718a7d}.hero-badge{display:flex;align-items:center;gap:11px;margin:20px 0 18px;font-size:9px;line-height:1.55;letter-spacing:.1em;color:#cedccf}.hero-avatar{width:34px;height:34px;border:1px solid rgba(200,223,170,.35);border-radius:50%;display:grid;place-items:center;color:#e8c784;background:radial-gradient(circle,#426048,#162b27 68%);box-shadow:0 0 19px #8ac88826;font-size:17px}.rail-divider{height:1px;background:var(--line);margin:7px 0 18px}.stat-label{margin:0 0 10px}.hearts{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;min-height:17px}.heart{color:#e67f75;font-size:16px;filter:drop-shadow(0 0 4px #da64524c)}.heart.empty{color:#33453f;filter:none}.armor-stat{font:9px var(--mono);color:#748a7e;margin:2px 0 0}.armor-stat b{color:#c5d1c4;font-weight:400;float:right}.gear-slot{display:flex;gap:9px;align-items:center;margin:5px 0 10px}.gear-icon{width:25px;height:25px;display:grid;place-items:center;background:#142622;border:1px solid #294238;color:#d4bb7d;font-size:15px;border-radius:6px}.gear-icon.muted{color:#687d71}.gear-slot small{display:block;font-size:7px;margin-bottom:3px}.gear-slot b{font-size:9px;font-weight:500;color:#bdcfc0}.rail-bottom{margin-top:auto;display:flex;gap:10px;align-items:center;padding-top:22px;font:8px/1.8 var(--mono);letter-spacing:.1em;color:#65796d}.sparkle{font-size:22px;color:#adbd7c}
.stage-column{min-width:0}.stage-topline{height:68px;display:flex;align-items:flex-start;justify-content:space-between}.eyebrow{font-size:8px;color:#a29472}.stage-topline h1{margin:5px 0 0;font-size:24px;letter-spacing:-.045em;font-weight:600;color:#e5ede3}.stage-progress{display:grid;grid-template-columns:auto 140px auto;align-items:center;gap:10px;padding-top:15px;font:8px var(--mono);color:#72877b;letter-spacing:.1em}.progress-track{height:3px;background:#23342d;border-radius:3px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8db68a,#e1c47f);box-shadow:0 0 9px #a8db9c66;transition:width .2s}.stage-progress b{font-weight:400;color:#d5dbb8}
.canvas-frame{position:relative;overflow:hidden;border:1px solid rgba(179,209,174,.25);background:#111d1c;box-shadow:0 20px 70px #0008,0 0 0 5px #ffffff05,inset 0 0 0 1px #fff1;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-frame:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 60px #020b0a88;z-index:2}.canvas-frame canvas{width:100%;height:auto;display:block;aspect-ratio:16/9;touch-action:none}.canvas-grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.25'/%3E%3C/svg%3E")}.frame-corner{position:absolute;z-index:4;width:19px;height:19px;pointer-events:none;border-color:#dfc886}.top-left{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}.top-right{top:-1px;right:-1px;border-top:2px solid;border-right:2px solid}.canvas-footer{position:absolute;bottom:13px;left:17px;z-index:3;color:#c3cfb48b;font:8px var(--mono);letter-spacing:.12em}.canvas-footer span{color:#d7c48a;font-size:13px;vertical-align:-1px;margin-right:5px}.version-tag{position:absolute;bottom:13px;right:17px;z-index:3;color:#c3cfb48b;font:9px var(--mono);letter-spacing:.12em;pointer-events:none;user-select:none}

/* Touch HUD */
.touch-hud{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));z-index:8;justify-content:space-between;align-items:center;pointer-events:none}
.touch-hud-left{display:flex;align-items:center;gap:12px;background:rgba(8,20,19,.78);border:1px solid rgba(173,211,184,.22);border-radius:20px;padding:5px 14px 5px 12px;backdrop-filter:blur(8px);pointer-events:auto}
.touch-hud-left .hearts{margin:0;display:flex;gap:4px;min-height:auto}
.touch-armor{font:9px var(--mono);letter-spacing:.1em;color:#748a7e;border-left:1px solid rgba(173,211,184,.2);padding-left:10px}
.touch-armor b{color:#e6bf76;font-weight:500}
.touch-hud-center{font:9px var(--mono);letter-spacing:.14em;color:#d4c28c;background:rgba(8,20,19,.68);border:1px solid rgba(173,211,184,.16);border-radius:12px;padding:4px 12px;backdrop-filter:blur(6px);display:none}
.touch-hud-right{display:flex;align-items:center;gap:8px;pointer-events:auto}
.touch-hud-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(173,211,184,.3);background:rgba(8,20,19,.82);color:#bdcfc0;font:14px var(--mono);display:grid;place-items:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.touch-hud-btn:active{transform:scale(.92);background:#18352f;color:#e6bf76;border-color:#e6bf76}
@media (min-width: 680px){.touch-hud-center{display:block}}

/* Touch controls */
.touch-controls{display:none;position:absolute;z-index:8;inset:auto 0 0 0;padding:0 max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));justify-content:space-between;align-items:flex-end;pointer-events:none}
.touch-move,.touch-actions{display:flex;align-items:flex-end;gap:12px;pointer-events:auto}
.touch-btn{border-radius:50%;border:1.5px solid rgba(210,225,195,.4);background:radial-gradient(circle at 35% 32%,rgba(24,48,42,.88),rgba(9,21,20,.94));color:#eef4e8;display:grid;place-items:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 6px 20px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.2);backdrop-filter:blur(6px);transition:transform .06s ease,border-color .08s ease,background .08s ease}
.touch-btn:active{transform:scale(.92);border-color:#a9e3b8;background:radial-gradient(circle at 35% 32%,rgba(42,90,75,.95),rgba(15,36,32,.96));box-shadow:0 0 18px rgba(169,227,184,.45)}
.touch-btn-dir{width:58px;height:58px;font-size:28px;font-family:var(--sans);font-weight:300;color:#e5ede3}
.touch-btn-jump{width:66px;height:66px;font-size:22px;color:#a9e3b8;border-color:rgba(169,227,184,.55)}
.touch-btn-jump:active{box-shadow:0 0 22px rgba(169,227,184,.6)}
.touch-btn-attack{width:58px;height:58px;font-size:20px;color:#e6bf76;border-color:rgba(230,191,118,.55)}
.touch-btn-attack:active{box-shadow:0 0 22px rgba(230,191,118,.6)}
.touch-btn-chest{width:48px;height:48px;font-size:15px;font-family:var(--mono);font-weight:600;color:#bdcfc0;border-color:rgba(173,211,184,.3);margin-bottom:6px}

@media (min-width: 768px){
  .touch-btn-dir{width:68px;height:68px;font-size:34px}
  .touch-btn-jump{width:78px;height:78px;font-size:26px}
  .touch-btn-attack{width:68px;height:68px;font-size:24px}
  .touch-btn-chest{width:56px;height:56px;font-size:17px}
  .touch-move,.touch-actions{gap:16px}
}

.game-overlay{position:absolute;z-index:9;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#071613bc,#07161382 54%,#08141079),linear-gradient(0deg,#08151370,transparent 60%);transition:opacity .35s,visibility .35s}.game-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.overlay-card{width:min(500px,80%);margin-left:4%;padding:26px 32px 24px;border-left:1px solid #e3c987a0;background:linear-gradient(100deg,#091816bc,#0a181477 80%,transparent)}.overlay-kicker{font:8px var(--mono);letter-spacing:.17em;color:#d4c28c}.overlay-kicker span{font-size:13px;margin-right:5px}.overlay-card h2{font-size:clamp(31px,4vw,52px);line-height:1.06;margin:14px 0 11px;letter-spacing:-.06em;font-weight:600;text-shadow:0 3px 25px #07100f}.overlay-card p{max-width:410px;color:#c1d0c0;font-size:12px;line-height:1.85;margin:0 0 22px}.start-button{display:flex;align-items:center;gap:27px;color:#14211a;background:#d9ca96;border:0;padding:0 0 0 17px;height:41px;font:600 10px var(--sans);cursor:pointer;box-shadow:0 5px 22px #d0bc7a30;transition:transform .2s,background .2s;touch-action:none}.start-button:hover{transform:translateY(-2px);background:#f0dda3}.button-arrow{display:grid;place-items:center;height:41px;width:39px;border-left:1px solid #7e795f50;font-size:16px}.key-hint{margin-top:18px;color:#a6b7a7;font:8px var(--mono);display:flex;align-items:center;gap:5px;letter-spacing:.05em}.key-hint kbd{margin-right:2px}.game-overlay:not(.hidden)~.boss-bar{display:none}
kbd{font:8px var(--mono);color:#d4d9c3;padding:4px 6px;border:1px solid #5d70615e;border-bottom-color:#8ea08475;background:#16251f;border-radius:3px;min-width:19px;text-align:center}.boss-bar{position:absolute;z-index:4;top:18px;left:50%;transform:translateX(-50%);width:min(380px,65%);text-align:center}.boss-bar.hidden{display:none}.boss-label{display:flex;align-items:center;gap:7px;text-align:left;color:#e8d5ad;font:8px var(--mono);letter-spacing:.1em;margin-bottom:6px}.boss-label>span:first-child{color:#b7e1ad}.boss-label #boss-name{flex:1;color:#e8d5ad}.boss-label b{font-weight:400;color:#d8e2ca}.boss-track{height:5px;border:1px solid #edc4a138;background:#2a2922;border-radius:9px;overflow:hidden}.boss-track i{height:100%;width:100%;display:block;background:linear-gradient(90deg,#76bb83,#c7de91,#e0a779);box-shadow:0 0 12px #a3da91a0;transition:width .18s}.toast{position:absolute;z-index:9;top:23px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 14px;border:1px solid #d3c17b5e;border-radius:3px;background:#10211de8;color:#e8d7a9;font:9px var(--mono);letter-spacing:.06em;box-shadow:0 7px 24px #0006}.toast.hidden{display:none}
.under-stage{display:flex;justify-content:space-between;align-items:center;min-height:62px;border-bottom:1px solid var(--line)}.location{display:flex;align-items:center;gap:10px}.location-pin{display:grid;place-items:center;width:29px;height:29px;border:1px solid #32463a;border-radius:50%;color:#c3b17b;font-size:18px}.location small{display:block;font-size:7px;margin-bottom:3px}.location b{font-weight:500;font-size:10px;color:#c5d3c4}.controls{display:flex;align-items:center;gap:17px;font:7px var(--mono);letter-spacing:.08em;color:#72867a}.controls span{display:flex;align-items:center;gap:4px}.controls kbd{font-size:7px;padding:3px 5px;min-width:16px}.page-footer{height:65px;display:flex;align-items:center;justify-content:space-between;color:#566c60;font:8px var(--mono);letter-spacing:.1em}.page-footer i{color:#b49d67;font-style:normal;margin:0 5px}

@media(max-width:1050px){.shell{padding:0 24px}.game-layout{grid-template-columns:138px minmax(0,1fr);gap:20px}.side-rail{padding-right:15px}.controls{gap:9px}.stage-progress{grid-template-columns:auto 90px auto}}

/* Fullscreen Immersive Landscape for iPad & Mobile */
@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (hover: none), (orientation: landscape) and (max-height: 1050px){
  html,body{position:fixed;inset:0;width:100vw;height:100%;height:100svh;height:100dvh;overflow:hidden;touch-action:none;overscroll-behavior:none;background:#050d0d}
  .shell{position:fixed;inset:0;width:100vw;height:100%;height:100svh;height:100dvh;max-width:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .masthead,.side-rail,.stage-topline,.under-stage,.page-footer{display:none!important}
  .game-layout{width:100%;height:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:center}
  .stage-column{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .canvas-frame{width:100vw;height:100%;height:100svh;height:100dvh;max-width:calc(100dvh * 16 / 9);max-height:calc(100vw * 9 / 16);aspect-ratio:16/9;margin:auto;border:none;border-radius:0;box-shadow:0 0 50px rgba(0,0,0,.9)}
  .canvas-frame canvas{width:100%;height:100%;object-fit:contain}
  .touch-controls{display:flex!important;position:fixed!important;inset:auto 0 0 0!important;z-index:20!important;padding:0 max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))!important;pointer-events:none}
  .touch-hud{display:flex!important;position:fixed!important;top:max(8px,env(safe-area-inset-top))!important;left:max(14px,env(safe-area-inset-left))!important;right:max(14px,env(safe-area-inset-right))!important;z-index:20!important;pointer-events:none}
  .frame-corner{display:none}
  .canvas-footer{display:none}
  .version-tag{position:fixed;bottom:8px;right:14px;font-size:8px;opacity:.55;z-index:10}
  .overlay-card{padding:20px 24px;width:min(460px,85%)}
  .overlay-card h2{font-size:clamp(24px,5vw,38px);margin:8px 0}
  .overlay-card p{font-size:11px;line-height:1.6;margin:0 0 16px}
  .start-button{height:44px;font-size:11px;touch-action:none}
  .key-hint{display:none}
}

.canvas-footer>#world-footer{color:inherit;font:inherit;vertical-align:baseline;margin-right:0}