/* A stable page and rectangular board, before, during and after a round. */
body.souls-body,body.cerberus-page{background:#0d171d;color:#ede4d0;overflow:auto}
.souls-body .server-stage,.cerberus-page .server-stage{display:block;width:min(1200px,100%);max-width:1200px;margin:auto;padding:20px;box-sizing:border-box}
.souls-page,.souls-playing .souls-page{position:relative;inset:auto;z-index:auto;display:block;width:100%;max-width:1100px;margin:auto;padding:0 0 86px;background:transparent}
.souls-playing .souls-page h1,.souls-playing .souls-intro,.souls-playing .souls-rules{display:block}
.souls-stage,.souls-playing .souls-stage{width:100%;max-width:none;min-height:0;height:auto;max-height:none;aspect-ratio:2/1;flex:none;margin:0;border-radius:16px;box-shadow:0 20px 50px #0005}
.souls-stage canvas,.souls-playing .souls-stage canvas{width:100%;height:100%;object-fit:contain}
.souls-controls,.souls-playing .souls-controls{width:100%;max-width:none;display:flex;margin:10px 0;gap:8px}
.souls-controls [data-control="8"]{flex:1}.souls-controls [data-jump]{flex:1}
.souls-page>header{align-items:center}.souls-page h1{margin-top:16px}.souls-feedback{margin:8px 0}.souls-page .souls-hud{padding:10px 6px}.souls-controls button{padding:9px 14px}
.cerberus-shell,.cerberus-shell.cerberus-playing{position:relative;inset:auto;z-index:auto;display:block;width:100%;max-width:1100px;height:auto;margin:auto;padding:0 0 86px;background:transparent;overflow:visible}
.cerberus-playing .cerberus-heading,.cerberus-playing .cerberus-guide{display:block}
.cerberus-layout,.cerberus-playing .cerberus-layout{display:grid;grid-template-columns:minmax(0,480px) minmax(230px,1fr);gap:24px;width:100%;height:auto;max-width:none}
.cerberus-arena,.cerberus-playing .cerberus-arena{height:auto;width:100%;max-width:480px;box-sizing:border-box}
.cerberus-playing #cerberus-canvas{width:100%;height:auto;aspect-ratio:400/540}
.cerberus-playing .cerberus-hud{position:static;width:auto;height:54px;display:flex;flex-direction:row;gap:8px;padding:5px 10px}.cerberus-playing .cerberus-hud b{display:inline;margin-left:5px}
.cerberus-playing .cerberus-keys{position:static;width:auto;height:44px;grid-template-columns:repeat(4,1fr)}.cerberus-playing .cerberus-overlay{inset:54px 0 44px}
.cerberus-heading .display-fullscreen{float:right;margin:0 0 6px 12px}
@media(max-width:600px){
 .souls-body .server-stage,.cerberus-page .server-stage{padding:10px}.souls-page h1{font-size:27px}.souls-intro{font-size:14px}.souls-stage,.souls-playing .souls-stage{aspect-ratio:1.5;min-height:245px;max-height:none}
 .souls-overlay{padding:12px}.souls-overlay p{font-size:12px;line-height:1.4}.souls-overlay h2{font-size:20px;margin:5px 0}.souls-eyebrow{display:none}.souls-overlay button{min-height:40px;padding:8px 12px}.souls-overlay .souls-secondary{margin-top:5px}
 .souls-controls,.souls-playing .souls-controls{gap:5px}.souls-controls button{padding:8px;min-width:44px;font-size:13px}.souls-direction{gap:4px}.souls-controls small{display:none}.souls-hud b{font-size:18px}
 .cerberus-layout,.cerberus-playing .cerberus-layout{grid-template-columns:minmax(0,1fr);gap:14px}.cerberus-arena,.cerberus-playing .cerberus-arena{max-width:430px;margin:auto}.cerberus-guide{padding:16px}
}
@media(max-height:600px) and (orientation:landscape){
 .souls-body .server-stage{padding:8px 12px}.souls-page,.souls-playing .souls-page{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:6px 12px;padding-bottom:72px}
 .souls-page>header{grid-column:1/-1;display:flex!important}.souls-page>h1,.souls-playing .souls-page h1,.souls-page>.souls-intro{display:none}.souls-page>.souls-hud{grid-column:1/-1;padding:2px 5px}
 .souls-stage,.souls-playing .souls-stage{grid-column:1;height:calc(100dvh - 98px);min-height:235px;aspect-ratio:auto;max-width:none}
 .souls-controls,.souls-playing .souls-controls{grid-column:2;display:flex;flex-wrap:wrap;align-content:center;gap:7px;margin:0}.souls-direction{width:100%;justify-content:space-between}.souls-controls button{min-height:46px}.souls-controls [data-control="4"],.souls-controls [data-control="8"],.souls-controls [data-pause]{width:100%;flex:auto}.souls-feedback,.souls-rules,.game-orientation-hint{grid-column:1/-1}
 .souls-playing .souls-feedback{display:block}.souls-overlay p{font-size:12px;line-height:1.3}.souls-overlay h2{font-size:20px}.souls-overlay button{min-height:38px;padding:6px 12px}.souls-eyebrow{display:none}
 .cerberus-layout,.cerberus-playing .cerberus-layout{grid-template-columns:minmax(0,280px) minmax(220px,1fr)}
}
/* Landscape gives the navigation map and siege trajectory more room. */
@media(max-height:600px) and (orientation:landscape){
 .greek-game-ulysse .greek-play-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 240px!important;gap:12px!important}.greek-game-ulysse .greek-controls{padding:10px}.greek-game-ulysse #greek-actions{display:block}.greek-game-ulysse #greek-actions[hidden]{display:none}.greek-game-ulysse .voyage-seascape{width:100%;min-height:240px}
 .catapult-body .catapult-game:not(:has(.catapult-briefing:not([hidden]))){display:grid;grid-template-columns:minmax(0,1fr) 215px;align-items:start;gap:10px}
 .catapult-body .catapult-game .catapult-canvas-wrap{width:100%;max-height:none;aspect-ratio:auto}
 .catapult-body .catapult-game canvas{max-height:none;width:100%}
 .catapult-body .catapult-controls{display:flex;flex-direction:column;gap:7px;padding:8px}.catapult-body .catapult-controls fieldset{margin:0;padding:4px}.catapult-body .catapult-controls .tuning-control{padding:4px}.catapult-body .projectile-rack label{padding:3px}.catapult-body .catapult-view-controls small{display:none}
 .trojan-body .trojan-stage{max-width:850px;margin:auto}
}
@media(orientation:portrait) and (max-width:600px){.greek-game-verger .greek-scorebar{flex-wrap:wrap;gap:6px}.trojan-body .trojan-heading{flex-wrap:wrap}.trojan-body .display-fullscreen{margin-left:auto}}

.cerberus-heading{position:relative}.cerberus-heading .display-fullscreen{position:absolute;right:0;top:0;margin:0;float:none}.cerberus-heading>span{margin-right:56px}
@media(max-height:600px) and (orientation:landscape){
 .catapult-body .projectile-rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.catapult-body .projectile-rack label{min-width:0;grid-template-columns:1fr;gap:2px}.catapult-body .projectile-rack .stone{width:28px;height:26px}.catapult-body .projectile-rack label span{font-size:10px}.catapult-body .projectile-name{font-size:10px}
 .catapult-body .catapult-arena-hud{padding:5px 8px;gap:3px}.catapult-body .catapult-arena-hud>div:first-child{padding:3px}.catapult-body .catapult-arena-hud .catapult-rules{font-size:9px;line-height:1.25;margin:0}.catapult-body .catapult-arena-hud .catapult-rules br{display:none}
}

@media(max-height:600px) and (orientation:landscape){
 .greek-game-ulysse .greek-play-layout{grid-template-columns:minmax(0,1fr) 310px!important;align-items:start!important}
 .greek-game-ulysse .greek-board-wrap{min-height:0!important;align-content:start!important;padding:8px}
 .greek-game-ulysse .voyage-seascape{min-height:0!important;height:calc(100dvh - 82px)!important;max-height:400px!important;aspect-ratio:auto!important}
 .greek-game-ulysse .greek-controls{padding:8px}.greek-game-ulysse .greek-controls>p{display:none}.greek-game-ulysse .greek-tutorial{margin:0 0 5px}.greek-game-ulysse .greek-tutorial summary{padding:6px;font-size:12px}
 .greek-game-ulysse #greek-actions{display:grid;grid-template-columns:140px minmax(0,1fr);gap:5px;max-width:none}
 .greek-game-ulysse #greek-actions[hidden]{display:none}
 .greek-game-ulysse #voyage-supplies{grid-column:1/-1;grid-row:1;margin:0;padding:5px;font-size:11px}
 .greek-game-ulysse .voyage-wind-status{grid-column:1/-1;grid-row:2;padding:5px;min-height:0;font-size:11px;line-height:1.3}
 .greek-game-ulysse #greek-actions fieldset{grid-column:1;grid-row:3/6;margin:0;padding:0}
 .greek-game-ulysse #greek-actions>label{grid-column:2;grid-row:3;font-size:11px;margin:0}
 .greek-game-ulysse #greek-actions select{min-height:44px;padding:5px;font-size:13px}
 .greek-game-ulysse #voyage-row{grid-column:2;grid-row:4;margin:0;min-height:44px;padding:5px;font-size:11px}
 .greek-game-ulysse #voyage-advance{grid-column:2;grid-row:5;min-height:44px;padding:5px;font-size:11px}
 .greek-game-ulysse #greek-abandon{grid-column:1/-1;grid-row:6;min-height:44px;padding:5px;font-size:12px}
 .greek-game-ulysse #voyage-motion{min-height:32px;padding:4px}.greek-game-ulysse .voyage-legend{padding:4px;font-size:9px}
}