/* ============================================================================
   Base: design tokens, page shell, header, buttons, the main layout.
   Warm barnyard look: straw paper, dirt track, barn red, pasture green.
   ============================================================================ */
:root{
  --bg:#e6d7b5;
  --paper:#fbf5e6;
  --paper-2:#f4ead2;
  --ink:#3b2a1f;
  --muted:#7b6552;
  --line:#d4c09a;
  --barn:#bc4749;
  --barn-dark:#8f2f31;
  --grass:#6a994e;
  --grass-dark:#386641;
  --dirt:#d9b98c;
  --dirt-2:#cfab79;
  --mud:#7a5230;
  --hay:#e9c46a;
  --gold:#f2b705;
  --font-ui:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --font-display:"Cooper Black","Cooper Std","Rockwell Extra Bold","Arial Rounded MT Bold","Trebuchet MS",Georgia,serif;
  --radius:14px;
  --shadow:0 4px 0 rgba(59,42,31,.9);
  --side-w:300px;
  --label-w:128px;

  /* The shell (platform/css/shell.css) in the barnyard's colors. */
  --cp-font:var(--font-ui);
  --cp-font-display:var(--font-display);
  --cp-surface:var(--paper);
  --cp-surface-2:var(--paper-2);
  --cp-text:var(--ink);
  --cp-muted:var(--muted);
  --cp-line:var(--ink);
  --cp-accent:var(--barn);
  --cp-accent-text:#fff;
  --cp-on:var(--grass-dark);
  --cp-on-text:#fff;
  --cp-good:var(--grass-dark);
  --cp-bad:var(--barn-dark);
  --cp-focus:var(--gold);
  --cp-border:3px;
  --cp-radius:var(--radius);
  --cp-shadow:var(--shadow);
  --cp-backdrop:rgba(43,30,22,.55);
  --cp-side-w:var(--side-w);
}

body{
  margin:0;min-height:100%;
  color:var(--ink);font-family:var(--font-ui);
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.35) 0 2px,transparent 3px) 0 0/26px 26px,
    radial-gradient(circle at 70% 60%,rgba(106,153,78,.18) 0 2px,transparent 3px) 0 0/34px 34px,
    linear-gradient(180deg,#9cc57a 0,#8ab866 120px,var(--bg) 121px);
  background-attachment:fixed;
}
input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:.01em}
.art{display:block;width:100%;height:100%}
[hidden]{display:none !important}

/* ---------- Top bar (the shell's; the game's name block) ---------- */
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-pig{width:44px;height:44px;flex:none;filter:drop-shadow(0 3px 0 rgba(59,42,31,.35))}
.brand h1{font-size:clamp(20px,2.4vw,30px);line-height:1;color:var(--paper);
  text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),0 4px 0 var(--ink)}
.tagline{margin:3px 0 0;font-size:12px;color:#243a1c;font-weight:700}
/* The Canceled Productions folder (platform/css/brand.css): it brings its
   own light rounded frame, so it reads on the pasture as it is. */
#topBar .cp-brand{--cp-brand-h:40px;filter:drop-shadow(0 3px 0 rgba(59,42,31,.35))}
@media (max-width:560px){
  /* Phones: the header is full; the logo's folder takes the pig's place. */
  #topBar .cp-brand{--cp-brand-h:32px}
  #topBar .brand-pig{display:none}
}

/* ---------- Mobile top bar: Rules/Sound/Lang/Menu and the scoreboard,
   collapsed behind one hamburger icon (client/app.js moves the real nodes
   in and out of #barMenu as the breakpoint is crossed). ---------- */
.cp-bar-menu-btn{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex:none;width:38px;height:38px;border-radius:10px;cursor:pointer;
  background:var(--paper);border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink);
}
.cp-bar-menu-btn span{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px}
.bar-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:230px;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:12px;
}
.bar-dropdown.open{display:block}
.bar-dropdown .cp-scoreboard{box-shadow:none;border:none;padding:0}
.bar-dropdown .cp-bar-actions{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.bar-dropdown .cp-bar-actions .cp-bar-btn{flex:1 1 45%}
.pill{
  display:block;width:100%;flex-shrink:0;text-align:center;box-sizing:border-box;
  font-weight:700;font-size:13px;padding:10px 12px;border-radius:var(--radius);
  background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);white-space:nowrap;
}
.pill.tractor{background:var(--barn);color:#fff;animation:throb 1s ease-in-out infinite}
.pill.warn{background:var(--hay)}
@keyframes throb{50%{transform:scale(1.06)}}

/* ---------- Buttons ---------- */
.btn{
  background:var(--paper);border:2px solid var(--ink);border-radius:12px;
  padding:7px 14px;cursor:pointer;font-weight:700;font-size:14px;
  box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .15s;
}
.btn:hover:not(:disabled){background:#fff}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible,.input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--barn);color:#fff}
.btn.primary:hover:not(:disabled){background:#cc5557}
.btn.ghost{background:rgba(251,245,230,.85);font-size:13px;padding:6px 11px}
.btn.big{font-family:var(--font-display);font-weight:400;font-size:22px;padding:10px 22px;width:100%}
.btn.small{font-size:12px;padding:3px 8px;box-shadow:0 2px 0 var(--ink)}

/* The header stays usable over the start screen (language, sound, rules). */

/* ---------- The table ---------- */
#field{display:flex;min-height:0}
#boardWrap{flex:1;
  position:relative;min-height:0;min-width:0;display:flex;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:10px 12px 12px;
}
body.tractor-round #boardWrap{border-color:var(--barn-dark);box-shadow:0 4px 0 var(--barn-dark),0 0 0 4px rgba(188,71,73,.25)}
.cp-bar .cp-btn{font-size:13px;padding:6px 11px;background:rgba(251,245,230,.9)}
/* This game only: Menu first, before Rules/Sound/Lang (user request, 2026-10-21). */
.cp-bar-actions .cp-bar-menu{order:-1}

@media (max-width:1100px){
  :root{--side-w:260px;--label-w:108px}
}

/* Phones in portrait: the board runs bottom to top (board.css) and the
   dice + prompt sit under it; the log shrinks to its last lines. */
@media (max-width:980px){
  .cp-app{padding:6px 8px 8px;gap:6px;height:100dvh;grid-template-rows:auto minmax(0,1fr) auto}
  .cp-table{min-height:0}
  .tagline{display:none}
  .brand-pig{width:32px;height:32px}
  .cp-bar .cp-btn{font-size:12px;padding:4px 8px}
  .cp-bar-menu-btn{display:flex}
  #boardWrap{padding:6px}
  .cp-side{flex-direction:column;gap:6px}
  .cp-side #lapPill{max-width:480px;width:100%;margin:0 auto}
  .cp-side .cp-journal{display:none}
}
/* Short landscape screens (phones on their side). */
@media (max-height:520px) and (orientation:landscape){
  .tagline{display:none}
  .cp-app{padding:4px 8px 6px;gap:4px}
  :root{--side-w:230px;--label-w:96px}
}