/* Cows To The Moon — client styling (Phase 4).
 *
 * Presentation only: the client's logic and message flow are untouched.
 * Aesthetic: a calm, muted felt tabletop. Elements float directly on the felt
 * with space (not boxes) separating them; decoration is trimmed to what helps
 * play. No card art yet — that's Phase 5.
 *
 * Interaction affordances the JS relies on are preserved verbatim:
 *   .drawable .herdable .targetable   (selection highlights)
 *   .hand-rail .rail-card .is-drag .play .shift .dragging   (hand drag/reorder)
 *   #root:has(.app--game) 100dvh no-scroll layout
 */

/* ----------------------------------------------------------------- tokens */
:root {
  /* Muted felt surface */
  --felt-top: #37624a;
  --felt-bot: #24402f;
  --felt-edge: #1a2f22;

  /* Paper (card faces) & ink */
  --paper: #f6f3ea;
  --paper-line: #e4dfd2;
  --ink: #26302a;
  --muted: #726f64;

  /* Text sitting on the felt */
  --on-felt: rgba(255, 255, 255, 0.94);
  --on-felt-dim: rgba(255, 255, 255, 0.6);
  --felt-hair: rgba(255, 255, 255, 0.14);

  /* Card-type accents (kept, lightly muted). Rules call events "green cards". */
  --c-piece: #6c86bf;
  --c-event: #5aa863;
  --c-launch: #d98a44;
  --c-cownter: #a179cf;

  /* Actions */
  --accent: #5a9d6a; /* primary / go */
  --accent-dark: #4a8459;
  --warm: #c67b57; /* attention / danger-ish */
  --neutral: #566;
  --select: #e6c25c; /* selection glow (moon gold) */

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 22px rgba(12, 24, 16, 0.28);
  --shadow-sm: 0 3px 9px rgba(12, 24, 16, 0.2);
  --font-head: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ base */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.45;
  min-height: 100vh;
  /* One continuous felt surface — soft vignette, no busy starfield */
  background:
    radial-gradient(ellipse at 50% 22%, var(--felt-top) 0%, var(--felt-bot) 62%, var(--felt-edge) 100%)
      fixed;
}

#root {
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px 18px 60px;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0 0 0.4em;
  line-height: 1.15;
}

/* App title */
#root > div > h1:first-child {
  color: var(--on-felt);
  text-align: center;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  letter-spacing: 0.5px;
  font-weight: 500;
  margin: 6px 0 20px;
}

code {
  font-family: 'Fredoka', ui-monospace, monospace;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 6px;
}
small {
  color: var(--muted);
}

/* --------------------------------------------------------------- buttons */
button {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  background: var(--neutral);
  border: none;
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    filter 0.15s ease;
}
button:hover:not(:disabled) {
  filter: brightness(1.08);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
}
button.subtle {
  background: transparent !important;
  color: var(--on-felt) !important;
  border: 1.5px solid var(--felt-hair);
}
/* Primary calls to action */
.primary-cta,
.hud-actions button:last-child,
.respond-panel .cownter-btn {
  background: var(--accent);
}
.card-actions button.recycle,
.hud-actions button:first-child {
  background: var(--neutral);
}
/* On paper panels, subtle buttons need dark ink */
.modal button.subtle,
.prompt button.subtle,
.respond-panel button.subtle {
  color: var(--ink) !important;
  border-color: var(--paper-line);
}

/* --------------------------------------------------------------- banners */
[role='alert'] {
  /* float over the table so it never shifts the layout */
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(720px, 92vw);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  font-weight: 600;
  color: var(--ink);
}
[role='alert'] b {
  flex: 1;
  min-width: 200px;
  font-weight: 700;
}
[role='alert'] button {
  background: var(--ink);
}

/* -------------------------------------------------------- home / lobby */
.home,
.lobby {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
  max-width: 440px;
  margin: 0 auto;
}
.home p,
.lobby p {
  margin: 10px 0;
}
.home label,
.lobby label {
  display: block;
  font-weight: 700;
  margin: 14px 0 6px;
}
input {
  font-family: var(--font-body);
  font-size: 1rem;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.15s ease;
}
input:focus {
  outline: none;
  border-color: var(--accent);
}
.status-line {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
}
.rejoin-box {
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 12px 0;
}
.rejoin-box button {
  background: var(--neutral);
  width: 100%;
  margin-top: 4px;
}
.divider {
  height: 1px;
  background: var(--paper-line);
  margin: 18px 0;
}
.primary-cta {
  width: 100%;
  padding: 12px;
  font-size: 1.05rem;
}

.code-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.code-chip code {
  font-size: 1.3rem;
  letter-spacing: 1px;
}
.code-chip button {
  background: var(--neutral);
  padding: 5px 12px;
}
.player-list {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}
.player-list li {
  padding: 9px 4px;
  border-bottom: 1px solid var(--paper-line);
  font-weight: 700;
}
.tag {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.tag-host {
  background: rgba(217, 138, 68, 0.16);
  color: #9a6320;
}
.tag-you {
  background: rgba(90, 157, 106, 0.18);
  color: var(--accent-dark);
}
.waiting {
  color: var(--muted);
  font-style: italic;
  font-weight: 700;
}

/* ==================================================== in-game: no-scroll */
/* The whole table fits the viewport; nothing scrolls the page. Home/lobby
   are unaffected. */
#root:has(.app--game) {
  height: 100dvh;
  overflow: hidden;
  padding: 4px 10px 0;
}
.app--game {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#root > .app--game > h1:first-child {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.75;
  margin: 2px 0 4px;
}
.app--game .game {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding-bottom: 100px; /* room for the peeking hand rail (matches its peek height) */
}
.game > .hud {
  flex: none;
}
.game > .table {
  flex: 1;
  min-height: 0;
}

/* --------------------------------------------------------- heads-up bar */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--on-felt);
  padding: 2px 4px;
  /* reserve the action-button height so the row doesn't grow (and jerk the
     table) when Do nothing / End turn appear during your action phase */
  min-height: 44px;
}
.hud-turn {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 700;
}
.hud-who {
  color: #fff;
  padding: 2px 12px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
}
.hud-phase {
  opacity: 0.75;
  font-size: 0.9rem;
  font-weight: 600;
}
.weather-flag {
  color: var(--select);
  font-weight: 700;
  font-size: 0.85rem;
}
.countdown {
  font-size: 0.82rem;
  opacity: 0.7;
}
.hud-actions {
  display: flex;
  gap: 8px;
}

/* ---------------------------------------------------------- the felt table */
/* Borderless: the table is just a layout region on the same felt as the page.
   Elements float on it, separated by space. */
.table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 8px;
  overflow: hidden;
  position: relative;
}
.draw-hint {
  text-align: center;
  color: var(--on-felt);
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 0.9rem;
  opacity: 0.9;
  /* always reserve one line so the bar never collapses and shifts the table */
  min-height: 1.3rem;
}

/* The main area: a big full-height launch pad on the left, and a right column
   holding the shared piles (deck/moon/store) on top with the farm below. */
.table-main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
}
/* LEFT column: the big launch pad. flex:2 so the rocket has a roomy assembly
   area (room to move pieces around manually in a future set). */
.pad-column {
  flex: 1.3;
  min-width: 150px;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
/* MIDDLE column: moon above the farm (gets the extra room). */
.center-column {
  flex: 1.6;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.center-column .play-row {
  width: 100%;
  flex: 1;
  min-height: 0;
}
/* RIGHT column: deck + discard on top, rocket store below (with a gap between). */
.piles-column {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.piles {
  display: flex;
  gap: 12px;
}
.pile {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 0;
}
/* the card graphic itself — a fixed-ratio box; the caption sits BELOW it */
.pile-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* deck = a face-down card floating on felt */
.deck-pile .pile-back {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: repeating-linear-gradient(45deg, #3a5a48, #3a5a48 7px, #315041 7px, #315041 14px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  /* stacked-card look: a couple of offset layers behind the top card */
  box-shadow:
    3px 3px 0 -1px #2f4d3b,
    6px 6px 0 -2px #294536,
    var(--shadow-sm);
}
.deck-pile.drawable {
  cursor: pointer;
}
.deck-pile.drawable .pile-back {
  box-shadow:
    0 0 0 2.5px var(--select),
    3px 3px 0 -1px #2f4d3b,
    6px 6px 0 -2px #294536,
    var(--shadow-sm);
}
.discard-pile .pile-visual {
  background: rgba(0, 0, 0, 0.14);
}
.pile-cap {
  font-family: var(--font-head);
  font-size: 0.7rem;
  color: var(--on-felt);
  text-align: center;
}
/* The top discard card fills the whole pile so the full card art shows (the
   card art shares the 2.5:3.5 pile ratio, so cover crops nothing). */
.pile-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 0.62rem;
  text-align: center;
  padding: 6px 5px;
  color: var(--ink);
  background: var(--paper);
  border-top: 4px solid var(--paper-line);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pile-face.card--piece {
  border-top-color: var(--c-piece);
}
.pile-face.card--event {
  border-top-color: var(--c-event);
}
.pile-face.card--launch {
  border-top-color: var(--c-launch);
}
.pile-face.card--cownter {
  border-top-color: var(--c-cownter);
}
.pile-empty {
  color: var(--on-felt-dim);
  font-size: 0.7rem;
}

/* moon: a soft disc, cows as tokens */
.moon-disc {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f2ecd6, #ddd0a2 60%, #c3b586);
  box-shadow:
    inset -9px -9px 22px rgba(0, 0, 0, 0.16),
    0 0 0 3px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #5b4f2b;
  flex: none;
}
.moon-label {
  font-family: var(--font-head);
  font-weight: 600;
  opacity: 0.8;
}
.moon-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  max-width: 170px;
}
.moon-n {
  font-weight: 700;
  font-size: 0.82rem;
}

/* rocket store: a 2x2 block of face-up cards under the deck/discard, with the
   label below. */
.store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.store-cards2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 9px;
}
.store-card {
  width: 96px; /* match the deck/discard pile size */
  aspect-ratio: 2.5 / 3.5;
  background: var(--paper);
  border: none;
  border-top: 6px solid var(--paper-line);
  border-radius: 8px;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.store-card.card--piece {
  border-top-color: var(--c-piece);
}
.store-card.card--event {
  border-top-color: var(--c-event);
}
.store-card.card--launch {
  border-top-color: var(--c-launch);
}
.store-card.card--cownter {
  border-top-color: var(--c-cownter);
}
.store-card.drawable {
  cursor: pointer;
  /* same persistent gold ring the deck gets while it's a legal draw */
  box-shadow: 0 0 0 2.5px var(--select), var(--shadow-sm);
}
.store-card.drawable:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2.5px var(--select), var(--shadow);
}
.sc-name {
  font-family: var(--font-head);
  font-size: 0.68rem;
  line-height: 1.08;
  overflow: hidden;
}

/* ------------------------------------------------ player area (on felt) */
.play-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.arrow {
  align-self: center;
  background: transparent;
  border: 1.5px solid var(--felt-hair);
  color: var(--on-felt);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.05rem;
  flex: none;
}
.arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
/* Borderless: the player area is transparent — content floats on the felt,
   with a thin colour underline under the title showing whose area it is. */
.player-area {
  flex: 1;
  min-height: 0;
  background: transparent;
  padding: 4px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  overflow: hidden;
}
.player-area > .area-title {
  flex: none;
}
.area-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  text-align: center;
  color: var(--on-felt);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--pcolor, var(--felt-hair));
}
.area-title small {
  color: var(--on-felt-dim);
  font-weight: 600;
}
.area-h {
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--on-felt-dim);
  margin-bottom: 8px;
}
.area-n {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--on-felt);
  margin-top: 8px;
}

/* Launch pad: a big full-height column where the rocket assembles, the piece
   cards touching bottom-to-top so they read as one rocket that reaches up to
   the deck/moon line. */
.launchpad {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  text-align: center;
  background: transparent;
}
/* Header hidden so the rocket top can reach the very top of the pad column. */
.launchpad > .area-h {
  display: none;
}
/* Farm: a poker card laid on its side (landscape). Sized to fully fit below the
   area title so its rounded corners aren't clipped by the player area. */
.farm {
  flex: none;
  width: 100%;
  max-width: 380px;
  max-height: calc(100% - 52px);
  aspect-ratio: 3.5 / 2.5;
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.farm.herdable {
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(90, 157, 106, 0.55);
}
.farm.herdable:hover {
  box-shadow: 0 0 0 3px rgba(90, 157, 106, 0.8);
}
.farm.targetable,
.rocket-cows.targetable {
  cursor: pointer;
  box-shadow: 0 0 0 2.5px rgba(230, 194, 92, 0.7);
}
.farm-hint {
  display: inline-block;
  margin-top: 6px;
  color: #fff;
  font-weight: 800;
  background: rgba(12, 24, 16, 0.66);
  padding: 2px 10px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pad-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-felt-dim);
  font-style: italic;
  padding: 8px;
  font-size: 0.88rem;
}

/* the rocket area: pieces stack in it, and the cows ride on top of them */
.rocket-zone {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  display: flex;
}
/* rocket = the actual piece cards, touching bottom-to-top to form the rocket.
   The stack fills the launch pad's height and builds up from the bottom. */
.rocket-stack {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.pad-card {
  position: relative;
  height: 31%;
  width: auto;
  aspect-ratio: 2.5 / 3.5;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-top: 6px solid var(--paper-line);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--ink);
  overflow: hidden;
  /* pick up and move for the tabletop feel; springs back on release */
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 0.18s ease;
}
.pad-card.is-dragging {
  cursor: grabbing;
  transition: none;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
}
.pad-card .card-name {
  font-size: 0.6rem;
  line-height: 1.05;
}
.pad-card.piece--nasa_import {
  border-top-color: #5878b8;
}
.pad-card.piece--farmmade {
  border-top-color: #63954a;
}
.pad-card.piece--heavily_improvised {
  border-top-color: #b8763f;
}
.pad-card.piece--wild {
  border-top-color: #a179cf;
}
.pad-card.targetable {
  cursor: pointer;
  outline: 2.5px solid var(--select);
  outline-offset: 1px;
}
/* cows ride ON the rocket: an overlay above the piece cards. It's click-through
   (pointer-events: none) so the pieces underneath stay draggable; only the cow
   tokens themselves capture the pointer. */
.rocket-cows {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rocket-cows .tokens {
  pointer-events: none;
}
.rocket-cows .cow-token {
  pointer-events: auto;
}
/* the "3/4 • ready" count sits below the rocket */
.rocket-count {
  flex: none;
  margin-top: 5px;
  text-align: center;
  color: var(--on-felt);
  font-weight: 700;
}
.rocket-count small {
  color: var(--on-felt-dim);
}

/* ---------------------------------------------------------- cow tokens */
.tokens {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  justify-content: center;
  max-width: 200px;
}
.cow-token {
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.18);
}
.cow-token.empty {
  background: transparent !important;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
/* draggable cows: pick up and move, snap back into the cluster on release */
.cow-token.grabbable {
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 0.16s ease;
}
.cow-token.grabbable.is-dragging {
  cursor: grabbing;
  transition: none;
  box-shadow:
    inset 0 -2px 2px rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.4);
}

/* ================================================= peeking hand rail */
/* Mechanics preserved exactly: fixed to the bottom edge, peeks up, slides up
   on hover; the dragged card follows the pointer; siblings shift to open a
   drop gap; .dragging pins the rail up. */
.hand-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Peek reveals the tab + the card name band, so names are readable without
     hovering. Hovering slides the whole rail up to reveal the full cards. */
  transform: translateY(calc(100% - 100px));
  transition: transform 0.22s ease;
}
.hand-rail:hover,
.hand-rail:focus-within {
  transform: translateY(0);
}
.hand-tab {
  background: rgba(0, 0, 0, 0.55);
  color: var(--on-felt);
  font-family: var(--font-head);
  font-size: 0.76rem;
  padding: 5px 18px;
  border-radius: 10px 10px 0 0;
}
.play-hint {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.82rem;
  padding: 5px 18px;
  border-radius: 10px 10px 0 0;
}
.hand-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: rgba(12, 24, 16, 0.55);
  padding: 10px 20px 16px;
  width: 100%;
  /* Hug the cards (was a tall fixed min-height) so their tops — the names —
     land in the peek band rather than being pushed below the fold. */
  min-height: 0;
}
.empty-hand {
  color: var(--on-felt-dim);
  font-style: italic;
  padding: 24px;
}
.rail-card {
  width: 126px;
  aspect-ratio: 2.5 / 3.5;
  background: var(--paper);
  border: none;
  border-top: 6px solid var(--paper-line);
  border-radius: 10px;
  padding: 9px 11px;
  margin-left: -32px;
  box-shadow: var(--shadow);
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: transform 0.12s ease;
}
.rail-card:first-child {
  margin-left: 0;
}
.rail-card:hover {
  transform: translateY(-18px);
  z-index: 4;
}
.hand-rail.dragging {
  transform: none;
}
.rail-card.is-drag {
  z-index: 12;
  cursor: grabbing;
  transition: none;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
}
.rail-card.is-drag.play {
  outline: 3px dashed var(--select);
  outline-offset: 2px;
}
.rail-card.shift {
  transform: translateX(30px);
}
.rail-card.card--piece {
  border-top-color: var(--c-piece);
}
.rail-card.card--event {
  border-top-color: var(--c-event);
}
.rail-card.card--launch {
  border-top-color: var(--c-launch);
}
.rail-card.card--cownter {
  border-top-color: var(--c-cownter);
}
.card-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.card-text {
  font-size: 0.75rem;
  color: var(--muted);
  flex: 1;
}
.rail-card .locked {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

/* ---------------------------------------------------- floating notices */
.turn-banner {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 24, 16, 0.8);
  color: var(--on-felt);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  z-index: 22;
}
.target-bar {
  position: fixed;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--paper);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: var(--shadow);
  z-index: 40;
  max-width: 92vw;
  color: var(--ink);
}
.respond-bar {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  width: min(560px, 94vw);
}

/* ------------------------------------------------ prompts / respond panel */
.prompt p {
  margin: 0 0 10px;
  font-weight: 700;
}
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.prompt .choices button {
  background: var(--neutral);
}
.respond-panel {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.respond-panel .headline {
  font-weight: 800;
  margin: 0 0 8px;
}
.respond-panel .chain {
  color: var(--c-cownter);
  font-weight: 700;
  margin: 0 0 8px;
}

/* ------------------------------------------------------ overlays / modals */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 14, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.overlay .modal {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px;
  text-align: center;
  max-width: 420px;
  color: var(--ink);
}
.overlay .modal h2 {
  font-size: 1.5rem;
}
.overlay .modal button {
  margin-top: 14px;
  background: var(--accent);
  padding: 11px 22px;
  font-size: 1.02rem;
}
.overlay .modal .choices {
  justify-content: center;
}
.overlay .modal .choices button {
  background: var(--accent);
}
.overlay .modal .choices button.subtle {
  background: transparent !important;
}

/* single-card zoom */
.zoom-card {
  width: min(320px, 82vw);
  aspect-ratio: 2.5 / 3.5;
  background: var(--paper);
  border: none;
  border-top: 12px solid var(--paper-line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  color: var(--ink);
}
.zoom-card.card--piece {
  border-top-color: var(--c-piece);
}
.zoom-card.card--event {
  border-top-color: var(--c-event);
}
.zoom-card.card--launch {
  border-top-color: var(--c-launch);
}
.zoom-card.card--cownter {
  border-top-color: var(--c-cownter);
}
.zoom-card .card-name {
  font-size: 1.5rem;
}
.zoom-card .card-text {
  font-size: 1.05rem;
  color: var(--ink);
}
.zoom-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.zoom-actions button {
  background: var(--accent);
}
.zoom-actions button.recycle {
  background: var(--neutral);
}

/* ------------------------------------------------------------ log feed */
.log {
  color: var(--on-felt);
  padding: 2px 4px;
  opacity: 0.85;
}
.log summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 4px 0;
  opacity: 0.7;
}
.log-feed {
  list-style: none;
  padding: 0;
  margin: 6px 0 10px;
  max-height: 190px;
  overflow-y: auto;
  font-size: 0.84rem;
}
.app--game .log {
  flex: none;
}
.app--game .log[open] .log-feed {
  max-height: 26vh;
}
.log-feed li {
  padding: 4px 0;
  border-bottom: 1px solid var(--felt-hair);
  opacity: 0.85;
}

/* ================================================================= card art */
/* Art paints as a cover layer behind the card; when present, the placeholder
   chrome + text are dropped so only the art shows. pointer-events: none keeps
   drag/click hitting the card underneath. Elements that use an INLINE cover
   background instead (discard face, deck back, moon, farm) are handled below. */
.rail-card,
.store-card,
.zoom-card {
  position: relative;
}
.card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  pointer-events: none;
}
.has-art {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.has-art .card-name,
.has-art .card-text,
.has-art .sc-name {
  display: none;
}
/* keep the response-only tag and the zoom buttons above the art */
.rail-card.has-art .locked {
  position: relative;
  z-index: 1;
  align-self: center;
  margin-top: auto;
  background: rgba(12, 24, 16, 0.72);
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  font-style: normal;
}
.zoom-card.has-art {
  justify-content: flex-end;
}
.zoom-card.has-art .zoom-actions {
  position: relative;
  z-index: 1;
  background: rgba(12, 24, 16, 0.55);
  border-radius: 10px;
  padding: 8px;
  margin: 10px;
}

/* moon art: illustration behind the landed-cow tokens */
.moon-disc.moon-art {
  background-color: transparent;
}
.moon-disc.moon-art .moon-label {
  display: none;
}
.moon-disc.moon-art .moon-tokens {
  position: relative;
  z-index: 1;
}
.moon-disc.moon-art .moon-n {
  position: relative;
  z-index: 1;
  background: rgba(12, 24, 16, 0.55);
  color: #fff;
  border-radius: 6px;
  padding: 0 7px;
}

/* farm art: illustration behind the cow tokens, with a bottom scrim so the
   count stays readable */
.farm.farm-art {
  position: relative;
  background-color: transparent;
  border-radius: 12px;
  overflow: hidden;
  justify-content: flex-start;
}
.farm.farm-art .area-h {
  display: none;
}
.farm.farm-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}
.farm.farm-art .tokens,
.farm.farm-art .area-n,
.farm.farm-art .farm-hint {
  position: relative;
  z-index: 1;
}
.farm.farm-art .area-n {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 640px) {
  #root {
    padding: 12px 12px 48px;
  }
  .table-main {
    gap: 8px;
  }
  .moon-disc {
    width: 116px;
    height: 116px;
  }
  .rail-card {
    width: 104px;
    margin-left: -40px;
  }
}