@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101a1e;--panel:#17272b;--cream:#f0e4ca;--muted:#849c9d;--gold:#e7ba70;--line:#bfd5c31b;--cyan:#9ad7df;font-family:'DM Sans',system-ui,sans-serif;color:var(--cream);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 10%,#263d3b66,transparent 65%),radial-gradient(ellipse at 80% 90%,#2d333322,transparent 60%),#101a1e}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:hover{filter:brightness(1.15)}button:active{transform:translateY(1px)}a{color:inherit;text-decoration:none}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.app-shell{max-width:1344px;padding:0 48px;margin:0 auto}.masthead{height:100px;display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{display:flex;align-items:center;gap:11px;font-family:'Cinzel',Georgia,serif;font-size:13px;letter-spacing:1.8px}.wordmark strong{color:var(--gold);font-weight:700}.brand-star{font-size:32px;color:var(--gold);line-height:1}.build-label{display:flex;align-items:center;gap:9px;color:#b1beb2;font-size:10px;letter-spacing:1.8px}.status-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:#9daf82;box-shadow:0 0 10px #badcb644}.version{font-size:9px;border:1px solid #abc6b02b;padding:4px 5px;border-radius:2px;letter-spacing:0}.toolbar{display:flex;gap:9px}.icon-button{width:32px;height:32px;border:1px solid var(--line);background:transparent;border-radius:50%;color:#aec1bf;position:relative;font-size:17px}.icon-button:first-child{font-family:Georgia,serif;font-size:17px}.mute-slash{position:absolute;height:20px;width:1px;background:var(--muted);transform:rotate(40deg);top:6px;left:15px}.game-shell{position:relative;width:100%;aspect-ratio:16/9;isolation:isolate;overflow:hidden;background:#122425;border:1px solid #70887455;box-shadow:0 20px 70px #0007,0 0 0 5px #07131740;outline:none;container-type:inline-size;border-radius:3px}#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.screen-grain{position:absolute;inset:0;pointer-events:none;opacity:.045;background:repeating-linear-gradient(transparent 0 2px,#111 2px 3px);z-index:1}.loading{position:absolute;inset:0;background:#132626;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;font-size:14px;letter-spacing:1px}.loading-star{font-size:40px;color:var(--gold);animation:pulse 1.4s infinite}.load-track{height:2px;width:200px;background:#ffffff15}.load-track i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}.title-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(90deg,#0b2321ac,#152e28ac),linear-gradient(0deg,#061b23af,transparent 45%);text-align:center;z-index:5}.title-eyebrow{font-size:clamp(8px,1cqw,12px);font-weight:500;letter-spacing:.28em;display:flex;align-items:center;gap:14px;color:#c8d4b3;margin-top:1cqw}.title-eyebrow i{height:1px;width:29px;background:#d7e1b64d}.title-screen h1{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:clamp(60px,10cqw,125px);line-height:.9;letter-spacing:.035em;margin:3.2cqw 0 1.3cqw;color:#efc98b;text-shadow:0 3px #754d28,0 9px 30px #101b26d0}.title-screen h1>span{display:block;font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:.28em;letter-spacing:.01em;color:#eee8c9;margin-bottom:.6em;text-shadow:0 2px 14px #000}.title-rule{font-size:14px;color:var(--gold);display:flex;align-items:center;gap:20px}.title-rule:before,.title-rule:after{content:'';height:1px;width:70px;background:linear-gradient(90deg,transparent,#e7ba7077)}.title-rule:after{transform:rotate(180deg)}.title-screen p{font-size:clamp(11px,1.22cqw,15px);color:#d9dfca;line-height:1.65;margin:1.7cqw 0 2.2cqw}.primary-button{background:var(--gold);color:#253329;padding:15px 25px;font-size:11px;font-weight:700;letter-spacing:1.8px;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;border-radius:2px;box-shadow:0 4px 22px #071b2444}.primary-button span{font-size:17px;line-height:.5}.text-button{padding:11px 16px;background:none;font-size:11px;color:#dce3d1}.title-footnote{position:absolute;bottom:3.3cqw;font-size:8px;letter-spacing:2.3px;color:#c8d7b28f}.hud{position:absolute;inset:0;pointer-events:none;z-index:2}.player-panel{display:flex;gap:10px;position:absolute;left:2.3%;top:4.1%;padding:8px 12px 8px 8px;background:linear-gradient(90deg,#071b24e8,#132a31cc);border:1px solid #94b8a52c;border-radius:2px;box-shadow:0 4px 16px #05151b33;width:235px;max-width:35%}.portrait-frame{height:46px;width:42px;background:radial-gradient(#b7b78266,#294742);border:1px solid #d5d3a551;flex-shrink:0;overflow:hidden}#portrait{width:42px;height:42px;image-rendering:pixelated;transform:scale(1.25);transform-origin:50% 70%}.player-readout{flex:1;min-width:0}.player-name{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1px;margin:1px 0 6px}.player-name>span{font-size:6px;color:#bfccae;letter-spacing:.8px;white-space:nowrap}.meter-row{display:flex;align-items:center;gap:5px;height:12px;font-size:8px}.meter-row label{width:13px;color:#afc5bd;font-size:7px}.meter{height:4px;background:#030e16;flex:1;overflow:hidden}.meter i{height:100%;display:block;transition:width .1s}.health i{background:#afc68e}.ki i{background:#9ed6e1}.meter-row>span{width:26px;text-align:right;font-size:8px;font-variant-numeric:tabular-nums;color:#d9e3cf}.power-panel{position:absolute;left:2.5%;top:calc(4.1% + 73px);text-shadow:0 1px 4px #031216;display:flex;gap:9px;align-items:center}.power-panel>span{font-size:7px;color:#e6eed2;letter-spacing:1px}.power-panel>strong{font-family:'Cinzel',Georgia,serif;font-size:17px;line-height:1;color:#f4d493;letter-spacing:1px}.location-tag{position:absolute;right:2.5%;top:4.2%;background:#0a2029d6;padding:9px 12px;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.4px;border:1px solid #94b8a52c}.ring-hint{position:absolute;left:2.5%;bottom:4%;pointer-events:auto;font-size:9px;letter-spacing:1.3px;display:flex;align-items:center;gap:9px;background:#0b2128d9;border:1px solid #94b8a540;padding:9px 11px;border-radius:2px}.ring-hint>span{font-size:15px;color:var(--gold)}kbd{font-family:inherit;font-size:9px;color:#c5d1c5;background:#b6cebd09;border:1px solid #bdccbd30;border-bottom-color:#bdccbd50;border-radius:3px;min-width:18px;padding:3px 5px;text-align:center;line-height:1.1;display:inline-block}.context-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:5%;background:#0c222aed;border:1px solid #bcceb540;padding:8px 12px;white-space:nowrap;font-size:10px;box-shadow:0 4px 12px #0005}.context-hint kbd{color:var(--gold);margin-right:6px}.charge-hud{position:absolute;bottom:11%;left:50%;transform:translateX(-50%);width:180px;text-align:center;text-shadow:0 2px 5px #002131;font-family:'Cinzel',Georgia,serif;color:#daffff}.charge-hud>span{font-size:16px;letter-spacing:1px;font-weight:bold}.charge-track{height:5px;border:1px solid #aed8e67a;background:#0d2330;margin:7px 0}.charge-track i{height:100%;display:block;background:#b1f4ff;box-shadow:0 0 10px #90ebff}.charge-hud small{font-family:'DM Sans',sans-serif;font-size:7px;letter-spacing:1px;color:#ccebf3}.flight-hud{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);text-align:center;background:linear-gradient(90deg,transparent,#0a2534c0,transparent);padding:15px 25px;width:66%}.flight-hud>span{font-size:8px;letter-spacing:3px;color:var(--gold);display:block}.flight-hud strong{font-family:'Cinzel',Georgia,serif;display:block;font-size:17px;margin:8px 0}.flight-hud small{font-size:8px;white-space:nowrap;color:#d8e8e5}.flight-hud small b{padding:0 6px;font-weight:normal;color:#a3c8c2}.chapter-banner{position:absolute;top:28%;left:0;right:0;text-align:center;pointer-events:none;color:#fff4ce;text-shadow:0 2px 8px #123223;z-index:3;animation:banner-in .6s ease-out}.chapter-banner>small{font-size:8px;letter-spacing:2.5px;display:block;margin-bottom:7px}.chapter-banner>strong{font-family:'Cinzel',Georgia,serif;font-size:clamp(20px,3cqw,38px);font-weight:500}.chapter-banner i{display:block;width:55px;height:1px;background:#f2dda787;margin:12px auto}.toast{position:absolute;right:2.5%;bottom:4.5%;max-width:300px;width:33%;z-index:4;background:#10272dec;border:1px solid #c7cc9650;border-left:2px solid var(--gold);padding:11px 12px;display:flex;gap:9px;box-shadow:0 5px 20px #0d1f2444;pointer-events:none}.toast-star{font-size:15px;color:var(--gold);margin-top:1px}.toast strong{font-size:8px;letter-spacing:1px;color:var(--gold);line-height:1.6;display:block}.toast p{font-size:10px;line-height:1.55;margin:4px 0 0;color:#d8dfd3}.dialogue{position:absolute;bottom:5%;left:10%;right:10%;z-index:7;padding:22px 26px 16px;background:#10262ef5;border:1px solid #c6b88099;box-shadow:0 0 0 4px #061c2b8f,0 10px 35px #0004;border-radius:2px}.dialogue-speaker{position:absolute;left:20px;top:-12px;padding:4px 12px;background:#142b33;color:var(--gold);font-size:10px;letter-spacing:1.5px;border:1px solid #b7b78666;text-transform:uppercase;font-weight:700}.dialogue p{font-size:clamp(12px,1.5cqw,18px);line-height:1.7;margin:0;white-space:pre-line;max-width:94%;color:#f4ecd7}.dialogue button{background:none;display:flex;gap:10px;align-items:center;margin:10px 0 0 auto;padding:0;font-size:8px;letter-spacing:1px;color:var(--gold)}.dialogue button>span{color:#a5b6b0;font-size:7px}.dialogue b{font-size:14px;animation:pulse 1.4s infinite}.ring-overlay{position:absolute;inset:0;z-index:8;background:#061d2cbe;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}.ring-kicker{position:absolute;top:9%;font-size:9px;letter-spacing:3px;color:#c9d6c0}.ring-items{position:absolute;width:280px;height:245px;top:50%;left:50%;transform:translate(-50%,-52%);border:1px solid #c5cb9440;border-radius:50%}.technique{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:#1b343ded;border:1px solid #a8c3bc66;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #07152677;transition:background .15s,border .15s,box-shadow .15s}.technique svg{width:27px;height:27px;fill:none;stroke:#afdadb;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.technique.selected{background:#dbc186;border-color:#fbe9b5;box-shadow:0 0 0 4px #eaca7940,0 0 25px #f0d28633}.technique.selected svg{stroke:#2a3c38}.technique kbd{position:absolute;right:-5px;bottom:-2px;font-size:7px;padding:3px 4px;background:#162d33;border-color:#8caa99}.ring-center{position:absolute;left:50%;top:48%;width:190px;text-align:center;transform:translate(-50%,-50%);pointer-events:none}.ring-center>span{display:block;color:#ddbf77;font-size:24px;margin-bottom:8px}.ring-center>strong{display:block;font-family:'Cinzel',Georgia,serif;font-size:18px;font-weight:500}.ring-center small{display:block;margin-top:10px;letter-spacing:1.5px;font-size:8px;color:var(--gold)}.ring-caption{position:absolute;bottom:9%;text-align:center;margin:0;font-size:11px;color:#bdcfc7}.ring-instruction{position:absolute;bottom:4%;font-size:7px;letter-spacing:.6px;color:#a0bcb8}.ring-instruction b{padding:0 7px;font-weight:normal}.ring-instruction kbd{font-size:7px;min-width:14px;padding:2px 4px}.modal-backdrop{position:absolute;inset:0;background:#07191bc9;backdrop-filter:blur(4px);z-index:12;display:flex;align-items:center;justify-content:center;padding:25px}.modal-card{position:relative;max-height:100%;width:560px;max-width:100%;background:#162b30;border:1px solid #acbc924d;box-shadow:0 20px 60px #0005;padding:30px 36px;overflow:auto;scrollbar-color:#657963 #132328;scrollbar-width:thin}.modal-close{position:absolute;right:15px;top:10px;background:none;color:var(--muted);font-size:25px}.modal-kicker{font-size:9px;letter-spacing:2px;color:var(--gold)}.modal-card h2{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:27px;margin:10px 0 20px}.modal-card p{font-size:12px;line-height:1.75;color:#c3d0c6}.modal-card a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}.modal-card .primary-button{margin-top:12px}.key-guide{display:grid;grid-template-columns:80px 1fr;gap:11px 14px;font-size:11px;line-height:1.6;color:#c3d0c6}.key-guide dt{text-align:right}.key-guide dd{margin:0}.journal-entry{border-top:1px solid var(--line);padding:13px 0}.journal-entry strong{font-size:10px;letter-spacing:1px;color:var(--gold)}.journal-entry p{margin:5px 0 0;font-size:11px}.stats-row{display:flex;gap:30px;padding:5px 0 20px}.stats-row strong{display:block;color:var(--gold);font-size:25px;font-weight:500}.stats-row small{font-size:8px;letter-spacing:1px;color:var(--muted)}.under-screen{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:25px 1px 23px;border-bottom:1px solid var(--line)}.chapter-label{display:flex;align-items:center;gap:14px}.chapter-label>span{font-family:'Cinzel',Georgia,serif;color:var(--gold);font-size:22px;border-right:1px solid #bea76d4d;padding-right:15px;line-height:30px}.chapter-label small{font-size:8px;letter-spacing:1.8px;color:var(--muted);display:block;margin-bottom:5px}.chapter-label strong{font-size:12px;color:#dce2cf;font-weight:400}.journal-button{background:transparent;display:flex;align-items:center;gap:11px;color:#bcc9be;font-size:10px;white-space:nowrap}.journal-button>span:not(.arrow){border:1px solid var(--line);border-radius:50%;padding:2px 5px;font-size:8px;color:var(--gold)}.journal-button .arrow{font-size:17px;color:var(--gold)}.controls-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:23px 0 10px;font-size:9px;color:#97adaa}.controls-strip>span{display:flex;align-items:center;gap:7px;white-space:nowrap}.controls-strip kbd{font-size:8px;color:#d3dcc7}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;color:#6b8585;padding:24px 0 32px}footer>div{display:flex;align-items:center;gap:20px}footer button{color:inherit;background:none;padding:0;font-size:9px}footer a:hover,footer button:hover{color:var(--gold)}.save-status{font-size:7px;letter-spacing:1px;color:#88a489}.touch-controls{position:absolute;inset:auto 3% 4%;z-index:6;display:flex;align-items:end;justify-content:space-between;pointer-events:none}.touch-controls button{pointer-events:auto;touch-action:none;background:#15343cc9;border:1px solid #c9ddad55;min-height:40px;min-width:40px;border-radius:5px;font-size:10px}.dpad{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,36px);gap:3px}.dpad button{min-width:36px;min-height:36px;font-size:18px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.touch-actions{display:flex;gap:5px}.touch-actions button:last-child{border-radius:50%;height:55px;width:55px;border-color:var(--gold);color:var(--gold)}.super-active .player-panel{border-color:#f1ce7755}.super-active .ki i{background:#f1d687}.game-shell:fullscreen{max-height:100vh;max-width:100vw;width:100vw;height:100vh;border:0;border-radius:0;aspect-ratio:auto}.game-shell:fullscreen #game{object-fit:contain;background:#081619}
@keyframes pulse{50%{opacity:.4}}@keyframes banner-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.app-shell{padding-top:20px}.masthead{height:105px}}@media(max-width:950px){.app-shell{padding:0 25px}.masthead{height:78px}.controls-strip{justify-content:center;gap:14px 23px}.player-panel{transform:scale(.8);transform-origin:top left;max-width:45%}.power-panel{top:calc(4.1% + 58px)}.power-panel>strong{font-size:14px}.location-tag{font-size:8px;padding:7px 10px}.toast{padding:8px;max-width:250px;width:32%}.toast p{font-size:8px}.toast strong{font-size:7px}.ring-items{width:240px;height:200px}.ring-center>strong{font-size:15px}.ring-center{width:160px}.technique{width:46px;height:46px;margin:-23px}.technique svg{width:23px;height:23px}.modal-card{padding:25px}.modal-card h2{font-size:23px}.modal-card p,.key-guide{font-size:11px}.title-screen .primary-button{padding:12px 20px;font-size:9px}.title-footnote{font-size:7px}.ring-kicker{top:7%}.ring-caption{bottom:9%;font-size:9px}.ring-instruction{bottom:3%}.ring-hint{padding:6px 9px;font-size:7px}.toast-star{font-size:12px}footer{font-size:8px}footer>div{gap:14px}}
@media(max-width:640px){.app-shell{padding:0 12px}.masthead{height:65px}.wordmark{font-size:10px;gap:7px;letter-spacing:1px}.brand-star{font-size:24px}.build-label{display:none}.toolbar{gap:7px}.icon-button{width:28px;height:28px;font-size:14px}.game-shell{aspect-ratio:4/3}#game{object-fit:cover;object-position:center;width:100%;height:100%}.title-screen h1{font-size:17cqw;margin:6cqw 0 3cqw}.title-eyebrow{font-size:7px;letter-spacing:2px}.title-screen p{font-size:11px;margin:3cqw 0 4cqw}.title-footnote{bottom:5cqw;font-size:6px;letter-spacing:1.4px}.title-screen .primary-button{padding:13px 18px}.player-panel{transform:scale(.65);max-width:70%;top:4%;left:3%}.power-panel{top:calc(4% + 48px);left:3.4%;gap:5px}.power-panel>span{font-size:5px}.power-panel>strong{font-size:11px}.location-tag{top:4%;right:3%;font-size:7px;padding:5px 7px;max-width:38%}.under-screen{padding:20px 0;gap:12px}.chapter-label>span{font-size:20px;padding-right:10px}.chapter-label{gap:10px}.chapter-label strong{font-size:10px;line-height:1.5;display:block}.chapter-label small{font-size:6px;letter-spacing:1px}.journal-button{font-size:8px;gap:6px}.controls-strip{gap:12px 18px;padding-top:18px;font-size:8px;justify-content:start}.controls-strip kbd{font-size:7px}footer{flex-direction:column;align-items:start;gap:14px;padding:22px 0}.ring-hint{bottom:auto;top:calc(4% + 69px);left:3%;font-size:6px;gap:4px;padding:4px 6px}.ring-hint>span{font-size:10px}.ring-hint kbd{font-size:6px;min-width:13px;padding:2px}.context-hint{bottom:3%;font-size:8px;padding:5px 8px}.toast{bottom:4%;right:3%;width:43%;max-width:220px;padding:7px;gap:6px}.toast strong{font-size:6px}.toast p{font-size:7px;line-height:1.5}.chapter-banner{top:32%}.chapter-banner small{font-size:6px;letter-spacing:1px}.chapter-banner strong{font-size:23px}.dialogue{left:5%;right:5%;bottom:6%;padding:19px 16px 12px}.dialogue p{font-size:12px}.dialogue-speaker{font-size:8px;left:12px}.dialogue button{font-size:7px}.modal-backdrop{padding:12px}.modal-card{padding:20px}.modal-card h2{font-size:21px;margin:8px 0 14px}.modal-card p,.key-guide{font-size:10px;line-height:1.6}.key-guide{gap:7px 10px;grid-template-columns:67px 1fr}.modal-kicker{font-size:7px}.ring-items{width:220px;height:190px}.ring-kicker{top:6%;font-size:8px}.ring-caption{bottom:9%;font-size:8px}.ring-instruction{font-size:6px}.ring-center>strong{font-size:15px}.ring-center>span{font-size:18px}.ring-center small{font-size:7px}.flight-hud{width:90%;bottom:5%;padding:12px 5px}.flight-hud strong{font-size:13px}.flight-hud small{font-size:6px}.flight-hud small kbd{font-size:6px;padding:2px;min-width:12px}.charge-hud{width:120px}.charge-hud>span{font-size:12px}.charge-hud small{font-size:6px}.touch-enabled .toast{bottom:30%;width:44%}.touch-enabled .context-hint{bottom:29%}.touch-enabled .flight-hud{bottom:30%}.stats-row{gap:20px}.stats-row strong{font-size:20px}.stats-row small{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}