/* river crossing — wolf / goat / cabbage */
#stage{min-height:260px}
.river-scene{
  display:grid;
  grid-template-columns:1fr minmax(120px,160px) 1fr;
  gap:.6rem;
  align-items:stretch;
  max-width:720px;
  margin:0 auto;
}
.bank{
  border:2px solid var(--line,#c5d0c8);
  background:var(--play-cell,#f4f7f2);
  color:var(--play-ink,#101820);
  padding:.55rem;
  min-height:180px;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.bank.has-boat{box-shadow:inset 0 0 0 2px var(--accent,#2a9d8f)}
.bank-title{font-weight:800;font-size:.85rem;text-align:center}
.bank-items{display:flex;flex-direction:column;gap:.35rem;flex:1}
.bank-empty{opacity:.55;text-align:center;font-size:.85rem;margin:auto}
.cargo-btn{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem .55rem;border:1px solid var(--line,#c5d0c8);
  background:#fff;cursor:pointer;font-weight:700;text-align:left;
}
.cargo-btn:disabled{opacity:.45;cursor:not-allowed}
.cargo-btn .emoji{font-size:1.25rem;line-height:1}
.cargo-btn.on-boat{background:hsl(168 45% 92%);border-color:var(--accent,#2a9d8f)}
.river-mid{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  background:linear-gradient(180deg,hsl(198 55% 72%),hsl(205 50% 48%));
  border:2px solid hsl(205 40% 36%);
  min-height:180px;padding:.5rem;
  color:#fff;
}
.boat{
  width:100%;max-width:130px;min-height:88px;
  background:hsl(28 45% 42%);border:2px solid #fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  padding:.35rem;
}
.boat-L{align-self:flex-start}
.boat-R{align-self:flex-end}
.farmer{font-weight:800;font-size:.9rem}
.boat-tip{margin:0;font-size:.75rem;opacity:.85}
.sail-btn{width:100%;max-width:130px}
.rules-line{text-align:center;font-size:.82rem;opacity:.8;margin:.75rem 0 0}
.theme-contrast .bank{background:#fff;border-color:#111}
.theme-contrast .river-mid{background:#1d3557}
.theme-mono .river-mid{background:#555}
.theme-mono .cargo-btn.on-boat{background:#ddd}
@media (max-width:640px){
  .river-scene{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .boat-L,.boat-R{align-self:center}
}