@font-face{font-family:YH17;src:url('assets/fonts/Spellbinding-Demo.woff') format('woff');font-display:block}
:root{color-scheme:dark;--night:#080b10;--panel:#151b23;--silver:#e6e2d7;--gold:#d7b777;--muted:#a1adb8;--red:#b74b4c;--teal:#76a2a0}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--silver);overscroll-behavior:none}body{font-family:YH17,serif;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#242b34,#080b10 70%);text-transform:uppercase}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{cursor:default;opacity:.4}img,canvas{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button img{pointer-events:none}[hidden]{display:none!important}
#app{height:100dvh;max-width:1500px;margin:auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-left));gap:0}.topline,.bottomline{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);flex:none;gap:12px}.topline{height:36px}.topline nav{display:flex;align-items:center;gap:10px}.topline button,.bottomline button{border:0;background:transparent;padding:7px 9px;font-size:12px;color:#c9b789;min-height:32px}.topline #pause{font:22px monospace;border:1px solid #3d4855;width:44px;height:32px;padding:0}.bottomline{min-height:30px;line-height:1.3}.console{min-height:0;display:flex;flex:1;flex-direction:column;border:1px solid #5a6570;border-radius:7px;background:#05090f;overflow:hidden;box-shadow:0 15px 70px #000a,0 0 0 4px #080c11}.hud{height:58px;display:flex;flex:none;align-items:center;justify-content:space-between;gap:20px;padding:7px 20px;background:linear-gradient(#232c36,#111923);border-bottom:1px solid #6a604e}.hero-status{display:flex;align-items:center;gap:18px;min-width:220px}.crest{font-size:36px;line-height:1;color:var(--gold)}.vitals>span{font-size:12px;display:block;margin-bottom:5px;color:#bcc4c8}.meter{width:144px;height:8px;background:#04090e;border:1px solid #4f5a63;padding:1px;transform:skewX(-12deg)}.meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#6e272d,#d6665e)}.stamina{margin-top:3px;height:5px}.stamina i{background:var(--teal)}.location{flex:1;min-width:0;text-align:center}.location strong{display:block;font-size:24px;line-height:1.2;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.location span{display:block;margin-top:3px;font-size:12px;color:#a2afbb}.wealth{text-align:right;min-width:135px}.wealth strong{display:block;font-size:24px;line-height:1.1;font-weight:400;color:var(--gold)}.wealth span{font-size:12px;color:#b2b9bf}
.monitor{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:140px;background:#03060a;overflow:hidden}.viewport{position:relative;width:960px;height:540px;flex:none;overflow:hidden;background:#101822;container-type:size}#game{display:block;width:100%;height:100%;image-rendering:pixelated}.objective{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);max-width:86%;padding:8px 14px;border:1px solid #5e687499;background:#080e15d9;color:#d0d5cf;font-size:12px;line-height:1.5;text-align:center;pointer-events:none}.combo{position:absolute;right:22px;top:65px;font-size:36px;color:#e5c382;text-shadow:3px 3px #050709;pointer-events:none}.toast{position:absolute;left:50%;top:18px;transform:translate(-50%,-6px);opacity:0;max-width:85%;padding:12px 20px;border:1px solid #c6a264;background:#101721ed;color:var(--gold);font-size:24px;text-align:center;pointer-events:none;z-index:15;transition:opacity .12s,transform .12s}.toast.show{opacity:1;transform:translate(-50%,0)}.boss-hud{position:absolute;top:10px;left:20%;right:20%;text-align:center;pointer-events:none}.boss-hud>span{font-size:18px;color:#e3c0ae;text-shadow:1px 2px #000}.boss-hud>div{margin:5px 0 3px;height:8px;background:#0b0c10;border:1px solid #6d4746;padding:1px}.boss-hud i{display:block;height:100%;background:#af454a;width:100%}.boss-hud small{font-size:12px;color:#e1d3bd;text-shadow:1px 2px #000}.menu{position:absolute;inset:0;padding:22px 38px;background:linear-gradient(90deg,#06101be6,#06101bba 41%,transparent 70%)}.wordmark{font-size:72px;line-height:1.35;color:var(--silver);text-shadow:3px 4px #02060c}.menu-tagline{font-size:12px;color:var(--gold);margin:6px 0 17px}.menu-items{display:flex;flex-direction:column;gap:6px;max-width:350px}.menu-item{font-size:24px;text-align:left;padding:7px 14px;line-height:1.25;min-height:44px;color:#b4bfc7;border:1px solid #5b657044;background:#0a111aa8;transition:background .1s,transform .1s}.menu-item:hover,.menu-item:focus-visible{background:#443823d9;color:var(--gold);border-color:#b99a62;transform:translateX(3px)}.menu-item.featured{color:var(--gold);border-color:#9c824c;background:linear-gradient(90deg,#403621dc,#151b22d0);box-shadow:inset 3px 0 var(--gold)}.menu-foot{position:absolute;bottom:20px;left:38px;max-width:380px;font-size:12px;color:#a9b6c0}.load-meter{height:2px;margin-top:9px;background:#1e2833;width:250px;max-width:70vw}.load-meter i{height:100%;width:0;display:block;background:var(--gold);transition:width .2s}.panel{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#060c14e8;backdrop-filter:none;padding:22px}.panel-content{max-width:830px;max-height:100%;overflow:auto;overscroll-behavior:contain;padding:24px 28px;width:100%;border:1px solid #76664d;background:linear-gradient(145deg,#202833,#101720);box-shadow:0 20px 70px #0007}.panel h1{font-size:36px;font-weight:400;line-height:1.3;color:var(--gold);margin:0 0 10px}.panel h2{font-size:24px;line-height:1.3;font-weight:400;color:var(--silver);margin:16px 0 9px}.panel p{font-size:12px;line-height:1.8;color:#c4cdd3;margin:8px 0}.panel .eyebrow{color:#8fa6b4;font-size:12px;line-height:1.6;margin-bottom:8px}.panel .quote{color:#dac8a1;border-left:2px solid #83704b;padding-left:14px;margin:12px 0}.panel .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.panel .btn,.party-next{border:1px solid #9c8356;color:var(--gold);background:#332e24;padding:12px 18px;font-size:18px;line-height:1.2;min-height:46px}.panel .btn.secondary{background:#111923;color:#b7c4cd;border-color:#586371}.panel .btn:hover{filter:brightness(1.2)}.panel .warning{color:#dca98a}.chapter-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin:16px 0}.chapter-grid button{height:40px;font-size:18px;border:1px solid #465467;background:#17212e;color:#9caebe}.chapter-grid button.done{border-color:#967e4d;color:var(--gold);background:#302c24}.chapter-grid button.current{box-shadow:inset 0 0 0 2px var(--gold)}.outfits{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}.outfit{padding:8px;border:1px solid #485463;background:#101823;text-align:center;min-width:0}.outfit.active{border-color:var(--gold)}.outfit canvas{width:100%;height:140px;object-fit:contain;image-rendering:pixelated}.outfit strong{font-size:12px;font-weight:400;line-height:1.5}.outfit p{font-size:12px;color:#97aab5}.outfit button{font-size:12px;min-height:40px;max-width:100%;padding:6px!important}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setting{padding:12px;border:1px solid #43505d;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;line-height:1.6}.setting input[type=range]{width:105px;accent-color:var(--gold)}.setting input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold)}.party-next{position:absolute;bottom:16px;right:20px;z-index:6;background:#151b22df}.loading{position:absolute;inset:0;z-index:30;background:#0b1119ee;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:25px}.loading strong{font-size:72px;color:var(--gold);font-weight:400}.loading span{font-size:18px}.loading i{width:120px;height:2px;background:var(--gold);animation:load-pulse 1s infinite alternate}@keyframes load-pulse{to{opacity:.2;transform:scaleX(.4)}}
.controller{position:relative;flex:none;min-height:210px;display:grid;grid-template-columns:215px 1fr 268px;align-items:center;gap:16px;padding:11px 23px;background:#111821 url('assets/ui/panel.svg') center/100% 100% no-repeat;border-top:3px solid #03070d;touch-action:none;isolation:isolate;user-select:none;-webkit-user-select:none}.movement{display:flex;align-items:center;flex-direction:column;gap:3px}.stick{position:relative;width:160px;height:160px;background:url('assets/ui/stick_base.svg') center/contain;touch-action:none}.stick-knob{position:absolute;left:50%;top:50%;width:82px;height:82px;margin:-41px;background:url('assets/ui/stick_knob.svg') center/contain;filter:drop-shadow(0 8px 7px #000b);will-change:transform;transition:transform .09s}.stick.dragging .stick-knob{transition:none}.stick-ring{position:absolute;inset:13px;border:1px solid transparent;border-radius:50%}.stick.dragging .stick-ring{border-color:#d7b77777;box-shadow:inset 0 0 15px #d7b77715}.control-label{font-size:12px;color:#a4b0bd}.center-console{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;align-self:stretch}.center-crest{display:flex;align-items:center;gap:16px;margin:-2px 0 6px;width:100%;justify-content:center;color:#b8b6aa}.center-crest span{font-size:30px;line-height:1}.center-crest i{height:1px;width:70px;background:linear-gradient(90deg,transparent,#68695e)}.center-crest i:last-child{transform:scaleX(-1)}.inventory{display:flex;gap:7px;align-items:center;justify-content:center}.slot{position:relative;width:67px;height:65px;padding:1px 3px 3px;background:linear-gradient(135deg,#28323e,#111a25);border:1px solid #566373;color:#a0afbc;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}.slot.selected{border-color:var(--gold);background:linear-gradient(135deg,#50432e,#171c24);color:var(--gold)}.slot canvas{width:57px;height:42px;display:block;margin:auto;image-rendering:pixelated}.slot span{font-size:12px;line-height:1}.slot b{position:absolute;right:5px;top:4px;font-size:12px;font-weight:400}.slot.empty canvas{opacity:.2;filter:grayscale(1)}.slot.empty b{opacity:.5}.slot.flash{animation:pickup-flash .3s}@keyframes pickup-flash{50%{filter:brightness(2)}}.use{width:114px;height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #a28b5d;background:linear-gradient(#30353e,#141d28);color:var(--gold);font-size:12px}.use img{width:32px;height:32px;filter:brightness(0) saturate(100%) invert(80%) sepia(25%) saturate(550%)}.use.pressed{transform:translateY(3px);background:#4a3e2d}.selected-caption{font-size:12px;line-height:1.4;text-align:center;color:#a1b0ba;margin-top:6px;min-height:17px}.charge-row{display:flex;align-items:center;gap:9px;background:none;border:0;padding:7px 0 0;width:100%;max-width:335px;font-size:12px;color:#c3b28f;min-height:27px}.charge-row b{font-size:12px;font-weight:400;white-space:nowrap}.charge-meter{flex:1;height:6px;border:1px solid #75684e;padding:1px;background:#080c12}.charge-meter i{height:100%;display:block;width:0;background:var(--gold)}.actions{height:186px;width:250px;position:relative;justify-self:end}.action{position:absolute;width:84px;height:84px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:transparent url('assets/ui/button_neutral.svg') center/contain no-repeat;border:0;touch-action:none;transition:transform .06s}.action img{width:36px;height:36px;filter:brightness(0) saturate(100%) invert(91%) sepia(5%) saturate(250%)}.action span{font-size:12px;line-height:1;margin-top:1px}.guard{left:0;top:43px}.jump{left:81px;top:0}.special{left:81px;top:102px}.attack{left:162px;top:43px}.action.ready{background-image:url('assets/ui/button_ready.svg');color:var(--gold)}.action.pressed{background-image:url('assets/ui/button_pressed.svg');transform:translateY(4px) scale(.97)}.action.locked{background-image:url('assets/ui/button_locked.svg');color:#607183}.action.locked img{opacity:.3}.action.ready img{filter:brightness(0) saturate(100%) invert(80%) sepia(30%) saturate(550%)}
@media(max-width:1100px){.controller{grid-template-columns:175px 1fr 236px;padding:10px 16px;gap:9px;min-height:193px}.stick{width:148px;height:148px}.stick-knob{width:76px;height:76px;margin:-38px}.actions{transform:scale(.9);transform-origin:right center}.center-crest span{font-size:24px}.slot{width:62px}.inventory{gap:5px}.use{width:104px}.hero-status{min-width:190px;gap:10px}.meter{width:120px}.hud{gap:12px;padding:7px 14px}}
@media(max-width:800px){.topline{font-size:9px}.topline nav{gap:2px}.topline button{padding:6px;font-size:12px}#fullscreen{display:none}.hud{height:56px;gap:8px;padding:7px 10px}.crest{display:none}.hero-status{min-width:105px}.meter{width:105px}.wealth{min-width:100px}.location strong{font-size:18px}.location span{font-size:12px}.controller{grid-template-columns:1fr 1fr;grid-template-rows:155px 87px;min-height:264px;padding:8px 18px;gap:3px 10px}.movement{grid-column:1;grid-row:1;justify-self:start}.stick{width:132px;height:132px}.stick-knob{width:70px;height:70px;margin:-35px}.actions{grid-column:2;grid-row:1;transform:scale(.82);transform-origin:right center;height:186px}.center-console{grid-column:1/3;grid-row:2}.center-crest{display:none}.slot{width:66px;height:61px}.slot canvas{width:55px;height:39px}.use{height:61px;width:114px}.selected-caption{font-size:12px;margin-top:4px}.charge-row{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:92px;flex-direction:column;gap:3px;max-height:90px;line-height:1.4}.charge-meter{width:75px;flex:none}.charge-row b{white-space:normal;text-align:center}.bottomline{font-size:9px}.bottomline>span{max-width:70%}.menu{padding:14px 24px}.wordmark{font-size:48px}.menu-tagline{margin:4px 0 12px}.menu-items{gap:4px;max-width:290px}.menu-item{min-height:38px;font-size:24px;padding:4px 10px}.menu-foot{left:24px;bottom:12px;font-size:12px}.panel{padding:12px}.panel-content{padding:17px}.panel h1{font-size:24px}.panel h2{font-size:18px}.panel .btn{font-size:12px;min-height:44px}.chapter-grid{grid-template-columns:repeat(10,1fr);gap:4px}.chapter-grid button{font-size:12px}.outfits{gap:5px}.outfit{padding:4px}.outfit canvas{height:105px}}
@media(max-width:480px){#app{padding-left:4px;padding-right:4px}.topline{height:32px}.topline>span{max-width:170px;font-size:9px}.hud{height:52px;gap:5px;padding:6px}.hero-status{min-width:84px}.meter{width:84px}.vitals>span{font-size:9px}.location strong{font-size:12px}.location span{font-size:9px}.wealth{min-width:77px}.wealth strong{font-size:18px}.wealth span{font-size:9px}.controller{grid-template-rows:133px 88px;min-height:240px;padding:6px 9px}.stick{width:114px;height:114px}.stick-knob{width:62px;height:62px;margin:-31px}.actions{transform:scale(.72);width:250px;margin-left:-60px}.slot{width:58px;height:57px}.slot canvas{width:48px;height:35px}.use{width:98px;height:57px}.inventory{gap:4px}.control-label{font-size:12px}.charge-row{width:66px;top:7px;font-size:9px}.charge-row b{font-size:9px}.charge-meter{width:54px}.bottomline{height:25px;font-size:9px}.bottomline button{font-size:12px}.objective{font-size:9px;padding:5px 8px;bottom:6px}.boss-hud{left:15%;right:15%}.boss-hud small{font-size:9px}.toast{font-size:18px;padding:8px 13px;top:12px}.settings-grid{grid-template-columns:1fr}.chapter-grid{grid-template-columns:repeat(5,1fr)}.outfits{grid-template-columns:repeat(3,1fr)}.outfit canvas{height:95px}.panel .row{gap:6px}.panel p{font-size:12px}.panel h1{font-size:24px}}
@media(max-height:680px) and (min-width:801px){.topline{height:28px}.hud{height:48px}.controller{min-height:166px;padding-top:2px;padding-bottom:2px;grid-template-columns:160px 1fr 225px}.stick{width:124px;height:124px}.stick-knob{width:68px;height:68px;margin:-34px}.actions{height:160px;transform:scale(.8);transform-origin:right top}.center-crest{display:none}.bottomline{min-height:24px}.slot,.use{height:60px}}
@container(max-height:380px){.menu{padding:12px 25px}.wordmark{font-size:48px;line-height:1.25}.menu-tagline{margin:4px 0 8px}.menu-items{gap:3px;max-width:280px}.menu-item{min-height:34px;font-size:18px;padding:4px 11px}.menu-foot{bottom:9px;font-size:9px}.panel-content{padding:14px 20px}.panel h1{font-size:24px}.panel p{font-size:12px;line-height:1.5}.outfit canvas{height:90px}.panel .row{margin-top:10px}}
@container(max-height:265px){.menu{padding:8px 18px}.wordmark{font-size:36px}.menu-tagline,.menu-foot{display:none}.menu-items{display:grid;grid-template-columns:1fr 1fr;max-width:340px;margin-top:8px;gap:5px}.menu-item{font-size:12px;min-height:38px;white-space:normal}.panel{padding:6px}.panel-content{padding:10px 14px}.panel h1{font-size:18px;margin-bottom:5px}.panel .btn{padding:7px 10px;min-height:38px;font-size:12px}.panel p{line-height:1.5}.toast{font-size:12px}.combo{font-size:24px;top:45px}.party-next{font-size:12px;padding:9px 12px;bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.stick.engaged .stick-knob{transition:none}.stick.engaged .stick-ring{border-color:#d7b77777;box-shadow:inset 0 0 15px #d7b77715}
.panel-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.panel button{border:1px solid #66717a;background:#141e29;color:#c6d0d3;padding:10px 16px;min-height:44px;font-size:15px;line-height:1.4}.panel button.primary{border-color:#b89b60;background:linear-gradient(135deg,#51432e,#292923);color:#efdab0}.panel button:hover:not(:disabled){filter:brightness(1.25)}.panel .eyebrow{display:block}.panel .dialogue{border-left:2px solid #7c6c4d;padding-left:14px;margin:12px 0}.panel .dialogue p{color:#ddcda9}.panel .panel-goal{font-size:15px}.panel .quiet{color:#a4b2bd}.panel .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:13px 0;border-top:1px solid #58606a;border-bottom:1px solid #58606a;margin:15px 0}.stat-grid span{font-size:12px;color:#a3b1ba}.stat-grid b{display:block;font-size:24px;font-weight:400;color:#e1c48e;margin-top:8px}.chapter-grid button{height:72px;padding:5px}.chapter-grid button b{display:block;font-size:18px;font-weight:400}.chapter-grid button span{display:block;font-size:9px;line-height:1.25;margin-top:5px;max-height:27px;overflow:hidden}.outfit>span,.outfit>small,.outfit>b{display:block;font-size:12px;font-weight:400;line-height:1.5;margin:3px 0}.outfit>small{color:#9eafb9;min-height:36px;font-size:9px}.outfit.equipped{border-color:var(--gold)}.outfit button{width:100%}.setting-grid,.choice-grid,.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.setting-grid label{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #495867;padding:12px;font-size:12px;line-height:1.5}.setting-grid input{accent-color:var(--gold);min-width:22px}.setting-grid input[type=checkbox]{width:24px;height:24px}.setting-grid input[type=range]{max-width:115px}.choice-grid button{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:120px}.choice-grid b{font-size:24px;font-weight:400;color:#dac18f}.choice-grid span,.choice-grid small{font-size:12px}.help-grid p{padding-bottom:10px;border-bottom:1px solid #4c5661}.help-grid b{color:#dac18f;font-weight:400}.use.locked{border-color:#475461;color:#87949f}.controller.inactive .movement,.controller.inactive .actions{opacity:.65}
@media(max-width:800px){.panel-buttons{gap:7px;margin-top:12px}.panel button{font-size:12px;padding:9px 12px}.chapter-grid{grid-template-columns:repeat(5,1fr)}.chapter-grid button{height:65px}.choice-grid b{font-size:18px}.outfit>small{min-height:40px}.stat-grid b{font-size:18px}}
@media(max-width:480px){.setting-grid,.help-grid{grid-template-columns:1fr}.panel .stat-grid{gap:6px}.stat-grid span{font-size:9px}.choice-grid{grid-template-columns:1fr}.choice-grid button{min-height:88px}.chapter-grid{grid-template-columns:repeat(5,1fr)}}
@container(max-height:300px){.panel-buttons{margin-top:10px}.panel button{font-size:12px;min-height:40px;padding:8px 10px}.panel .panel-goal{font-size:12px}.panel .stat-grid{padding:8px 0;margin:8px 0}.panel .eyebrow{font-size:9px}.chapter-grid button{height:58px}}
.slot canvas{height:34px;width:54px;margin:0 auto 2px}.slot{padding-top:3px}.slot span{display:block;line-height:1.25;font-size:12px}.topline #pause{font-size:0;position:relative}.topline #pause:before,.topline #pause:after{content:'';position:absolute;top:7px;width:3px;height:16px;background:#c9b789}.topline #pause:before{left:16px}.topline #pause:after{right:16px}
@media(max-width:480px){.slot canvas{height:27px;width:43px}.slot span{font-size:12px}}

/* Menu content shares one vertical flow. The footer cannot cover a button,
   even when the 16:9 viewport is shorter than the surrounding tablet page. */
.menu{display:flex;flex-direction:column;align-items:flex-start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.menu>.wordmark,.menu>.menu-tagline,.menu>.menu-items,.menu>.menu-foot{flex:0 0 auto}
.menu-tagline{line-height:1.6}
.menu-items{width:100%}
.menu-foot{position:static;inset:auto;margin-top:auto;padding-top:10px;max-width:min(380px,100%);line-height:1.6}
.menu-foot .load-meter{max-width:100%}
.panel-content{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.panel h1,.panel h2,.panel p,.panel .eyebrow{overflow-wrap:anywhere}
.panel-buttons>button,.setting-grid>label,.choice-grid>button{min-width:0}

/* A wide tablet in landscape may still have a 431px-high game viewport.
   Compact the desktop menu against that viewport, preserving the existing
   portrait treatment below 751px wide and all controls outside the scene. */
@container (min-width:751px) and (max-height:480px){
  .menu{padding:16px 32px}
  .wordmark{font-size:60px;line-height:1.25}
  .menu-tagline{margin:4px 0 10px}
  .menu-items{gap:5px;max-width:330px}
  .menu-item{font-size:22px;line-height:1.25;min-height:44px;padding:7px 13px}
  .menu-foot{font-size:12px;padding-top:10px}
  .panel{padding:14px}
  .panel-content{padding:18px 22px}
  .panel h1{font-size:28px;line-height:1.3}
  .panel-buttons{gap:8px;margin-top:12px}
}
@container (min-width:751px) and (max-height:410px){
  .menu{padding:12px 28px}
  .wordmark{font-size:48px;line-height:1.2}
  .menu-tagline{margin:3px 0 8px}
  .menu-items{gap:4px}
  .menu-item{font-size:20px;min-height:40px;padding:6px 12px}
  .menu-foot{font-size:11px;padding-top:8px}
}
@container (max-height:265px){
  .menu{padding:8px 18px}
  .wordmark{font-size:36px;line-height:1.25}
  .menu-items{max-width:340px}
  .menu-item{font-size:12px;min-height:38px;padding:4px 11px}
  .panel{padding:6px}
  .panel-content{padding:10px 14px}
  .panel h1{font-size:18px;margin-bottom:5px}
}

/* 4.2: one pixel-art control atlas, 4 columns × 2 rows. */
.control-sprite{display:block;flex:none;width:39px;height:39px;background-image:url('assets/ui/control_sprites_v42.webp');background-size:400% 200%;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(1px 2px 0 #000b)}
.sprite-attack{background-position:0 0}.sprite-jump{background-position:33.333333% 0}.sprite-guard{background-position:66.666667% 0}.sprite-super{background-position:100% 0}.sprite-use{background-position:0 100%}
.use .control-sprite{width:35px;height:35px}.action.locked .control-sprite{opacity:.38;filter:grayscale(.65)}.action.ready .control-sprite{filter:drop-shadow(0 0 5px #e3b35199)}.action.pressed .control-sprite,.use.pressed .control-sprite{filter:brightness(1.35) drop-shadow(0 0 4px #e3b351aa)}
.stick-knob{background-image:url('assets/ui/control_sprites_v42.webp');background-size:400% 200%;background-position:33.333333% 100%;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 7px 4px #000d)}
.stick.engaged .stick-knob{filter:brightness(1.12) drop-shadow(0 5px 3px #000d)}
.pad-key{display:none;position:absolute;top:2px;right:0;padding:1px 4px;background:#101923;border:1px solid #a68a51;border-radius:5px;font:10px/1.2 system-ui,sans-serif;color:#e8d3a5;pointer-events:none}
html[data-gamepad=connected] .pad-key{display:block}
.topline .gamepad-status{color:#85929d;font-size:10px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topline .gamepad-status.connected{color:#91c1a5}
.pad-focus{outline:3px solid #e9c778!important;outline-offset:2px!important;box-shadow:0 0 18px #d7b77755!important}
.menu-item.pad-focus{background:#443823d9;color:var(--gold);border-color:#b99a62;transform:translateX(3px)}
@media(max-width:800px){.topline>span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topline .gamepad-status{max-width:160px;font-size:9px}.control-sprite{width:38px;height:38px}}
@media(max-width:480px){.topline>span{max-width:100px}.topline nav{gap:0}.topline .gamepad-status{max-width:115px}.topline #sound{max-width:75px;overflow:hidden;white-space:nowrap;font-size:9px}}

/* Item shop and permanent skill branches share the existing game panels. */
.menu-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}.menu-tools .menu-item{font-size:18px;min-width:0;text-align:center;padding-left:6px;padding-right:6px}
.commerce-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #77684e;padding-bottom:9px;margin-bottom:10px}.commerce-heading h1{margin-bottom:0}.commerce-heading .eyebrow{margin-bottom:3px}.wallet-tag{text-align:right;color:#e7c98e;min-width:120px}.wallet-tag small{display:block;font-size:10px;color:#aebbbf;margin-bottom:3px}.wallet-tag>b{font-size:28px;font-weight:400}.panel .commerce-note{line-height:1.6;color:#bbc8cd;margin-bottom:13px}
.shop-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:13px 0}.panel .shop-tabs button{flex:1;min-width:74px;min-height:40px;padding:7px 9px;font-size:11px;line-height:1.35;background:#101925}.panel .shop-tabs button.selected{border-color:#d7b777;background:#443824;color:#edd1a0}
.shop-layout{display:grid;grid-template-columns:220px 1fr;gap:17px;align-items:start}.gear-preview{background:linear-gradient(180deg,#17222d,#0b121b);border:1px solid #475664;position:sticky;top:0;text-align:center;padding:10px 9px}.gear-preview canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 77%,#3d3a2e88,transparent 60%)}.fitting-label{font-size:10px;letter-spacing:1px;color:#d6bf8d;border-bottom:1px solid #58604e;padding-bottom:8px}.gear-preview .quiet{font-size:9px;line-height:1.6;margin:9px 0 2px}.gear-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px 0;border-top:1px solid #485462;border-bottom:1px solid #485462}.gear-totals>span{font-size:9px;color:#a5b2b9;text-align:center}.gear-totals b{display:block;font-size:17px;font-weight:400;color:#d9c5a1;margin-top:4px}
.item-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.panel .item-card{min-width:0;display:flex;align-items:stretch;flex-direction:column;text-align:left;min-height:99px;padding:9px 11px;background:linear-gradient(145deg,#202c37,#101a25);border-color:#4b5965}.panel .item-card.selected{border-color:#d7b777;box-shadow:inset 0 0 0 1px #d7b77777;background:linear-gradient(145deg,#393527,#131d28)}.item-state{font-size:8px;color:#98a8af;letter-spacing:.6px;margin-bottom:7px}.item-card.equipped .item-state{color:#88b8a1}.item-card.future .item-state{color:#b29c86}.item-card>b{font-size:14px;font-weight:400;line-height:1.3;color:#e0d5bd;overflow-wrap:anywhere}.item-card>small{font-size:12px;color:#d4b67b;margin-top:auto;padding-top:6px}.item-detail{border-top:1px solid #897650;margin-top:14px;padding-top:12px}.item-detail h2{margin-top:2px;font-size:22px}.item-detail>.eyebrow{font-size:10px}.item-detail .item-purchase{width:100%;margin-top:10px}.panel .item-lock{font-size:9px;line-height:1.45;color:#a6b3bb;min-height:15px;margin:7px 0 0}
.stat-changes{padding:8px 0;display:grid;gap:6px}.stat-changes>div{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid #394854;padding-bottom:5px}.stat-changes span{font-size:10px;color:#aebcc4}.stat-changes b{font-size:14px;font-weight:400;color:#dfc795;white-space:nowrap}.stat-changes i{font:14px/1 system-ui,sans-serif;color:#89b5a4;padding:0 7px}
.skill-tree{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}.skill-branch{min-width:0;display:flex;flex-direction:column;gap:25px}.skill-branch>header{text-align:center;font-size:16px;color:#dabf87;border-bottom:1px solid #806c47;padding:8px 3px;margin-bottom:-10px}.skill-node{position:relative;border:1px solid #4c5b68;background:linear-gradient(145deg,#1e2a36,#111a24);padding:12px 11px;flex:1;display:flex;flex-direction:column;min-width:0}.skill-node.learned{border-color:#9b8355}.skill-node.mastered{border-color:#87ab96;background:linear-gradient(145deg,#22342f,#111c24)}.skill-node+.skill-node:before{content:'';position:absolute;width:2px;height:25px;background:#8c7852;left:calc(50% - 1px);top:-26px}.skill-node+.skill-node:after{content:'';position:absolute;left:calc(50% - 4px);top:-7px;width:6px;height:6px;border-right:2px solid #b49a62;border-bottom:2px solid #b49a62;transform:rotate(45deg)}.skill-node>.eyebrow{font-size:9px;line-height:1.2;margin-bottom:4px;color:#99aab7}.skill-node h2{font-size:20px;line-height:1.3;margin:3px 0 9px}.skill-node p{font-size:11px;line-height:1.55}.skill-ranks{display:flex;gap:6px;margin-bottom:7px}.skill-ranks i{width:25px;height:25px;display:grid;place-items:center;font-style:normal;font-size:12px;color:#657788;border:1px solid #4a5a69;background:#0c1520;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}.skill-ranks i.filled{color:#101824;border-color:#ecd29a;background:#cdb276}.skill-node .skill-dependency{font-size:9px;color:#aebdba;min-height:30px}.skill-node .skill-max{color:#99c0a8;font-size:12px}.skill-node>button{margin-top:auto;min-width:0;padding:8px 5px;font-size:11px;line-height:1.45}.skill-node .stat-changes{margin-bottom:10px}.skill-node .stat-changes>div{display:block}.skill-node .stat-changes b{display:block;margin-top:4px}.skill-node .item-lock{font-size:8px;min-height:25px}
@media(max-width:800px){.shop-layout{grid-template-columns:175px 1fr;gap:10px}.panel .shop-tabs button{min-width:67px;padding:7px 5px;font-size:10px}.gear-totals{gap:3px}.gear-totals b{font-size:14px}.gear-totals>span{font-size:8px}.item-card>b{font-size:12px}.skill-tree{gap:9px}.skill-node{padding:10px 8px}.skill-node h2{font-size:17px}.skill-node p{font-size:10px}.skill-branch>header{font-size:12px}.wallet-tag>b{font-size:22px}}
@media(max-width:560px){.shop-layout{grid-template-columns:1fr}.gear-preview{position:relative;display:grid;grid-template-columns:120px 1fr;align-items:center;padding:7px;gap:7px}.gear-preview canvas{grid-column:1;grid-row:1/4}.fitting-label{grid-column:2;font-size:9px}.gear-preview .gear-totals{grid-column:2}.gear-preview .quiet{grid-column:2;margin:0}.commerce-heading{gap:8px}.wallet-tag{min-width:88px}.wallet-tag>b{font-size:20px}.skill-tree{grid-template-columns:1fr}.skill-branch{gap:23px}.skill-node p{font-size:12px}.skill-node h2{font-size:20px}.skill-node .stat-changes>div{display:flex}.skill-node .stat-changes b{margin-top:0}.skill-node>button{font-size:12px}.skill-node .skill-dependency{min-height:0}.skill-node .item-lock{font-size:9px;min-height:0}.menu-tools .menu-item{font-size:12px}}
@container(max-height:300px){.gear-preview canvas{max-height:155px;width:auto;margin:auto}.shop-layout{grid-template-columns:170px 1fr}.item-card>b{font-size:12px}.item-detail h2{font-size:18px}.commerce-heading h1{font-size:22px}.commerce-heading{padding-bottom:5px}.wallet-tag>b{font-size:21px}.skill-node h2{font-size:17px}.skill-node p{line-height:1.4}}

/* V6: chrome frame, readable body copy, controller geometry and bounded menus. */
:root{--body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--chrome:#d3dde5;--chrome-edge:#687d90;--focus:#ffe0a1}
.panel-content{position:relative;border:12px solid transparent;border-image:url('assets/ui/chrome_frame_v6.svg') 12 / 1 / 0 stretch;background:radial-gradient(ellipse at 70% 2%,#32435566,transparent 60%),repeating-linear-gradient(0deg,#090f1730 0 1px,transparent 1px 4px),#111923;box-shadow:0 22px 70px #000c;max-width:900px;padding:18px 24px}
.panel h1,.panel h2{color:#e7d5ab;text-shadow:2px 2px #060a11}
.panel p,.panel .quiet,.panel .eyebrow,.panel .item-lock,.panel .save-note,.panel .warning,.panel .setting-grid,.panel .requirements,.panel .purchase-reason,.panel .pad-hint,.panel .skill-rule{font-family:var(--body);text-transform:none;letter-spacing:0;line-height:1.5}
.panel p{font-size:14px}.panel .eyebrow{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:#aebecb}.panel .quiet{font-size:12px;color:#b5c2cc}.panel .panel-goal{font-size:14px}
.panel button,.menu-item,.party-next{position:relative;border:2px solid transparent;border-image:linear-gradient(145deg,#718293 0%,#e6edf0 13%,#3d4957 24%,#718597 48%,#bdccd5 52%,#1f2934 70%,#a2b2be 95%) 1;background:linear-gradient(115deg,#3c485455,#15202b 42%,#0e1721 72%,#263644);box-shadow:inset 0 1px 0 #d7e4ef33,inset 0 -2px 0 #03080d;clip-path:polygon(7px 0,calc(100% - 13px) 0,calc(100% - 13px) 3px,calc(100% - 5px) 3px,calc(100% - 5px) 7px,100% 7px,100% calc(100% - 7px),calc(100% - 7px) calc(100% - 7px),calc(100% - 7px) 100%,13px 100%,13px calc(100% - 3px),5px calc(100% - 3px),5px calc(100% - 7px),0 calc(100% - 7px),0 7px,7px 7px);transition:transform .08s,filter .08s,background .1s;color:#d0dce3}
.panel button:after,.menu-item:after,.party-next:after{content:'';position:absolute;pointer-events:none;left:12%;right:17%;height:1px;top:2px;background:linear-gradient(90deg,transparent,#e1e9ed90,transparent)}
.panel button.primary,.menu-item.featured{border-image:linear-gradient(145deg,#8d7650,#f6e4b4 17%,#735e3b 33%,#d5be82 51%,#6b5738 75%,#d4c195) 1;background:linear-gradient(115deg,#655638,#302c23 45%,#1b252e);color:#ffe4af}
.panel button.selected{background:linear-gradient(120deg,#4d4937,#202b34);color:#f6deb0;border-color:#edcd8e}
.panel button:active:not(:disabled),.menu-item:active:not(:disabled),.party-next:active{transform:translateY(2px) scale(.985);filter:brightness(1.45)}
.panel button:disabled{opacity:.48;filter:saturate(.2)}
.pad-focus,.panel button:focus-visible,.menu-item:focus-visible{outline:none!important;box-shadow:inset 0 0 0 3px var(--focus),inset 0 0 20px #ffe0a122,0 0 15px #d7b77766!important;filter:brightness(1.17)}
input.pad-focus{outline:3px solid var(--focus)!important;outline-offset:4px!important;filter:none}
html[data-gamepad=connected] .pad-focus:before{content:'▸';font:20px/1 var(--body);position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--focus);pointer-events:none}
.panel button.pad-focus{padding-right:25px}.panel .stat-grid b,.wealth strong,.vitals>span,.location>span,.wealth>span,.slot b,.charge-row,.selected-caption,.wallet-tag,.gear-totals,.stat-changes,.item-chip small,.skill-ranks,.requirements,.story-counter{font-family:var(--body);font-variant-numeric:tabular-nums;text-transform:none}
.wealth strong{font-size:26px;font-weight:750;letter-spacing:.02em}.wealth span,.vitals>span,.location>span{font-size:11px}.location strong{font-size:22px}.charge-row{font-size:11px}.charge-row b{font:600 11px/1.3 var(--body)}.selected-caption{font-size:11px}
/* W3C standard pad: north=3, east=1, south=0, west=2. Mapping is unchanged. */
.actions .special{left:81px;top:0}.actions .guard{left:162px;top:43px}.actions .jump{left:81px;top:102px}.actions .attack{left:0;top:43px}
.pad-key{top:0;right:0;font-weight:650;background:#111b27dc;border-color:#adbac3;color:#e6dfc8}
.controller{background-image:url('assets/ui/panel.svg'),linear-gradient(165deg,#29374455,transparent 35%,#070d1677);border-top:3px solid #83919a;box-shadow:inset 0 1px #e4ece655,inset 0 4px #151c25}.controller:before{content:'';position:absolute;pointer-events:none;inset:3px 8px;border:1px solid #889dab55;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);z-index:-1}
.menu-item{font-size:22px;min-height:42px}.menu-tools .menu-item{font-size:16px}.menu-foot{font:11px/1.4 var(--body);text-transform:none}.panel-buttons{gap:7px;margin-top:14px}.panel-buttons button{min-height:42px;font-size:14px;padding:9px 15px}.pad-hint{display:block;color:#94a9bc;font:10px/1.45 var(--body);text-transform:none;margin:6px 0 0}
.panel[data-kind^=wardrobe] .panel-content,.panel[data-kind^=skills] .panel-content{height:100%;padding:12px 16px;overflow:hidden}
.commerce-shell{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px}
.commerce-heading{margin:0;padding-bottom:7px;flex:none;gap:14px}.commerce-heading h1{font-size:28px;line-height:1.1;margin:0}.commerce-heading .eyebrow{font-size:9px;margin:0 0 4px}.wallet-tag{min-width:130px}.wallet-tag small{font:9px/1.3 var(--body);letter-spacing:.7px}.wallet-tag>b{font:700 25px/1.2 var(--body);font-variant-numeric:tabular-nums}
.commerce-tabs{display:flex;gap:7px;flex:none}.panel .commerce-tabs button{flex:1;font-size:13px;min-height:38px;padding:6px 12px}.shop-tabs{flex:none;flex-wrap:nowrap;margin:0;gap:4px}.panel .shop-tabs button{min-width:0;min-height:34px;padding:5px 8px;font-size:10px}.commerce-body{min-height:0;flex:1;overflow:auto;padding:3px 2px 6px;overscroll-behavior:contain;scrollbar-color:#8c9ba6 #0c1620;scrollbar-width:thin;scroll-padding:12px}
.shop-layout{grid-template-columns:minmax(135px,185px) 1fr;gap:16px}.gear-preview{top:0;padding:4px 7px;border:1px solid #6c8092;background:radial-gradient(ellipse at 50% 60%,#55647855,#111a25 70%);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.gear-preview canvas{height:170px;width:100%;object-fit:contain}.fitting-label{font:10px/1.3 var(--body);letter-spacing:1px;padding:5px}.gear-totals{padding:7px 0;gap:4px}.gear-totals>span{font:8px/1.3 var(--body);color:#abbccc}.gear-totals b{font:700 13px/1.2 var(--body);margin-top:4px}
.shop-selection{min-width:0}.shop-selection.has-picker{display:grid;grid-template-columns:minmax(105px,.8fr) minmax(160px,1.2fr);gap:12px}.compact-item-list{display:flex;flex-direction:column;gap:5px;max-height:225px;overflow:auto;padding:3px;scroll-padding:8px;scrollbar-width:thin;scrollbar-color:#8c9ba6 #0c1620}.panel .item-chip{min-height:48px;padding:7px 11px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px}.item-chip b{font:600 11px/1.3 var(--body);text-transform:none;padding-right:8px}.item-chip small{font:10px/1.2 var(--body);color:#d9c28e}.item-detail{margin:0;border:0;padding:4px 0}.item-detail h2{font-size:25px;line-height:1.1;margin:5px 0 8px}.item-detail>.eyebrow{font-size:9px;letter-spacing:.4px}.panel .item-detail p{font-size:13px;line-height:1.5;margin:7px 0}.item-detail .item-unlock{color:#b9d5c6!important;font-size:11px!important}.stat-changes{gap:6px;padding:5px 0}.stat-changes span{font:11px/1.3 var(--body);color:#bdc8d3}.stat-changes b{font:650 13px/1.3 var(--body);color:#e6d09f}.stat-changes i{padding:0 4px}.stat-changes>div{gap:5px;padding-bottom:6px}
.panel .delivery-note{font-size:11px;color:#dbc190;border-top:1px solid #596273;padding:8px 0 0;margin:8px 0 3px}.panel .commerce-note{font-size:10px;line-height:1.4;margin:4px 0;color:#aebecb}
.commerce-footer{flex:none;border-top:1px solid #84909b;padding-top:8px;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:start;background:linear-gradient(#111923bb,#121a24)}.purchase-zone{min-width:0}.purchase-zone>button{width:100%;min-height:43px;font-size:13px;margin:0;padding:8px 13px}.purchase-reason{font-size:10px;display:block;margin:4px 0 0;color:#bcc7d1}.commerce-footer .panel-buttons{margin:0;display:flex;flex-direction:column;gap:5px}.commerce-footer .panel-buttons button{min-width:135px;min-height:36px;font-size:12px;padding:6px 11px}.commerce-footer .pad-hint{grid-column:1/-1;margin:5px 0 0}
.skill-layout{display:grid;grid-template-columns:1.15fr 1fr;align-items:start;gap:20px}.skill-map{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.skill-column{display:flex;flex-direction:column;gap:14px;min-width:0}.skill-column h2{font-size:13px;line-height:1.3;text-align:center;margin:3px 0 0;padding-bottom:6px;border-bottom:1px solid #718292}.panel .skill-choice{display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:center;min-height:115px;padding:10px 7px}.skill-choice b{font:600 12px/1.35 var(--body);text-transform:none}.skill-choice small{font:10px/1.35 var(--body);text-transform:none;color:#b3c2cf}.skill-choice.selected{box-shadow:inset 0 0 0 1px #d4bf91;background:linear-gradient(145deg,#51482e,#15212b)}.skill-ranks{gap:4px;margin:0;display:flex;justify-content:center}.skill-ranks i{width:20px;height:20px;font:600 10px/1 var(--body);display:grid;place-items:center;font-style:normal;border:1px solid #526575;background:#0e1822;color:#798c9c}.skill-ranks i.filled{color:#131b24;background:#d3be8a;border-color:#f4e0ac}.skill-detail{min-width:0;padding:4px 0}.skill-detail h2{font-size:24px;line-height:1.15;margin:4px 0 7px}.skill-detail h3{font:650 12px/1.4 var(--body);text-transform:none;margin:13px 0 4px;color:#d2dce4}.panel .skill-detail p{font-size:12px;line-height:1.5}.requirements{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:11px}.requirements .met{color:#a0c5b5}.requirements .unmet{color:#d8bc8f}.requirements small{font-size:10px;color:#9fadb9}.panel .skill-rule{font-size:10px;margin:12px 0 0;color:#aebec8}
.story-card{position:relative;padding:2px 4px}.story-counter{position:absolute;top:0;right:0;font:600 12px/1 var(--body);color:#99b0c2}.speaker-tag{display:inline-block;font-size:21px;color:#e3cc94;padding:6px 16px 5px 0;border-bottom:2px solid #8798a7;margin:8px 0 9px}.panel .story-line{font:600 22px/1.45 var(--body);text-transform:none;color:#e2e9ea;margin:12px 0 20px;min-height:65px}.panel .story-goal{font:12px/1.5 var(--body);color:#acbdcb;border-top:1px solid #596b7b;padding-top:12px}.boss-intro h1{color:#e8b59c}.boss-intro .speaker-tag{color:#d98679}.boss-intro:before{content:'';position:absolute;inset:-6px;pointer-events:none;background:linear-gradient(110deg,#762c2520,transparent 60%);z-index:-1}.party-next{min-height:48px;font-size:16px;padding:12px 19px;background:linear-gradient(90deg,#63755b 0 var(--hold,0%),transparent var(--hold,0%)),linear-gradient(130deg,#323b42,#111e29);border-color:#d5c396;color:#f0dfba;max-width:75%}
.panel .setting-grid label{font:13px/1.5 var(--body);text-transform:none;border:1px solid #708699;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:linear-gradient(125deg,#33445455,#101b27);min-height:58px}.setting-grid input[type=range]{accent-color:#d5c18d;width:130px}.setting-grid input[type=checkbox]{accent-color:#d5c18d}.panel .help-grid p{font-size:12px}.panel .help-grid b{font-weight:650;color:#d9c69b}
@container(max-height:410px){.panel-content{padding:12px 16px}.panel[data-kind^=wardrobe] .panel-content,.panel[data-kind^=skills] .panel-content{padding:8px 10px}.commerce-shell{gap:6px}.commerce-heading h1{font-size:24px}.commerce-tabs button{min-height:32px!important;font-size:11px!important}.commerce-heading{padding-bottom:5px}.wallet-tag>b{font-size:21px}.commerce-heading .eyebrow{display:none}.gear-preview canvas{height:125px}.gear-preview .gear-totals{padding:4px 0}.shop-layout{grid-template-columns:130px 1fr;gap:12px}.item-detail h2{font-size:21px}.panel .item-detail p{font-size:11px;line-height:1.4}.compact-item-list{max-height:165px}.panel .item-chip{min-height:42px}.panel .delivery-note{font-size:10px;padding-top:6px}.commerce-footer{padding-top:6px}.purchase-zone>button{min-height:37px;font-size:11px}.commerce-footer .panel-buttons{flex-direction:row}.commerce-footer .panel-buttons button{min-width:90px;min-height:37px;font-size:11px}.commerce-footer .pad-hint{font-size:9px;margin-top:3px}.purchase-reason{font-size:9px}.skill-layout{gap:14px}.panel .skill-choice{min-height:92px;gap:5px}.skill-column{gap:10px}.skill-choice b{font-size:11px}.skill-detail h2{font-size:21px}.panel .skill-detail p{font-size:11px}.skill-detail h3{margin-top:9px}.requirements{font-size:10px;gap:4px}.panel .story-line{font-size:18px;min-height:45px;margin:8px 0 14px}.speaker-tag{font-size:18px;margin:4px 0}.panel h1{font-size:26px}}
@container(max-height:300px){.panel{padding:4px}.panel-content{border-width:8px}.commerce-heading h1{font-size:20px}.commerce-heading{padding-bottom:3px}.wallet-tag small{display:none}.wallet-tag>b{font-size:18px}.commerce-shell{gap:4px}.shop-tabs button{min-height:28px!important;padding:3px!important;font-size:9px!important}.commerce-tabs button{min-height:29px!important}.commerce-footer{column-gap:5px}.purchase-zone>button{min-height:34px}.commerce-footer .panel-buttons button{min-width:80px;min-height:34px;padding:5px;font-size:10px}.purchase-reason,.commerce-footer .pad-hint{font-size:8px}.commerce-body{padding-bottom:2px}.panel .commerce-note{font-size:9px}.party-next{font-size:12px;min-height:40px;padding:9px 13px}.story-counter{font-size:10px}.panel .story-line{font-size:16px;min-height:0;margin:7px 0}.panel .story-goal{font-size:10px;margin:5px 0;padding-top:6px}.story-card h1{font-size:21px}.panel-buttons{margin-top:8px}.panel-buttons button{font-size:11px;min-height:35px;padding:7px 11px}}
@media(max-width:560px){.panel-content{padding:12px;border-width:8px}.commerce-heading h1{font-size:22px}.wallet-tag{min-width:95px}.wallet-tag>b{font-size:20px}.wallet-tag small{font-size:8px}.commerce-tabs{gap:4px}.panel .commerce-tabs button{font-size:10px;padding:5px}.shop-layout{grid-template-columns:100px 1fr;gap:8px}.gear-preview{display:block;position:sticky;padding:4px}.gear-preview canvas{height:140px}.gear-preview .fitting-label{font-size:8px}.gear-preview .gear-totals{grid-template-columns:1fr;gap:5px}.gear-totals b{margin-top:1px;font-size:12px}.shop-selection.has-picker{display:flex;flex-direction:column;gap:8px}.compact-item-list{max-height:120px}.panel .item-chip{min-height:42px}.item-detail h2{font-size:19px}.panel .item-detail p{font-size:11px}.stat-changes>div{display:block}.stat-changes b{display:block;margin-top:3px}.commerce-footer{grid-template-columns:1fr}.commerce-footer .panel-buttons{flex-direction:row;margin-top:5px}.commerce-footer .panel-buttons button{flex:1;min-height:33px}.purchase-zone>button{font-size:11px}.skill-layout{grid-template-columns:1fr}.skill-map{gap:6px}.panel .skill-choice{min-height:90px}.skill-column h2{font-size:11px}.skill-choice b{font-size:11px}.skill-detail{border-top:1px solid #657b8e;padding-top:10px}.panel .story-line{font-size:16px}.location strong{font-size:16px}.wealth strong{font-size:22px}.vitals>span,.location>span,.wealth>span{font-size:9px}.charge-row b{font-size:9px}.charge-row{font-size:9px}.party-next{font-size:11px}.selected-caption{font-size:10px}}
.console{border-radius:0;border:4px solid transparent;border-image:linear-gradient(135deg,#6e8192,#dce7e7 11%,#28333f 24%,#7d8e9d 47%,#d3dcdb 51%,#111b29 76%,#9fb0bd) 1;box-shadow:0 16px 70px #000c,0 0 0 3px #060b11}.hud{background:linear-gradient(170deg,#3e495455,#17212de6 40%,#0f1923);box-shadow:inset 0 1px #d6e0e338}.objective{font:12px/1.45 var(--body);text-transform:none;max-width:84%;padding:7px 12px;border-color:#90a1b355;background:#091320d9}.toast{font:600 17px/1.4 var(--body);text-transform:none;border:2px solid #bcb28c;box-shadow:0 6px 25px #0009;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* A short viewport uses a console-style two-column main menu, not clipped rows. */
@container(max-height:480px){.menu{padding:14px 24px}.wordmark{font-size:46px;line-height:1.15}.menu-tagline{font:10px/1.3 var(--body);letter-spacing:1px;margin:5px 0 12px}.menu-items{display:grid;grid-template-columns:1fr 1fr;max-width:435px;gap:6px}.menu-tools{display:contents}.menu-item,.menu-tools .menu-item{min-height:40px;font-size:18px;text-align:left;padding:7px 12px}.menu-foot{left:24px;bottom:12px;font-size:10px;max-width:435px}.load-meter{margin-top:5px}}
@container(max-height:300px){.menu{padding:10px 18px}.wordmark{font-size:34px;line-height:1.15}.menu-tagline{display:none}.menu-items{max-width:370px;margin-top:10px;gap:5px}.menu-item,.menu-tools .menu-item{min-height:33px;font-size:14px;padding:6px 10px}.menu-foot{left:18px;bottom:8px;font-size:9px}.load-meter{margin-top:3px;height:1px}.objective{font-size:10px;padding:6px 9px}.toast{font-size:13px}}

/* A live full-body cast sprite is the boss's threat card, not a second hero portrait. */
.boss-intro{min-height:255px;padding-left:190px}.boss-reveal{position:absolute;left:-9px;top:8px;width:180px;text-align:center;pointer-events:none;background:radial-gradient(ellipse at 50% 65%,#8e413930,transparent 68%);animation:boss-reveal .32s ease-out both}.boss-reveal canvas{width:180px;height:205px;object-fit:contain;image-rendering:pixelated}.boss-reveal>span{display:block;font:10px/1.5 var(--body);letter-spacing:.12em;color:#bba59a}.boss-intro .panel-buttons{margin-left:-190px}.boss-intro .pad-hint{margin-left:-190px;display:block}.boss-intro h1{padding-right:42px}.boss-intro .story-line{min-height:65px}@keyframes boss-reveal{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}@container(max-height:410px){.boss-intro{min-height:190px;padding-left:140px}.boss-reveal{width:128px;top:0}.boss-reveal canvas{width:128px;height:163px}.boss-reveal>span{font-size:8px}.boss-intro .panel-buttons,.boss-intro .pad-hint{margin-left:-140px}.boss-intro .story-line{min-height:45px}}@container(max-height:300px){.boss-intro{padding-left:100px;min-height:150px}.boss-reveal{width:90px}.boss-reveal canvas{width:90px;height:120px}.boss-reveal>span{font-size:7px}.boss-intro .panel-buttons,.boss-intro .pad-hint{margin-left:-100px}.boss-intro .story-line{min-height:30px}.boss-intro h1{font-size:19px}}@media(prefers-reduced-motion:reduce){.boss-reveal{animation:none}}

/* Browser-verified v6 chrome: fixed-size, hollow nine-slice sprite.
   The centre is never painted, so no frame can stretch across the copy. */
:root{--frame-sprite:url('assets/ui/chrome_frame_v6.svg')}
.console{border:0;border-image:none;border-radius:0;box-shadow:none;background:#050b11;overflow:hidden}
.monitor{isolation:isolate}.monitor:after,.controller:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:20;border:8px solid transparent;border-image:var(--frame-sprite) 12 / 1 / 0 stretch;clip-path:none;background:none}
.hud{border:0;box-shadow:none;background:linear-gradient(170deg,#293743,#121e29 55%,#0c1721)}
.controller{margin-top:3px;border:0;box-shadow:none;background:repeating-linear-gradient(0deg,#c3d4dc03 0 1px,transparent 1px 4px),linear-gradient(165deg,#22313f,#101a25 45%,#0a131d);padding-top:13px;padding-bottom:13px}
.panel{background:#07101ae8;backdrop-filter:none;padding:20px}
.panel-content{border:10px solid transparent;border-image:var(--frame-sprite) 12 / 1 / 0 stretch;box-shadow:none;background-clip:padding-box;padding:18px 22px}
.panel button,.panel button.primary,.panel button.selected,.menu-item,.menu-item.featured,.party-next,.slot,.use{border:6px solid transparent;border-image:var(--frame-sprite) 12 / 1 / 0 stretch;clip-path:none;box-shadow:none;background-clip:padding-box}
.panel button:after,.menu-item:after,.party-next:after{display:none}
.panel button,.menu-item{background-image:linear-gradient(110deg,#273b4b,#142330 75%);background-clip:padding-box}
.panel button.primary,.menu-item.featured{background-image:linear-gradient(110deg,#4b4532,#262c2a 80%);background-clip:padding-box;color:#f3dcaa}
.panel button.selected{background-image:linear-gradient(110deg,#3e493f,#23333b);color:#f8e4b3}
.menu-item{padding-top:6px;padding-bottom:6px}.menu-item:hover,.menu-item:focus-visible,.menu-item.pad-focus{transform:none}
.pad-focus,.panel button:focus-visible,.menu-item:focus-visible{outline:none!important;box-shadow:inset 3px 0 #f7dc9f!important;filter:brightness(1.25)}
.panel .setting-grid label{border:0;border-bottom:1px solid #596e7e;clip-path:none;background:linear-gradient(100deg,#1b2d3b99,transparent);padding:10px 6px}
.gear-preview{border:0;clip-path:none;background:radial-gradient(ellipse at 50% 62%,#3c536877,transparent 75%)}
.slot{padding:1px 2px 2px;background-image:linear-gradient(135deg,#263644,#111e29)}.slot.selected{background-image:linear-gradient(135deg,#504932,#182a30)}.slot canvas{max-width:100%}
.use{background-image:linear-gradient(135deg,#30404e,#14212c)}.use .control-sprite{width:31px;height:31px}
.topline #pause{border:4px solid transparent;border-image:var(--frame-sprite) 12 / 1 / 0 stretch;width:44px;height:34px;background:#14212b;background-clip:padding-box}.topline #pause:before,.topline #pause:after{top:5px;height:14px}.topline #pause:before{left:12px}.topline #pause:after{right:12px}
.pad-key{border-radius:0;border:0;background:#0b1420eb;padding:2px 4px}.objective{border:0;box-shadow:none;background:linear-gradient(90deg,transparent,#07111eeb 12%,#07111eeb 88%,transparent);text-shadow:1px 2px #000}
.toast{border:6px solid transparent;border-image:var(--frame-sprite) 12 / 1 / 0 stretch;clip-path:none;box-shadow:none;background-clip:padding-box}
@container(max-height:410px){.panel{padding:10px}.panel-content{padding:12px 16px;border-width:8px}.panel[data-kind^=wardrobe] .panel-content,.panel[data-kind^=skills] .panel-content{padding:8px 10px}.panel button,.menu-item,.party-next{border-width:5px}}
@container(max-height:300px){.panel{padding:5px}.panel-content{border-width:6px;padding:8px 12px}.panel button,.menu-item{border-width:4px}}
@media(max-width:560px){.panel{padding:8px}.panel-content{border-width:8px;padding:12px}.controller{padding-top:8px;padding-bottom:8px}.slot,.use{border-width:4px}}
@media(max-height:680px) and (min-width:801px){.controller{padding-top:3px;padding-bottom:3px}}
/* Twelve-pixel stepped corners retain visible 2–3px metal ribs at tablet scale. */
.monitor:after,.controller:before,.panel-content{border-image-width:12px}
.panel button,.panel button.primary,.panel button.selected,.menu-item,.menu-item.featured,.party-next{border-image-width:12px}
.slot,.use{border-image-width:9px}
@container(max-height:300px){.panel-content,.panel button,.menu-item,.party-next{border-image-width:9px}}
@media(max-width:560px){.panel-content,.slot,.use{border-image-width:9px}}
/* The party exit belongs inside the scene, never in document flow. */
.party-next{position:absolute;right:20px;bottom:16px;left:auto;top:auto}

/* Party rhythm HUD: transparent pixel notes, a fixed hit line, no card covering the scene. */
.rhythm{position:absolute;z-index:5;left:4%;right:4%;top:8px;pointer-events:none;text-shadow:1px 2px 0 #03070c,0 0 4px #03070c}
.rhythm-stats{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:start;padding:0 10px}
.rhythm-stats small{display:block;font:600 10px/1.2 var(--body);letter-spacing:.09em;color:#bdcdd5}
.rhythm-stats strong,.rhythm-tempo>b{display:block;font:22px/1.15 YH17,serif;color:#f0d795}
.rhythm-score>strong>span{font:600 12px/1.3 var(--body);color:#c6d3d9}.rhythm-score b{font-weight:400}
.rhythm-score{max-width:260px}.rhythm-target-meter{display:block;position:relative;width:100%;height:3px;margin-top:3px;background:#0b151e8c;box-shadow:0 1px #b0c4d066}
.rhythm-target-meter>i{display:block;height:100%;background:#b4d299;box-shadow:0 0 4px #b4d29955}
.rhythm-tempo{text-align:center}.rhythm-tempo>b{font-size:18px}.rhythm-combo{text-align:right}
.rhythm canvas{display:block;width:100%;height:auto;image-rendering:pixelated;margin-top:3px;filter:drop-shadow(0 2px 0 #03070c)}
.rhythm-feedback{height:27px;text-align:center;position:relative}.rhythm-feedback>strong{font:20px/1.2 YH17,serif;color:#e6d2a0}.rhythm-feedback>[data-grade=perfect]{color:#d9edb2}.rhythm-feedback>[data-grade=good]{color:#a9d9de}.rhythm-feedback>[data-grade=miss],.rhythm-feedback>[data-grade=wrong]{color:#e7a091}
.rhythm-feedback>[data-rhythm-countdown]{position:absolute;left:50%;top:42px;transform:translateX(-50%);font:64px/1 YH17,serif;color:#f3e0ad;text-shadow:3px 4px #03070c}
.rhythm-time-meter{display:block;height:2px;width:70%;margin:0 auto;background:#7d99ab44}.rhythm-time-meter>i{display:block;height:100%;background:#adc2cc}
.rhythm-controller{min-height:80px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;text-align:center;padding:3px 7px}
.rhythm-controller>strong{font-size:22px;color:#e6d1a0}.rhythm-controller>span{font:600 11px/1.35 var(--body);color:#c8d3d8}.rhythm-controller>small{font:10px/1.35 var(--body);color:#a6bbc9}
.controller.party-mode .inventory,.controller.party-mode .selected-caption,.controller.party-mode .charge-row{display:none}
.panel[data-kind^=rhythm] .panel-content{max-width:760px}.rhythm-rules{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 12px}
.rhythm-rule{display:flex;align-items:center;gap:7px;min-width:0}.rhythm-rule .control-sprite{width:34px;height:34px}.rhythm-rule b{display:block;font:600 13px/1.3 var(--body);color:#e7d7b0}.rhythm-rule small{display:block;font:10px/1.4 var(--body);color:#b7cad3}
.rhythm-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:10px 0 12px}.rhythm-facts>div{font:11px/1.3 var(--body);color:#b9cad3}.rhythm-facts strong{display:block;font:25px/1.4 YH17,serif;color:#e8d2a0}.panel .rhythm-instruction{font:600 16px/1.5 var(--body);color:#dce7e9;margin:8px 0}
.panel .rhythm-note{font:12px/1.55 var(--body);color:#b5c7d0}.rhythm-result-stat{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0}.rhythm-result-stat>span{font:12px/1.5 var(--body);color:#c4d2da}.rhythm-result-stat b{display:block;font:24px/1.3 YH17,serif;color:#daceb0}.rhythm-result-pass h1{color:#c9dfa5}.rhythm-result-fail h1{color:#e8b092}
@container(max-height:410px){.rhythm{top:5px}.rhythm-stats strong{font-size:19px}.rhythm-stats small{font-size:9px}.rhythm-tempo>b{font-size:16px}.rhythm canvas{margin-top:0}.rhythm-feedback{height:22px}.rhythm-feedback>strong{font-size:17px}.rhythm-feedback>[data-rhythm-countdown]{font-size:49px;top:22px}.panel .rhythm-instruction{font-size:14px}.rhythm-facts{margin:6px 0}.rhythm-facts strong{font-size:21px}.rhythm-rules{margin:7px 0}.rhythm-result-stat{margin:7px 0}.rhythm-result-stat b{font-size:20px}}
@container(max-height:300px){.rhythm-stats strong{font-size:15px}.rhythm-stats small{font-size:8px}.rhythm-tempo>b{font-size:13px}.rhythm-score>strong>span{font-size:10px}.rhythm-feedback>strong{font-size:14px}.rhythm-feedback{height:18px}.rhythm-rule .control-sprite{width:27px;height:27px}.rhythm-rule b{font-size:11px}.rhythm-rule small{font-size:9px}.panel .rhythm-instruction{font-size:12px}.panel .rhythm-note{font-size:10px}.rhythm-facts strong{font-size:18px}.rhythm-feedback>[data-rhythm-countdown]{font-size:40px;top:15px}}
@media(max-width:650px){.rhythm-stats{gap:8px;padding:0}.rhythm-rules{grid-template-columns:repeat(2,1fr)}.rhythm-controller>strong{font-size:16px}.rhythm-controller>span{font-size:9px}.rhythm-controller>small{font-size:8px}.rhythm-facts{gap:8px 15px}}

/* v7: the rhythm track belongs on the floor below the dancers. The rating
   remains above the stage; comments never occupy the target or the controls. */
.rhythm{inset:0;top:0;left:0;right:0}
.rhythm-stats{position:absolute;top:2.5%;left:4%;right:4%;display:flex;justify-content:space-between;padding:0;gap:20px}
.rhythm-score{min-width:130px}.rhythm-tempo{position:absolute;top:38px;left:50%;transform:translateX(-50%)}
.rhythm-tempo small{display:none}.rhythm-tempo>b{font:600 11px/1.3 var(--body);letter-spacing:.14em;color:#c4d6db}
.rhythm-feedback{position:absolute;left:22%;right:22%;top:3%;height:auto;min-height:32px}
.rhythm-feedback>strong{font-size:clamp(16px,3.2cqw,32px);line-height:1.15;letter-spacing:.02em;display:block;text-shadow:2px 2px #02080d,-1px 0 #02080d}
.rhythm-feedback>[data-rhythm-countdown]{font-size:clamp(45px,9cqw,90px);top:115px}
.rhythm-track{position:absolute;left:3%;right:3%;bottom:5px;background:radial-gradient(ellipse at 50% 70%,#040b13c7,transparent 75%)}
.rhythm-track canvas{width:100%;height:auto;margin:0;filter:drop-shadow(0 3px 0 #03070c)}
.rhythm-time-meter{width:90%;height:2px;background:#7990a440}.rhythm-time-meter>i{background:#a5cfd4}
.audience-feedback{position:absolute;top:27%;left:16%;right:16%;text-align:center;transform:rotate(-2deg)}
.audience-feedback>small{display:block;font:600 8px/1.5 var(--body);letter-spacing:.16em;color:#b8c8ce;text-shadow:1px 1px #000}
.audience-feedback>strong{font:clamp(14px,2.5cqw,25px)/1.2 YH17,serif;display:block;letter-spacing:.01em;-webkit-text-stroke:.25px #03080e;paint-order:stroke fill;text-shadow:2px 2px #03080e,-1px -1px #03080e,0 3px #03080e}
.sprite-dance-left,.sprite-dance-down,.sprite-dance-right,.sprite-dance-up,.controller.party-mode .actions .control-sprite{background-image:url('assets/ui/dance_arrows_v7.svg');background-size:400% 100%;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px #02080c)}
.sprite-dance-left,.controller.party-mode #attack .control-sprite{background-position:0 0}
.sprite-dance-down,.controller.party-mode #jump .control-sprite{background-position:33.333333% 0}
.sprite-dance-right,.controller.party-mode #guard .control-sprite{background-position:66.666667% 0}
.sprite-dance-up,.controller.party-mode #special .control-sprite{background-position:100% 0}
.controller.party-mode .action .control-sprite{width:40px;height:40px;opacity:1}
.controller.party-mode .action.pressed .control-sprite{filter:brightness(1.35) drop-shadow(0 0 3px #a1edc8);transform:translateY(1px)}
.controller.party-mode .ally-controls{display:none}
.ally-controls{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:440px;margin-top:3px}
.ally-charge{position:relative;display:grid;grid-template-columns:minmax(60px,1fr) 43px 22px;gap:6px;align-items:center;flex:1;min-width:0;min-height:31px;padding:5px 8px;background:#101c27;border:4px solid transparent;border-image:var(--frame-sprite) 12 / 9px / 0 stretch;background-clip:padding-box;color:#d5dfe0;font-size:10px}
.ally-title{white-space:nowrap}.ally-title small{display:block;font:7px/1.2 var(--body);color:#a8bcc6}.ally-meter{display:block;height:5px;background:#03080e}.ally-meter i{display:block;width:0;height:100%;background:#9ab9ca}.ally-charge[data-ally=daniel] .ally-meter i{background:#c9a26b}.ally-charge.ready{color:#a9f0ca;background:#16312c}.ally-charge.ready .ally-meter i{background:#90e4b5}.ally-charge b{font:600 10px var(--body)}.ally-charge:active:not(:disabled){filter:brightness(1.45);transform:translateY(2px)}.ally-charge:disabled{opacity:.65}
@container(max-height:300px){.rhythm-tempo{top:25px}.rhythm-tempo>b{font-size:9px}.rhythm-stats strong{font-size:14px}.rhythm-feedback>[data-rhythm-countdown]{top:65px}.audience-feedback{top:26%}.rhythm-score{min-width:90px}}
@media(max-height:650px){.ally-charge{min-height:25px;padding:2px 6px}.ally-controls{margin-top:1px}.ally-title small{font-size:6px}.ally-title{font-size:8px}}
@media(max-width:650px){.ally-charge{grid-template-columns:1fr 18px;gap:2px;padding:3px 5px}.ally-charge .ally-meter{position:absolute;left:6px;right:6px;bottom:2px;height:2px}.ally-title{font-size:8px}.ally-title small{font-size:6px}}
/* V7: speaking portraits share the game's cut-pixel chrome, with room for text. */
.dialogue-scene{display:grid;grid-template-rows:auto 1fr auto;min-height:260px;gap:8px;position:relative}
.dialogue-scene>header{padding:0 40px 0 0;position:relative}.dialogue-scene h1{font-size:clamp(21px,3.5cqw,34px);margin:5px 0 0}.dialogue-scene .story-counter{top:2px;right:0}
.dialogue-stage{display:grid;grid-template-columns:36% 1fr;gap:20px;align-items:center;min-height:180px}
.dialogue-portrait{margin:0;min-width:0;align-self:end;position:relative;background:radial-gradient(ellipse at 50% 70%,#7a92a22d,transparent 68%);animation:portrait-enter .24s steps(5) both}
.dialogue-portrait canvas{display:block;width:100%;max-height:240px;object-fit:contain;image-rendering:pixelated;object-position:bottom}
.dialogue-portrait figcaption{font:10px/1.2 var(--body);text-align:center;color:#aabfc9;letter-spacing:.08em;margin:5px 0}
.dialogue-scene .story-line{font:500 clamp(14px,2.25cqw,20px)/1.5 var(--body);margin:10px 0;min-height:0;text-transform:none;overflow-wrap:anywhere}
.dialogue-scene .speaker-tag{font-size:clamp(17px,2.8cqw,25px);margin:0;padding-bottom:5px;border-bottom:0;text-shadow:2px 2px #02060b}
.dialogue-copy{padding:12px 0 12px 8px;min-width:0}.dialogue-scene footer{border:0}.dialogue-scene .panel-buttons{margin-top:2px;justify-content:flex-end}.dialogue-scene .pad-hint{text-align:right;display:block;margin-top:8px;font-size:10px}
.dialogue-scene.speaker-right .dialogue-stage{grid-template-columns:1fr 36%}.dialogue-scene.speaker-right .dialogue-portrait{order:2}.dialogue-scene.speaker-right .dialogue-copy{order:1;padding:12px 8px 12px 0}
.dialogue-boss .speaker-tag,.dialogue-boss h1{color:#e6ab9a}.dialogue-boss .dialogue-portrait{background:radial-gradient(ellipse at 50% 70%,#b14d393d,transparent 68%)}
@keyframes portrait-enter{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:none}}
@container(max-height:410px){.dialogue-scene{min-height:210px;gap:3px}.dialogue-stage{min-height:145px;gap:14px;grid-template-columns:30% 1fr}.dialogue-scene.speaker-right .dialogue-stage{grid-template-columns:1fr 30%}.dialogue-portrait canvas{max-height:170px}.dialogue-scene .story-line{font-size:14px;line-height:1.45}.dialogue-scene .speaker-tag{font-size:20px}.dialogue-scene .eyebrow{font-size:9px}.dialogue-portrait figcaption{font-size:8px}.dialogue-scene .pad-hint{font-size:8px;margin-top:4px}.dialogue-scene h1{font-size:23px}}
@container(max-height:300px){.dialogue-scene{min-height:160px;gap:0}.dialogue-stage{min-height:105px;gap:10px;grid-template-columns:25% 1fr}.dialogue-scene.speaker-right .dialogue-stage{grid-template-columns:1fr 25%}.dialogue-portrait canvas{max-height:125px}.dialogue-scene .story-line{font-size:11px;line-height:1.4;margin:4px 0}.dialogue-scene .speaker-tag{font-size:16px}.dialogue-scene h1{font-size:18px}.dialogue-scene footer .panel-buttons button{min-height:32px;font-size:11px}.dialogue-scene .pad-hint{display:none}.dialogue-copy{padding:5px 0}}
@media(prefers-reduced-motion:reduce){.dialogue-portrait{animation:none}}