/* ============================================================================
   The track. Squares 0..31 in every lane; a token sits on square --p and the
   farmer's danger band covers squares 0..--f (both set by board-view.js).
   Horizontal by default; phones in portrait turn it to run bottom to top.
   ============================================================================ */
.board{
  --n:32;
  display:flex;flex-direction:column;justify-content:center;gap:6px;width:100%;min-height:0;min-width:0;
}
.row{display:flex;align-items:stretch;flex:1 1 0;min-height:0;min-width:0}
.lane{max-height:92px}

/* ---------- Lane labels ---------- */
.label{
  flex:0 0 var(--label-w);display:flex;align-items:center;gap:6px;padding-right:8px;min-width:0;
}
.label .who{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.label .nm{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label .st{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.me .nm{text-decoration:underline;text-decoration-color:var(--pig);text-decoration-thickness:3px;text-underline-offset:3px}
.row.current .label .nm{color:var(--barn-dark)}
.row.stuck .st{color:var(--mud);font-weight:700}
.row.escaped .st{color:var(--grass-dark);font-weight:700}
.row.out .label{opacity:.5}
.row.out .st{color:var(--barn-dark);font-weight:700}
.farmer-lane .nm{color:var(--barn-dark)}

/* ---------- Track and squares ---------- */
.track{
  position:relative;flex:1 1 auto;display:flex;min-width:0;
  background:var(--dirt);border:2px solid var(--ink);border-radius:10px;
}
.cell{flex:1 1 0;min-width:0;position:relative;border-right:1px solid rgba(74,47,34,.14)}
.cell:last-child{border-right:none}
.cell.odd{background:rgba(255,255,255,.1)}
.cell.start{background:repeating-linear-gradient(45deg,#b58a5c 0 5px,#a67c52 5px 10px);border-radius:8px 0 0 8px}
.cell.fence{
  background:
    linear-gradient(180deg,transparent 22%,#8a5a33 22% 32%,transparent 32% 64%,#8a5a33 64% 74%,transparent 74%),
    repeating-linear-gradient(90deg,#b07a47 0 5px,transparent 5px 9px),
    var(--grass);
  border-radius:0 8px 8px 0;
}
.cell.mud{background:radial-gradient(ellipse at 50% 60%,#8b5e37 0 45%,#a27249 46% 100%)}
.cell.trough{background:repeating-linear-gradient(0deg,#c49a63 0 6px,#b6895a 6px 12px)}
.cell.hay{background:repeating-linear-gradient(60deg,#f0cf78 0 4px,#e2b84f 4px 8px)}

/* The farmer's lane also carries the square numbers and trap icons, right
   over the dirt and the trap cells, so every other lane lines up against it.
   A light outline (numbers) or a paper disc (icons) keeps them readable
   whatever the cell underneath: mud and hay both run close to their own
   icon's colors. */
.farmer-lane .cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:11px;font-weight:700;color:var(--ink);
  text-shadow:1px 0 var(--paper),-1px 0 var(--paper),0 1px var(--paper),0 -1px var(--paper);
}
.farmer-lane .cell .icon{
  width:20px;height:20px;flex:none;padding:2px;
  background:var(--paper);border-radius:50%;box-sizing:content-box;
}

/* The farmer's own track: no dirt, trap or stripe texture, just white
   cells (same borders as every other lane). */
.farmer-lane .track{background:#fff}
.farmer-lane .cell,
.farmer-lane .cell.odd,
.farmer-lane .cell.start,
.farmer-lane .cell.fence,
.farmer-lane .cell.mud,
.farmer-lane .cell.trough,
.farmer-lane .cell.hay{background:#fff}

/* ---------- Farmer's reach ---------- */
.danger{
  position:absolute;left:0;top:0;bottom:0;pointer-events:none;z-index:1;
  width:calc((var(--f, 0) + 1) * 100% / var(--n));
  background:repeating-linear-gradient(135deg,rgba(188,71,73,.32) 0 7px,rgba(188,71,73,.16) 7px 14px);
  border-right:3px solid var(--barn);border-radius:8px 0 0 8px;
  transition:width var(--fstep, 110ms) linear;
}
.board.tractor .danger{background:repeating-linear-gradient(135deg,rgba(143,47,49,.45) 0 7px,rgba(188,71,73,.25) 7px 14px)}

/* ---------- Tokens ---------- */
.token{
  position:absolute;top:0;bottom:0;z-index:3;
  left:calc(var(--p, 0) * 100% / var(--n));width:calc(100% / var(--n));
  display:flex;align-items:center;justify-content:center;
  transition:left var(--step, 300ms) ease-out;
}
.token::before{          /* marks the exact square under an oversized token */
  content:"";position:absolute;left:10%;right:10%;bottom:2px;height:4px;border-radius:2px;
  background:var(--pig, var(--barn));box-shadow:0 0 0 1px var(--ink);
}
.hopper{
  flex:none;height:86%;aspect-ratio:1;max-height:52px;min-height:26px;
  filter:drop-shadow(0 3px 0 rgba(59,42,31,.35));transform-origin:50% 100%;
}
.farmer-token .hopper{height:94%}
.tractor-art{transform:scaleX(-1)}
.token.caught .hopper{filter:grayscale(1) opacity(.55);transform:rotate(90deg) scale(.8)}
.row.escaped .token .hopper{filter:drop-shadow(0 0 6px var(--gold))}
.row.current .token .hopper{animation:bounce-idle 1.1s ease-in-out infinite}
.row.thinking .token .hopper{animation:wiggle .6s ease-in-out infinite}
@keyframes bounce-idle{50%{transform:translateY(-10%)}}
@keyframes wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* Lanes a player can click to pick a target. */
.row.current .track{box-shadow:0 0 0 3px var(--gold)}
.row.pickable{cursor:pointer}
.row.pickable .track{animation:pick 0.9s ease-in-out infinite;box-shadow:0 0 0 3px var(--barn)}
.row.pickable:hover .track{background-color:#e7c89c}
@keyframes pick{50%{box-shadow:0 0 0 5px rgba(188,71,73,.35)}}

/* ---------- Pienso: the tossed feed bucket ---------- */
.thrown-feed{position:fixed;top:0;left:0;z-index:20;pointer-events:none;width:28px;height:28px}
.thrown-feed svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(59,42,31,.35))}

/* ---------- Floating words over a token ---------- */
.pops{position:absolute;left:50%;bottom:70%;z-index:6;pointer-events:none}
.pop{
  position:absolute;left:0;bottom:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--font-display);font-size:15px;color:#fff;background:var(--ink);
  padding:2px 9px;border-radius:10px;border:2px solid var(--ink);
  animation:pop-up 1.5s ease-out forwards;
}
.pop.mud{background:var(--mud)}
.pop.hay{background:#c8971f}
.pop.trough{background:#8a5a33}
.pop.feed,.pop.caught{background:var(--barn)}
.pop.bump{background:#5b6b8c}
.pop.bounce{background:var(--grass-dark)}
@keyframes pop-up{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  15%{opacity:1;transform:translate(-50%,-4px) scale(1.1)}
  30%{transform:translate(-50%,-8px) scale(1)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-26px)}
}

@media (prefers-reduced-motion:reduce){
  .token,.danger{transition:none}
  .row.current .token .hopper,.row.thinking .token .hopper,.row.pickable .track,.pill.tractor{animation:none}
}

/* ---------- Portrait phones: lanes are columns, square 0 at the bottom ---------- */
@media (max-width:980px){
  .board{flex-direction:row;gap:3px}
  .row{flex-direction:column-reverse;flex:1 1 0}
  .lane{max-height:none}
  /* Fixed, so every lane's .track gets exactly the same height and their
     squares stay level with each other. */
  .label{flex:0 0 40px;flex-direction:column;justify-content:flex-start;gap:1px;padding:3px 0 0;text-align:center}
  .label .who{align-items:center;max-width:100%}
  .label .nm{font-size:10px;max-width:100%}
  .label .st{display:none}
  .track{flex-direction:column-reverse}
  .cell{border-right:none;border-top:1px solid rgba(74,47,34,.14)}
  .cell:last-child{border-top:none}
  .cell.start{border-radius:0 0 8px 8px}
  .cell.fence{border-radius:8px 8px 0 0;
    background:
      linear-gradient(90deg,transparent 22%,#8a5a33 22% 32%,transparent 32% 64%,#8a5a33 64% 74%,transparent 74%),
      repeating-linear-gradient(0deg,#b07a47 0 4px,transparent 4px 7px),
      var(--grass)}
  .farmer-lane .cell{font-size:9px}
  .farmer-lane .cell .icon{width:13px;height:13px;padding:1px}
  .danger{
    left:0;right:0;top:auto;bottom:0;width:auto;
    height:calc((var(--f, 0) + 1) * 100% / var(--n));
    border-right:none;border-top:3px solid var(--barn);border-radius:0 0 8px 8px;
    transition:height var(--fstep, 110ms) linear;
  }
  .token{
    left:0;right:0;top:auto;width:auto;
    bottom:calc(var(--p, 0) * 100% / var(--n));height:calc(100% / var(--n));
    transition:bottom var(--step, 300ms) ease-out;
  }
  .token::before{left:2px;right:2px;bottom:auto;top:50%;height:3px;transform:translateY(-50%);z-index:-1}
  .hopper{height:auto;width:78%;max-width:34px;min-height:0}
  .farmer-token .hopper{height:auto}
  .pops{bottom:auto;top:-6px}
  .pop{font-size:12px;padding:1px 6px}
}