body.game-shell { padding:0; overflow:hidden; }
.game-shell > header,.game-shell > footer { display:none; }
.game-shell main { width:100%; max-width:1440px; height:100svh; padding:8px; margin:auto; display:block; }
.game-shell .hud { display:none; }
.game-shell #message:empty { display:none; }
.game-shell #message:not(:empty),.game-shell #ui-busy:not([hidden]) { position:fixed; top:0; left:0; right:0; margin:0; z-index:30; }
.game-shell #game.game-page { width:100%; height:100%; margin:0; display:grid; grid-template-columns:minmax(0,1fr) 190px; grid-template-rows:38px minmax(0,1fr); gap:10px; align-items:stretch; padding:12px; background:#e2dbcb; border:1px solid #c1b6a3; border-radius:6px; overflow:hidden; }
.game-shell #game.game-page[data-page='home'] { grid-template-columns:112px minmax(0,1fr) 210px; grid-template-rows:minmax(0,1fr); }
.game-shell #game.scene-frame { height:100%; }
.game-shell .game-page > [data-return-home] { grid-column:1; justify-self:start; margin:0; }
.game-shell #tab-content.game-content { grid-column:1; grid-row:2; min-width:0; min-height:0; margin:0; padding:10px; overflow:auto; background:rgba(255,251,242,.8); border-radius:5px; position:relative; isolation:isolate; }
.game-shell #game[data-page='home'] #tab-content { grid-column:2; grid-row:1; }
.game-shell #tabs.home-menu { grid-column:1; grid-row:1; position:static; display:flex; flex-direction:column; gap:8px; min-height:0; overflow:auto; }
.home-menu strong,.home-menu small { display:block; }
.game-shell .game-hud { grid-column:2; grid-row:1/-1; min-width:0; min-height:0; overflow:auto; padding:8px; background:rgba(255,251,242,.85); border-radius:5px; }
.game-shell #game[data-page='home'] .game-hud { grid-column:3; }
.game-hud > strong,.game-hud > small { display:block; }
.game-hud button { display:block; width:100%; padding:6px; margin:6px 0; white-space:normal; text-align:left; font-size:13px; }
.game-hud h3 { font-size:15px; margin:8px 0; }
.game-hud p { font-size:13px; margin:5px 0; }
.game-content h2 { font-size:19px; margin:0 0 8px; }
.game-content h3 { font-size:15px; margin:8px 0; }
.game-content button { margin:5px; max-width:100%; white-space:normal; }
.game-content article { padding:8px 0; border-bottom:1px solid var(--line); }
.game-background { position:absolute; inset:0; z-index:-1; background:linear-gradient(140deg,#dbd2bd,#c3c4b0); }
.game-background img { width:100%; height:100%; object-fit:cover; }
.game-shell #tab-content.home-stage { display:flex; flex-direction:column; justify-content:space-between; align-items:center; overflow:hidden; }
.game-portrait { display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(160px,40%); height:180px; min-height:60px; background:rgba(255,251,242,.4); border:1px solid #aaa68c; border-radius:45% 45% 4px 4px; margin:10px; overflow:hidden; }
.game-portrait img { width:100%; height:100%; object-fit:contain; }
.home-stage .game-portrait { flex:1; max-height:70%; }
.palace-map { position:relative; min-height:220px; height:calc(100% - 36px); background:#d3cdbb; overflow:hidden; }
.palace-map > img { width:100%; height:100%; object-fit:contain; }
.map-placeholder { position:absolute; bottom:8px; left:8px; }
.game-content .map-marker { position:absolute; transform:translate(-50%,-50%); margin:0; max-width:30%; padding:7px; font-size:14px; }
.map-marker small { display:block; font-size:11px; }
.character-groups { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.character-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:6px 0; border-bottom:1px solid var(--line); }
.character-row > button:first-child { flex:1; margin:0; text-align:left; }
.character-row > button:last-child { margin:0; }
.game-shell #tab-content.location-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto; gap:6px; overflow:hidden; }
.location-stage > h2,.location-stage > p { grid-column:1/-1; margin:0; }
.location-people { grid-column:1; grid-row:3; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; min-height:0; overflow:hidden; }
.location-people .game-portrait { height:75%; max-width:42%; margin:3px; }
.location-actions { grid-column:2; grid-row:3; min-height:0; overflow:auto; }
.game-action { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.game-action > button:first-child { flex:1; text-align:left; }
.game-action > button { font-size:14px; margin:3px 0; padding:6px; }
.game-action > p,.cost-explanation { width:100%; margin:0; font-size:12px; }
.message-row > button { display:block; text-align:left; }
.scene-navigation-debug { max-height:80px; overflow:auto; font-size:11px; }
@media (orientation:landscape) and (max-height:500px) {
 .game-shell main { padding:4px; }
 .game-shell #game.game-page { padding:8px; gap:6px; grid-template-columns:minmax(0,1fr) 148px; grid-template-rows:32px minmax(0,1fr); font-size:13px; line-height:1.5; }
 .game-shell #game.game-page[data-page='home'] { grid-template-columns:90px minmax(0,1fr) 178px; }
 .game-shell #tabs.home-menu { gap:5px; }
 .game-shell #tabs button { min-height:32px; padding:5px; font-size:13px; }
 .game-content h2 { font-size:17px; }
 .game-content p { margin:5px 0; }
 .game-content button { padding:5px 7px; font-size:13px; }
 .game-portrait { height:120px; }
 .game-hud { font-size:12px; }
 .map-marker small { font-size:10px; }
}
@media (orientation:portrait) and (max-width:700px) {
 .game-shell #game.game-page { grid-template-columns:minmax(0,1fr); grid-template-rows:36px 60px minmax(0,1fr); }
 .game-shell #tab-content.game-content { grid-column:1; grid-row:3; }
 .game-shell .game-hud { grid-column:1; grid-row:2; display:flex; gap:6px; align-items:center; overflow:auto; font-size:11px; }
 .game-hud h3 { display:none; }
 .game-shell #game.game-page[data-page='home'] { grid-template-columns:84px minmax(0,1fr); grid-template-rows:60px minmax(0,1fr); }
 .game-shell #game[data-page='home'] .game-hud { grid-column:1/-1; grid-row:1; }
 .game-shell #game[data-page='home'] #tab-content { grid-column:2; grid-row:2; }
 .game-shell #tabs.home-menu { grid-column:1; grid-row:2; }
 .character-groups { gap:6px; }
}
/* Override the former paged #game grid for the shared strong-scene renderer. */
.game-shell #game.scene-frame { margin:0; display:grid; align-items:stretch; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:10px; }
@media (orientation:portrait) and (max-width:700px) {
 .game-shell #game.scene-frame { grid-template-columns:1fr; grid-template-rows:auto minmax(70px,.6fr) minmax(0,1fr) auto; }
}
/* Image and hotspots share a fitted artboard, including letterboxing at every size. */
.map-stage { display:flex; flex-direction:column; }
.map-stage .palace-map { flex:1; min-height:0; height:auto; display:grid; place-items:center; container-type:size; background:#c5bea9; }
.map-artboard { position:relative; width:min(100cqw,calc(100cqh * 1672 / 941)); aspect-ratio:1672/941; }
.map-artboard > img { width:100%; height:100%; display:block; }
.game-content .map-artboard .map-marker { max-width:18%; padding:4px 2px; min-height:32px; font-size:12px; background:rgba(255,251,236,.92); border-color:#827255; box-shadow:0 1px 3px #53442650; }
.map-artboard .map-marker small { font-size:9px; }
.imperial-menu { position:absolute; z-index:10; inset:12% 15% auto; padding:12px; border:1px solid #8c7e64; background:#fff8e8; box-shadow:0 6px 30px #34271380; max-height:80%; overflow:auto; }
.imperial-menu button { display:block; width:calc(100% - 10px); }
.imperial-menu p { font-size:12px; margin:0 5px 8px; }
.location-stage > h2,.location-stage > p { background:rgba(255,250,239,.85); padding:3px 8px; border-radius:3px; justify-self:start; }
.location-stage .location-actions { background:rgba(255,250,239,.88); padding:8px; border-radius:4px; }
.home-stage > h2 { background:rgba(255,250,239,.85); padding:4px 10px; border-radius:4px; }
.home-stage .game-portrait { align-self:flex-start; width:28%; max-height:65%; }
.location-debug { position:absolute; left:8px; bottom:5px; z-index:15; max-height:40%; max-width:80%; overflow:auto; background:#fff8e8; font-size:11px; }
.game-shell .scene-heading { justify-self:start; background:rgba(255,250,239,.86); padding:3px 8px; border-radius:3px; }
@media (orientation:landscape) and (max-height:500px) { .game-content .map-artboard .map-marker { font-size:11px; min-height:32px; } }

.game-portrait > strong,.game-portrait > small { background:rgba(255,250,239,.9); padding:2px 5px; color:#34362f; }