/*
  Craft Beer Empire management view.

  Every frame, border and button below is cut from the approved UI atlases at run
  time (see ui/assets.ts) and published as the --f-* custom properties. This file
  only decides how those frames are sliced and where text sits inside them. Colours
  are sampled from the same art. Nothing here draws a picture.
*/

:root {
  --bg: #1f1b1c;
  --ink: #211d1e;
  --body: #564a47;
  --deep: #3a3336;
  --cream: #f8ebd0;
  --muted: #dccdb0;
  --amber: #dfaf4c;
  --teal: #599f94;
  --orange: #bf703c;
  --green: #a9dd8a;
  --red: #ff9a8d;
  --yellow: #f1c454;
  --head-s: #d5a542;
  --head-m: #4f958a;
  --head-l: #b56632;
  --line: rgba(248, 235, 208, 0.14);
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--cream);
  font: 400 13px/1.45 var(--mono);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body.modal-open { overflow: hidden; }

img, .spr, .panel, .btn, .chip, .seg, .tab, .meter, .bar, .note, .tip, .star, .mood, .badge, .avatar, .marker, .icon {
  image-rendering: pixelated;
}

[hidden] { display: none !important; }

button, input, select { font: inherit; color: inherit; }

a { color: var(--amber); }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

#sbg-back {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 60;
  padding: 4px 9px;
  border-radius: 999px;
  font: 600 11px/1 var(--mono);
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(31, 27, 28, 0.85);
  border: 1px solid rgba(223, 175, 76, 0.5);
  opacity: 0.75;
}
#sbg-back:hover, #sbg-back:focus-visible { opacity: 1; }
#sbg-back b { font-weight: 800; margin-right: 6px; }
/* In the game the link moves into the HUD row, next to the menu. */
#sbg-back.in-hud {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 0;
  border: 2px solid var(--ink);
  background: rgba(33, 29, 30, 0.7);
  color: var(--cream);
  font-size: 12px;
  opacity: 1;
}
#sbg-back.in-hud:hover { color: var(--yellow); }
@media (min-width: 1100px) { #sbg-back.in-hud + .seg-menu { margin-left: 0; } }

.boot { margin: 40vh auto 0; text-align: center; color: var(--muted); font-size: 15px; padding: 0 16px; }
.boot-error { color: var(--red); max-width: 40em; }

/* ------------------------------------------------------------------ frames */

.panel {
  position: relative;
  border: solid transparent;
  border-width: 58px 28px 16px 28px;
  border-image-slice: 58 28 16 28;
  border-image-width: 58px 28px 16px 28px;
  border-image-repeat: repeat;
  /* The frame's own body colour. The ruled texture does not tile cleanly at any
     size, so the border pieces carry it and the middle stays plain under the text. */
  background-color: var(--body);
  background-clip: padding-box;
  color: var(--cream);
}
.panel-s { border-image-source: var(--f-panel-s); --head: var(--head-s); }
.panel-m { border-image-source: var(--f-panel-m); --head: var(--head-m); }
.panel-l { border-image-source: var(--f-panel-l); --head: var(--head-l); }

.panel-head {
  position: absolute;
  top: -47px;
  left: -17px;
  right: -17px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  color: var(--cream);
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 1px 1px var(--ink), -1px -1px var(--ink), 1px -1px var(--ink), -1px 1px var(--ink);
  pointer-events: none;
}
.panel-s .panel-head { color: var(--ink); text-shadow: none; }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head h2, .panel-head h3, .panel-head .panel-kicker, .panel-status { background: var(--head); padding: 0 6px; box-shadow: 0 0 0 2px var(--head); }
.panel-status { font-size: 12px; font-weight: 700; white-space: nowrap; }
.panel-status:empty { display: none; }
.panel-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.panel-body { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 0; }

/* ------------------------------------------------------------------ buttons */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 112px;
  padding: 0 2px;
  margin: 0;
  border: solid transparent;
  border-width: 6px 14px 6px 34px;
  border-image-source: var(--f-btn);
  border-image-slice: 6 14 6 34 fill;
  border-image-width: 6px 14px 6px 34px;
  background: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-image-source: var(--f-btn-hover); color: var(--ink); }
.btn:active { border-image-source: var(--f-btn-down); color: var(--ink); }
.btn:disabled, .btn[aria-disabled='true'] { border-image-source: var(--f-btn-off); color: #5a4f48; cursor: not-allowed; }
.btn-small { min-width: 84px; font-size: 12px; }
.btn-go { min-width: 148px; }
.btn-danger, .btn-urgent { min-width: 112px; }
.btn-link { min-width: 112px; }
.actions, .row-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.actions .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------- HUD */

.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--bg);
}
.hud-row {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 40px;
  padding: 0 12px;
  background: var(--f-top-bar) repeat-x left top / auto 40px;
  background-color: #684a31;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  min-width: 176px;
  padding: 0;
  border: solid transparent;
  border-width: 8px 10px 8px 42px;
  border-image-slice: 8 10 8 42 fill;
  border-image-width: 8px 10px 8px 42px;
  color: var(--ink);
  font-weight: 800;
  line-height: 24px;
  white-space: nowrap;
}
.chip-cash { border-image-source: var(--f-chip-cash); }
.chip-time { border-image-source: var(--f-chip-week); }
.chip-label { font-size: 11px; font-weight: 700; color: #5a4a3a; text-transform: uppercase; letter-spacing: 0.08em; }
.chip-value { font-size: 14px; }
.chip-sub { font-size: 11px; font-weight: 700; color: #5a4a3a; margin-left: auto; }

.rating { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 28px; background: rgba(33, 29, 30, 0.7); border: 2px solid var(--ink); }
.rating-text { font-weight: 800; font-size: 12px; color: var(--cream); }
.rating-row { display: none; }
.stars { display: inline-flex; gap: 1px; }
.star { width: 20px; height: 20px; background: var(--f-star-empty) no-repeat center; display: inline-block; }
.star.full { background-image: var(--f-star-full); }
.star.half { background-image: var(--f-star-half); }

.hud-controls { justify-content: flex-start; }
.speed { display: flex; gap: 2px; }
.seg {
  appearance: none;
  height: 40px;
  min-width: 48px;
  padding: 0 4px;
  margin: 0;
  border: solid transparent;
  border-width: 8px;
  border-image-source: var(--f-tab-off);
  border-image-slice: 8 fill;
  border-image-width: 8px;
  background: none;
  color: var(--cream);
  font-weight: 800;
  font-size: 12px;
  line-height: 24px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.seg:hover { color: var(--yellow); }
.seg.on { border-image-source: var(--f-tab-on); color: var(--ink); }
.seg:disabled { opacity: 0.55; cursor: not-allowed; }
.seg-skip { min-width: 96px; }
.seg-menu { margin-left: auto; min-width: 64px; }

.meter {
  position: relative;
  width: 160px;
  height: 40px;
  border: solid transparent;
  border-width: 0;
  background: var(--f-energy) no-repeat left top;
}
.meter-stress { background-image: var(--f-stress); }
.meter-fill {
  position: absolute;
  left: 43px;
  top: 11px;
  height: 18px;
  width: calc(112px * var(--p, 0));
  background: var(--f-fill-m) repeat-x left center;
}

/* ------------------------------------------------------------------- board */

.game {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 'hud' 'board' 'dock';
}
.hud { grid-area: hud; }
.board { grid-area: board; }
.dock { grid-area: dock; }
.tabs { grid-area: tabs; }

.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px;
  align-items: start;
  padding: 14px 16px 18px;
}
.floor-host { min-width: 0; }
.floor { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: stretch; align-content: flex-start; }
.station { display: flex; flex-direction: column; }
.station > .panel-body { flex: 1; }
.station .actions { margin-top: auto; }

.desk { position: sticky; top: 100px; max-height: calc(100vh - 230px); display: flex; flex-direction: column; }
.desk > .panel-body { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: var(--amber) var(--deep); }

/* ---------------------------------------------------------------- stations */

.station { --stage-w: 128px; width: calc(var(--stage-w) + 56px); }
.station.kettle, .station.qa { --stage-w: 192px; }
.station.packaging { --stage-w: 224px; }
.station.cold { --stage-w: 160px; }

.stage { position: relative; margin: 0 auto; flex: none; }
.stage-tank { width: 128px; height: 224px; }
.stage-kettle { width: 192px; height: 192px; margin-top: 30px; }
.stage-qa { width: 192px; height: 128px; margin-top: 16px; }
.stage-packaging { width: 224px; height: 160px; margin-top: 12px; }
.stage-cold { width: 160px; height: 192px; }
.stage-van { width: 256px; height: 160px; }
.stage-taproom { width: 64px; height: 96px; }

.spr { background-repeat: no-repeat; flex: none; }
.stage > .spr:first-child { position: absolute; left: 0; top: 0; }
.vfx { position: absolute; pointer-events: none; }
.vfx-bubbles { left: 32px; top: 52px; }
.vfx-warning { left: 78px; top: 4px; }
.vfx-foam { left: 0; top: 112px; }
.vfx-steam { left: 48px; top: -52px; }
.vfx-sparks { left: 32px; top: 12px; }
.vfx-smoke { left: 40px; top: -26px; }
.staff { position: absolute; }
.stage-qa .staff { right: -18px; bottom: -4px; }
.staff-driver { right: 0; bottom: 0; }
.stage-taproom .staff { position: static; }

.line { margin: 0; color: var(--cream); overflow-wrap: anywhere; }
.line-beer { font-weight: 800; font-size: 13px; line-height: 1.3; }
.line-small, .row-note, .actor-note { color: var(--muted); font-size: 12px; }
.line-code { color: var(--muted); font-size: 11px; }
.line-lead { font-size: 15px; font-weight: 700; }
.stats { display: flex; gap: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.warn { color: var(--red); }
.good { color: var(--green); }

.bar {
  position: relative;
  height: 26px;
  border: solid transparent;
  border-width: 13px;
  border-image-source: var(--f-prog);
  border-image-slice: 13 fill;
  border-image-width: 13px;
}
.bar-fill {
  position: absolute;
  left: 0;
  top: -2px;
  height: 8px;
  width: calc(100% * var(--p, 0));
  background: var(--f-fill-m) repeat-x left center;
}
.bar { margin: 0 -5px; }
.bar::before { content: ''; position: absolute; inset: -2px 0 -2px 0; pointer-events: none; }
.bar-thin { height: 26px; }

.station.busy { filter: brightness(1.12); }
.station.flagged { filter: saturate(1.1); }

/* ------------------------------------------------------------------- rows */

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-label { font-weight: 700; overflow-wrap: anywhere; }
.row-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-stock .icon { width: 32px; height: 32px; flex: none; }
.row-order { align-items: flex-start; }
.row-order .row-actions { flex-direction: column; }
.row.short .row-label { color: var(--red); }
.row.warn .row-label, .row.warn .row-note:last-child { color: var(--red); }
.tick { width: 22px; height: 22px; margin: 4px 2px; accent-color: var(--amber); flex: none; }

.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.card { display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(33, 29, 30, 0.45); border: 2px solid var(--ink); }
.card.dropped { opacity: 0.5; }
.card.on { border-color: var(--amber); background: rgba(223, 175, 76, 0.14); }
.card.viral { border-color: var(--yellow); }
.card.warn { border-color: #cf5656; }
.card .row-text { gap: 2px; }
.marker { width: 40px; height: 52px; flex: none; }
.badge { width: 96px; height: 96px; flex: none; }
.card.tap { flex-wrap: wrap; }
.card.tap .row-text { flex: 1 1 150px; }
.card.tap > .btn { flex: 1 1 100%; }
.pane-phone .inline { flex-wrap: wrap; }
.pane-phone .inline .select { flex: 1 1 100%; }
.pane-phone .inline .btn { flex: 1 1 100%; }
.avatar { width: 56px; height: 56px; flex: none; }
.icon { width: 32px; height: 32px; flex: none; }

/* -------------------------------------------------------------------- desk */

.tabs { display: flex; gap: 2px; }
.desk .tabs { margin: 0 0 8px; flex-wrap: wrap; }
.tab {
  appearance: none;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 58px;
  min-height: 52px;
  padding: 0 2px 2px;
  margin: 0;
  border: solid transparent;
  border-width: 8px;
  border-image-source: var(--f-tab-off);
  border-image-slice: 8 fill;
  border-image-width: 8px;
  background: none;
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab .icon { width: 32px; height: 32px; }
.tab-label { font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.tab.on { border-image-source: var(--f-tab-on); color: var(--ink); }
.tab:hover { color: var(--yellow); }
.tab.on:hover { color: var(--ink); }

.pane { display: flex; flex-direction: column; gap: 14px; }
.block { display: flex; flex-direction: column; gap: 8px; }
.block-title { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); border-bottom: 2px solid var(--line); padding-bottom: 4px; }

.inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.select { height: 44px; padding: 0 10px; background: var(--deep); border: 2px solid var(--ink); color: var(--cream); min-width: 0; flex: 1 1 140px; }
.score { display: flex; align-items: center; gap: 12px; }
.rating-big { font-size: 28px; font-weight: 800; color: var(--cream); }
.stars-big .star { width: 20px; height: 20px; }
.mood-row { display: flex; align-items: center; gap: 8px; }
.mood { width: 28px; height: 28px; background: var(--f-face-mid) no-repeat center; flex: none; }
.mood.good { background-image: var(--f-face-good); }
.mood.bad { background-image: var(--f-face-bad); }

.figures { margin: 0; display: flex; flex-direction: column; }
.figure { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.figure dt { color: var(--muted); }
.figure dd { margin: 0; font-weight: 800; text-align: right; }

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.log-line { display: grid; grid-template-columns: 8.2em 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.log-time { color: var(--muted); font-size: 11px; }
.log-line.tone-good .log-text { color: var(--green); }
.log-line.tone-bad .log-text, .log-line.tone-urgent .log-text { color: var(--red); }

/* -------------------------------------------------------------------- dock */

.dock {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 8px 16px 10px;
  background: linear-gradient(to bottom, rgba(31, 27, 28, 0.2), var(--bg) 16px);
  border-top: 2px solid var(--deep);
}
.actors { display: flex; gap: 16px; flex: none; }
.actor { display: flex; align-items: flex-end; gap: 8px; width: 220px; }
.actor-sprite { width: 64px; height: 96px; flex: none; }
.actor-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-bottom: 6px; }
.actor-job { font-size: 12px; overflow-wrap: anywhere; }
.actor-text .bar-thin { margin: 2px 0; }
.dock-text { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; justify-content: flex-end; }

.tip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 6px;
  border: solid transparent;
  border-width: 14px;
  border-image-source: var(--f-tip);
  border-image-slice: 14;
  border-image-width: 14px;
  border-image-repeat: repeat;
  background-color: var(--body);
  background-clip: padding-box;
}
.tip-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); flex: none; }
.hint-text { margin: 0; flex: 1; font-weight: 700; }

.note {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  border: solid transparent;
  border-width: 8px 12px 8px 36px;
  border-image-source: var(--f-note-good);
  border-image-slice: 8 12 8 36 fill;
  border-image-width: 8px 12px 8px 36px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.note.tone-good { border-image-source: var(--f-note-good); }
.note.tone-bad { border-image-source: var(--f-note-bad); }
.note.tone-urgent { border-image-source: var(--f-note-urgent); }
/* Plain news has no colour of its own in the atlas, so it borrows the teal button frame. */
.note.tone-info {
  min-height: 44px;
  border-width: 6px 14px 6px 34px;
  border-image-source: var(--f-btn-hover);
  border-image-slice: 6 14 6 34 fill;
  border-image-width: 6px 14px 6px 34px;
}
.note.empty { visibility: hidden; }
.toast { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 55; width: min(520px, calc(100vw - 24px)); }

/* ----------------------------------------------------------------- dialogs */

.overlays { position: relative; z-index: 50; }
.backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 70px 14px 0; --gap: 20px; background: rgba(15, 12, 13, 0.82); overflow-y: auto; }
/* The gap below the dialog is its margin, not the backdrop's padding, so the sticky footer can rest on the screen edge. */
.dialog { width: min(760px, 100%); margin: auto auto var(--gap); }
.dialog:focus { outline: none; }
.dialog .panel-body { gap: 10px; }
.dialog-title { margin: 0; }
.dialog-body { display: flex; flex-direction: column; gap: 10px; }
.dialog-footer { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 6px 0 2px; position: sticky; bottom: 0; background: var(--body); box-shadow: 0 -10px 8px -4px var(--body); z-index: 1; }
.dialog-step { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.dialog-footer .btn { flex: 0 1 auto; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; flex: 1 1 220px; background: rgba(33, 29, 30, 0.5); border: 3px solid var(--ink); cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice:focus-within { outline: 3px solid var(--yellow); outline-offset: 2px; }
.choice.selected { border-color: var(--amber); background: rgba(223, 175, 76, 0.18); }
.choice.unavailable { opacity: 0.45; cursor: not-allowed; }
.choice-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.choice-text strong { color: var(--cream); font-size: 14px; }
.choices-tanks .choice { flex: 1 1 130px; }
.choice .can { width: 96px; height: 160px; flex: none; }
.choice-tank .choice-text { padding: 4px 0; }

.preview { display: flex; flex-direction: column; gap: 6px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 12px; }
.fact { display: flex; flex-direction: column; padding: 6px 8px; background: rgba(33, 29, 30, 0.45); border: 2px solid var(--ink); }
.fact dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.fact dd { margin: 0; font-weight: 800; font-size: 14px; }

.scene { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 16px; min-height: 130px; }
.scene .spr { position: relative; }
.scene-van { height: 170px; }
.scene-van .spr:first-child { position: relative; }
.scene-van .vfx-smoke { position: absolute; left: calc(50% - 80px); top: -26px; }
.scene-van .staff-driver { position: relative; right: auto; bottom: auto; }
.scene-claim { min-height: 96px; }

.answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.answer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.answer .btn { flex: 0 0 250px; min-width: 0; }
.answer-effect { flex: 1 1 240px; font-size: 12px; color: var(--muted); }

.bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.toggle input { width: 22px; height: 22px; accent-color: var(--amber); flex: none; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 24px; }
.dialog-report.verdict-strong .line-lead { color: var(--green); }
.dialog-report.verdict-shaky .line-lead { color: var(--yellow); }

/* ------------------------------------------------------------------- title */

.title {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 16px 280px;
  background: var(--f-title-bg) center bottom / cover no-repeat, var(--bg);
  overflow: hidden;
}
.title::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(31, 27, 28, 0.78), rgba(31, 27, 28, 0.35) 60%, rgba(31, 27, 28, 0.5)); pointer-events: none; }
.title-card { position: relative; width: min(600px, 100%); }
.title-card .panel-body { align-items: stretch; gap: 10px; }
.wordmark { margin: 4px 0 0; font-size: clamp(30px, 7vw, 54px); line-height: 1; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cream); text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); text-align: center; }
.wordmark .hot { color: var(--amber); }
.tagline { margin: 0; text-align: center; color: var(--teal); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; text-shadow: 1px 1px 0 var(--ink); filter: brightness(1.35); }
.title-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0; }
.title-options { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.title-card .line, .title-card .text-link { text-align: center; }
.text-link { color: var(--amber); font-weight: 700; }
.title-staff { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: 56px; pointer-events: none; z-index: 1; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1099px) {
  .board { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 12px; }
  .desk { position: relative; top: auto; max-height: none; }
  .desk > .panel-body { overflow: visible; }
  .game { grid-template-areas: 'hud' 'board' 'dock' 'tabs'; padding-bottom: 0; }
  .tabs { position: sticky; bottom: 0; z-index: 30; background: var(--bg); padding: 4px 6px max(4px, env(safe-area-inset-bottom)); border-top: 2px solid var(--deep); }
  .tab { min-width: 0; }
  .dock { position: static; padding: 8px 10px; flex-direction: column; border-top: 2px solid var(--deep); }
  .actors { gap: 8px; }
  .actor { width: auto; flex: 1 1 0; min-width: 0; }
  .hud-row { padding: 0 8px; gap: 6px 8px; }
  .chip { min-width: 0; flex: 1 1 150px; }
  .chip-cash { flex: 0 0 auto; }
  .meter { flex: none; }
  /* There is no room for it in the HUD here; the menu and the closing report carry the same link. */
  #sbg-back.in-hud { display: none; }
  #sbg-back:not(.in-hud) { bottom: auto; top: 4px; right: 4px; }
  .toast { bottom: 140px; }
  .answer .btn { flex: 1 1 100%; }
  .floor { gap: 12px; }
  .station { flex: 1 1 320px; width: auto; max-width: 560px; }
  /* A tank card lies down: the tank on the left, its text and buttons beside it. */
  .station.tank > .panel-body { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-content: start; }
  .station.tank .stage { grid-column: 1; grid-row: 1 / span 8; }
  .station.tank .panel-body > :not(.stage) { grid-column: 2; }
  .station.tank .actions { margin-top: 0; }
}

@media (max-width: 480px) {
  .backdrop { padding: 56px 6px 0; --gap: 12px; }
  .choice { flex-basis: 100%; }
  .seg { min-width: 40px; padding: 0; }
  .seg-skip { min-width: 84px; }
  .meter-stress { display: none; }
  .rating-top { display: none; }
  .rating-row { display: flex; }
  .rating.rated .rating-text { display: none; }
  .title { padding-top: 56px; }
}

/* A phone held sideways: the tabs become a rail, the dock shrinks to one line. */
@media (max-width: 1099px) and (max-height: 520px) {
  .game { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: 'tabs hud' 'tabs board' 'tabs dock'; }
  .tabs { position: sticky; top: 0; height: 100vh; flex-direction: column; justify-content: flex-start; border-top: 0; border-right: 2px solid var(--deep); padding: 4px; overflow-y: auto; }
  .tab { flex: none; min-height: 48px; }
  .hud { position: static; }
  .dock { position: static; padding: 6px 10px; flex-direction: row; }
  .actors { display: none; }
  .tip { min-height: 44px; }
  .title { padding: 28px 16px 20px; }
  .title-staff { display: none; }
  .backdrop { padding: 54px 10px 0; --gap: 10px; }
  .toast { bottom: 60px; }
}

@media (max-height: 760px) and (min-width: 700px) { .title-staff { opacity: 0.9; } .title { padding-bottom: 230px; } }
@media (max-height: 640px) { .title-staff { display: none; } .title { padding-bottom: 24px; } }

/* ----------------------------------------------------------------- motion */

.reduce-motion * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }