/* ── Party platform design system ──────────────────────────────────────────
   Original bright/energetic party aesthetic. Big type, strong contrast,
   readable across a room. Shared tokens + components used by host & phone. */

:root {
  --bg-0:#140a2e; --bg-1:#1e1147; --bg-2:#2a1a5e;
  --ink:#f7f4ff; --ink-dim:#c3b8e6; --ink-mute:#8f82b8;
  --card:#241653; --card-2:#2e1d68; --line:#3d2a7a;
  --brand:#ff4d9d; --brand-2:#7c4dff; --accent:#22e0c8; --gold:#ffd23f;
  --good:#3ddc84; --bad:#ff5d5d; --warn:#ffb020;
  --grad: linear-gradient(135deg,#ff4d9d 0%,#7c4dff 55%,#22c5ff 100%);
  --grad-warm: linear-gradient(135deg,#ffd23f,#ff4d9d);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --font: "Baloo 2","Trebuchet MS",system-ui,-apple-system,Segoe UI,Roboto,sans-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(--ink); background:var(--bg-0);
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:
    radial-gradient(1100px 600px at 15% -10%, rgba(124,77,255,.35), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(255,77,157,.28), transparent 55%),
    radial-gradient(800px 800px at 50% 120%, rgba(34,197,255,.20), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3 { margin:0 0 .3em; line-height:1.05; font-weight:800; }
a { color:var(--accent); }
img { max-width:100%; }

/* Buttons default to the browser's black text on any custom (non-.btn) button —
   make them inherit the app's light text so custom buttons (draft choices, vote
   cards, etc.) are readable. Explicit colors (.btn, .btn.gold) still win. */
button { color:inherit; font-family:inherit; }

/* Buttons */
.btn {
  font-family:inherit; font-weight:800; font-size:1.05rem; cursor:pointer;
  border:none; border-radius:var(--r-md); padding:.85em 1.3em; color:#fff;
  background:var(--card-2); box-shadow:0 4px 0 rgba(0,0,0,.35); transition:transform .06s, filter .15s;
  min-height:52px; letter-spacing:.2px;
}
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.btn.primary { background:var(--grad); }
.btn.gold { background:var(--grad-warm); color:#2a1a5e; }
.btn.ghost { background:transparent; box-shadow:inset 0 0 0 2px var(--line); }
.btn.danger { background:linear-gradient(135deg,#ff5d5d,#c0392b); }
.btn.big { font-size:1.3rem; padding:1.05em 1.6em; min-height:64px; }
.btn.block { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }

/* Cards / surfaces */
.card { background:var(--card); border:1px solid var(--line); 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:.3em .7em; border-radius:999px; background:var(--card-2); font-weight:700; font-size:.85rem; }

/* Inputs */
input,textarea,select {
  font-family:inherit; font-size:1.1rem; color:var(--ink); background:#1b0f43;
  border:2px solid var(--line); border-radius:var(--r-md); padding:.75em .9em; width:100%;
}
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--accent); }
label { font-weight:700; font-size:.9rem; color:var(--ink-dim); }

/* Player chip / avatar */
.pchip { display:inline-flex; align-items:center; gap:8px; padding:.4em .8em; border-radius:999px;
  background:var(--card-2); border:2px solid var(--pc,#7c4dff); 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,#7c4dff); flex:0 0 auto; }

/* Code display */
.code-badge { font-family:var(--mono); font-weight:800; letter-spacing:.35em; background:#0f0730;
  border:2px solid var(--line); border-radius:var(--r-md); padding:.3em .6em; display:inline-block; }

/* Timer bar */
.timerbar { height:14px; border-radius:999px; background:#0f0730; overflow:hidden; border:1px solid var(--line); }
.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:#0f0730; border:1px solid var(--line); color:var(--ink); padding:.7em 1.1em; border-radius:999px;
  font-weight:700; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.25s; }
.toast.show { opacity:1; transform:none; }

/* Setup banner (config missing) */
.setup-banner { background:var(--warn); color:#2a1a5e; padding:14px 18px; font-weight:700; text-align:center; }

/* Accessibility */
:focus-visible { outline:3px solid var(--accent); 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; }
}