/* ============================================================
   The Banana Split Game — design system
   Warm, sunny, storybook-poster. Built for washed-out projectors:
   high contrast, huge type, nothing conveyed by colour alone.
   ============================================================ */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Palette */
  --paper: #fffbef;        /* warm cream background */
  --paper-deep: #fdf3d7;   /* slightly deeper cream for cards */
  --ink: #2b2118;          /* near-black warm brown — main text */
  --ink-soft: #5c4a38;     /* secondary text */
  --banana: #ffc93c;       /* signature yellow */
  --banana-deep: #f2a007;  /* deeper yellow/amber */
  --sun: #f28c28;          /* orange accent */
  --leaf: #2f7d32;         /* green accent */
  --sky: #12839b;          /* teal accent */
  --focus: #0b5fff;        /* focus ring — vivid, never used decoratively */

  /* Character segment colours — distinct hues AND luminances */
  --c-worker: #d7263d;
  --c-owner: #f2a007;
  --c-shipper: #12839b;
  --c-importer: #6a4ca5;
  --c-supermarket: #2f7d32;

  /* Type — floors keep projector legibility (~24px body at 1080p) */
  --fs-body: clamp(22px, 2.2vw, 30px);
  --fs-big: clamp(26px, 2.8vw, 38px);
  --fs-h2: clamp(36px, 4.5vw, 64px);
  --fs-h1: clamp(48px, 7vw, 104px);
  --fs-giant: clamp(64px, 10vw, 160px);

  --radius: 18px;
  --shadow: 0 6px 0 rgba(43, 33, 24, 0.18);

  font-family: 'Nunito', 'Trebuchet MS', Verdana, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #app { height: 100%; }
body {
  font-size: var(--fs-body);
  line-height: 1.45;
  overflow: hidden;
  /* faint sun-ray wash, cheap and projector-safe */
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 201, 60, 0.28), transparent 55%),
    var(--paper);
}

#app { display: flex; flex-direction: column; }

#screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start + auto block margins on the child centres content when it fits
     but anchors it to the top when it doesn't, so an overlong screen loses its
     tail rather than being trimmed at both ends (heading first). */
  justify-content: flex-start;
  padding: clamp(16px, 3vh, 40px) clamp(20px, 4vw, 72px);
  text-align: center;
  overflow-y: auto;
}
#screen > .screen-inner { margin-block: auto; }

h1, h2, h3, .display {
  font-family: 'Fredoka', 'Nunito', 'Trebuchet MS', sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  touch-action: manipulation;
}
:focus { outline: none; }
:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- presenter chrome (Back / Next) ---------- */

#chrome {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 3vw, 40px) 18px;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 28px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-big);
  transition: transform 0.1s ease;
}
.nav-btn:active { transform: translateY(3px); }

.nav-next {
  background: var(--ink);
  color: var(--banana);
  box-shadow: var(--shadow);
}
.nav-next.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.nav-back {
  background: transparent;
  color: var(--ink-soft);
  border: 3px solid rgba(43, 33, 24, 0.25);
}
.nav-back[disabled] { opacity: 0.25; cursor: default; }

#progress {
  display: flex;
  gap: 8px;
}
#progress .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(43, 33, 24, 0.18);
}
#progress .dot.on { background: var(--ink); }

/* ---------- generic screen bits ---------- */

.screen-inner {
  width: 100%;
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vh, 32px);
}

.kicker {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-big);
  color: var(--sun);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.reveal-in { animation: rise 0.5s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.card {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vh, 40px) clamp(24px, 3vw, 48px);
}

.small-print {
  font-size: max(16px, calc(var(--fs-body) * 0.6));
  color: var(--ink-soft);
}

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

.title-banana { width: clamp(180px, 26vw, 380px); }
.title-org {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: var(--fs-big);
}

.hook-q { font-size: var(--fs-h2); max-width: 22ch; }
.hook-a {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-giant);
  color: var(--sun);
  line-height: 1;
}

/* ---------- meet the chain ---------- */

.chain-strip {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 24px);
  flex-wrap: wrap;
}
.chain-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: clamp(110px, 13vw, 190px);
}
.chain-stop .portrait { width: 100%; }
.chain-stop.dim { opacity: 0.3; filter: grayscale(0.8); }
.chain-stop.current .portrait-ring { outline: 6px solid var(--banana-deep); outline-offset: 4px; border-radius: 50%; }
.chain-arrow { font-size: var(--fs-h2); color: var(--ink-soft); padding-bottom: 40px; }

.char-card {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  text-align: left;
  max-width: 1300px;
}
.char-card .portrait { width: 100%; }
.char-story {
  font-size: var(--fs-big);
  line-height: 1.5;
  border-left: 8px solid var(--banana);
  padding-left: 24px;
  font-style: italic;
}
.char-role {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.1;
}
.char-place { color: var(--ink-soft); font-weight: 700; font-size: var(--fs-big); margin-bottom: clamp(14px, 2.2vh, 28px); }

/* ---------- mode select ---------- */

.mode-grid { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; justify-content: center; }
.mode-card {
  width: clamp(300px, 34vw, 480px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 4px solid rgba(43, 33, 24, 0.25);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(20px, 3vh, 36px);
}
.mode-card[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--paper-deep);
  box-shadow: var(--shadow);
}
.mode-card .tick { visibility: hidden; color: var(--leaf); font-size: var(--fs-h2); line-height: 1; }
.mode-card[aria-pressed='true'] .tick { visibility: visible; }

.team-count { display: flex; align-items: center; gap: 20px; justify-content: center; }
.team-count button {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-big);
  background: #fff;
}
.team-count button:disabled { opacity: 0.25; }
.team-count .n { font-family: 'Fredoka', sans-serif; font-size: var(--fs-h2); min-width: 2ch; }

/* ---------- split screens ---------- */

.round-banner {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 34px;
  border-radius: 999px;
  border: 4px solid var(--ink);
  background: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-h2);
  box-shadow: var(--shadow);
}
.round-banner.fair { background: #e9f2ff; }
.round-banner.real { background: #ffe9d6; }
.round-banner svg { width: 1.2em; height: 1.2em; flex: none; }

.split-instruction { font-size: var(--fs-big); font-weight: 700; max-width: 44ch; }

.team-turn {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-big);
  background: var(--ink);
  color: var(--banana);
  border-radius: 999px;
  padding: 6px 26px;
}
/* progress dots and the current-team label share one row: as two stacked
   blocks they cost ~110px, which overflowed 720p projectors */
.team-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 22px);
  flex-wrap: wrap;
}
.team-dots { display: flex; gap: 10px; justify-content: center; align-items: center; }
.team-dots .td {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: #fff;
}
.team-dots .td.done { background: var(--leaf); color: #fff; }
.team-dots .td.now { background: var(--banana); }

/* the split bar itself */
.splitbar-wrap { width: 100%; max-width: 1400px; display: flex; flex-direction: column; gap: 10px; }

.splitbar {
  position: relative;
  width: 100%;
  height: clamp(90px, 14vh, 150px);
  border: 5px solid var(--ink);
  border-radius: 14px;
  /* headroom for the hovering sliver badges */
  margin-top: 76px;
}
/* inner track clips the segments so colour can't bleed past the rounded
   corners, while dividers/badges hang outside it un-clipped */
.seg-track {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  /* basis 0 so width is exactly proportional to flex-grow (pennies) —
     otherwise label text skews segment widths off their true boundaries.
     No transition: the colour boundary must track the drag handle exactly. */
  flex-basis: 0;
}
.seg .seg-label {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(24px, 2.6vw, 44px);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
}
.seg.light-text .seg-label { color: var(--ink); text-shadow: none; }

.divider {
  position: absolute;
  top: -18px;
  bottom: -18px;
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 2;
  background: none;
}
.divider .grip {
  width: 18px;
  height: 100%;
  border-radius: 9px;
  background: var(--ink);
  border: 3px solid var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.divider .grip::after {
  content: '';
  width: 4px;
  height: 34px;
  border-radius: 2px;
  background: var(--banana);
}
.divider:focus-visible { outline: none; }
.divider:focus-visible .grip { outline: 4px solid var(--focus); outline-offset: 2px; }
.divider.dragging .grip { background: var(--focus); }

/* hovering value badge for segments too thin to label in-bar */
.tiny-badge {
  position: absolute;
  bottom: calc(100% + 22px);
  transform: translateX(-50%);
  min-width: 52px;
  height: 52px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  pointer-events: none;
  z-index: 1;
}
.tiny-badge.light-text { color: var(--ink); }
.tiny-badge::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}

.penny-ruler {
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  color: var(--ink-soft);
  font-size: max(15px, calc(var(--fs-body) * 0.55));
  padding: 0 2px;
}

/* character allocation cards under the bar */
.alloc-row {
  display: flex;
  gap: clamp(8px, 1.2vw, 20px);
  width: 100%;
  max-width: 1400px;
  justify-content: center;
}
.alloc {
  flex: 1;
  max-width: 250px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-top: 12px solid var(--ink);
}
.alloc .portrait { width: clamp(56px, 6vw, 96px); }
.alloc .alloc-name { font-weight: 900; font-size: max(18px, calc(var(--fs-body) * 0.75)); }
.alloc .alloc-role { color: var(--ink-soft); font-size: max(15px, calc(var(--fs-body) * 0.6)); line-height: 1.15; }
.alloc .alloc-pennies {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}
/* The pennies number is a real text box, but it reads as plain text until you
   touch it: no border or background at rest, a soft tint on hover, and a clear
   focus state once it's being typed into. */
.alloc .num-wrap { position: relative; display: inline-block; }
.alloc .num-ghost { visibility: hidden; white-space: pre; }
.alloc .p-num {
  position: absolute;
  inset: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: center;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  cursor: text;
}
.alloc .p-num:hover { background: rgba(43, 33, 24, 0.08); }
.alloc .p-num:focus {
  background: #fff;
  outline: 4px solid var(--focus);
  outline-offset: 2px;
}

.commentary {
  min-height: 1.6em;
  font-weight: 700;
  color: var(--ink-soft);
  font-style: italic;
}

/* Next doubles as the commit button on the guessing screens */
.nav-next.lock {
  background: var(--leaf);
  color: #fff;
  border: 4px solid var(--ink);
}

/* ---------- reveal ---------- */

/* One source of truth for the label column: both the label and the balancing
   spacer must stay the same width or the bars drift off centre. Wide enough
   for the longest label, "Likely (Team 1)", on a single line. */
.reveal-rows {
  --row-label-w: clamp(150px, 16vw, 250px);
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 22px);
}
/* A matching empty column on the right balances the left label column, so the
   bar (the middle 1fr) sits centred in the row — and therefore centred under
   the heading — with the labels fully on-screen. */
.reveal-row { display: grid; grid-template-columns: var(--row-label-w) 1fr var(--row-label-w); align-items: center; gap: 16px; }
.reveal-row .row-label {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(20px, 2vw, 34px);
  text-align: right;
  line-height: 1.1;
}
/* The team name must never wrap; only the sub-label beneath it may. */
.reveal-row .row-main { display: block; white-space: nowrap; }
/* Up to six teams plus fair and real is eight stacked bars; shrink the labels
   (which are taller than the thin bars and drive the row height) and the gaps. */
.reveal-rows.dense { gap: 3px; }
.reveal-rows.dense .row-label { font-size: clamp(16px, 1.6vw, 26px); }
.reveal-rows.dense .mini-bar.thin { height: clamp(24px, 3.4vh, 40px); }
.reveal-row .row-label small { display: block; font-family: 'Nunito', sans-serif; font-weight: 700; color: var(--ink-soft); font-size: 0.6em; }
.mini-bar {
  display: flex;
  height: clamp(44px, 7vh, 84px);
  border: 4px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mini-bar.thin { height: clamp(30px, 4.5vh, 52px); }
.mini-bar .seg .seg-label { font-size: clamp(18px, 1.9vw, 34px); }
.reveal-row.real-row .mini-bar { border-width: 5px; box-shadow: var(--shadow); }
/* room for the worker flag that hangs below the real bar */
.reveal-row.real-row { margin-bottom: 54px; }

.reveal-callout {
  font-size: var(--fs-big);
  font-weight: 700;
  max-width: 46ch;
  background: var(--paper-deep);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 28px;
}
.reveal-callout .hi-worker { color: var(--c-worker); font-weight: 900; }

.winner-banner {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-h2);
  background: var(--banana);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 40px;
  box-shadow: var(--shadow);
}
.winner-banner small { display: block; font-family: 'Nunito', sans-serif; font-size: var(--fs-body); font-weight: 700; }

/* ---------- the Fairtrade payoff bar ---------- */

.bar-holder { position: relative; }
.bar-line { position: relative; }
/* bracket under the growers' share, marking the price floor */
.floor-mark {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  height: 12px;
  border: 4px solid var(--leaf);
  border-top: none;
  border-radius: 0 0 10px 10px;
}
.floor-tag {
  position: absolute;
  left: calc(100% + 12px);
  top: 0;
  transform: translateY(-30%);
  white-space: nowrap;
  color: var(--leaf);
  font-weight: 900;
  font-size: max(15px, calc(var(--fs-body) * 0.66));
}
/* room for the bracket and its label below the last bar */
.ft-bar-row { margin-bottom: 26px; }
/* the label must line up with the bar, not with the bar plus the return
   flow hanging beneath it */
.ft-bar-row { align-items: start; }
.ft-bar-row .row-label { padding-top: 4px; }

/* The premium's journey home: it drops out of the buyer's end of the bar on
   the right, then travels leftwards to the growers. row-reverse lays the DOM
   order out right-to-left so the markup still reads in cause order. */
.premium-return { position: relative; padding-top: 36px; }
.return-elbow {
  position: absolute;
  right: 0;
  top: 2px;
  height: 30px;
  border-right: 4px solid var(--leaf);
  border-top-right-radius: 2px;
}
.return-flow {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);
}
/* line with an arrowhead on its left end, finishing under Rosa and Mateo */
.return-tail {
  flex: 1;
  min-width: 40px;
  height: 4px;
  background: var(--leaf);
  position: relative;
}
.return-tail::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 9px solid transparent;
  border-right-color: var(--leaf);
}
.return-flow .flow-arrow { color: var(--leaf); font-weight: 900; }
.return-flow .coin {
  background: var(--banana);
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 4px 24px;
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-big);
  box-shadow: var(--shadow);
}
.return-flow .flow-arrow { font-size: var(--fs-big); }
.return-flow .fund {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 6px 22px;
  font-weight: 900;
  text-align: left;
}
.return-flow .fund small {
  display: block;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: max(14px, calc(var(--fs-body) * 0.6));
}

/* ---------- discussion ---------- */

.prompt-list { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; width: 100%; }
.prompt {
  text-align: left;
  font-size: var(--fs-big);
  font-weight: 700;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 28px;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.prompt.past { opacity: 0.35; }
.prompt .q-num {
  font-family: 'Fredoka', sans-serif;
  color: var(--sun);
  flex: none;
}

/* ---------- fairtrade ---------- */

.ft-points { display: flex; gap: clamp(14px, 2vw, 28px); justify-content: center; flex-wrap: wrap; }
.ft-point {
  width: clamp(260px, 28vw, 420px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 14px solid var(--leaf);
}
.ft-point.pending { visibility: hidden; }
.ft-point h3 { font-size: var(--fs-big); }
.ft-num {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-h2);
  color: var(--leaf);
  line-height: 1;
}

/* ---------- close ---------- */

.close-points { display: flex; flex-direction: column; gap: 16px; text-align: left; max-width: 900px; }
.close-points .cp { display: flex; gap: 16px; align-items: baseline; font-size: var(--fs-big); font-weight: 700; }
.close-points .cp::before { content: '🍌'; flex: none; }

.close-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: 8px;
}
.close-brand img { height: auto; }
.close-brand .brand-ft { width: clamp(90px, 11vh, 150px); }
.close-brand .brand-rt { width: clamp(120px, 16vh, 210px); }

/* ---------- odds and ends ---------- */

.restart-link {
  text-decoration: underline;
  color: var(--ink-soft);
}

.org-logo { height: auto; width: clamp(48px, 5vw, 84px); }

.reveal-row { position: relative; }
/* callout under the real bar pointing up at the worker's sliver
   (positioned with top/left, NOT transform — the reveal-in animation
   ends at `transform: none` and would wipe a transform-based offset) */
.worker-flag {
  position: absolute;
  left: calc(clamp(120px, 14vw, 220px) + 24px);
  top: calc(100% + 12px);
  background: var(--c-worker);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  padding: 4px 18px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  z-index: 3;
}
.worker-flag::after {
  content: '';
  position: absolute;
  left: 18px;
  top: -13px;
  border: 7px solid transparent;
  border-bottom-color: var(--c-worker);
}

.chain-strip.legend { gap: clamp(20px, 3vw, 48px); }
.chain-strip.legend .chain-stop { width: clamp(64px, 7vw, 110px); gap: 2px; }

[hidden] { display: none !important; }

/* ---------- short screens ----------
   Classroom projectors and laptops are often 720p, 1024x768 or 900px tall.
   The split, discussion and Fairtrade screens are the tallest in the game, so
   tighten their vertical rhythm below full-HD — the character cards, their
   penny figures and the live discussion question must never be cut off.
   Keep this threshold comfortably above the tallest screen's needs: the
   Fairtrade cards alone want ~980px at full size. */

@media (max-height: 1000px) {
  .screen-inner { gap: clamp(6px, 1.2vh, 18px); }
  .round-banner { font-size: clamp(20px, 2.6vw, 34px); padding: 4px 22px; }
  .split-instruction { font-size: clamp(18px, 1.95vw, 26px); }
  .splitbar { height: clamp(60px, 9vh, 100px); margin-top: 56px; }
  .splitbar-wrap { gap: 6px; }
  .team-dots .td { width: 34px; height: 34px; border-width: 2.5px; }
  .team-turn { font-size: clamp(18px, 2vw, 27px); padding: 3px 20px; }
  .tiny-badge {
    bottom: calc(100% + 14px);
    height: 40px;
    min-width: 40px;
    font-size: clamp(17px, 1.7vw, 24px);
  }
  .seg .seg-label { font-size: clamp(20px, 2.2vw, 36px); }
  .alloc { padding: 6px 6px 10px; border-top-width: 9px; }
  .alloc .portrait { width: clamp(36px, min(4.5vw, 6.6vh), 72px); }
  .alloc .alloc-pennies { font-size: clamp(24px, min(2.8vw, 4.8vh), 46px); }
  .commentary { min-height: 1em; font-size: max(15px, calc(var(--fs-body) * 0.7)); }
  .penny-ruler { font-size: max(13px, calc(var(--fs-body) * 0.48)); }

  /* The discussion and Fairtrade screens accumulate cards as the presenter
     clicks, so the last click is the tallest. Keep every card on screen —
     text stays above the ~24px projector floor. */
  h2 { font-size: clamp(30px, 3.7vw, 50px); }
  .kicker { font-size: clamp(17px, 1.85vw, 25px); }
  /* The chain arrows inherit the h2 size; left unchecked they are wide enough
     to wrap the five portraits onto a second row and double the screen's height. */
  .chain-arrow { font-size: clamp(20px, 2.4vw, 34px); padding-bottom: 26px; }
  .chain-stop { width: clamp(76px, 9.5vw, 140px); gap: 5px; }
  .title-banana { width: clamp(110px, 21vh, 250px); }
  h1 { font-size: clamp(38px, 5.4vw, 78px); }
  .prompt-list { gap: 8px; }
  .prompt { padding: 8px 20px; gap: 14px; font-size: clamp(22px, 2.2vw, 30px); }
  .ft-points { gap: clamp(10px, 1.5vw, 20px); }
  .ft-point { padding: 10px 18px; gap: 4px; border-top-width: 10px; font-size: clamp(19px, 1.9vw, 25px); }
  .ft-point h3 { font-size: clamp(20px, 2vw, 27px); }
  .ft-num { font-size: clamp(24px, 2.6vw, 34px); }
  .reveal-callout { font-size: clamp(19px, 1.9vw, 26px); padding: 8px 20px; }

  /* The Fairtrade payoff slide stacks four bars, a legend and the premium
     flow, making it the tallest screen in the game. */
  .reveal-rows { gap: clamp(6px, 1.2vh, 16px); }
  .chain-strip.legend .chain-stop { width: clamp(40px, 4.4vw, 70px); }
  .ft-bar-row { margin-bottom: 10px; }
  .floor-tag { font-size: max(13px, calc(var(--fs-body) * 0.58)); }
  .return-flow .coin { font-size: clamp(20px, 2.1vw, 30px); padding: 2px 18px; }
  .return-flow .flow-arrow { font-size: clamp(20px, 2.1vw, 30px); }
  .return-flow .fund { padding: 4px 16px; font-size: clamp(17px, 1.8vw, 24px); }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}