/* ==================== Zombie Capture the Flag — styles ==================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The freeze ring is a conic-gradient driven by --p. Declaring it as a real
   custom property (rather than just setting a variable) is what lets the
   browser animate it smoothly between the ten-times-a-second updates the
   countdown writes. It has to inherit: game.js writes --p on #freeze, and the
   ring that draws it is a child of that. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --ground: #1f3a2c;
  --ground-2: #24422f;
  --ink: #eaf7ec;
  --team: #e8483a;   /* replaced with your fort's color the moment you pick one */
}

/* touch-action is the only thing that actually stops a phone zooming the page.
   The viewport meta says user-scalable=no, but iOS has ignored that for years.
   "manipulation" kills double-tap-to-zoom without killing panning, so a card
   taller than the screen can still be scrolled. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  font-family: "Baloo 2", system-ui, "Segoe UI", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #29456b 0%, #1b3a33 42%, #0c1a16 100%);
  transition: background 0.5s ease;
}

/* Everything wobbles for half a second when they get you. */
#game.shake { animation: shake 0.5s ease; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 4px); }
}

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

#hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.4vw, 22px);
  padding: clamp(5px, 1.6vw, 12px) clamp(8px, 2vw, 16px);
  padding-top: calc(clamp(5px, 1.6vw, 12px) + env(safe-area-inset-top));
  flex-wrap: wrap;
}

.hud-item { flex: 0 0 auto; text-align: center; }

.stat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(12px, 3vw, 18px);
  font-weight: 700;
  color: #cfe8d6;
  white-space: nowrap;
}

.stat-label b { font-size: 1.15em; color: #fff; }
.stat-label .goal { color: #8fb69c; font-size: 0.95em; }

/* The team name is written in your own fort's color. */
#team-name { color: var(--team); }

.stat-label b.bump { display: inline-block; animation: bump 0.3s ease; }
@keyframes bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* On a narrow phone the words go and the emoji carry the meaning on their own,
   so the whole bar still fits on one line. */
@media (max-width: 430px) {
  .hud-word { display: none; }
}

/* --- your nine brains --- */

#brains {
  display: flex;
  gap: 1px;
  font-size: clamp(11px, 2.8vw, 16px);
  line-height: 1;
}

.brain { transition: opacity 0.2s ease; }
.brain.gone { opacity: 0.45; filter: grayscale(0.6); }

/* The one being eaten right now gets bitten out of the row. */
.brain.eating { animation: eaten 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes eaten {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.9) rotate(-18deg); }
  60% { transform: scale(0.6) rotate(14deg); }
  100% { transform: scale(1) rotate(0); }
}

#quit-btn {
  position: relative;
  z-index: 65;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 8.5vw, 44px);
  height: clamp(34px, 8.5vw, 44px);
  padding: 0;
  font-size: clamp(15px, 4.2vw, 21px);
  line-height: 1;
  background: linear-gradient(180deg, #3d5b48, #22382c);
  border: 2px solid #6f9c7e;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 0 #16241c;
}

#quit-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #16241c; }

/* ------------------------------ the bandana ------------------------------ */

/* There is no bandana emoji, so it's drawn here: a knot at the top and the
   cloth hanging down in a point under it. Every one of them is the same shape
   in a different color, which is the whole point — the color is which fort it
   belongs to, and it has to match that fort exactly. */
.bandana {
  position: relative;
  display: inline-block;
  width: var(--bw, 16px);
  height: var(--bw, 16px);
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.bandana::before {
  content: "";
  position: absolute;
  inset: 26% 4% 2% 4%;
  background: linear-gradient(155deg, var(--bc, #e8483a), var(--bd, #a32519));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.bandana::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2%;
  width: 46%;
  height: 34%;
  transform: translateX(-50%);
  background: var(--bc, #e8483a);
  border-radius: 50% 50% 35% 35%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.bandana.chip { --bw: clamp(13px, 3.4vw, 19px); }
.bandana.big { --bw: clamp(26px, 7vw, 34px); }

/* --------------------------- what just happened --------------------------- */

#say {
  flex: 0 0 auto;
  align-self: center;
  z-index: 30;
  max-width: 94%;
  margin-bottom: clamp(3px, 1vw, 7px);
  padding: clamp(4px, 1.2vw, 9px) clamp(11px, 3vw, 20px);
  font-size: clamp(12px, 3.2vw, 18px);
  font-weight: 700;
  color: #dff3e4;
  background: rgba(12, 30, 22, 0.82);
  border: 2px solid #4d7a5d;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#say.pop { animation: sayPop 0.4s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes sayPop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

#say.urgent {
  color: #ffe07a;
  border-color: #ffb020;
  background: rgba(60, 22, 10, 0.9);
}

/* -------------------------------- the forest -------------------------------- */

#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

/* JS sets the pixel size and --tile; everything inside is measured off those. */
#board {
  position: relative;
  flex: 0 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #14261c, 0 12px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

#cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 11), 1fr);
  grid-template-rows: repeat(var(--rows, 11), 1fr);
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--tile, 30px) * 0.62);
  line-height: 1;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

/* A checkerboard so you can count squares — how far a zombie can hear you is
   measured in them, so they have to be countable at a glance. */
.cell:nth-child(odd) { background: var(--ground-2); }

.cell.tree {
  background: #16281d;
  cursor: not-allowed;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

/* A bush is the one square nothing can notice you on, so it glows a little —
   that glow is the game telling you where it's safe to stand. */
.cell.bush {
  background: radial-gradient(circle at 50% 55%, #2f6b45 0%, #1e4530 70%);
  box-shadow: inset 0 0 0 2px rgba(126, 235, 160, 0.35);
}

/* --- the four forts --- */

.cell.fort {
  background: linear-gradient(180deg, var(--bc), var(--bd));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 12px rgba(0, 0, 0, 0.4);
}

/* The battlements along the top of the wall. */
.cell.fort::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 26%;
  background: repeating-linear-gradient(90deg, var(--bd) 0 22%, rgba(0, 0, 0, 0) 22% 36%);
}

/* Your own fort: a white ring that breathes, and a little house, because this
   is the one square in the whole forest where nothing can touch you. */
.cell.fort.home {
  box-shadow: inset 0 0 0 3px #fff, 0 0 16px rgba(255, 255, 255, 0.5);
  animation: homeGlow 2.2s ease-in-out infinite;
}

.cell.fort.home::after {
  content: "🏠";
  position: absolute;
  bottom: 2%;
  font-size: calc(var(--tile, 30px) * 0.4);
  line-height: 1;
}

@keyframes homeGlow {
  0%, 100% { box-shadow: inset 0 0 0 3px #fff, 0 0 10px rgba(255, 255, 255, 0.35); }
  50% { box-shadow: inset 0 0 0 3px #fff, 0 0 22px rgba(255, 255, 255, 0.7); }
}

/* ---------------------------- everything that moves ---------------------------- */

/* One layer above the squares holding you, your team, the zombies and the four
   bandanas. It never eats a tap — your finger always reaches the square
   underneath, even when somebody is standing on it. */
#tokens {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.token {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tile, 30px) * 0.9);
  height: calc(var(--tile, 30px) * 0.9);
  font-size: calc(var(--tile, 30px) * 0.66);
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: left var(--move, 300ms) linear, top var(--move, 300ms) linear;
}

/* You and your three teammates. */
.kid {
  z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

/* The three behind you are a touch smaller and dimmer, so at a glance you can
   always tell which one of the four you're steering. */
.kid:not(.leader) {
  font-size: calc(var(--tile, 30px) * 0.54);
  opacity: 0.82;
  z-index: 3;
}

.kid.leader { z-index: 5; }

/* Running leans you forward and bounces you along. Sneaking is small and low. */
.kid.leader.running { animation: run 0.32s ease-in-out infinite; }
@keyframes run {
  0%, 100% { transform: translate(-50%, -50%) rotate(-7deg); }
  50% { transform: translate(-50%, -58%) rotate(7deg); }
}

.zombie {
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  animation: shuffle 1.6s ease-in-out infinite;
}

@keyframes shuffle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); }
  50% { transform: translate(-50%, -50%) rotate(5deg); }
}

/* One that has noticed you. It goes green and jitters, and it is the only thing
   on the board doing either, so you can pick it out instantly. */
.zombie.hunting {
  z-index: 6;
  filter: drop-shadow(0 0 8px #7be06a) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  animation: hunt 0.4s ease-in-out infinite;
}

@keyframes hunt {
  0%, 100% { transform: translate(-50%, -50%) scale(1.12) rotate(-8deg); }
  50% { transform: translate(-50%, -50%) scale(1.12) rotate(8deg); }
}

/* --- the bandanas on the board --- */

.token.bandana {
  --bw: calc(var(--tile, 30px) * 0.55);
  width: var(--bw);
  height: var(--bw);
  z-index: 7;
  transition: left var(--move, 300ms) linear, top var(--move, 300ms) linear,
              transform 0.3s ease;
  transform: translate(-50%, -50%) translateY(calc(var(--tile, 30px) * -0.18));
}

/* On somebody's shoulder: bigger, and it swings as you walk. */
.token.bandana.carried {
  --bw: calc(var(--tile, 30px) * 0.5);
  transform: translate(-50%, -50%) translate(calc(var(--tile, 30px) * 0.3), calc(var(--tile, 30px) * -0.3));
  animation: flap 0.5s ease-in-out infinite;
}

@keyframes flap {
  0%, 100% { rotate: -14deg; }
  50% { rotate: 14deg; }
}

/* Home for good: parked in a row along the top of your fort. --slot is which
   place in the row it has, written by ui.js. */
.token.bandana.home {
  --bw: calc(var(--tile, 30px) * 0.34);
  transform: translate(-50%, -50%)
             translate(calc(var(--slot, 0) * var(--tile, 30px)), calc(var(--tile, 30px) * -0.42));
}

/* ------------------------------ SNEAK / RUN ------------------------------ */

#dock {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.6vw, 12px) 10px calc(clamp(8px, 2vw, 14px) + env(safe-area-inset-bottom));
}

.mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: clamp(150px, 44vw, 210px);
  padding: clamp(9px, 2.4vw, 14px) clamp(16px, 4vw, 26px);
  font-family: inherit;
  font-size: clamp(17px, 4.4vw, 24px);
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 99px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
}

.mode-btn.sneaking {
  background: linear-gradient(180deg, #3f7a58, #235138);
  box-shadow: 0 5px 0 #16311f, 0 8px 16px rgba(0, 0, 0, 0.35);
}

.mode-btn.running {
  background: linear-gradient(180deg, #e8934a, #c9531b);
  box-shadow: 0 5px 0 #7d2f0c, 0 8px 16px rgba(0, 0, 0, 0.35);
  animation: loud 0.6s ease-in-out infinite;
}

@keyframes loud {
  0%, 100% { border-color: rgba(255, 255, 255, 0.6); }
  50% { border-color: #ffd23f; }
}

.mode-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #16311f; }

#mode-emoji { font-size: 1.2em; }

/* --------------------------------- FREEZE --------------------------------- */

/* The one moment the whole game is about. While it's up the rule is simple:
   touch anything at all and they have you.

   It's parked along the BOTTOM, over the SNEAK button — which is the one thing
   on the screen you're not allowed to use anyway — rather than in the middle
   where it would cover the very thing you need to watch: the zombie standing
   next to you, and how much of the forest there is between you and it. */
#freeze {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(8px, 2.4vh, 22px) + env(safe-area-inset-bottom));
  z-index: 55;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 18px);
  max-width: 96vw;
  padding: clamp(8px, 2.4vw, 14px) clamp(14px, 4vw, 24px);
  transform: translateX(-50%) scale(0.8);
  background: rgba(8, 26, 16, 0.94);
  border: 4px solid #7be06a;
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(123, 224, 106, 0.55);
  pointer-events: none;
  text-align: left;
}

#freeze.show {
  display: flex;
  animation: freezeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes freezeIn {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

.freeze-ring {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 15vw, 76px);
  height: clamp(52px, 15vw, 76px);
  border-radius: 50%;
  background: conic-gradient(#7be06a calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.14) 0);
  transition: --p 0.12s linear;
}

.freeze-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  background: #081a10;
  border-radius: 50%;
}

#freeze-num {
  position: relative;
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 800;
  color: #cfffd6;
}

.freeze-words {
  font-size: clamp(17px, 5.2vw, 27px);
  font-weight: 800;
  color: #b6ffb0;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.freeze-words small {
  display: block;
  margin-top: 2px;
  font-size: 0.52em;
  font-weight: 700;
  color: #ffe07a;
  letter-spacing: 0;
}

/* You've used up your one free noise. The panel stays yellow for the rest of
   this freeze, so "one more and they've got you" is something you can see and
   not just something you were told. */
#freeze.warned {
  border-color: #ffc32b;
  background: rgba(44, 28, 6, 0.94);
  box-shadow: 0 0 40px rgba(255, 195, 43, 0.6);
}

#freeze.warned .freeze-ring { background: conic-gradient(#ffc32b calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.14) 0); }
#freeze.warned .freeze-ring::before { background: #2c1c06; }
#freeze.warned #freeze-num { color: #ffe9a8; }
#freeze.warned .freeze-words { color: #ffd76a; }

#freeze.jolt { animation: jolt 0.45s ease; }
@keyframes jolt {
  0%, 100% { transform: translateX(-50%) scale(1); }
  25% { transform: translateX(-50%) scale(1.12) rotate(-2deg); }
  60% { transform: translateX(-50%) scale(1.06) rotate(2deg); }
}

/* A 🤫 over your own head for as long as you're frozen. The panel is down at
   the bottom of the screen; this is up on the board where you're actually
   looking, and it points at the exact person who mustn't move. */
#game.frozen .kid.leader::after {
  content: "🤫";
  position: absolute;
  bottom: 86%;
  left: 50%;
  /* Centered with a margin rather than a translate, because the transform on
     this thing belongs to the bobbing animation. */
  margin-left: -0.42em;
  font-size: 0.85em;
  line-height: 1;
  animation: hush 1.1s ease-in-out infinite;
}

@keyframes hush {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12%) scale(1.14); }
}

/* The glow round the edge of the screen while you're frozen, and the red flash
   when a brain gets eaten. Both live on one element that never eats a tap. */
#veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#game.frozen #veil {
  opacity: 1;
  box-shadow: inset 0 0 clamp(40px, 14vw, 90px) clamp(8px, 3vw, 22px) rgba(123, 224, 106, 0.45);
  animation: veilPulse 1.3s ease-in-out infinite;
}

@keyframes veilPulse {
  0%, 100% { box-shadow: inset 0 0 60px 10px rgba(123, 224, 106, 0.35); }
  50% { box-shadow: inset 0 0 110px 30px rgba(123, 224, 106, 0.6); }
}

#veil.caught {
  opacity: 1;
  background: rgba(190, 20, 30, 0.45);
  animation: caughtFlash 0.9s ease-out forwards;
}

@keyframes caughtFlash {
  0% { background: rgba(255, 40, 60, 0.6); }
  100% { background: rgba(255, 40, 60, 0); }
}

/* --------------------------------- banner --------------------------------- */

#banner {
  position: fixed;
  left: 50%;
  top: 30%;
  z-index: 56;
  padding: 10px 22px;
  font-size: clamp(19px, 5.4vw, 30px);
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
  border-radius: 18px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner.good { background: linear-gradient(180deg, #58c46a, #24803a); box-shadow: 0 6px 0 #14501f; }
#banner.bad { background: linear-gradient(180deg, #e0533f, #98200f); box-shadow: 0 6px 0 #5c1207; }
#banner.warn { background: linear-gradient(180deg, #ffc32b, #cf8a00); box-shadow: 0 6px 0 #8a5b00; color: #3d2600; }

/* ------------------------------- particles -------------------------------- */

#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Above the cards (60), so the win fireworks burst over the card. It never
     swallows taps — pointer-events is off. */
  z-index: 70;
}

/* --------------------------------- cards ---------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 20, 14, 0.62);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

.overlay.show { display: flex; }
.overlay.win { background: rgba(10, 45, 22, 0.62); }
.overlay.lose { background: rgba(50, 10, 10, 0.66); }

.card-box {
  background: #f4fbf5;
  border-radius: 26px;
  border: 6px solid #4d7a5d;
  box-shadow: 0 14px 0 rgba(0, 0, 0, 0.35), 0 22px 40px rgba(0, 0, 0, 0.45);
  padding: clamp(18px, 4.6vw, 34px);
  max-width: 460px;
  width: 100%;
  text-align: center;
  animation: cardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardIn {
  from { transform: scale(0.6) translateY(30px); opacity: 0; }
}

.overlay.win .card-box { border-color: #58c46a; }
.overlay.lose .card-box { border-color: #b8412f; }

.card-emoji {
  font-size: clamp(38px, 10vw, 60px);
  line-height: 1;
  margin-bottom: 4px;
}

.card-box h1 {
  margin: 4px 0 10px;
  font-size: clamp(23px, 6.4vw, 38px);
  font-weight: 800;
  color: #1f5c33;
  letter-spacing: 1px;
}

.overlay.win .card-box h1 { color: #1d7a35; }
.overlay.lose .card-box h1 { color: #a52d1a; }

.card-box p {
  margin: 7px 0;
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: 500;
  color: #274a34;
}

.card-box p.small { font-size: clamp(12px, 3vw, 15px); color: #64806e; }
.card-box p.ask { margin-top: 14px; font-weight: 800; color: #1f5c33; }
.card-box p.note { font-weight: 800; color: #c26a00; }

.card-box .new-best {
  font-weight: 800;
  color: #e08600;
  font-size: clamp(16px, 4.2vw, 21px);
}

.big-btn {
  margin-top: 14px;
  font-family: inherit;
  font-size: clamp(19px, 4.8vw, 26px);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #58c46a, #24803a);
  border: none;
  border-radius: 99px;
  padding: 13px 32px;
  cursor: pointer;
  box-shadow: 0 6px 0 #14501f, 0 10px 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #14501f; }

.text-btn {
  display: block;
  margin: 12px auto 0;
  font-family: inherit;
  font-size: clamp(13px, 3.2vw, 16px);
  font-weight: 700;
  color: #5c7a66;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* --- naming your team, against the clock --- */

.name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

#team-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font-family: inherit;
  font-size: clamp(16px, 4.4vw, 22px);
  font-weight: 800;
  text-align: center;
  color: #1f5c33;
  background: #fff;
  border: 3px solid #8fc79f;
  border-radius: 16px;
  outline: none;
  /* The one place in the game where typing is allowed, so the page-wide
     no-selecting rule has to be lifted for it. */
  user-select: text;
  -webkit-user-select: text;
}

#team-input:focus { border-color: #58c46a; }
#team-input.rolled { animation: bump 0.3s ease; }

.dice-btn {
  flex: 0 0 auto;
  width: clamp(42px, 12vw, 52px);
  height: clamp(42px, 12vw, 52px);
  font-size: clamp(20px, 5.5vw, 26px);
  background: linear-gradient(180deg, #ffd97a, #f2a20c);
  border: 3px solid #fff;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 #b9700a;
}

.dice-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b9700a; }

.card-box p.clock {
  margin-top: 10px;
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 800;
  color: #5c7a66;
}

.card-box p.clock span {
  display: inline-block;
  min-width: 1.6em;
  font-size: 1.5em;
  color: #1f5c33;
}

/* Under five seconds it goes red and starts thumping. */
.card-box p.clock.hurry { color: #b8412f; }
.card-box p.clock.hurry span {
  color: #e02b12;
  animation: bump 0.5s ease-in-out infinite;
}

/* --- picking your fort --- */

.fort-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.fort-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(180deg, var(--bc), var(--bd));
  border: 3px solid #fff;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}

.fort-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }

.fort-name {
  font-size: clamp(15px, 4vw, 19px);
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.fort-where {
  font-size: clamp(11px, 2.9vw, 14px);
  font-weight: 700;
  opacity: 0.9;
}