/* ── Party Pad design system ────────────────────────────────────────────────
   Editorial party theme: large Georgia serif headlines, compact uppercase Inter
   labels, cream paper surfaces, thick navy borders, hard offset shadows, and a
   purple illustrated world for the shared screen.

   Surfaces are hybrid by design:
     • phone / hub / admin  → cream + paper (this file's defaults)
     • host TV             → purple world (host.css re-points the same tokens)

   Anything sitting directly on the app background uses var(--on-bg); anything on
   a card/button/input sets var(--ink) explicitly, so the host's light-on-purple
   text never leaks onto a cream surface. */

:root {
  /* Ink & paper */
  --ink:#17142c; --ink-soft:#332d50; --ink-dim:#6e6878; --ink-mute:#8b8598;
  --cream:#fff7e8; --paper:#fffdf7; --white:#ffffff;

  /* Surfaces (host.css re-points these for the TV) */
  --bg-0:#fff7e8; --bg-1:#fffdf7; --bg-2:#f6ecd8;
  --card:#fffdf7; --card-2:#fff7e8;
  --app-bg-image:none;
  --on-bg:var(--ink);              /* text drawn straight onto the background */

  /* Lines: ink by default (the theme's thick navy rule), soft for dividers */
  --line:#17142c; --line-soft:rgba(23,20,44,.16);

  /* Palette */
  --purple:#6753ed; --purple-dark:#4d3bc8; --purple-light:#8975ff;
  --coral:#ff705e; --yellow:#ffd44d; --mint:#55d6b5;
  --blue:#87b9ff; --lilac:#b991ff; --pink:#f4a5c4;

  /* Semantic roles */
  --brand:#6753ed; --brand-2:#ff705e; --accent:#55d6b5; --gold:#ffd44d;
  --good:#3fbf9c; --bad:#e8523f; --warn:#ffd44d;

  --grad: linear-gradient(155deg,#8975ff 0%,#6753ed 56%,#4d3bc8 100%);
  --grad-warm: linear-gradient(135deg,#ffd44d,#ff705e);

  /* Pre-game countdown. The digits sit straight on the app background, so each
     surface picks its own high-contrast pair (host.css re-points these for the
     purple TV, where a purple number vanished into the wallpaper). */
  --countdown-ink:#ff705e; --countdown-go:#6753ed;

  /* Shape */
  --r-lg:26px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --bw:3px;                                   /* standard border weight */
  --shadow: 6px 7px 0 var(--ink);
  --shadow-sm: 4px 5px 0 var(--ink);
  --shadow-lg: 10px 12px 0 var(--ink);

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--on-bg); background:var(--bg-0);
  background-image:var(--app-bg-image);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}

/* Headlines are the editorial serif; UI labels stay sans (see .label/.kicker). */
h1,h2,h3 { margin:0 0 .3em; font-family:var(--display); font-weight:400;
  line-height:.92; letter-spacing:-.04em; }
h1 em, h2 em, h3 em { font-style:italic; color:var(--yellow); }
a { color:var(--brand); }
img { max-width:100%; }

button { color:inherit; font-family:inherit; }

/* Compact uppercase label — the theme's counterweight to the serif headlines. */
.kicker, .label { font-family:var(--font); font-size:.72rem; font-weight:900;
  letter-spacing:.17em; text-transform:uppercase; }

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Pill-shaped, ink-bordered, sitting on a hard offset shadow. Pressing pushes
   the button down into its own shadow. */
.btn {
  font-family:inherit; font-weight:900; font-size:.95rem; cursor:pointer; text-decoration:none;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
  border:var(--bw) solid var(--ink); border-radius:var(--r-pill);
  padding:.85em 1.5em; color:var(--ink); background:var(--white);
  box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s, filter .15s;
  min-height:52px;
}
.btn:hover { filter:brightness(1.03); transform:translate(-1px,-2px); box-shadow:6px 8px 0 var(--ink); }
.btn:active { transform:translate(3px,4px); box-shadow:1px 1px 0 var(--ink); }
.btn:focus-visible { outline:3px solid var(--purple); outline-offset:3px; }
.btn.primary { background:var(--coral); color:var(--white); }
.btn.gold { background:var(--yellow); color:var(--ink); }
.btn.ghost { background:transparent; box-shadow:none; }
.btn.ghost:hover { background:rgba(23,20,44,.06); transform:none; box-shadow:none; }
.btn.danger { background:var(--bad); color:var(--white); }
.btn.big { font-size:1rem; padding:1em 1.6em; min-height:64px; }
.btn.block { width:100%; }
.btn:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; transform:none; filter:grayscale(.4); }

/* Arrow bubble inside a pill button (theme's signature affordance). */
.btn .arrow { display:inline-grid; place-items:center; width:34px; height:34px; margin-left:.6em;
  border-radius:50%; background:var(--ink); color:var(--white); font-size:1.05rem; }

/* ── Cards / surfaces ────────────────────────────────────────────────────── */
.card { background:var(--card); color:var(--ink); border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow); }
.muted { color:var(--ink-dim); }
.mute2 { color:var(--ink-mute); }
.small { font-size:.85rem; }
.center { text-align:center; }
.row { display:flex; gap:12px; align-items:center; }
.col { display:flex; flex-direction:column; gap:12px; }
.wrap { display:flex; flex-wrap:wrap; gap:10px; }
.grow { flex:1; }
.hidden { display:none !important; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:.35em .85em; border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  font-weight:900; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
input,textarea,select {
  font-family:inherit; font-size:1.05rem; font-weight:600; color:var(--ink); background:var(--white);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md); padding:.75em .9em; width:100%;
  box-shadow:var(--shadow-sm);
}
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--purple); box-shadow:4px 5px 0 var(--purple); }
input::placeholder,textarea::placeholder { color:var(--ink-mute); font-weight:600; }
label { font-weight:900; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ── Player chip / avatar ────────────────────────────────────────────────── */
.pchip { display:inline-flex; align-items:center; gap:8px; padding:.4em .85em; border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); border:3px solid var(--pc,var(--purple)); font-weight:800; }
.pchip .ava { font-size:1.3em; }
.pchip.off { opacity:.45; filter:grayscale(.7); }
.dot { width:10px; height:10px; border-radius:50%; background:var(--pc,var(--purple)); flex:0 0 auto; }

/* ── Code display ───────────────────────────────────────────────────────── */
.code-badge { font-family:var(--mono); font-weight:800; letter-spacing:.35em; background:var(--yellow);
  color:var(--ink); border:var(--bw) solid var(--ink); border-radius:var(--r-md); padding:.3em .6em;
  display:inline-block; box-shadow:var(--shadow-sm); }

/* ── Timer bar ──────────────────────────────────────────────────────────── */
.timerbar { height:16px; border-radius:var(--r-pill); background:var(--white); overflow:hidden;
  border:2px solid var(--ink); }
.timerbar > i { display:block; height:100%; background:var(--grad-warm); width:100%; transition:width .25s linear; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
#toast-host { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:var(--ink); border:2px solid var(--ink); color:var(--white); padding:.7em 1.2em; border-radius:var(--r-pill);
  font-weight:800; box-shadow:var(--shadow-sm); opacity:0; transform:translateY(10px); transition:.25s; }
.toast.show { opacity:1; transform:none; }

/* ── Setup banner (config missing) ──────────────────────────────────────── */
.setup-banner { background:var(--yellow); color:var(--ink); padding:14px 18px; font-weight:800;
  text-align:center; border-bottom:var(--bw) solid var(--ink); }

/* ── Accessibility ──────────────────────────────────────────────────────── */
:focus-visible { outline:3px solid var(--purple); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}