/* Nightcap core — the design system.

   Extracted verbatim from nightcap-bingo's host.html / owner.html / tv.html,
   which already shared this palette across all three pages. Serve it once and
   link it from every page in every game so the look can't drift.

   Serve:  app.get('/core/theme.css', (req,res) =>
             res.type('css').sendFile(require.resolve('nightcap-core/core/web/theme.css')))
*/

:root {
  --bg: #0e0b1a;
  --panel: #1a1530;
  --panel2: #241d44;
  --ink: #f4f1ff;
  --muted: #a99fce;
  --accent: #ff3d8b;
  --accent2: #7b5cff;
  --gold: #ffd24a;
  --line: #2c2450;
  --ok: #4ade80;
  --stop: #ff3d8b;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* ---- buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(92deg, var(--accent), var(--accent2));
  color: #fff; border: 0; border-radius: 12px;
  padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

/* Gold is reserved for the single most important action on a page. If two gold
   buttons are visible at once, one of them is wrong. */
.btn.gold {
  background: linear-gradient(92deg, #ffcf3a, #ffb02e);
  color: #2b1d00; box-shadow: 0 6px 22px rgba(255, 210, 74, .24);
}
.btn.ghost {
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.sm  { padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px; }
.btn.big { padding: 17px 30px; border-radius: 16px; font-size: 20px; }

/* ---- surfaces --------------------------------------------------------- */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; margin: 18px 0;
}
.sec {
  margin: 30px 0 12px; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 17px; text-align: center;
}
.tile .num { font-size: 31px; font-weight: 900; color: var(--gold); letter-spacing: -.02em; }
.tile .lab { font-size: 12px; color: var(--muted); margin-top: 3px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; color: var(--muted); font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
td { padding: 10px; border-bottom: 1px solid rgba(44, 36, 80, .5); }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- generated settings form (core/web/schema-form.js) ----------------- */

.nf-f { margin-bottom: 19px; }
.nf-f[hidden] { display: none; }
.nf-lab {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px; margin-bottom: 7px;
}
.nf-val { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 800; }
.nf-help { color: var(--muted); font-size: 12px; margin-top: 5px; }

.nf-f input[type=range] { width: 100%; accent-color: var(--accent); height: 5px; }
.nf-f input[type=text], .nf-sel {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-sm); padding: 10px 12px; font: inherit;
}
.nf-f input[type=text]::placeholder { color: #5f5590; }

.nf-sw {
  width: 47px; height: 27px; border-radius: 14px; background: #3a3168;
  border: 0; cursor: pointer; position: relative; flex: none; padding: 0;
  transition: background .18s;
}
.nf-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  transition: transform .18s;
}
.nf-sw[aria-checked=true] { background: linear-gradient(92deg, var(--accent), var(--accent2)); }
.nf-sw[aria-checked=true]::after { transform: translateX(20px); }

.nf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nf-chip {
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.nf-chip.nf-on {
  background: linear-gradient(92deg, var(--accent), var(--accent2));
  color: #fff; border-color: transparent;
}

.nf-lineup { display: flex; flex-direction: column; gap: 7px; }
.nf-lrow { display: flex; align-items: center; gap: 9px; }
.nf-lnum { color: var(--muted); font-size: 12px; width: 56px; flex: none; font-weight: 700; }
.nf-lrow .nf-sel { flex: 1; font-size: 13.5px; padding: 9px 10px; }

/* Progressive disclosure. Advanced settings stay collapsed so a returning owner
   never has to look at them. */
.nf-grp {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 19px;
}
.nf-grp > summary {
  cursor: pointer; padding: 13px 15px; font-weight: 700; font-size: 14px;
  list-style: none; display: flex; justify-content: space-between;
}
.nf-grp > summary::-webkit-details-marker { display: none; }
.nf-grp > summary::after { content: "▾"; color: var(--muted); }
.nf-grp[open] > summary::after { content: "▴"; }
.nf-grpbody { padding: 0 15px 6px; }

/* ---- trial banner ----------------------------------------------------- */

.banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-radius: var(--r-md); padding: 15px 18px; margin: 18px 0; border: 1px solid;
}
.banner .btitle { font-weight: 800; font-size: 15px; }
.banner .bbody { font-size: 13.5px; opacity: .9; margin-top: 2px; }
.banner .bmain { flex: 1; min-width: 220px; }
.banner.info { background: rgba(123, 92, 255, .10); border-color: rgba(123, 92, 255, .40); color: #d9cfff; }
.banner.warn { background: rgba(255, 210, 74, .10); border-color: rgba(255, 210, 74, .42); color: #ffe8a8; }
.banner.stop { background: rgba(255, 61, 139, .12); border-color: rgba(255, 61, 139, .50); color: #ffc7de; }

/* ---- accessibility ---------------------------------------------------- */

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}