/* Arcade -- the shared half of every page.
 *
 * Tokens, layout and the components every game needs: panels, buttons, the
 * setup form, the log, the error box. A game's own stylesheet loads after this
 * one and adds only what is genuinely its own -- Maddie's Game has runs of cards,
 * Chris' Game has resource pills, and neither needs to restate what a panel
 * looks like.
 *
 * --accent is set per game from its GameSpec, so a page picks up its colour
 * without a stylesheet per game. Use it for backgrounds and borders; use
 * --accent-text where accent-coloured TEXT sits on a panel, since the same
 * mid-tone that reads well behind white is too dark to read on dark.
 */

:root{
  --bg:#f6f5f2; --panel:#fff; --panel-2:#faf9f7;
  --ink:#1c1b19; --muted:#75726c; --line:#e0ddd6;
  --accent:#2f6f4e; --accent-ink:#fff; --accent-text:#2f6f4e;
  --warn:#a33a2a; --coin:#d9a441; --you:#f3f7f4;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141518; --panel:#1e2024; --panel-2:#24272c;
    --ink:#e9e7e3; --muted:#9a978f; --line:#2e3238;
    --warn:#d4715e; --coin:#e0b055; --you:#20262a;
    --accent-text:color-mix(in srgb, var(--accent) 45%, white);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.wrap{max-width:1140px;margin:0 auto;padding:22px 16px 64px}
.wrap.narrow{max-width:760px}
.hidden{display:none !important}
a{color:var(--accent-text)}

/* ---- page header ---- */
.top{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:20px;
}
.top h1{font-size:21px;margin:0;letter-spacing:-.01em;font-weight:650}
.top .meta{
  color:var(--muted);font-size:13px;margin-left:auto;text-align:right;
  font-variant-numeric:tabular-nums;line-height:1.45;
}
.back{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--muted);font-size:13.5px;font-weight:500;
  padding:5px 10px;border:1px solid var(--line);border-radius:20px;
  background:var(--panel);
}
.back:hover{color:var(--ink);border-color:var(--muted)}

/* ---- panels ---- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;
}
.panel.accent{border-color:var(--accent)}
.label{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:650;
}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.row.spread{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:14px}
.hint{color:var(--muted);font-size:13px;margin:4px 0 0}

/* ---- buttons and inputs ---- */
button{
  font:inherit;padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  transition:border-color .12s, background .12s;
}
button:hover:not(:disabled){border-color:var(--muted)}
button:disabled{opacity:.4;cursor:default}
button.primary{
  background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);font-weight:600;
}
button.primary:hover:not(:disabled){filter:brightness(1.08)}
button.big{padding:12px 26px;font-size:16px}
button.small{padding:6px 11px;font-size:13px}
button.ghost{background:transparent}
kbd{
  font:600 11px ui-monospace,monospace;opacity:.7;border:1px solid currentColor;
  border-radius:3px;padding:0 4px;margin-left:6px;
}
input[type=text],input[type=number],select{
  font:inherit;padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
}
input:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:2px;
}
input[type=number]{width:112px}
input[type=text]{width:100%}

/* ---- segmented control (choice fields, human/computer) ---- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:var(--panel)}
.seg button{
  border:none;border-radius:0;padding:7px 14px;font-size:13.5px;
  background:transparent;color:var(--muted);
}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.seg button:hover:not(.on){color:var(--ink);background:var(--panel-2)}

/* ---- stepper (int fields) ---- */
.stepper{display:inline-flex;align-items:center;gap:2px}
.stepper button{
  width:34px;height:34px;padding:0;font-size:18px;line-height:1;
  border-radius:var(--radius-sm);
}
.stepper .val{
  min-width:46px;text-align:center;font-weight:650;font-size:17px;
  font-variant-numeric:tabular-nums;
}

/* ---- setup form ---- */
.field{padding:14px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:none;padding-bottom:0}
.field:first-child{padding-top:0}
.fieldhead{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.fieldhead .label{flex:none}
.fieldhead .hint{margin:0;flex:1}
.seatlist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
/* Three or four choices per seat need the room. `flex-wrap` is the safety
   net: whatever the game offers, the name box drops to its own line rather
   than squeezing to nothing. */
.seatlist.multi{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.seatlist.multi .seg button{padding:7px 10px;font-size:12.5px}
.seatrow{
  display:flex;align-items:center;gap:9px;padding:8px 10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);
}
.seatrow.human{border-color:var(--accent);background:var(--you)}
.seatno{
  color:var(--muted);font-size:12px;font-weight:650;width:16px;flex:none;
  font-variant-numeric:tabular-nums;
}
.seatrow input[type=text]{flex:1 1 110px;min-width:0;background:var(--panel)}

/* ---- log ---- */
.log{max-height:210px;overflow-y:auto;font-size:13.5px}
.log div{padding:3px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.log div:last-child{border-bottom:none;color:var(--ink)}
.log div.mark{color:var(--warn);font-weight:600}
.log:empty::after{content:"nothing yet";color:var(--muted);font-style:italic}

/* ---- status and errors ---- */
.status{color:var(--muted);font-style:italic;font-size:13.5px}
.error{
  border-color:var(--warn);color:var(--warn);
  font-family:ui-monospace,monospace;font-size:13px;white-space:pre-wrap;
}

/* ---- full-screen cover (hot-seat gate, results) ---- */
.cover{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.coverbox{max-width:460px;text-align:center}
.coverbox .who{font-size:27px;font-weight:700;margin-bottom:10px}
.coverbox p{color:var(--muted);margin:0 0 22px}

/* ---- misc ---- */
.chip{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;border:1px solid var(--line);
  color:var(--muted);white-space:nowrap;
}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.spinner{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent-text);
  animation:spin .7s linear infinite;vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .spinner{animation:none}
  *{transition:none !important}
}

/* ---- how to play ---------------------------------------------------------
   A sheet rather than a page: the rules are something you glance at with the
   board still behind you, not somewhere you navigate to and have to come back
   from. Every game gets the same one, filled from its own spec. */
.info{
  width:30px;height:30px;padding:0;border-radius:50%;flex:none;
  font:700 15px/1 ui-sans-serif,system-ui,sans-serif;color:var(--muted);
  border:1px solid var(--line);background:var(--panel);
}
.info:hover{color:var(--accent-text);border-color:var(--accent)}
.sheet{
  position:fixed;inset:0;z-index:60;padding:24px 16px;overflow-y:auto;
  background:color-mix(in srgb, var(--ink) 45%, transparent);
  display:flex;align-items:flex-start;justify-content:center;
}
.sheetbox{
  width:min(640px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px 22px;margin:min(6vh,60px) 0;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
}
.sheethead{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.sheethead h2{margin:0;font-size:20px;font-weight:650;flex:1;
  letter-spacing:-.01em}
.sheetbox section{padding:14px 0;border-bottom:1px solid var(--line)}
.sheetbox section:last-child{border-bottom:none;padding-bottom:0}
.sheetbox h3{
  margin:0 0 7px;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);font-weight:700;
}
.sheetbox ul{margin:0;padding-left:18px}
.sheetbox li{margin:5px 0;font-size:14px;line-height:1.5}