/* Barnyard phone client. Mobile-first. Colour, type and icon styling come from /ui/tokens.css (loaded first),
   shared with the How to play guide and the design system page. Only app-specific aliases live here. */
:root {
  --barn-ink: var(--on-color);
  --grass-soft: color-mix(in srgb, var(--grass) 16%, var(--surface));
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 500 16px/1.4 var(--font);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
#app {
  max-width: 560px; margin: 0 auto; min-height: 100%;
  padding: max(12px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
/* Only the game has the hand docked at the bottom, so only the game keeps room for it under the page. The home page
   and the lobby end at their footer, with no blank space to scroll into. */
#app[data-screen="game"] { padding-bottom: calc(230px + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 2rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 18px 0 8px; }
p { margin: 0.4em 0; }
.small { font-size: 0.85rem; }
.row { display: flex; gap: 8px; align-items: center; }
.spread { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }


.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }

/* ---------- home & lobby ---------- */
/* The home page runs edge to edge: its bands span the screen and each holds a centred .site-wrap column (components.css).
   It has no hand dock, so it needs none of the room the game keeps at the bottom. */
#app[data-screen="home"] { max-width: none; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.hero { text-align: center; padding: 28px 0 18px; }
.bigcode { margin: 4px 0 8px; }

/* ---------- game ---------- */
.progress { margin-left: auto; font-weight: 700; white-space: nowrap; }
.banner {
  border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-weight: 600;
  background: var(--surface-2);
}
.banner.you { background: var(--barn); color: var(--barn-ink); }
.banner.warn { background: var(--gold-soft); color: var(--ink); }

.rivals { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
/* Rival tiles are the shared player tile, as a button that opens their farm. */
.rivals .tile { flex: 0 0 auto; width: min(280px, 78vw); scroll-snap-align: start; }

h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; min-height: 32px; border-radius: 999px; background: var(--gold-soft); font-weight: 600; font-size: 0.9rem; }
.piles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pile { display: flex; flex-direction: column; gap: 6px; }

/* the hand sits fixed at the bottom like cards held in your hand */
.hand-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
/* The dock is as wide as the hand (up to the column), centred, so the status line and End turn line up with the
   first and last card. A hand too long for the screen keeps the full column and scrolls. */
.hand-inner { width: fit-content; max-width: min(560px, 100%); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
/* Tablets and computers: use the width. Up to 1280 px wide, every rival farm is in view at once (a grid, not a
   strip to scroll) above your farm, and the whole hand fits along the bottom, so rivals and your hand are seen
   together. Phones keep the 560 px column and the scrolling strips. */
/* The game's top bar shows the wordmark only when there's room for it beside the deck, voice, History and profile. */
@media (max-width: 759px) { #app[data-screen="game"] .topbar .lockup .wordmark { display: none; } }
@media (min-width: 760px) {
  /* Only the game goes wide: the home screen and lobby are forms, which read best as a centred column. */
  #app[data-screen="game"] { max-width: 1280px; }
  /* The hand fits here, so give it the same 10 px inset on both sides as the status line: their edges align. (On a
     phone the hand scrolls and the status line needs every pixel, so this is wide screens only.) */
  .hand-dock .hand-inner .hand { padding: 12px 10px 8px; } /* more specific than the base rule further down */
  .hand-dock .hand-inner .hand-bar { padding: 0 10px; }
  .hand-inner { max-width: min(1280px, 100%); }
  .rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); overflow: visible; scroll-snap-type: none; }
  .rivals .tile { width: auto; max-width: none; }
}
.hand-dock .hand { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 12px 12px 8px 4px; } /* room for edge badges */
/* The hand is only as wide as its cards and sits in the middle. Auto margins (not justify-content: center) keep a
   hand too long for the screen scrollable from its first card instead of cutting off the start. */
.hand-dock .hand > :first-child { margin-left: auto; }
.hand-dock .hand > :last-child { margin-right: auto; }
.hand-bar { display: flex; gap: 8px; align-items: center; }
.hand-bar .grow { font-size: 0.85rem; color: var(--ink-soft); }


details summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }


/* ---------- how-to-play guide (full-screen layer above the game) ---------- */
#guide { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.g-open { overflow: hidden; }
.g-wrap { max-width: 640px; margin: 0 auto; padding: 0 16px max(32px, env(safe-area-inset-bottom)); }
.g-head { display: flex; align-items: center; gap: 12px; }
.g-head h2 { font-size: 1.3rem; }
/* Title, close button, search and section chips stay pinned while scrolling. */
.g-search { position: sticky; top: 0; z-index: 2; background: var(--bg); margin: 0 -16px; padding: max(10px, env(safe-area-inset-top)) 16px 6px; border-bottom: 1px solid var(--line); }
.g-jump { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; }
.g-jump a { flex: none; padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.g-section, .g-group { scroll-margin-top: 180px; }
.g-section h3 { margin-top: 24px; }
.g-section ol, .g-section ul { padding-left: 1.2em; }
.g-section li { margin: 6px 0; }
.g-group-title { font-size: 1.05rem; margin: 22px 0 2px; }
.g-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-top: 10px; scroll-margin-top: 180px; transition: outline-color 0.3s; outline: 3px solid transparent; }
.g-card.g-flash { outline-color: var(--gold); }
.g-card-head { display: flex; gap: 12px; align-items: center; }
.g-card h4 { margin: 0; font-size: 1.05rem; }
/* The card an entry is about, at 70%: the same face as in your hand. */
.g-face { flex: none; width: 65px; height: 86px; }
.g-face .card { transform: scale(.7); transform-origin: top left; }
.g-card-head { align-items: flex-start; }
.g-card-head .formula { margin-top: 6px; }
.g-pens { margin: 10px 0; }
.g-pen { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 800; }
.g-tips { margin-top: 8px; }
/* Tips are optional reference, so their toggle is the --info slate with the guide's book, like the Card guide link in a
   card's sheet, not barn red like an action (approved 2026-11-05). The chevron after the words turns when open. */
.g-tips summary { font-weight: 800; color: var(--info); min-height: 44px; gap: 5px; list-style: none; }
.g-tips summary span { text-decoration: underline dotted; text-underline-offset: 3px; }
.g-tips summary::-webkit-details-marker { display: none; }
.g-tips summary::after { content: "▸"; display: inline-block; transition: transform 0.15s; }
.g-tips[open] summary::after { transform: rotate(90deg); }
.g-tips ul { margin: 4px 0 0; padding-left: 1.2em; }
.g-tips li { margin: 6px 0; }
.g-table-wrap { overflow-x: auto; margin: 8px 0; }
.g-table { border-collapse: collapse; font-size: 0.85rem; min-width: 460px; }
.g-table th, .g-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.g-table th { color: var(--ink-soft); font-weight: 600; }
.g-none { padding: 16px 0; }


/* ---------- voice chat ---------- */
.vmark.speaking { box-shadow: 0 0 0 2px var(--grass); background: var(--grass-soft); }

/* ---------- one-shot animations (fx.js) ---------- */
/* Above the hand dock (5) that cards fly into, under sheets (.scrim, 10): nothing animates over a sheet (fx.js). */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9; }
.fx-fly { position: absolute; line-height: 1; filter: drop-shadow(var(--lift-shadow)); }
.fx-fly .nbill { transform: scale(.8); }
/* The face-down card dealt from the draw pile: the shared card back. */
.fx-deal-back { position: absolute; }
/* Status line above the hand: goal, bank total (tap for details), hand size. */
.hand-bar .status { display: flex; align-items: center; gap: 12px; padding: 0; flex-wrap: nowrap; }
.hand-bar .stat { white-space: nowrap; font-size: 1rem; }


/* The top bar holds code, status light, draw pile, voice, History and menu:
   keep it to one row at phone width. */
.topbar { gap: 6px; min-width: 0; }
.topbar > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar button.small { padding: 0 10px; min-height: 40px; }

/* ---------- Locked Gate response windows ---------- */
/* A small card outline, so "Locked Gate" reads as a card in your hand. */

/* ---------- ticking counts ---------- */
.count { font-variant-numeric: tabular-nums; transition: color .2s; }
/* Green/red only where more is better: animals, money, pen progress. Hand
   and deck counts tick without colour, since more cards isn't good or bad. */
:is([data-count^="score"], [data-count^="bank"], [data-count^="me-score"], [data-count^="me-bank"], [data-count^="pen"]).up { color: var(--grass); }
:is([data-count^="score"], [data-count^="bank"], [data-count^="me-score"], [data-count^="me-bank"], [data-count^="pen"]).down { color: var(--loss); }

/* The search box's clear button, in the page's ink instead of the browser's blue. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer; background: var(--ink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- small phones (320–360 px wide) ---------- */
/* The room code never gives up its space: it's how friends join. */
.topbar > .muted { flex: none; }
.hand-bar .status { min-width: 0; }
@media (max-width: 360px) {
  .topbar { gap: 4px; }
  .topbar button.small { padding: 0 8px; }
  .hand-bar { gap: 6px; }
  .hand-bar .status { gap: 5px; }
  .hand-bar .stat { font-size: 0.9rem; gap: 2px; }
  .hand-bar .stat svg.ic { width: 14px; height: 14px; }
  button.bank-total, button.goal-total { padding: 0 7px 0 5px; }
  .hand-bar .turnctl { gap: 5px; padding: 0 10px; }
}

/* ---------- shared icons inside game chrome ---------- */
.inline-ic { display: inline-flex; vertical-align: middle; }
.g-example { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; }
.g-example .bstacks { padding: 0; }
.g-or { color: var(--ink-soft); font-weight: 800; }