:root {
  --field: #5aa84a;
  --field-edge: #3f7d33;
  --grass: #6dbb5a;
  --wood: #9a6434;
  --wood-dark: #5e3b1c;
  --p1: #3a9dff;
  --p2: #ff6b4a;
  --H: min(calc(100vw - 32px), 520px);
  /* Square board, sized from the height first so it fits short phones. */
  --B: min(calc(100vw - 32px), 480px, calc(100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
}
body {
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

.app {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);
}

/* Header */
.top { width: var(--H); display: flex; align-items: center; gap: 8px; }
.brand { display: flex; flex-direction: column; margin-right: auto; line-height: 1.05; min-width: 0; }
.brand > a { font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: inherit; text-decoration: none; white-space: nowrap; }
.brand span a { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Players + turn */
.hud {
  margin-top: auto; width: var(--H); display: grid; align-items: center; gap: 10px 8px;
  grid-template-columns: 1fr 1fr; grid-template-areas: 'p1 p2' 'turn turn';
}
.hud .p1 { grid-area: p1; }
.hud .p2 { grid-area: p2; }
.hud .turn { grid-area: turn; justify-self: center; }
.player { display: flex; align-items: center; gap: 10px; min-width: 0; opacity: 0.55; transition: opacity 0.2s; }
.player.active { opacity: 1; }
.player.p2 { justify-content: flex-end; text-align: right; }
.pmeta { min-width: 0; }
.pmeta label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmeta output { display: block; font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.chip {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--pc);
  transition: transform 0.35s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.p1 .chip { --pc: var(--p1); background: var(--p1); }
.p2 .chip { --pc: var(--p2); background: var(--p2); }
.player.active .chip { transform: scale(1.1); }
.chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.turn {
  font-weight: 800; font-size: 15px; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--paper-2); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.turn.turn1 { background: var(--p1); color: #fff; }
.turn.turn2 { background: var(--p2); color: #fff; }
.turn.flip { animation: flip 0.42s cubic-bezier(0.3, 1.45, 0.5, 1); }
@keyframes flip { 0% { transform: scale(0.6); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }

/* Board */
.board-wrap { width: var(--B); flex: none; touch-action: manipulation; }
.board {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 6px 0 var(--field-edge)) drop-shadow(0 16px 18px rgba(31, 29, 36, 0.18));
}
.field { fill: var(--field); }
.grass { fill: var(--grass); }
.claim { opacity: 0; transform-box: fill-box; transform-origin: center; }
.claim.own1 { fill: var(--p1); opacity: 0.88; }
.claim.own2 { fill: var(--p2); opacity: 0.88; }
.claim.pop { animation: claim 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes claim { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); } }
.val { font: 800 19px 'Bricolage Grotesque', system-ui, sans-serif; fill: rgba(255, 255, 255, 0.82); }
.val.rich { fill: #fff6c2; }
.chip-ring.own1 { fill: var(--p1); stroke: #fff; stroke-width: 3; }
.chip-ring.own2 { fill: var(--p2); stroke: #fff; stroke-width: 3; }
.chip-letter { font: 800 15px 'Bricolage Grotesque', system-ui, sans-serif; fill: #fff; text-anchor: middle; }

.guide { stroke: rgba(255, 255, 255, 0.42); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.guide.off { display: none; }
.fence { stroke: var(--wood); stroke-width: 9; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fence.on { opacity: 1; }
.fence.on.last { stroke: #c4874c; }
.fence.h.grow { animation: growX 0.42s cubic-bezier(0.3, 1.45, 0.5, 1) both; }
.fence.v.grow { animation: growY 0.42s cubic-bezier(0.3, 1.45, 0.5, 1) both; }
@keyframes growX { 0% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } }
@keyframes growY { 0% { transform: scaleY(0.1); } 100% { transform: scaleY(1); } }
.preview { stroke-width: 9; stroke-linecap: round; opacity: 0; pointer-events: none; }
.preview.show { opacity: 0.55; }
.preview.own1 { stroke: var(--p1); }
.preview.own2 { stroke: var(--p2); }
.post { fill: var(--wood-dark); }
.post-top { fill: #b07a45; }
.hit { fill: transparent; cursor: pointer; }
.hit.done { cursor: default; }

.stray { pointer-events: none; }
.stray.ready { transition: transform 0.6s cubic-bezier(0.3, 1.45, 0.5, 1); }
.stray.gone { opacity: 0; transition: opacity 0.4s; }
.stray-bob { animation: hop 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.stray-ring { fill: rgba(255, 255, 255, 0.22); stroke: #fff; stroke-width: 3; stroke-dasharray: 6 6; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 55% { transform: translateY(0) scale(1.04, 0.96); } }

.foot { margin: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; }

.float-pts {
  position: fixed; z-index: 40; pointer-events: none; transform: translate(-50%, -50%);
  font-weight: 800; font-size: 24px; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 var(--ink), 0 0 10px rgba(0, 0, 0, 0.4);
  animation: rise 0.95s ease-out forwards;
}
@keyframes rise { 0% { opacity: 0; margin-top: 8px; } 20% { opacity: 1; } 100% { opacity: 0; margin-top: -42px; } }

#confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

.modes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.over-photo { margin: 14px auto 0; background: #fff; padding: 8px 8px 10px; border-radius: 12px; transform: rotate(-2deg); max-width: 78%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); }
.over-photo img { display: block; width: 100%; max-height: 36dvh; object-fit: cover; border-radius: 6px; }
.over-photo figcaption { margin-top: 8px; font-weight: 700; }
.over-scores { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 6px; }
.over-scores label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.over-scores b { font-size: 36px; font-weight: 800; }
#over-switch { margin-top: 10px; }

@media (min-width: 640px) {
  .hud { grid-template-columns: 1fr auto 1fr; grid-template-areas: 'p1 turn p2'; }
  .board-wrap { --B: min(480px, calc(100dvh - 210px)); }
}

@media (prefers-reduced-motion: reduce) {
  .fence, .claim, .stray-bob, .turn, .float-pts { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .stray.ready { transition: none; }
}