body{padding-top:48px}
#stage{flex:none;container-type:size}
#orientationSwitch{position:fixed;z-index:50;top:5px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:3px;border:1px solid #bca07866;border-radius:24px;background:#111823ec}
#orientationSwitch button{border:0;border-radius:20px;background:transparent;color:#c2bdb2;padding:5px 16px;min-height:32px;font:13px system-ui;white-space:nowrap}
#orientationSwitch button[aria-pressed=true]{background:#e5c597;color:#25221e}
#mediaBackdrop{position:absolute;inset:-4%;width:108%;height:108%;filter:blur(28px) brightness(.45);pointer-events:none;display:none}
body[data-layout=landscape] #mediaBackdrop{display:block}
body[data-layout=landscape] #stage{--dock:64px}
body[data-layout=landscape] #film,body[data-layout=landscape] #still{object-fit:contain;height:calc(100% - var(--dock));inset:0}
body[data-layout=landscape][data-mode=landing] #still{height:100%;width:58%;object-fit:contain}
body[data-layout=landscape] #landing{background:linear-gradient(90deg,transparent 35%,#0d111bcc 68%);padding:0}
body[data-layout=landscape] #landing .boot{left:63%;right:7%;top:40%;bottom:auto;gap:12px}
body[data-layout=landscape] .landing-legal{left:60%;right:3%;top:auto;bottom:12%;font-size:11px}
body[data-layout=landscape] #bootLoading{left:62%;right:4%;top:38%;width:auto}
body[data-layout=landscape] #toolbar{height:var(--dock);border-radius:0;padding:6px 18%;align-items:center}
body[data-layout=landscape] #toolbar i{width:30px;height:30px}
body[data-layout=landscape] #toolbar button{font-size:11px;gap:1px}
body[data-layout=landscape] #toolbar img{width:17px;height:17px}
body[data-layout=landscape] #transport{left:26%;right:26%;bottom:calc(var(--dock) + 8px)}
body[data-layout=landscape] #stats{top:18px;left:18px;display:flex;gap:8px}
body[data-layout=landscape][data-mode=game] #stats,body[data-layout=landscape][data-mode=landing] #stats,body[data-layout=landscape][data-mode=end] #stats{display:none}
body[data-layout=landscape][data-mode=choice] #still{width:60%}
body[data-layout=landscape] #choice{left:60%;right:3%;top:12%;bottom:calc(var(--dock) + 12px);display:flex;flex-direction:column;justify-content:center}
body[data-layout=landscape] .question{padding:15px 4%}
body[data-layout=landscape] #options{padding:8px 4%;gap:12px}
body[data-layout=landscape] #options button{min-height:48px}
body[data-layout=landscape] #ending{left:26%;right:26%;max-height:90%;overflow:auto}
body[data-layout=landscape] dialog,body[data-layout=landscape] #privacy{max-width:calc(100vw - 28px)}
body[data-layout=landscape] #history{width:min(650px,95vw);height:90dvh}
body[data-layout=landscape] #storyFight{inset:0 0 var(--dock);height:calc(100% - var(--dock))}
body[data-layout=landscape]:is([data-node=restaurantFight],[data-node=wangmengFight],[data-node=mediationRoom]) header{top:auto;bottom:12px;right:10px;z-index:13}
body[data-layout=portrait] #history{height:calc(100dvh - 48px)}
body.compact-landscape #stage{--dock:40px}
body.compact-landscape #toolbar{padding:2px 10%}
body.compact-landscape #toolbar button>span{display:none}
body.compact-landscape #toolbar i{width:30px;height:30px}
body.compact-landscape header{top:6px;right:6px}
body.compact-landscape header button{font-size:12px;padding:3px 8px}
body.compact-landscape #stats{top:6px;left:6px;gap:3px}
body.compact-landscape #stats span{padding:0 4px;font-size:10px}
body.compact-landscape #stats b{font-size:12px}
body.compact-landscape #stats img{width:12px;height:12px}
body.compact-landscape #choice{left:52%;right:2%;top:15%;bottom:44px}
body.compact-landscape .question{padding:3px}
body.compact-landscape .question h2{font-size:13px;margin:4px}
body.compact-landscape .question>span{display:none}
body.compact-landscape #options{padding:2px;gap:5px}
body.compact-landscape #options button{padding:4px 8px;font-size:12px;min-height:34px}
body.compact-landscape #options button:after{font-size:16px}
body.compact-landscape #transport{left:25%;right:25%;padding:0 7px;bottom:42px}
body.compact-landscape #seek{height:12px}
body.compact-landscape .landing-legal{font-size:8px;bottom:3%}
body.compact-landscape #landing .boot{top:20%;gap:4px}
body.compact-landscape #landing .boot button{min-height:32px;height:32px;font-size:12px}

/* Landscape controls form a centered, reachable group instead of spanning the entire screen. */
body[data-layout=landscape] #stage{--dock:84px}
body[data-layout=landscape] #toolbar{display:flex;justify-content:center;gap:clamp(12px,2vw,28px);padding:8px 76px}
body[data-layout=landscape] #toolbar button{flex:0 0 58px;width:58px;min-height:58px;align-items:center;justify-content:center}
body[data-layout=landscape] #toolbar i{width:48px;height:48px}
body[data-layout=landscape] #toolbar img{width:25px;height:25px}
body[data-layout=landscape]:is([data-node=restaurantFight],[data-node=wangmengFight],[data-node=mediationRoom]) header{bottom:22px}
body.compact-landscape #stage{--dock:60px}
body.compact-landscape #toolbar{gap:8px;padding:4px 54px}
body.compact-landscape #toolbar button{flex-basis:44px;width:44px;min-height:44px}
body.compact-landscape #toolbar i{width:40px;height:40px}
body.compact-landscape #toolbar img{width:22px;height:22px}
body.compact-landscape:is([data-node=restaurantFight],[data-node=wangmengFight],[data-node=mediationRoom]) header{bottom:10px}

body[data-node=wangmengFight][data-layout=portrait] #storyFight{top:0;height:calc(100% - var(--dock))}
body[data-node=wangmengFight][data-layout=portrait] header{top:auto;bottom:calc(var(--dock) + 8px);right:8px;z-index:12}
@media(max-width:600px){body[data-node=wangmengFight][data-layout=portrait] header{position:fixed;top:6px;right:8px;bottom:auto;z-index:60}}