/* Canonical game stages: landscape PC, portrait phone, proportional fit with letterboxing. */
body { background:#1d2e21; }
.workspace {
 position:absolute; margin:0; max-width:none; min-height:0;
 transform-origin:top left; transform:scale(var(--game-scale,1));
 background:url('assets/camp-v10/landscape.webp') center / cover no-repeat;
 overflow:hidden;
}
body[data-layout=landscape] .workspace {
 width:1440px;height:960px;padding:18px 24px 20px;gap:16px;
 grid-template-columns:minmax(0,1fr) minmax(320px,34%);
 grid-template-rows:76px minmax(0,1fr) 80px;
 grid-template-areas:'header header' 'map heroes' 'tools tools';
}
body[data-layout=landscape] .game-header {gap:14px}
body[data-layout=landscape] .brand {font-size:46px;padding:10px 23px 12px;--skin-edge:20px}
body[data-layout=landscape] .case-title {display:block;font-size:32px;padding:13px 28px;--skin-edge:12px}
body[data-layout=landscape] .round-info {padding:12px 17px;--skin-edge:10px}
body[data-layout=landscape] .round-info .timer {font-size:32px}
body[data-layout=landscape] .header-action {width:58px;height:58px;padding:7px;--skin-edge:10px}
body[data-layout=landscape] .header-action .ui-icon {width:26px;height:26px}
body[data-layout=landscape] .map-panel {padding:7px 12px;min-height:0}
body[data-layout=landscape] .map-shell {width:730px;max-width:100%}
body[data-layout=landscape] .board {border-width:10px}
body[data-layout=landscape] .evidence-panel {padding:20px;gap:10px;--skin-edge:17px}
body[data-layout=landscape] .panel-heading {height:40px;min-height:40px;padding:0 8px}
body[data-layout=landscape] .panel-heading h1 {font-size:39px}
body[data-layout=landscape] .panel-heading>span {font-size:19px;padding:2px 11px}
body[data-layout=landscape] .characters {grid-template-columns:1fr;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px}
body[data-layout=landscape] .character {padding:9px 11px 9px 86px;gap:1px;--skin-edge:13px}
body[data-layout=landscape] .avatar {width:65px;height:65px;left:8px}
body[data-layout=landscape] .identity strong {font-size:26px;line-height:1.2}
body[data-layout=landscape] .clue {font-size:19px;line-height:1.4}
body[data-layout=landscape] .tools {display:flex;flex-direction:row;height:auto;padding:8px 10px 10px;gap:9px;--skin-edge:12px}
body[data-layout=landscape] .tools>button {padding:8px 12px;gap:8px;--skin-edge:12px}
body[data-layout=landscape] .tools #submit {margin-left:auto;min-width:280px}
body[data-layout=landscape] .tools .tool-spacer {display:flex;flex:1;min-height:0}
body[data-layout=landscape] .action-label,body[data-layout=landscape] .tools #erase-tool .action-label {font-size:18px}
body[data-layout=landscape] .tools #submit .action-label {font-size:24px}
body[data-layout=landscape] .tools .ui-icon {width:26px;height:26px}
body[data-layout=landscape] .room-label {font-size:var(--label-size);padding:2px 8px}
body[data-layout=landscape] .notes {font-size:16px}
body[data-layout=landscape] .cross {font-size:58px}
body[data-layout=landscape] .stone-wall.vertical {width:14px;right:-5px}
body[data-layout=landscape] .stone-wall.horizontal {height:14px;bottom:-5px}
body[data-layout=portrait] .workspace {
 width:390px;height:844px;padding:8px;gap:8px;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:44px minmax(0,1fr) 270px 100px;
 grid-template-areas:'header' 'map' 'heroes' 'tools';
}
body[data-layout=portrait] .game-header {gap:5px}
body[data-layout=portrait] .brand {font-size:21px;padding:9px 10px 10px;--skin-edge:10px;min-width:0;flex-shrink:1;white-space:nowrap}
body[data-layout=portrait] .case-title {display:block;font-size:13px;padding:9px 8px;letter-spacing:0;--skin-edge:8px}
body[data-layout=portrait] .round-info {padding:8px 7px;--skin-edge:7px}
body[data-layout=portrait] .round-info .timer {font-size:14px}
body[data-layout=portrait] .header-action {width:30px;height:32px;min-width:27px;padding:6px;--skin-edge:7px}
body[data-layout=portrait] .header-action .ui-icon {width:20px;height:20px}
body[data-layout=portrait] .map-panel {padding:0;min-height:0;justify-content:center}
body[data-layout=portrait] .map-shell {width:374px;max-width:100%}
body[data-layout=portrait] .board {border-width:6px}
body[data-layout=portrait] .evidence-panel {padding:11px;gap:5px;--skin-edge:12px}
body[data-layout=portrait] .panel-heading {height:24px;min-height:24px;padding:0 3px}
body[data-layout=portrait] .panel-heading h1 {font-size:22px}
body[data-layout=portrait] .panel-heading>span {font-size:14px;padding:1px 8px}
body[data-layout=portrait] .characters {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px}
body[data-layout=portrait] .character {padding:5px 6px 5px 46px;gap:2px;--skin-edge:10px}
body[data-layout=portrait] .character-top {display:contents}
body[data-layout=portrait] .avatar {width:38px;height:38px;left:6px}
body[data-layout=portrait] .identity strong {font-size:15px;line-height:1.2}
body[data-layout=portrait] .clue {font-size:12px;line-height:1.35}
body[data-layout=portrait] .tools {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:39px 35px;position:relative;height:auto;padding:7px;gap:5px;--skin-edge:9px}
body[data-layout=portrait] .tools>button {min-width:0;min-height:0;padding:6px 4px;gap:4px;--skin-edge:8px}
body[data-layout=portrait] .tools #submit {grid-column:1/-1;min-width:0;margin:0}
body[data-layout=portrait] .tools .tool-spacer {display:none}
body[data-layout=portrait] .action-label,body[data-layout=portrait] .tools #erase-tool .action-label {font-size:12px}
body[data-layout=portrait] .tools #submit .action-label {font-size:18px}
body[data-layout=portrait] .tools .ui-icon {width:19px;height:19px}
body[data-layout=portrait] .tools #submit .ui-icon {width:23px;height:23px}
body[data-layout=portrait] .room-label {font-size:11px;padding:1px 4px;right:0;bottom:-3px}
body[data-layout=portrait] .notes {font-size:12px}
body[data-layout=portrait] .cross {font-size:35px}
body[data-layout=portrait] .stone-wall.vertical {width:7px;right:-3px}
body[data-layout=portrait] .stone-wall.horizontal {height:7px;bottom:-3px}
body[data-layout] .list-mode .character {padding-left:12px}
body[data-layout] .character {grid-template-rows:max-content max-content;align-content:center}
@media print{.workspace{display:none!important}}