/* v3.6: visible viewport, host-badge clearance and a separate landscape command column. */
:root{--visible-height:100vh;--visible-width:100vw;--viewport-top:0px;--viewport-left:0px;--host-footer:0px}
@supports(height:100dvh){:root{--visible-height:100dvh}}
html[data-host-badge="true"]{--host-footer:60px}
html,body{height:100%;min-height:0;width:100%;overflow:hidden}
body{display:block}
#gc{position:fixed;top:calc(var(--viewport-top) + env(safe-area-inset-top,0px));left:calc(var(--viewport-left) + env(safe-area-inset-left,0px));width:calc(var(--visible-width) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));height:calc(var(--visible-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--host-footer));min-height:0;min-width:0}
#gc:fullscreen{top:0;left:0;width:100vw;height:100dvh}
#ts::after{position:absolute}
#ts .title-art{position:absolute;right:0;animation:none}
#ts .title-version{position:absolute;right:16px;bottom:10px;margin:0}
#ts .title-left>*{flex-shrink:0}
#ts .title-left{margin-block:0;min-width:0}
#ts .opening-controls{flex-shrink:0}
#ts .start-btn{white-space:normal}
#go,#cs,#stage-transition{overflow-y:auto;padding:20px;justify-content:safe center}
.battle-bottom{bottom:12px}
.quiz-btn{touch-action:manipulation}
@media(max-width:700px) and (orientation:portrait){
 /* v3.8: approved phone title, stronger hero with a dark text-side overlay. */
 #ts .title-art{opacity:.65;right:0;bottom:15%;object-position:calc(50% + 15vw) bottom}
 #ts .title-left{background:linear-gradient(90deg,#091626cf 0%,#091626a8 51%,#09162600 100%)}
 #ts .title-left{padding:22px 22px 24px;justify-content:center;height:auto;min-height:100%;max-width:none}
 #ts .opening-brand{margin-bottom:16px}#ts .brand-note{display:none}#ts .amz-logo{width:152px}
 #ts .opening-eyebrow{font-size:13px;margin-bottom:10px}
 #ts h1{font-size:clamp(31px,8.2vw,45px);line-height:1.2;margin:0 0 8px;max-width:none;text-align:left}
 html:lang(en) #ts h1{font-size:clamp(30px,7.8vw,43px)}
 #ts .sub{font-size:15px;margin-bottom:14px;letter-spacing:.07em}
 #ts .opening-copy{font-size:16px;line-height:1.5;margin-bottom:16px}
 #ts .lang-toggle{margin-bottom:12px}#ts .lang-btn{min-height:44px}
 #ts .launch-row{flex-direction:column;align-items:stretch;gap:12px}
 #ts .ni-area label{font-size:14px;margin-bottom:6px}
 #ts .ni-area input{height:50px;min-height:50px;font-size:20px}
 #ts .start-btn-wrap{width:100%}#ts .start-btn{width:100%;min-height:52px;justify-content:space-between;padding:10px 16px}
 #ts .opening-meta{margin-top:14px;font-size:12px}#ts .title-version{display:none}
 .battle-bottom{max-height:58%;padding:10px}
 html:lang(en) .quiz-grid{grid-template-columns:minmax(0,1fr);gap:4px}
 html:lang(en) .quiz-btn{min-height:40px;padding:5px 8px}
}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){
 #ts .title-left{padding:16px 20px 20px}
 #ts .opening-brand{margin-bottom:10px}#ts .amz-logo{width:130px}
 #ts .opening-eyebrow{font-size:12px;margin-bottom:6px}
 #ts h1{font-size:32px}html:lang(en) #ts h1{font-size:30px}
 #ts .sub,#ts .opening-meta{display:none}
 #ts .opening-copy{font-size:15px;line-height:1.45;margin:6px 0 12px}
 #ts .lang-toggle{margin-bottom:10px}#ts .launch-row{gap:10px}
 #ts .ni-area label{font-size:13px}
 .stage-bar{height:36px}.target-status,.hero-status-panel{top:44px;padding:6px 8px}
 .target-kicker,.status-kicker{font-size:10px;margin-bottom:3px}
 .monster-name-tag span,.hero-status-panel .hs-name{font-size:15px;line-height:1.2}
 .monster-name-tag,.hero-status-panel .hs-name{margin-bottom:5px}
 .monster-hp-bar,.hero-status-panel .hs-bar{height:9px}
 .monster-hp-text,.hero-status-panel .hs-numbers{font-size:13px}.hero-status-panel #hhc{font-size:16px}
 .msg-panel{padding:5px 8px;max-height:48px}.msg-panel .msg-text{font-size:12px;line-height:1.4}
 .command-heading{font-size:11px;margin-bottom:4px}
 .quiz-q,html:lang(en) .quiz-q{font-size:16px;line-height:1.35}
 .quiz-grid{margin-top:7px;gap:5px}.quiz-btn{min-height:46px;font-size:14px;line-height:1.3}
 html:lang(en) .quiz-btn{font-size:14px;min-height:38px}
}
/* Use actual window orientation, including phone browser chrome. */
@media(max-height:560px) and (orientation:landscape){
 #bs{--arena-width:44%}
 .battle-top{right:auto;width:var(--arena-width);overflow:visible}
 .battle-top .scene{width:100%;overflow:hidden}
 .stage-bar{width:calc(100% / .44);height:34px;padding:0 12px;gap:10px}
 .stage-bar .stage-text,.stage-bar .stage-name{font-size:12px}
 .target-status,.hero-status-panel{top:43px;width:calc(50% - 12px);max-width:none;padding:6px 7px}
 .target-status{left:8px}.hero-status-panel{right:8px}
 .target-kicker,.status-kicker{font-size:10px;letter-spacing:0;margin-bottom:3px}
 .monster-name-tag span,.hero-status-panel .hs-name{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
 .monster-name-tag,.hero-status-panel .hs-name{margin-bottom:4px}
 .monster-hp-wrap{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .monster-hp-bar{width:100%;min-width:0;flex:none;height:8px}
 .hero-status-panel .hs-bar{height:8px}
 .monster-hp-text,.hero-status-panel .hs-numbers{font-size:12px;line-height:1.2;margin-top:4px}
 .hero-status-panel #hhc{font-size:14px}
 .msg-panel{left:8px;right:8px;top:auto;bottom:8px;transform:none;width:auto;max-height:54px;padding:6px 8px}
 .msg-panel .msg-text{font-size:12px;line-height:1.4}
 #bs .monster-area{left:0!important;width:58%}
 #bs .hero-area{right:0!important;width:40%}
 .battle-bottom{left:calc(var(--arena-width) + 4px);right:8px;top:42px;bottom:8px;max-height:none;padding:10px 12px;overscroll-behavior:contain}
 .quiz-panel{display:block}.command-heading{font-size:11px;margin-bottom:6px}.command-hint{display:none}
 .quiz-q,html:lang(en) .quiz-q{font-size:16px;line-height:1.4}
 .quiz-grid,html:lang(en) .quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
 .quiz-btn,html:lang(en) .quiz-btn{font-size:14px;line-height:1.3;min-height:48px;padding:7px 6px}
 .quiz-btn::before{font-size:10px;width:15px;margin-right:4px}
 #ts .title-left{width:100%;max-width:none;min-height:100%;height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:26px;padding:16px 24px;align-content:center;align-items:start}
 #ts .opening-brand{grid-column:1;margin-bottom:10px}#ts .amz-logo{width:128px}#ts .brand-note{display:none}
 #ts .opening-eyebrow{grid-column:1;font-size:12px;line-height:1.4;margin-bottom:6px}
 #ts h1,html:lang(en) #ts h1{grid-column:1;font-size:30px;line-height:1.15;margin:0 0 8px}
 #ts .sub,#ts .opening-meta{display:none}
 #ts .opening-copy{grid-column:1;font-size:14px;line-height:1.4;margin:0;white-space:normal}
 #ts .opening-controls{grid-column:2;grid-row:1/5;align-self:center}
 #ts .launch-row{flex-direction:column;align-items:stretch;gap:10px}
 #ts .lang-toggle{margin-bottom:10px}#ts .lang-btn{font-size:16px;min-height:42px;padding:8px 14px}
 #ts .ni-area label{font-size:13px}#ts .ni-area input{height:46px;min-height:46px;font-size:20px}
 #ts .start-btn{height:auto;min-height:46px;width:100%;font-size:16px;padding:9px 14px;justify-content:space-between}
 #ts .title-art{opacity:.14;bottom:0}#ts .title-version{display:none}
 #go h1,#cs h1{font-size:27px}#go p,.clear-msg{font-size:14px;line-height:1.5}
}
@media(max-width:740px) and (max-height:560px) and (orientation:landscape){
 #bs{--arena-width:42%}.stage-bar{width:calc(100% / .42)}
 .battle-bottom{padding:8px}.quiz-btn,html:lang(en) .quiz-btn{font-size:13px;padding:6px 4px}
 .quiz-btn::before{width:12px;margin-right:3px}
 .monster-name-tag span,.hero-status-panel .hs-name{font-size:13px}
 #ts .title-left{padding:12px 18px;column-gap:22px}
 #ts h1,html:lang(en) #ts h1{font-size:27px}#ts .opening-copy{font-size:13px}
}

/* A short near-square window gets the same compact start form as a phone. */
@media(min-width:501px) and (max-width:700px) and (min-height:561px) and (max-height:700px){
 #ts .title-left{width:100%;padding:16px 24px;min-height:100%;height:auto;justify-content:center}
 #ts .opening-brand{margin-bottom:10px}#ts .amz-logo{width:130px}#ts .brand-note,#ts .sub,#ts .opening-meta{display:none}
 #ts .opening-eyebrow{font-size:12px;margin-bottom:6px}
 #ts h1,html:lang(en) #ts h1{font-size:30px;line-height:1.15;margin:0 0 8px}
 #ts .opening-copy{font-size:15px;line-height:1.45;margin:0 0 12px}
 #ts .lang-toggle{margin-bottom:10px}#ts .launch-row{flex-direction:column;gap:10px}
 #ts .ni-area input{height:48px}#ts .start-btn{min-height:48px;padding:9px 16px}
 #ts .title-version{display:none}
}
@media(max-height:560px) and (orientation:landscape){
 .target-kicker,.status-kicker{display:none}
 .target-status,.hero-status-panel{padding:6px 7px}
 .monster-hp-wrap{display:grid;grid-template-columns:minmax(20px,1fr) auto;align-items:center;gap:6px}
 .monster-hp-text{margin:0;font-size:12px}
 .hero-status-panel{display:grid;grid-template-columns:minmax(20px,1fr) auto;align-items:center;column-gap:6px}
 .hero-status-panel .hs-name{grid-column:1/-1}
 .hero-status-panel .hs-numbers{margin:0;font-size:12px;white-space:nowrap}
 .hero-status-panel #hhc{font-size:12px}
 .msg-panel{max-height:42px;font-size:12px}
}

#ts .title-left{justify-content:safe center}
#ts .opening-controls{min-width:0}

/* v3.8: narrower landscape commands; reading and touch sizes are retained. */
@media(max-height:560px) and (orientation:landscape){
 #bs{--arena-width:70%}
 #bs .stage-bar{width:calc(100% / .70)}
 #bs .target-status,#bs .hero-status-panel{top:40px;padding:6px 9px}
 #bs .monster-name-tag span,#bs .hero-status-panel .hs-name{font-size:15px;line-height:1.2}
 #bs .monster-hp-text,#bs .hero-status-panel .hs-numbers,#bs .hero-status-panel #hhc{font-size:13px}
 #bs .monster-hp-bar,#bs .hero-status-panel .hs-bar{height:9px}
 #bs .monster-area{left:0!important;width:59%}
 #bs .hero-area{right:0!important;width:38%}
 #bs .battle-bottom{left:calc(var(--arena-width) + 6px);right:8px;top:40px;bottom:8px;padding:7px 8px;box-shadow:inset 0 0 0 2px #071329,0 6px 18px #03081350}
 #bs .command-heading{display:none}
 #bs .quiz-q{font-size:15px;line-height:1.35}
 #bs .quiz-grid{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:6px}
 #bs .quiz-btn{min-height:40px;padding:5px 6px;font-size:14px;line-height:1.3;overflow-wrap:normal;word-break:normal}
 #bs .quiz-btn::before{font-size:11px;width:17px;margin-right:5px}
 #bs .msg-panel{bottom:6px;max-height:42px;padding:5px 9px}
 #bs .msg-panel .msg-text{font-size:12px;line-height:1.35}
}
@media(max-width:740px) and (max-height:560px) and (orientation:landscape){
 #bs{--arena-width:66%}
 #bs .stage-bar{width:calc(100% / .66)}
 #bs .battle-bottom{padding:8px}
 #bs .quiz-q{font-size:14px}
 #bs .quiz-btn{font-size:14px;min-height:40px;padding:6px}
 #bs .monster-name-tag span,#bs .hero-status-panel .hs-name{font-size:14px}
}

/* Emergency wrap only for a single token wider than the smallest phone column. */
@media(max-width:600px) and (max-height:560px) and (orientation:landscape){
 #bs .quiz-btn{overflow-wrap:anywhere}
}

/* v3.11: preserve a visible arena on short phones; long commands remain scrollable. */
@media(max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:561px){
 #bs .battle-bottom{max-height:min(58%,var(--scene-command-limit,100%))}
}