*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111820;color:#f3e4c8;font-family:Arial,Helvetica,sans-serif}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff32;background:#25313bcc;padding:12px 18px;border-radius:3px;touch-action:manipulation;transition:background .15s}button:hover{background:#4e5350}button:focus-visible{outline:3px solid #ffd491;outline-offset:4px}button.primary{background:#eda966;color:#242425;border:0;font-weight:800;letter-spacing:1px}.primary:hover{background:#ffcb88}button[hidden],[hidden]{display:none!important}#game{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none;user-select:none}canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.screen{position:absolute;inset:0;display:flex;align-items:center;padding:5vh 7vw;background:linear-gradient(90deg,#131d27fa 0%,#17212bec 31%,#17212b90 52%,transparent 77%)}.titleBlock{max-width:570px}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:700;color:#e3ad79}h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(68px,9.4vw,146px);letter-spacing:1px;line-height:.78;margin:30px 0 18px;transform:skew(-5deg);text-shadow:4px 5px 0 #11192055}h1 i{font-style:normal;color:#eda966}h1 span{display:block;font-family:Arial,sans-serif;font-size:clamp(13px,1.7vw,23px);line-height:2.4;letter-spacing:6px;font-weight:500}p{line-height:1.65}.tagline{font-family:Georgia,serif;font-style:italic;font-size:23px;margin:8px 0;color:#f9d9af}.synopsis{font-size:13px;color:#c2c1b9;margin:12px 0 22px}.characterPick{display:flex;gap:10px;margin-bottom:16px}.characterPick button{width:185px;text-align:left;padding:11px 14px;background:#15202dbb}.characterPick .selected{border-color:#f2b574;background:#70513c88}.characterPick strong{display:block;font-size:16px;letter-spacing:2px}.characterPick span{display:block;font-size:10px;margin-top:6px;color:#d2c4b3}.menuActions{display:flex;gap:10px}.menuActions .primary{min-width:265px;text-align:left;padding:17px 20px}.primary span{float:right;font-size:20px}.menuFooter{display:flex;gap:14px;align-items:center;margin-top:24px}.menuFooter button{padding:0;border:0;background:transparent;font-size:10px;letter-spacing:1px;color:#d6ba96}.menuFooter>span{font-size:8px;color:#889794;letter-spacing:1px}.menuStamp{position:absolute;right:5vw;bottom:8vh;text-align:right;border-right:3px solid #e5ad6e;padding-right:16px}.menuStamp span{display:block;color:#e8ac6b;letter-spacing:4px;font-size:12px;margin-bottom:9px}.menuStamp b{font-family:Georgia,serif;font-size:22px;line-height:1.25}#hud{position:absolute;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none;text-shadow:0 2px 4px #101820}.vitals{width:275px}.vitals>div:first-child{display:flex;align-items:center;gap:14px;margin-bottom:8px}.vitals strong{font-size:24px;letter-spacing:3px}.vitals #styleName{font-size:9px;letter-spacing:1.5px;color:#cfd7d1}meter{display:block;width:100%;height:13px;appearance:none;border:1px solid #fbe3b066;background:#27343c}meter::-webkit-meter-bar{background:#253741;border:0;border-radius:0}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#d67951,#f0bc72)}.bond{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:8px;letter-spacing:1px}.bond progress{width:115px;height:5px}.bond b{font-size:9px}progress{appearance:none;border:0;background:#24343c}progress::-webkit-progress-bar{background:#24343c}progress::-webkit-progress-value{background:#65c8c2}.chapterHud{text-align:center}.chapterHud>span{font-size:9px;letter-spacing:3px;color:#f1c897}.chapterHud strong{display:block;font-size:23px;letter-spacing:3px;margin:5px}.chapterHud small{display:block;color:#e3e0cb;font-size:11px}.tools{display:flex;gap:8px;pointer-events:auto}.tools button{padding:10px 12px;font-size:10px;min-height:38px}.tools #pause{font-size:15px}#overlay{justify-content:center;background:#101923ca;backdrop-filter:blur(6px);padding:24px}.panel{max-width:630px;width:100%;padding:40px 46px;background:#1b2932f2;border:1px solid #dcb57b55;border-top:4px solid #e6a967;box-shadow:0 20px 70px #0008}.panel h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:46px;font-weight:500;letter-spacing:1.5px;margin:12px 0 18px}.panel p{font-size:14px;color:#d2d4cd}.panel .quote{font:italic 22px/1.5 Georgia,serif;color:#f0c594}.panel .controls{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:12px;line-height:1.5}.controls b{color:#efbd83}#panelActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}#panelActions button{font-size:12px;font-weight:bold}#toast{position:absolute;top:24%;width:100%;text-align:center;pointer-events:none;font-size:17px;letter-spacing:3px;color:#ffe0a8;text-shadow:0 2px 6px #000;opacity:0;transition:opacity .15s}#toast.show{opacity:1}#bossHud{position:absolute;bottom:70px;left:32%;width:36%;text-align:center}#bossHud span{display:block;font-size:11px;letter-spacing:3px;color:#ffcf95;text-shadow:0 2px 4px #000;margin:8px}#bossHud progress{width:100%;height:7px}#bossHud progress::-webkit-progress-value{background:#d76257}#keyGuide{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:17px;padding:14px 12px;color:#a7b6b8;font-size:8px;letter-spacing:1px;background:#111b27da}kbd{font:10px Arial;color:#f2d1aa;background:#ffffff0b;padding:4px;border:1px solid #ffffff16;margin-right:3px}#keyGuide button{font-size:8px;padding:6px}#touchControls{position:absolute;inset:0;pointer-events:none}#stick{position:absolute;pointer-events:auto;left:max(24px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;background:#10253255;border:2px solid #d7d8b94d;touch-action:none}#stickKnob{position:absolute;left:36px;top:36px;width:48px;height:48px;border-radius:50%;background:#f8d19950;border:2px solid #f3d8b287}#stick span{position:absolute;bottom:12px;left:40px;font-size:9px;letter-spacing:2px;opacity:.6}.touchActions{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,56px);gap:8px;align-items:end;pointer-events:auto}.touchActions button{padding:0;width:56px;height:56px;border-radius:50%;background:#23353aa8;border:2px solid #ebd0a379;font-size:9px;font-weight:bold;touch-action:none}.touchActions .small{height:43px;width:50px;font-size:8px}.touchActions .special{color:#b7ffff;border-color:#8bdfd6}.touchActions .attack{background:#bb7654d9}.touchActions button:active{background:#f1bc7d;color:#132c32}#rotate{display:none;position:absolute;bottom:10px;left:10px;right:10px;text-align:center;background:#14242bef;padding:16px;font-size:12px;letter-spacing:1px}#rotate small{font-size:10px;line-height:2;color:#c7b798}
@container (max-height:570px){.screen{padding:3vh 5vw}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:75px;margin:15px 0 8px}h1 span{font-size:12px;letter-spacing:4px}.tagline{font-size:17px}.synopsis{font-size:10px;margin:8px 0 12px}.characterPick{margin-bottom:9px}.characterPick button{padding:7px 10px;width:154px}.characterPick strong{font-size:13px}.characterPick span{font-size:9px}.menuActions .primary{padding:11px 14px;min-width:230px;font-size:11px}.menuFooter{margin-top:12px}.menuStamp{bottom:14vh}.menuStamp b{font-size:17px}#hud{top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}.vitals{width:200px}.vitals strong{font-size:17px}.vitals #styleName{font-size:7px}.chapterHud strong{font-size:16px}.chapterHud small{font-size:9px}.chapterHud>span{font-size:7px}.tools button{padding:8px;font-size:8px}.panel{padding:20px 28px;max-width:580px}.panel h2{font-size:30px;margin:8px 0 10px}.panel p{font-size:12px}.panel .quote{font-size:17px}.panel .controls{font-size:10px;gap:7px}#panelActions{margin-top:15px}#bossHud{bottom:21px}.touchActions{grid-template-columns:repeat(4,48px);gap:6px;bottom:17px}.touchActions button{width:48px;height:48px}.touchActions .small{width:44px;height:40px}#stick{width:110px;height:110px;bottom:18px}#stickKnob{left:29px;top:29px}#stick span{left:32px}.menuFooter>span{display:none}#keyGuide{gap:9px;font-size:7px;padding:9px}kbd{font-size:8px}}
@container (max-width:480px){#rotate{display:block}.titleBlock{max-width:95%}.menuStamp{display:none}h1{font-size:100px}.screen{background:#13232cd9}.chapterHud{display:none}.panel{padding:20px}.panel .controls{grid-template-columns:1fr}.touchActions{grid-template-columns:repeat(3,46px);bottom:85px}#stick{bottom:100px}#bossHud{left:25%;width:50%;bottom:260px}}

#hud{z-index:4}#overlay{z-index:3}#toast{z-index:2}#touchControls{z-index:1}#keyGuide{z-index:1}button:disabled{opacity:.55;cursor:wait}


#panelBody label{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0}#panelBody input[type=range]{width:55%;accent-color:#e8b06d}

/* One proportional 4:3 playfield. HUD and touch controls share its bounds. */
body{display:grid;place-items:center}
#game{width:min(100vw,133.333333vh);height:min(75vw,100vh);width:min(100vw,133.333333dvh);height:min(75vw,100dvh);container-type:size}
canvas{width:100%;height:100%;object-fit:contain}
.screen{padding:4cqh 5cqw}
.titleBlock{max-width:66%}
h1{font-size:clamp(52px,10cqw,125px);margin:20px 0 12px}
h1 span{font-size:clamp(12px,1.7cqw,23px);letter-spacing:4px}
.menuStamp{right:4cqw;bottom:6cqh}
.menuFooter{flex-wrap:wrap;gap:12px}
#hud{left:16px;right:16px;top:16px;gap:10px}
.vitals{width:205px;flex-shrink:0}
.vitals strong{font-size:21px}
.chapterHud{flex:1;min-width:0}
.chapterHud strong{font-size:17px;letter-spacing:1px}
.chapterHud small{font-size:10px}
.tools{gap:5px}
.tools button{min-width:44px;min-height:44px;padding:8px}
#overlay{padding:16px;z-index:6}
.panel{padding:24px 30px;max-height:100%;overflow:auto;overscroll-behavior:contain}
.panel h2{font-size:36px;margin:10px 0 14px}
.panel p{font-size:13px;line-height:1.5}
.panel .quote{font-size:19px}
#keyGuide{flex-wrap:wrap;gap:8px;padding:8px;font-size:8px}
#keyGuide button{min-height:36px}
#toast{font-size:clamp(11px,1.8cqw,18px);letter-spacing:1px;padding:0 12px}
#bossHud{bottom:150px;left:30%;width:40%}
#rotate{display:none}
@container (max-width:640px){
 .titleBlock{max-width:92%}.menuStamp{display:none}.synopsis{font-size:11px}
 .chapterHud{display:none}.vitals{width:175px}.vitals strong{font-size:17px}
 .tools button{font-size:9px}.menuActions .primary{min-width:210px}
 #stick{left:12px;bottom:14px;width:108px;height:108px}
 #stickKnob{left:28px;top:28px}#stick span{left:31px}
 .touchActions{right:12px;bottom:14px;grid-template-columns:repeat(4,44px);gap:5px}
 .touchActions button,.touchActions .small{width:44px;height:44px;font-size:8px}
 #bossHud{bottom:126px;left:25%;width:50%}
}
@container (max-width:480px){
 .screen{background:#13232cce}.titleBlock{width:100%;max-width:100%;max-height:100%;overflow:auto}
 h1{font-size:52px;margin:10px 0}.tagline{font-size:16px}.synopsis{margin:6px 0 10px}
 .characterPick button{width:145px;padding:8px}.characterPick span{font-size:9px}
 .menuActions{flex-wrap:wrap}.menuActions button{min-height:44px}
 .menuFooter{margin-top:10px}.menuFooter button{min-height:36px}
 #hud{left:8px;right:8px;top:8px;gap:5px}.vitals{width:145px}
 .vitals #styleName{display:none}.bond{letter-spacing:0}.bond progress{width:60px}
 .panel{padding:16px}.panel h2{font-size:27px}.panel .controls{grid-template-columns:1fr;font-size:12px}
 #panelActions button{min-height:44px}.touchActions{grid-template-columns:repeat(3,44px)}
}

/* Menu-only destination link; advertisements are requested by Play. */
.more-games{display:inline-block;padding:12px 18px;border:1px solid currentColor;color:inherit;background:#172632;text-decoration:none;font:700 14px Arial;letter-spacing:.08em;touch-action:manipulation}.more-games:hover,.more-games:focus-visible{background:#334752;outline:2px solid currentColor;outline-offset:2px}#gm-ad-status{position:absolute;z-index:100;left:10%;right:10%;top:45%;padding:18px;text-align:center;background:#101923f5;color:#f3d5ad;border:1px solid #bba377;font:700 16px Arial}.gm-ad-pending main{cursor:wait}