:root{color-scheme:dark;--ink:#142b2b;--paper:#f0e7d2;--gold:#d6bb7c;--teal:#83c8b3;--red:#bc5946;font-family:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102222;overscroll-behavior:none}body{display:grid;place-items:center}button{font:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button:focus-visible{outline:2px solid #f9e7a6;outline-offset:4px}button:active{transform:translateY(1px)}[hidden]{display:none!important}#game{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}canvas{width:100%;height:100%;display:block}.frame{position:absolute;inset:12px;border:1px solid #eadab229;pointer-events:none;z-index:2}.frame:before,.frame:after{content:"";position:absolute;width:35px;height:35px;border-color:#d3ba79;border-style:solid}.frame:before{top:-1px;left:-1px;border-width:1px 0 0 1px}.frame:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}#hud{position:absolute;left:max(30px,env(safe-area-inset-left));right:max(30px,env(safe-area-inset-right));top:24px;display:flex;justify-content:space-between;align-items:start;color:var(--paper);text-shadow:0 2px 8px #102222}.vitals{width:195px}.vital-label{display:flex;align-items:center;gap:14px;font-size:17px;letter-spacing:3px}#hearts{font-size:20px;color:#e7b790;letter-spacing:3px}.qi-row{display:flex;gap:9px;align-items:center;margin-top:8px;font:10px sans-serif;letter-spacing:1px}.qi-track{width:120px;height:6px;background:#ffffff20;position:relative}#qi-fill{height:100%;background:var(--teal);transition:width .12s}.qi-track i{position:absolute;left:60%;top:-2px;height:10px;border-left:1px solid #f0e7d280}#qi-value{font-size:11px}.chapter{text-align:center;display:flex;flex-direction:column;gap:5px;letter-spacing:4px}.chapter small{font-size:9px;color:var(--gold)}.chapter strong{font-size:19px;font-weight:400}.hud-right{display:flex;gap:18px;align-items:center;min-width:195px;justify-content:end}#score{font:15px Georgia;letter-spacing:2px}#pause{width:44px;height:44px;background:#17363280;border:1px solid #dfd6b347;color:var(--paper);font-size:18px}#objective{position:absolute;top:100px;left:32px;font:11px sans-serif;color:#d9dfcc;letter-spacing:1px;padding:7px 10px;background:#183d386b;border-left:2px solid #d3ba79}#boss-hud{position:absolute;left:34%;right:34%;top:93px;text-align:center;color:var(--paper);font-size:12px;letter-spacing:3px}#boss-hud>div{height:5px;margin-top:6px;background:#211d20;border:1px solid #ca9d6c60}#boss-fill{display:block;height:100%;background:#ca7660;transition:width .15s}#toast{position:absolute;left:50%;top:31%;transform:translateX(-50%);color:#fff1c9;background:#17322beb;border:1px solid #ba9e6255;padding:10px 18px;white-space:nowrap;font-size:14px;opacity:0;transition:opacity .15s;pointer-events:none}#toast.show{opacity:1}#controls{position:absolute;left:max(30px,env(safe-area-inset-left));right:max(30px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:space-between;gap:15px}.movement,.actions{display:flex;gap:10px;align-items:end}#controls button{width:61px;height:61px;border:1px solid #dac79560;color:#e7e2c9;background:#172d2dbb;box-shadow:inset 0 0 20px #82b4a110;border-radius:50%;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}#controls button small{font:8px sans-serif;letter-spacing:1px;color:#cec9b1}#controls .movement button{border-radius:9px;font:32px Georgia;gap:0;width:58px;height:56px}#controls .attack{width:72px;height:72px;background:#dbcaa4;color:#213b35;border-color:#fff1c9;font-size:24px;box-shadow:0 0 30px #e5d2a426}#controls .attack small{color:#3c534b}#controls .spell{border-color:#72bda1;color:#a7e2c5}.spell.ready{box-shadow:0 0 20px #86dbb958!important;background:#20584e!important}.spell.unready{opacity:.65}#controls button.held{background:#548573;color:#fff}.keyboard-note{font-size:10px;letter-spacing:2px;color:#d5d8c16b;margin-bottom:20px}#overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#10252691;padding:35px;color:var(--paper)}#overlay.title-screen{justify-content:start;background:linear-gradient(90deg,#122b2bef 0%,#122b2bae 38%,transparent 76%);padding-left:9%}.title-content{max-width:56%;animation:arrive .7s ease-out}.eyebrow{font:10px sans-serif;letter-spacing:5px;color:#c3bd93;display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";width:33px;height:1px;background:#c2a976}.title-content h1{font-weight:400;font-size:clamp(36px,6.5vw,78px);letter-spacing:9px;line-height:1.25;margin:22px 0 10px;text-shadow:0 6px 28px #102525}.title-content h1 span{color:#d8c99f}.subtitle{font-size:14px;letter-spacing:6px;color:#cfc7ab;margin:0 0 21px}.intro{font-size:12px;line-height:2.1;letter-spacing:2px;color:#bacac0}.seal{display:inline-grid;place-items:center;background:#a44935;border:3px double #eab897;color:#ffe4bb;width:35px;height:42px;font-size:16px;line-height:1;letter-spacing:0;vertical-align:middle;transform:rotate(-5deg)}.button-row{display:flex;gap:12px;align-items:center;margin-top:23px;flex-wrap:wrap}.primary,.secondary{min-height:44px;padding:13px 24px;border:1px solid #c6ae7c;background:#d6c49b;color:#223a33;letter-spacing:3px;font-size:13px}.secondary{background:#17332e80;color:#d5d6bd;border-color:#b8c8a84d}.text-button{border:0;background:none;color:#c9d3bf;font-size:11px;padding:12px;min-height:44px;letter-spacing:1px}.title-bottom{margin-top:19px;font:9px sans-serif;letter-spacing:2px;color:#c1cbb38c}.menu{width:min(650px,90%);padding:30px 38px;background:#172f2ff5;border:1px solid #c9ae705e;box-shadow:0 22px 80px #061a1a70;text-align:center;animation:arrive .25s ease}.menu h2{font-size:30px;letter-spacing:5px;font-weight:400;margin:10px 0 17px}.menu p{font-size:13px;color:#c2cdbb;line-height:1.9}.menu .eyebrow{justify-content:center}.menu .button-row{justify-content:center}.lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left;margin:20px 0}.lesson{border-top:1px solid #bca56b70;padding-top:13px}.lesson b{font-size:18px;color:#e1d0a4;display:block;letter-spacing:2px;margin-bottom:8px}.lesson p{font-size:11px;margin:0;line-height:1.8}.lesson kbd{font:10px sans-serif;border:1px solid #c9d8bb50;padding:2px 5px;color:#d9dec8}.stats{display:flex;justify-content:center;gap:30px;margin:22px 0}.stats span{font-size:10px;letter-spacing:2px;color:#bbc9b9}.stats strong{display:block;font:30px Georgia;color:#ebd6a8;margin-top:8px}.settings{display:flex;justify-content:center;gap:8px;margin-top:12px}#rotate{display:none;position:absolute;inset:0;z-index:20;background:#162f2e;color:var(--paper);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}#rotate span{font-size:66px;color:var(--gold)}#rotate h2{font-size:23px;font-weight:400}#rotate p{font-size:12px;color:#c2cdbb}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-height:480px){.frame{inset:7px}#hud{top:13px;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.vitals{width:170px}.vital-label{font-size:13px}#hearts{font-size:17px}.chapter strong{font-size:15px}.hud-right{min-width:170px}.chapter{gap:3px}.qi-row{margin-top:5px}#objective{top:75px;left:22px;font-size:10px}#boss-hud{top:70px}#controls{bottom:max(12px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}#controls button{width:50px;height:50px;font-size:13px}#controls .attack{width:59px;height:59px;font-size:21px}#controls .movement button{width:50px;height:48px}.keyboard-note{display:none}.title-content h1{margin:13px 0 5px;font-size:49px}.subtitle{margin-bottom:10px;font-size:12px}.intro{font-size:11px;line-height:1.8}.button-row{margin-top:13px}.title-bottom{margin-top:8px}.menu{padding:16px 25px}.menu h2{font-size:23px;margin:8px}.lessons{margin:13px 0}.menu p{font-size:11px}.stats{margin:12px 0}#overlay{padding:17px}.settings{margin-top:4px}.eyebrow{font-size:9px}}@media(orientation:portrait){#game{width:100vw;height:100dvh}#rotate{display:flex}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}