/* ============================================================
   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;
  justify-content: center;
  padding: clamp(16px, 3vh, 40px) clamp(20px, 4vw, 72px);
  text-align: center;
  overflow-y: 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); }

/* ---------- 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;
}
.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;
  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;
}

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

.lock-btn {
  background: var(--leaf);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-big);
  padding: 14px 44px;
  border-radius: 999px;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
}
.lock-btn:active { transform: translateY(3px); }

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

.reveal-rows { width: 100%; max-width: 1400px; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); }
.reveal-row { display: grid; grid-template-columns: clamp(120px, 14vw, 220px) 1fr; 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;
}
.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; }

/* ---------- 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; }

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

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