/* Castle Trouble layout: the one place that decides where everything sits. Loaded after every other stylesheet.
   The whole siege fits one screen (no page scroll) in three arrangements:
     side   : castle left, command panel right, the Castle Bells strip under the castle (desktop, tablet landscape);
     stacked: castle on top, bells strip, then the scrolling command panel (phone and tablet portrait);
     compact: the side arrangement with a one-row header and the bells over the castle sky (phone landscape).
   Every control a player presses is at least 44 px tall, except in the compact arrangement (a window at most 520 px tall and
   wider than tall), where the six room tabs are 34 px and the bell chip is 32 px (tests/castle-trouble-layout.test.mjs measures this). */
:root {
  --panel-w: clamp(300px, 27vw, 380px);
  --demo-bar-space: 0px;
}
html, body { height: 100%; overflow: hidden; }
body { overscroll-behavior: none; }
/* The free demo's bar gets its own strip under the game instead of sitting on the castle (the bar is injected by the site shell). */
body:has(.sbg-demo-bar[data-game="castle-trouble"]) { --demo-bar-space: 72px; }
@media (max-width: 580px) { body:has(.sbg-demo-bar[data-game="castle-trouble"]) { --demo-bar-space: 52px; } }

/* ------------------------------------------------------------------------------------------------ shell and header */
.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: calc(100vh - var(--demo-bar-space));
  height: calc(100dvh - var(--demo-bar-space));
  min-height: 0;
  overflow: hidden;
  container: shell / size;
}
.game-shell .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 420px) minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-height: 50px;
  padding: .25rem clamp(.6rem, 1.6vw, 1.25rem);
}
.game-shell .campaign-summaries { display: contents; }
.game-shell .save-status {
  position: fixed; z-index: 300; left: 50%; bottom: 10px; transform: translateX(-50%);
  max-width: min(46ch, calc(100vw - 24px)); padding: .5rem .8rem; color: #ffe9bd; background: #3c2a34; border: 2px solid #f2c65a; border-radius: 10px;
  font-size: .8rem; text-align: center;
}
.game-shell .back-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; white-space: nowrap; }
.game-shell .siege-clock { grid-column: 2; }
.game-shell .siege-clock > span { font-size: 1.35rem; }
.game-shell .progress-track { margin-top: .25rem; }
.game-shell .top-actions { grid-column: 3; justify-self: end; gap: .4rem; }
.game-shell .top-actions button { min-height: 44px; min-width: 44px; padding: 0 .95rem; font-size: .9rem; white-space: nowrap; }

.game-shell .resource-bar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.game-shell .resource-bar > div { min-height: 40px; padding: .2rem .5rem; }
.game-shell .resource-bar strong { font-size: 1rem; }
.game-shell .forecast-bar { min-height: 52px; padding-top: .15rem; padding-bottom: .15rem; }

/* ------------------------------------------------------------------------------------------------ play area, side arrangement */
.game-shell .play-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage panel" "bells panel";
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.game-shell .castle-stage { grid-area: stage; position: relative; height: auto; min-height: 0; align-self: stretch; }
.game-shell .alert-panel { grid-area: bells; z-index: 4; }
.game-shell .command-panel { grid-area: panel; }
.game-shell .briefing { grid-area: 1 / 1 / -1 / 2; }

/* Castle Bells: one fixed-height strip, so the castle never resizes when a bell rings. */
.game-shell .alert-panel {
  display: flex; align-items: center; gap: .6rem;
  height: 64px; margin: 0; padding: .35rem .6rem;
  border-width: 0; border-top: 3px solid #3a2935; border-radius: 0; box-shadow: none;
}
.game-shell .alert-panel .panel-label { flex: 0 0 auto; width: 4.2rem; margin: 0; line-height: 1.15; }
.game-shell .alerts { display: flex; flex: 1 1 auto; min-width: 0; gap: .4rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.game-shell .alerts:empty::before { content: "All quiet. No bell is ringing."; align-self: center; color: #6d555d; font-size: .8rem; font-weight: 800; }
.game-shell .alert { flex: 0 0 auto; width: clamp(220px, 28%, 330px); min-height: 48px; padding: .3rem .5rem; align-items: center; }
.game-shell .alert > span { grid-row: auto; align-self: center; grid-column: 1; }
.game-shell .alert strong, .game-shell .alert small { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-shell .alert small { font-size: max(.75rem, 12px) !important; }

/* Command panel: staff first, then the selected room and its jobs. */
.game-shell .command-panel {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0; padding: 10px 10px 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.game-shell .panel-card { margin: 0; padding: .6rem .65rem; flex: 0 0 auto; }
.game-shell .staff-panel { order: -1; }
.game-shell .staff-panel .panel-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.game-shell .staff-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.game-shell .staff-card {
  position: relative; grid-template-columns: 38px minmax(0, 1fr); gap: .4rem; min-height: 56px; padding: .25rem .4rem;
}
.game-shell .staff-card .staff-key {
  position: absolute; right: 5px; top: 3px; width: auto; height: auto; padding: 0; color: #8a7280; background: transparent; font-size: 12px; border-radius: 0;
}
.game-shell .staff-card img.staff-portrait { width: 38px; height: 38px; }
.game-shell .staff-card > span:last-child { min-width: 0; }
.game-shell .staff-card strong { font-size: .9rem; }
.game-shell .staff-card small { display: none; }
.game-shell .staff-card em { line-height: 1.2; }
.game-shell .staff-card.selected { box-shadow: inset 4px 0 #963f3f; }

.game-shell .room-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.game-shell .room-card > .panel-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.game-shell .room-navigator {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 .4rem; padding: 4px; overflow: visible;
}
.game-shell .room-navigator button { min-width: 0; min-height: 44px; grid-template-columns: 22px minmax(0, 1fr); padding: .2rem .35rem; }
.game-shell .room-navigator button strong { font-size: max(.75rem, 12px); white-space: nowrap; }
.game-shell .room-card h2 { font-size: 1.3rem; }
.game-shell .room-card #room-purpose { margin: .3rem 0 .5rem; font-size: .8rem; line-height: 1.35; }
.game-shell .coach-strip { margin: 0 0 .5rem !important; padding: .4rem .5rem; }
.game-shell .action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.game-shell .job-button {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: .4rem; row-gap: 0;
  min-height: 48px; padding: .3rem .5rem;
}
.game-shell .job-button .ct-icon { grid-row: 1 / span 2; }
.game-shell .job-button strong { grid-column: 2; font-size: .85rem; line-height: 1.15; }
.game-shell .job-button span { grid-column: 2; font-size: max(.75rem, 12px) !important; line-height: 1.15; }
.game-shell .empty-action { grid-column: 1 / -1; }
.game-shell .station-button { margin-top: .5rem; min-height: 46px; }
.game-shell .soup-button { margin-top: .4rem; min-height: 48px; }
.game-shell .station-button strong, .game-shell .soup-button strong { font-size: .85rem; line-height: 1.15; }

/* ------------------------------------------------------------------------------------------------ the briefing card */
.game-shell .briefing {
  position: relative; left: auto; top: auto; z-index: 100;
  align-self: center; justify-self: center;
  display: flex; flex-direction: column;
  width: min(600px, calc(100% - 24px)); max-height: calc(100% - 16px); padding: 0; overflow-y: auto; overscroll-behavior: contain;
  transform: none;
}
.game-shell .briefing[hidden] { display: none; }
.game-shell .briefing::before { inset: 7px; }
.game-shell .briefing > * { flex: 0 0 auto; margin-left: clamp(.9rem, 3vw, 1.7rem); margin-right: clamp(.9rem, 3vw, 1.7rem); }
.game-shell .briefing > .kicker { order: 1; margin-top: clamp(.9rem, 3vw, 1.5rem); }
.game-shell .briefing > h1 { order: 2; margin-bottom: .5rem; font-size: clamp(1.5rem, 3vw, 2.3rem); }
.game-shell .briefing > #briefing-copy { order: 3; margin-top: 0; margin-bottom: .6rem; line-height: 1.45; }
.game-shell .briefing > .briefing-rules { order: 4; }
.game-shell .briefing > .tier-picker { order: 5; }
.game-shell .briefing > ul { order: 6; margin-top: .2rem; margin-bottom: .6rem; }
.game-shell .briefing > .briefing-actions {
  order: 7; position: sticky; bottom: 0; z-index: 3; margin: 0; padding: .6rem clamp(.9rem, 3vw, 1.7rem) .7rem;
  background: linear-gradient(to bottom, rgba(255, 245, 216, 0), #fff5d8 22%);
}
.game-shell .briefing > .briefing-actions { display: flex; gap: .5rem; }
.game-shell .briefing .briefing-actions .primary-button { flex: 1 1 auto; width: 100%; min-height: 52px; font-size: 1.05rem; }
/* "Pick a siege" scrolls the card to the siege board. It is only offered where the board is out of sight below the rules (roomy windows);
   phones and short windows already show the top of the board under Start. */
.game-shell .briefing .briefing-actions .board-jump { display: none; flex: 0 0 auto; width: auto; min-width: 9.5rem; padding-left: .8rem; padding-right: .8rem; font-size: .95rem; white-space: nowrap; }
@media (min-width: 700px) and (min-height: 521px) {
  .game-shell .briefing .briefing-actions .board-jump { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
  /* On these windows Start is the last thing in the card (order 13), so the sticky bar stays pinned to the bottom edge however far the
     card is scrolled to the siege board; at order 7 it would scroll away with the rules once the board is in view. */
  .game-shell .briefing > .briefing-actions { order: 13; }
}
.game-shell .briefing > .campaign-board { order: 8; margin-top: .4rem; }
.game-shell .briefing > .shell-row { order: 9; }
.game-shell .briefing > .workshop-panel { order: 10; }
.game-shell .briefing > .specialisation-panel { order: 11; }
.game-shell .briefing > .resident-panel { order: 12; margin-bottom: clamp(.9rem, 3vw, 1.5rem); }
.game-shell .campaign-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-shell .campaign-node { min-height: 56px; grid-template-columns: 28px minmax(0, 1fr); }
.game-shell .campaign-node > span:first-child { grid-row: 1 / 3; }
.game-shell .campaign-node .medal-pips { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: center; gap: 3px; margin-top: .1rem; width: auto; height: auto; background: none; border-radius: 0; }
.game-shell .campaign-node .medal-pips .pip { width: 18px; height: 18px; }
.game-shell .campaign-node strong, .game-shell .campaign-node small { font-size: max(.75rem, 12px) !important; }
.game-shell .campaign-node:disabled .medal-pips { display: none; }

/* Results and dialogs scroll inside the window instead of past it; the way on stays on screen. */
.result-overlay { display: flex; flex-direction: column; align-items: center; overflow-y: auto; overscroll-behavior: contain; padding: 3.6rem 1rem 1rem; }
.result-overlay[hidden] { display: none; }
.result-overlay > .sbg-demo-actions { margin: 1rem 0 0; }
.result-card { margin: auto; max-height: none; width: min(620px, 100%); flex: 0 0 auto; display: flex; flex-direction: column; }
/* The way on sits straight under the medal line and ahead of the carry-over residents, so on a tall window it never lies over their names
   and states; on a short window it stays pinned to the bottom while the residents scroll underneath it. */
.result-card > .result-actions { order: 1; }
.result-card > .resident-result { order: 2; }
.result-card .result-actions {
  position: sticky; bottom: 0; z-index: 3; margin: .8rem -2rem .2rem; padding: .6rem 2rem .8rem;
  background: linear-gradient(to bottom, rgba(255, 245, 216, 0), #fff5d8 24%);
}
.result-card .result-actions .primary-button { min-height: 48px; }
.result-card .result-actions a { display: inline-flex; align-items: center; min-height: 44px; }
/* The Assists dialog fits the window: its height is capped to the viewport, the form scrolls (scrollbar always drawn in the game's
   colours), the header with its close button stays at the top and "Apply and restart siege" stays at the bottom. Wide windows lay
   the six assists out in two columns and short ones tighten the spacing, so at 1280x720 and up nothing needs scrolling. */
.settings-dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 1.5rem); overflow: hidden; }
.settings-dialog form {
  flex: 1 1 auto; min-height: 0; max-height: calc(100dvh - 1.5rem - 10px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: auto; scrollbar-color: #8e3e45 #ecdcb4;
}
.settings-dialog form { padding-top: 0; }
.settings-dialog header { position: sticky; top: 0; z-index: 2; margin: 0 -1.2rem .7rem; padding: 1.2rem 1.2rem .6rem; background: var(--panel-2); }
.settings-dialog header button { flex: 0 0 auto; width: 44px; height: 44px; }
.settings-dialog .primary-button {
  position: sticky; bottom: 0; z-index: 2; min-height: 48px; width: calc(100% + 2.4rem); max-width: none; margin: .7rem -1.2rem -1.2rem; padding: .9rem 1.2rem;
  border-radius: 0 0 12px 12px; border-width: 3px 0 0; box-shadow: none;
}
@media (min-width: 700px) {
  .settings-dialog { width: min(780px, calc(100% - 2rem)); }
  .settings-dialog form { display: grid; grid-template-columns: 1fr 1fr; column-gap: .7rem; align-content: start; }
  .settings-dialog form > :is(header, fieldset, .primary-button) { grid-column: 1 / -1; }
  .settings-dialog form > label { margin: .3rem 0; }
}
@media (max-height: 800px) {
  .settings-dialog header { margin-bottom: .3rem; padding: .8rem 1.2rem .5rem; }
  .settings-dialog h2 { font-size: 1.6rem; }
  .settings-dialog form > label { margin: .2rem 0; padding: .4rem .6rem; }
  .settings-dialog small { margin-top: 0; line-height: 1.2; }
  .audio-settings { margin-top: .4rem; padding: .3rem .6rem; }
  .settings-dialog .slider-row { margin: .1rem 0; padding: .1rem .2rem; }
  .settings-dialog .primary-button { margin-top: .4rem; }
}
@media (max-height: 520px) { .result-overlay { padding-top: 3rem; } .result-card { padding: 1.2rem 1.4rem; } .result-card .result-actions { margin: .6rem -1.4rem .2rem; padding: .5rem 1.4rem .7rem; } }

/* ------------------------------------------------------------------------------------------------ small screens and short windows (stacked, compact, or less than 720 px of game) */
@container shell (max-aspect-ratio: 11/10) or (max-height: 719px) {
  .game-shell .staff-panel { display: block; }
  .game-shell .staff-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .game-shell .staff-card { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 0; min-height: 62px; padding: .2rem .15rem; text-align: center; }
  .game-shell .staff-card .staff-key { right: 4px; top: 1px; }
  .game-shell .staff-card img.staff-portrait { width: 32px; height: 32px; }
  .game-shell .staff-card strong { font-size: .8rem; }
  .game-shell .staff-card em { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
  .game-shell .staff-card.selected { box-shadow: inset 0 -4px #963f3f; }
  .game-shell .room-card { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  .game-shell .room-card > * { grid-column: 1 / -1; }
  .game-shell .room-card > .station-button { grid-column: 1; }
  .game-shell .room-card > .soup-button { grid-column: 2; }
  .game-shell .room-card #room-purpose, .game-shell .coach-strip { display: none; }
  .game-shell .empty-action { padding: .3rem .45rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .game-shell .station-button, .game-shell .soup-button { min-height: 48px; padding: .25rem .45rem; gap: .3rem; }
  .game-shell .station-button .ct-icon, .game-shell .soup-button .ct-icon { display: none; }
  .game-shell .station-button strong, .game-shell .soup-button strong { font-size: .8rem; }
  .game-shell .station-button span, .game-shell .soup-button span { display: none; }
}

/* ------------------------------------------------------------------------------------------------ stacked: portrait phones and tablets */
@media (max-aspect-ratio: 11/10) {
  .game-shell .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; min-height: 52px; }
  .game-shell .siege-clock { grid-column: 2; grid-row: 1; }
  .game-shell .top-actions { grid-column: 3; grid-row: 1; gap: .3rem; }
  .game-shell .top-actions button { padding: 0 .6rem; font-size: .8rem; }
  .game-shell .back-text { display: none; }
  .game-shell .back-link { justify-content: center; min-width: 44px; font-size: 1.3rem; }
  .game-shell .resource-bar > div { min-height: 44px; padding: .15rem .1rem; flex-direction: column; gap: 0; justify-content: center; }
  .game-shell .resource-bar span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .game-shell .resource-bar > div { position: relative; }
  .game-shell .resource-bar strong { font-size: .85rem; }
  .game-shell .resource-bar .ct-icon { --size: 20px; }
  .game-shell .play-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "stage" "bells" "panel";
  }
  .game-shell .castle-stage { aspect-ratio: 16 / 9; height: auto; width: 100%; }
  .game-shell .alert-panel { height: 56px; padding: .25rem .5rem; border-top-width: 2px; }
  .game-shell .alert-panel .panel-label { width: 3.6rem; }
  .game-shell .alert { width: clamp(170px, 62%, 260px); }
  .game-shell .command-panel { border-left: 0; border-top: 3px solid #523e54; padding: 8px 8px 12px; gap: 8px; }
  .game-shell .room-navigator { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .game-shell .room-navigator button { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: .15rem 0; }
  .game-shell .room-navigator button > span { display: none; }
  .game-shell .room-navigator button strong { font-size: max(.75rem, 12px); }
  .game-shell .briefing { max-height: calc(100% - 10px); width: calc(100% - 12px); }
  .game-shell .briefing > ul { display: none; }
  .game-shell .tier-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-shell .tier-button small { display: block; }
  /* The board is one row you swipe along: the siege to start and the button come first. */
  .game-shell .campaign-board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 118px; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity; }
  .game-shell .campaign-node { scroll-snap-align: start; grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .game-shell .campaign-node > span:first-child { display: grid; grid-row: auto; }
  .game-shell .input-mode-chip { display: none; }
}

/* ------------------------------------------------------------------------------------------------ compact: phone landscape */
@media (max-height: 520px) and (min-aspect-ratio: 11/10) {
  :root { --panel-w: clamp(250px, 36vw, 330px); }
  /* The demo bar sits under the castle (the panel on the right keeps its full height), so the castle gives up a strip, not the whole shell. */
  body:has(.sbg-demo-bar[data-game="castle-trouble"]) { --demo-bar-space: 0px; }
  body:has(.sbg-demo-bar[data-game="castle-trouble"]) .game-shell .castle-stage,
  body:has(.sbg-demo-bar[data-game="castle-trouble"]) .game-shell .briefing { margin-bottom: 38px; }
  body:has(.sbg-demo-bar[data-game="castle-trouble"]) .game-shell .briefing { max-height: calc(100% - 46px); }
  body:has(.sbg-demo-bar[data-game="castle-trouble"]) .sbg-demo-bar { padding: 4px 8px; gap: 8px; bottom: 4px; left: 4px; font-size: 11px; }
  body:has(.sbg-demo-bar[data-game="castle-trouble"]) .sbg-demo-bar a { padding: 5px 9px; }
  .game-shell {
    grid-template-columns: 44px 84px minmax(0, 1fr) auto;
    grid-template-rows: 44px 40px minmax(0, 1fr);
    background: #201a24;
  }
  .game-shell .topbar { display: contents; }
  .game-shell .back-link { grid-column: 1; grid-row: 1; min-width: 44px; justify-content: center; font-size: 1.3rem; background: #201a24; }
  .game-shell .back-text { display: none; }
  .game-shell .siege-clock { grid-column: 2; grid-row: 1; align-self: center; background: #201a24; padding: 0 .3rem; }
  .game-shell .siege-clock > span { font-size: 1.15rem; }
  .game-shell .progress-track { height: 6px; margin-top: .15rem; }
  .game-shell .top-actions { grid-column: 4; grid-row: 1; align-self: stretch; align-items: center; padding: 0 .4rem; gap: .3rem; background: #201a24; }
  .game-shell .top-actions button { padding: 0 .55rem; font-size: .78rem; }
  .game-shell .resource-bar { grid-column: 3; grid-row: 1; border-bottom: 0; }
  .game-shell .resource-bar > div { min-height: 44px; padding: 0 .1rem; flex-direction: row; gap: .25rem; justify-content: center; }
  .game-shell .resource-bar span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .game-shell .resource-bar > div { position: relative; }
  .game-shell .resource-bar strong { font-size: .8rem; }
  .game-shell .resource-bar .ct-icon { --size: 18px; }
  .game-shell .forecast-bar { grid-column: 1 / -1; grid-row: 2; min-height: 40px; }
  .game-shell .play-layout { grid-column: 1 / -1; grid-row: 3; grid-template-areas: "stage panel"; grid-template-rows: minmax(0, 1fr); }
  .game-shell .alert-panel {
    grid-area: stage; align-self: end; justify-self: end; z-index: 6; width: min(230px, 42%); height: auto; padding: 3px; gap: 0;
    background: transparent; border: 0; pointer-events: none;
  }
  /* The bell chip rests on the plain foundation stone at the bottom right of the castle, where it covers no room name or bar. */
  body:has(.sbg-demo-bar[data-game="castle-trouble"]) .game-shell .alert-panel { margin-bottom: 38px; }
  .game-shell .alert-panel .panel-label, .game-shell .alerts:empty::before { display: none; }
  .game-shell .alerts { flex-direction: column; overflow: visible; gap: 3px; }
  .game-shell .alert { width: 100%; min-height: 32px; max-height: 32px; padding: 0 .4rem; pointer-events: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
  .game-shell .alert:nth-child(n + 2) { display: none; }
  .game-shell .alert small { display: none; }
  .game-shell .bell-banner, .game-shell .input-mode-chip { display: none; }
  .game-shell .command-panel { padding: 5px 6px 6px; gap: 5px; border-left-width: 2px; }
  .game-shell .panel-card { padding: .3rem .4rem; border-width: 2px; box-shadow: 0 3px 0 #151117; }
  .game-shell .staff-card { min-height: 54px; }
  .game-shell .staff-card em { line-height: 1.1; }
  .game-shell .station-button, .game-shell .soup-button { min-height: 44px; }
  .game-shell .job-button { min-height: 44px; padding-top: .15rem; padding-bottom: .15rem; }
  .game-shell .room-navigator { margin-bottom: .25rem; padding: 2px; gap: 2px; border-width: 1px; }
  .game-shell .room-navigator button { min-height: 34px; padding-top: 0; padding-bottom: 0; }
  .game-shell .room-card h2 { display: none; }
  .game-shell .action-list { gap: 4px; }
  .game-shell .station-button, .game-shell .soup-button { margin-top: .3rem; }
  .game-shell .briefing > ul { display: none; }
  .game-shell .briefing { max-height: calc(100% - 8px); width: min(560px, calc(100% - 16px)); }
  .game-shell .briefing > h1 { font-size: 1.35rem; }
  .game-shell .campaign-board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto; padding-bottom: .3rem; }
  .game-shell .tier-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game-shell .tier-button small { display: none; }
}

/* A wide screen with a tall window (tablet landscape, laptops with big toolbars): keep the panel from getting lost. */
@media (min-width: 981px) and (max-height: 800px) {
  .game-shell .coach-strip { display: none; }
  .game-shell .room-card #room-purpose { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Big screens: everything scales with the window so the labels stay about as large as the castle's own. */
@media (min-width: 1600px) and (min-height: 880px) {
  html { font-size: clamp(16px, .9vw, 24px); }
  :root { --panel-w: clamp(380px, 25vw, 520px); }
  .game-shell .topbar { min-height: 56px; }
  .game-shell .resource-bar > div { min-height: 46px; }
  .game-shell .alert-panel { height: 4.3rem; }
  .game-shell .alert { min-height: 3.2rem; max-height: calc(4.3rem - 14px); }
}

/* ------------------------------------------------------------------------------------------------ text floor: nothing under 12 px */
.game-shell .shell-copyright,
.workshop-panel :is(p, small, em, strong, span, b, button, label, li),
.specialisation-panel :is(p, small, em, strong, span, b, button, label, li),
.resident-panel :is(p, small, em, strong, span, b, label, li),
.result-card [class*="resident-"] :is(p, small, em, strong, span, b),
.result-card .resident-transition {
  font-size: max(.75rem, 12px) !important;
}
.workshop-panel :is(h2, h3, h4), .specialisation-panel :is(h2, h3, h4), .resident-panel :is(h2, h3, h4), .result-card [class*="resident-"] :is(h3, h4) {
  font-size: max(.9rem, 14px) !important;
}
.workshop-panel button, .specialisation-panel button { min-height: 44px; }

/* The result card's resident row stays readable on a phone: art left, words right. */
@media (max-width: 650px) {
  .result-card .resident-result-card { grid-template-columns: 84px minmax(0, 1fr); }
  .result-card .resident-result-art { width: 84px; height: auto; min-height: 84px; }
  .result-card .resident-result-art img { height: 84px; }
}

/* The key art keeps its logo on a tall window: the picture sits on top and fades into the studio colour. */
@media (max-aspect-ratio: 11/10) {
  .title-art { height: 68%; object-position: 0% 25%; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
}
.title-panel .title-legal .shell-copyright { color: #e6d6b8; }
.result-card > .kicker { padding-right: 84px; }