/* style.css — Trample design system + game shell layout
 *
 * The palette, type scale and "chunky stone" button treatment mirror the
 * Trample landing page and launch checklist, so the game, the site and the
 * marketing material all read as one product.
 *
 * Colours are declared twice: a hex fallback first, then the oklch value the
 * brand is authored in. Browsers that can't parse oklch drop that declaration
 * and keep the hex.
 */

:root {
  --meadow:        #57B85A;
  --meadow:        oklch(72% 0.18 145);
  --meadow-light:  #7FD07A;
  --meadow-light:  oklch(80% 0.16 145);
  --meadow-dark:   #2F7A38;
  --meadow-dark:   oklch(50% 0.13 148);
  --forest:        #244B28;
  --forest:        oklch(32% 0.08 150);
  --forest-deep:   #16301A;
  --forest-deep:   oklch(22% 0.05 152);

  --parchment:     #F2EDE0;
  --parchment:     oklch(94% 0.025 88);
  --parchment-dim: #E6DECD;
  --parchment-dim: oklch(89% 0.03 86);
  --edge:          #D2C6AC;
  --edge:          oklch(82% 0.04 78);

  --mud:           #7A5731;
  --mud:           oklch(42% 0.07 55);
  --mud-deep:      #55371C;
  --mud-deep:      oklch(30% 0.05 50);

  --bounty:        #E8B84A;
  --bounty:        oklch(80% 0.16 85);
  --bounty-deep:   #B07B22;
  --bounty-deep:   oklch(60% 0.16 65);

  --danger:        #C4462F;
  --danger:        oklch(55% 0.17 30);

  --ink:           #1E2A20;
  --ink:           oklch(22% 0.02 150);
  --ink-soft:      #4A554C;
  --ink-soft:      oklch(38% 0.02 150);

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--forest-deep);
  font-family: var(--body);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════ GAME SHELL */

#game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: var(--forest);
}

#game-canvas {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  touch-action: none;
}

/* UI Panel below the canvas */
#ui-panel {
  width: 100%;
  background:
    radial-gradient(ellipse 80% 120% at 50% 100%, rgba(0,0,0,.28) 0%, transparent 70%),
    var(--forest);
  border-top: 2px solid var(--meadow-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 -8px 22px -14px rgba(0,0,0,.9);
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

/* ── Score bar: each player is a little parchment paving stone */
#score-bar {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
}

/* 4-player: 2×2 grid so each score has room to breathe */
#score-bar.four-player {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  justify-items: stretch;
}

.player-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 11px;
  background: var(--parchment);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 3px 0 var(--edge), inset 0 0 0 1px var(--edge);
  transition: box-shadow .2s, transform .1s, background .2s;
  min-width: 0;
  white-space: nowrap;
}

.player-score.active {
  background: var(--bounty);
  box-shadow: 0 3px 0 var(--bounty-deep), inset 0 0 0 1px var(--bounty-deep);
  transform: translateY(-1px);
}

.player-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 0 0 1.5px rgba(255,255,255,.7);
}

.player-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--ink-soft);
}

.score-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
}

.bridge-count {
  font-size: 11px;
  color: var(--mud);
  margin-left: 1px;
}

/* ── Turn indicator
   Locked to a single line of fixed height: the panel's height must never
   change mid-game, because the canvas is flex:1 and the board would rescale
   under the player. ui.js shrinks the font to fit rather than wrapping. */
#turn-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 18px;
  line-height: 18px;
  color: var(--parchment-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.t-turn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.65);
}

.t-turn-msg {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The bounty / turns-left counter — secondary to the instruction */
.t-turn-note {
  color: var(--meadow-light);
  flex-shrink: 0;
}
.t-turn-note::before {
  content: '·';
  margin: 0 6px 0 0;
  color: var(--ink-soft);
}

/* ── Action buttons */
#action-buttons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 2px 0 4px;
}

.action-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .3px;
  padding: 12px 30px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: var(--mud-deep);
  background: var(--parchment);
  box-shadow: 0 4px 0 var(--edge), 0 8px 16px -8px rgba(0,0,0,.6);
  transition: transform .1s, box-shadow .1s, opacity .15s;
}

.action-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}

.action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

#btn-confirm {
  background: var(--bounty);
  box-shadow: 0 4px 0 var(--bounty-deep), 0 8px 16px -8px rgba(0,0,0,.6);
}
#btn-confirm:active:not(:disabled) { box-shadow: 0 1px 0 var(--bounty-deep); }

#btn-undo {
  background: var(--parchment-dim);
  box-shadow: 0 4px 0 var(--edge), 0 8px 16px -8px rgba(0,0,0,.6);
}
#btn-undo:active:not(:disabled) { box-shadow: 0 1px 0 var(--edge); }

/* Small square raised button. Used for the campaign exit and results
   restore controls in the action bar, and for the world map's back button,
   so every "get me out of here" control looks the same. */
.t-stone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 9px 11px;
  border: none;
  border-radius: 12px;
  background: var(--parchment);
  color: var(--mud-deep);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge), 0 8px 16px -8px rgba(0,0,0,.6);
  transition: transform .1s, box-shadow .1s;
}
.t-stone-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.t-stone-btn .t-svg-icon { width: 18px; height: 18px; }

.t-stone-btn--gold {
  background: var(--bounty);
  box-shadow: 0 4px 0 var(--bounty-deep), 0 8px 16px -8px rgba(0,0,0,.6);
}
.t-stone-btn--gold:active { box-shadow: 0 1px 0 var(--bounty-deep); }

/* Parked at either end of the action bar, clear of Undo / Confirm */
.t-stone-btn--pinned {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.t-stone-btn--pinned:active { transform: translateY(calc(-50% + 3px)); }
.t-stone-btn--pinned.is-left  { left: 4px; }
.t-stone-btn--pinned.is-right { right: 4px; }

/* ═══════════════════════════════════ OVERLAYS & CARDS */

.t-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: var(--body);
}

/* Painted world map behind the menus, with a warm scrim for readability */
.t-overlay--map {
  background: url('../assets/world_map.PNG') center top / cover no-repeat;
}
.t-overlay--map::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 45%, rgba(10,26,12,.45) 0%, rgba(10,26,12,.72) 100%);
}

.t-overlay--dim   { background: rgba(12,26,14,.72); }
.t-overlay--dimmer{ background: rgba(12,26,14,.85); }

/* Scrollable overlay that still centres its card. Auto margins beat
   align-items in the cross axis: centred when there's room, scrolling from
   the top edge when there isn't (align-items:center would clip the top). */
.t-overlay--scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
}
.t-overlay--scroll > * {
  margin-top: auto;
  margin-bottom: auto;
}

/* Parchment card — the default surface for every menu and modal */
.t-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--parchment);
  border-radius: 22px;
  padding: 24px 22px;
  text-align: center;
  color: var(--ink);
  box-shadow:
    0 4px 0 rgba(0,0,0,.10),
    0 30px 60px -20px rgba(0,0,0,.55),
    inset 0 0 0 1px var(--edge);
}

.t-card--wide { max-width: 420px; }

/* Two gold studs at the top corners — the landing page signup-card motif.
   They sit inside the padding box so a scrolling card never clips them. */
.t-card--studs { padding-top: 30px; }
.t-card--studs::before,
.t-card--studs::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: var(--bounty);
  border-radius: 50%;
  top: 13px;
  box-shadow: inset 0 -3px 0 var(--bounty-deep);
}
.t-card--studs::before { left: 16px; }
.t-card--studs::after  { right: 16px; }

/* Boss briefing — scorched variant */
.t-card--boss {
  background: linear-gradient(160deg, #2a1a0a 0%, #1c1207 100%);
  color: var(--parchment);
  box-shadow:
    0 4px 0 rgba(0,0,0,.3),
    0 30px 60px -20px rgba(0,0,0,.7),
    inset 0 0 0 2px #FF6B35;
}
.t-card--boss .t-title { color: #FF6B35; }
.t-card--boss .t-body,
.t-card--boss .t-note { color: var(--parchment-dim); }

/* Campaign complete — gilded variant */
.t-card--gold {
  background: linear-gradient(160deg, #2a5a2a 0%, #14330f 100%);
  color: var(--parchment);
  box-shadow:
    0 4px 0 rgba(0,0,0,.3),
    0 0 40px rgba(232,184,74,.28),
    0 30px 60px -20px rgba(0,0,0,.6),
    inset 0 0 0 2px var(--bounty);
}
.t-card--gold .t-title { color: var(--bounty); }
.t-card--gold .t-body,
.t-card--gold .t-note { color: var(--parchment-dim); }

/* Card that splits into scrolling body + pinned footer */
.t-card--split {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-height: 85vh;
}
.t-card--split .t-card__scroll {
  padding: 24px 22px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.t-card--split .t-card__footer {
  padding: 12px 22px 20px;
  border-top: 1px solid var(--edge);
  background: var(--parchment-dim);
  flex-shrink: 0;
}

/* Main menu — hero lockup on the map, no card (mirrors the landing hero) */
.t-menu-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.t-menu-actions { margin-top: 30px; }

/* ═══════════════════════════════════ TYPE */

.t-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--forest);
  margin: 0 0 10px;
}

.t-title--hero {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 15vw, 78px);
  line-height: .9;
  letter-spacing: -.04em;
  color: #fff;
  margin: 0;
  text-shadow: 0 3px 0 var(--meadow-dark), 0 12px 26px rgba(0,0,0,.45);
}

.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.22);
  padding: 7px 14px;
  border-radius: 999px;
  margin: 14px 0 0;
}
.t-eyebrow .pip {
  width: 7px; height: 7px;
  background: var(--bounty);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(232,184,74,.25);
}

.t-pitch {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  margin: 14px 0 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.t-pitch .accent { color: var(--bounty); }

.t-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}

.t-body {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.t-body strong { color: var(--ink); font-weight: 600; }

.t-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .4px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ═══════════════════════════════════ BUTTONS */

.t-btn {
  display: block;
  width: 100%;
  margin: 9px 0 0;
  padding: 14px 22px;
  border: none;
  border-radius: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .2px;
  color: var(--mud-deep);
  background: var(--parchment-dim);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge), 0 10px 20px -12px rgba(0,0,0,.5);
  transition: transform .1s, box-shadow .1s;
}
.t-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}

/* A link dressed as a button (e.g. the iOS sign-up on the castle menu) */
a.t-btn {
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

/* Sign-up CTA: an offer, so it shouldn't compete with the button you came to
   press — but it still has to be readable. The bounty-coloured ring gives it
   presence on both the parchment and the dark cards, while the text colour
   comes from whichever ghost variant the caller picked for that background. */
.t-btn--signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  padding: 11px 18px;
  box-shadow: inset 0 0 0 2px var(--bounty-deep);
}
.t-btn--signup:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 2px var(--bounty-deep);
}
.t-btn--signup .t-svg-icon { width: 16px; height: 16px; }

/* The in-game ✉ is a link, not a button, so it needs the same reset a.t-btn
   gets. */
a.t-stone-btn { text-decoration: none; }

/* ═══════════════════════════════════ BUILD STAMP */

/* Top-left on every screen. Above the overlays (max z-index 400) but
   pointer-events:none, so it can never intercept a tap. The shadow keeps it
   legible on the parchment cards as well as the dark backdrops. */
.t-version {
  position: fixed;
  top: max(5px, env(safe-area-inset-top));
  left: max(7px, env(safe-area-inset-left));
  z-index: 500;
  pointer-events: none;
  user-select: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.t-btn--gold {
  background: var(--bounty);
  color: var(--mud-deep);
  box-shadow: 0 4px 0 var(--bounty-deep), 0 10px 20px -12px rgba(0,0,0,.5);
}
.t-btn--gold:active { box-shadow: 0 1px 0 var(--bounty-deep); }

.t-btn--green {
  background: var(--meadow);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  box-shadow: 0 4px 0 var(--meadow-dark), 0 10px 20px -12px rgba(0,0,0,.5);
}
.t-btn--green:active { box-shadow: 0 1px 0 var(--meadow-dark); }

.t-btn--mud {
  background: var(--mud);
  color: #fff;
  box-shadow: 0 4px 0 var(--mud-deep), 0 10px 20px -12px rgba(0,0,0,.5);
}
.t-btn--mud:active { box-shadow: 0 1px 0 var(--mud-deep); }

.t-btn--ember {
  background: #FF6B35;
  color: #2a1200;
  box-shadow: 0 4px 0 #A83E14, 0 10px 20px -12px rgba(0,0,0,.6);
}
.t-btn--ember:active { box-shadow: 0 1px 0 #A83E14; }

/* Quiet, secondary action on a parchment card */
.t-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 2px var(--edge);
  font-size: 15px;
  padding: 11px 20px;
}
.t-btn--ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--edge); }

/* Quiet, secondary action on a dark card */
.t-btn--ghost-dark {
  background: transparent;
  color: var(--parchment-dim);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
  font-size: 15px;
  padding: 11px 20px;
}
.t-btn--ghost-dark:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }

.t-btn--danger {
  background: transparent;
  color: var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger);
  font-size: 15px;
  padding: 11px 20px;
}
.t-btn--danger:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--danger); }

.t-btn--row { flex: 1; margin-top: 0; }

/* Bare icon button (card close ×, map back arrow) */
.t-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}

/* Inline SVG icons — glyphs like ↩ get emoji presentation on iOS, so every
   piece of UI chrome that isn't deliberately an emoji uses a drawn icon. */
.t-svg-icon {
  width: 1em;
  height: 1em;
  display: block;
}
.t-minimise-btn .t-svg-icon { width: 16px; height: 16px; }
.t-icon-btn     .t-svg-icon { width: 22px; height: 22px; }
.t-minimise-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════ SEGMENTED OPTIONS ("paving stones") */

.t-field { margin-bottom: 16px; }

.t-seg {
  display: flex;
  gap: 7px;
  justify-content: center;
}

.t-opt {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge), inset 0 0 0 1px var(--edge);
  transition: transform .1s, box-shadow .1s, background .12s, color .12s;
}
.t-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge), inset 0 0 0 1px var(--edge); }

.t-opt.is-selected {
  background: var(--mud);
  color: #fff;
  box-shadow: 0 3px 0 var(--mud-deep), inset 0 0 0 1px var(--mud-deep);
}

.t-opt__sub {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 3px;
}
.t-opt.is-selected .t-opt__sub { color: var(--parchment-dim); }

.t-select {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  min-width: 170px;
  text-align: center;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--edge), inset 0 0 0 1px var(--edge);
  outline: none;
}

/* Per-player path style row */
.t-player-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 7px;
}
.t-player-row .player-dot { box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 0 0 1.5px rgba(0,0,0,.12); }
.t-player-row .t-player-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-soft);
  min-width: 22px;
}
.t-player-row .t-select { min-width: 0; flex: 0 1 150px; font-size: 13px; padding: 8px 10px; }

/* ═══════════════════════════════════ RESULTS */

.t-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 30px;
  line-height: 1;
  margin: 0 0 14px;
}
.t-star--on  { color: var(--bounty); text-shadow: 0 2px 0 var(--bounty-deep); }
.t-star--off { color: var(--edge); }
.t-card--boss .t-star--off,
.t-card--gold .t-star--off { color: rgba(255,255,255,.22); }

.t-result {
  margin-bottom: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edge);
  overflow: hidden;
}
.t-result--winner {
  background: var(--bounty);
  box-shadow: inset 0 0 0 1px var(--bounty-deep);
}
.t-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-weight: 600;
  font-size: 15px;
}
.t-result__who { display: flex; align-items: center; gap: 8px; }
.t-result__score { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.t-result__detail {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .4px;
  color: var(--ink-soft);
  padding: 0 12px 8px;
  text-align: right;
}
.t-result--winner .t-result__detail { color: var(--mud-deep); }

.t-best {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mud);
  opacity: .75;
  margin: -6px 0 10px;
}
.t-best__stars { font-size: 13px; letter-spacing: 2px; color: var(--bounty-deep); }
.t-card--boss .t-best,
.t-card--gold .t-best { color: rgba(255,255,255,.7); }

.t-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bounty-deep);
  border: 1px solid var(--bounty-deep);
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 10px;
}

/* Star scoring key on the campaign briefing */
.t-star-key {
  text-align: left;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.t-star-key > div { margin-bottom: 6px; }
.t-star-key > div:last-child { margin-bottom: 0; }
.t-star-key__stars {
  color: var(--bounty-deep);
  font-size: 14px;
  letter-spacing: 1px;
  margin-right: 4px;
}

/* Boss briefing */
.t-boss-crest {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
}
.t-ability {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,107,53,.35);
}
.t-ability__icon { font-size: 30px; line-height: 1; }
.t-ability__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: #FF6B35;
  margin: 5px 0 3px;
}
.t-ability__text { font-size: 13.5px; line-height: 1.45; color: var(--parchment-dim); }

.t-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.t-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-soft);
  padding: 6px 8px;
  border-bottom: 2px solid var(--edge);
}
.t-table td { padding: 9px 8px; border-bottom: 1px solid var(--edge); }
.t-table tfoot td {
  border-top: 2px solid var(--edge);
  border-bottom: none;
  font-weight: 700;
  padding-top: 11px;
}
.t-table .col-rank  { text-align: left; font-weight: 600; }
.t-table .col-stars { text-align: center; color: var(--bounty-deep); font-weight: 600; }
.t-table .col-score { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-table tr.is-locked { opacity: .4; }
.t-rank-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
/* Dark-card variants of the table */
.t-card--gold .t-table th,
.t-card--gold .t-table td { border-color: rgba(255,255,255,.14); }
.t-card--gold .t-table th,
.t-card--gold .t-table .col-score { color: var(--parchment-dim); }
.t-card--gold .t-table .col-stars { color: var(--bounty); }

/* Minimise (▼) control pinned to the top-right of a results card */
.t-minimise-bar {
  position: sticky;
  top: 0;
  height: 0;
  display: flex;
  justify-content: flex-end;
  z-index: 2;
}
.t-minimise-btn {
  width: 32px; height: 32px;
  border: none;
  border-radius: 10px;
  background: var(--parchment-dim);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.t-card--boss .t-minimise-btn,
.t-card--gold .t-minimise-btn {
  background: rgba(255,255,255,.14);
  color: #fff;
  box-shadow: none;
}

/* ═══════════════════════════════════ HOW TO PLAY (chrome only — art and
   copy are unchanged) */

.t-htp-head {
  position: relative;
  min-height: 24px;
}
.t-htp-count {
  position: absolute;
  top: -4px; left: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
  line-height: 24px;
}
.t-htp-close {
  position: absolute;
  top: -10px; right: -6px;
}
.t-htp-art { display: flex; justify-content: center; margin: 4px 0 12px; }
.t-btn-row { display: flex; gap: 9px; justify-content: center; margin-top: 12px; }

/* ═══════════════════════════════════ WORLD MAP */

#campaign-map-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--forest);
  overflow: hidden;
}

.t-map-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.t-map-container { position: relative; max-width: 448px; margin: 0 auto; }
.t-map-image { width: 100%; display: block; }
.t-map-layer { position: absolute; inset: 0; }

.t-rank-label {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  pointer-events: none;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(12,26,14,.8);
  border: 2px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  white-space: nowrap;
  transition: opacity .3s, border-color .3s;
}

.t-level-node {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  font-family: var(--display);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  cursor: pointer;
  transition: transform .1s;
}
.t-level-node.is-locked { cursor: default; }
.t-level-node__stars {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--bounty);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.t-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  flex-shrink: 0;
  background: var(--forest-deep);
  border-top: 2px solid var(--meadow-dark);
  box-shadow: 0 -8px 20px rgba(0,0,0,.6);
  min-height: 54px;
}
.t-map-footer__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  color: #fff;
}
.t-stars-pill {
  border: none;
  border-radius: 999px;
  background: var(--bounty);
  color: var(--mud-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 15px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--bounty-deep);
  transition: transform .1s, box-shadow .1s;
}
.t-stars-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bounty-deep); }

/* ═══════════════════════════════════ TRANSIENT LAYERS */

#turn-popup {
  position: fixed;
  top: 20%; left: 50%;
  transform: translateX(-50%);
  background: var(--parchment);
  color: var(--ink);
  padding: 14px 26px;
  border-radius: 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 0 var(--edge), 0 20px 40px -18px rgba(0,0,0,.7);
  opacity: 1;
  transition: opacity .3s ease;
}

#phase-banner {
  position: fixed;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 12vw, 84px);
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 3px 0 var(--meadow-dark), 0 8px 30px rgba(0,0,0,.85);
}

.score-float {
  position: fixed;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.45);
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: scoreFloatRise 1200ms ease-out both;
}
.score-float--gain { color: var(--meadow-light); }
.score-float--loss { color: #FF6B5C; }

/* ═══════════════════════════════════ KEYFRAMES */

@keyframes scoreFloatRise {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  12%  { opacity: 1; transform: translate(-50%, -6px) scale(1.12); }
  24%  { transform: translate(-50%, -12px) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

@keyframes phaseBannerFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  24%  { transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes bossGlow {
  0%, 100% { box-shadow: 0 0 8px 3px rgba(220, 40, 40, 0.6); }
  50%      { box-shadow: 0 0 16px 6px rgba(220, 40, 40, 0.9); }
}

@keyframes currentLevel {
  0%, 100% { box-shadow: 0 0 10px 4px rgba(232, 184, 74, 0.55); }
  50%      { box-shadow: 0 0 20px 8px rgba(232, 184, 74, 0.9); }
}

.t-level-node--boss    { animation: bossGlow 2s ease-in-out infinite; }
.t-level-node--current { animation: currentLevel 1.5s ease-in-out infinite; }

/* ═══════════════════════════════════ RESPONSIVE */

@media (max-width: 400px) {
  .player-score { padding: 5px 7px; font-size: 12px; gap: 4px; }
  .score-value { font-size: 14px; }
  .bridge-count { font-size: 10px; }
  #turn-indicator { letter-spacing: .8px; }
  .action-btn { padding: 11px 22px; font-size: 16px; }
  #ui-panel { padding: 6px 8px; gap: 6px; }
  .t-card { padding: 20px 16px; }
  .t-btn { font-size: 16px; padding: 13px 18px; }
}

/* Narrow phones: keep the pinned side buttons clear of Undo / Confirm */
@media (max-width: 360px) {
  #action-buttons { gap: 8px; }
  .action-btn { padding: 11px 16px; font-size: 15px; }
  .t-stone-btn--pinned { min-width: 34px; padding: 8px 6px; }
  .t-stone-btn--pinned .t-svg-icon { width: 16px; height: 16px; }
  .t-stone-btn--pinned.is-left  { left: 2px; }
  .t-stone-btn--pinned.is-right { right: 2px; }
}

@media (max-height: 700px) {
  .t-title--hero { font-size: clamp(40px, 12vw, 60px); }
  .t-btn { margin-top: 7px; padding: 12px 20px; }
}

/* Landscape warning */
@media (orientation: landscape) and (max-height: 500px) {
  #game-container::before {
    content: 'Please rotate to portrait mode';
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--forest-deep);
    color: var(--parchment-dim);
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    z-index: 1000;
  }
}