/* VibeTrivia: ink-plum ground, violet for actions, citrus for the things a room has to read from the back. */
:root {
  --bg: #100d24;
  --panel: #1a1636;
  --panel-2: #262049;
  --line: #383160;
  --field: #0b0919;
  --text: #f5f3ff;
  --muted: #a9a3cc;
  --accent: #7a58f5;
  --good: #3ddc97;
  --bad: #ff6b7d;
  --warn: #ffc53d;
  --c0: #ff5d73; --c1: #4f9dff; --c2: #ffc145; --c3: #3ddc97; --c4: #b07cff; --c5: #ff8f4f;
}
/* The dashboard is a working surface, so it runs light. */
html.light {
  --bg: #f6f5fb;
  --panel: #ffffff;
  --panel-2: #f1effa;
  --line: #dedaf0;
  --field: #ffffff;
  --text: #1b1638;
  --muted: #6a648c;
  --accent: #6a45f0;
  --good: #14795a;
  --bad: #c2334a;
  --warn: #b7791f;
}
html.light .panel { border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(27, 22, 56, .04); }
/* A themed deck supplies bg, text and accent; the panel shades are derived from them. */
html[data-theme]:not([data-theme="null"]) {
  --panel: color-mix(in srgb, var(--bg) 90%, var(--text));
  --panel-2: color-mix(in srgb, var(--bg) 80%, var(--text));
  --line: color-mix(in srgb, var(--bg) 68%, var(--text));
  --field: color-mix(in srgb, var(--bg) 88%, #000);
}
/* The mark is three poll bars; the wordmark sets "Vibe" heavy against "Trivia" light. */
.brand { display: inline-flex; align-items: center; gap: .45em; font-weight: 800; letter-spacing: -.015em; line-height: 1; color: var(--text); }
.brand .mark { width: 1.45em; height: 1.45em; border-radius: .38em; background: var(--accent); display: inline-flex; align-items: flex-end; justify-content: center; gap: .13em; padding: .3em .26em; flex: none; }
.brand .mark i { width: .2em; border-radius: .1em; background: #fff; }
.brand .mark i:nth-child(1) { height: 48%; } .brand .mark i:nth-child(2) { height: 100%; } .brand .mark i:nth-child(3) { height: 72%; }
.brand .light-part { font-weight: 400; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.45 "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
small { color: var(--muted); font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  cursor: pointer; border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 650;
  background: var(--accent); color: var(--on-accent, #fff); touch-action: manipulation;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--text); }
button.danger { background: var(--bad); }
button.small { padding: 7px 12px; border-radius: 9px; font-size: .88em; }
h1, h2, h3 { letter-spacing: -.015em; }
input, select, textarea {
  width: 100%; background: var(--field); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.error { color: var(--bad); min-height: 1.4em; }
.empty { color: var(--muted); padding: 1.5em 0; text-align: center; }

.c0 { background: var(--c0); } .c1 { background: var(--c1); } .c2 { background: var(--c2); }
.c3 { background: var(--c3); } .c4 { background: var(--c4); } .c5 { background: var(--c5); }
.t0 { color: var(--c0); } .t1 { color: var(--c1); } .t2 { color: var(--c2); }
.t3 { color: var(--c3); } .t4 { color: var(--c4); } .t5 { color: var(--c5); }

/* ----- shared result widgets ----- */
.bars { display: grid; gap: .55em; width: 100%; }
.bar-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 5.2em; gap: .7em; align-items: center; }
.bar-label { display: flex; gap: .55em; align-items: center; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.bar-label span:last-child { min-width: 0; }
.chip {
  flex: none; width: 1.7em; height: 1.7em; border-radius: .45em; display: grid; place-items: center;
  font-weight: 800; color: #10123c;
}
.bar-track { background: var(--panel-2); border-radius: .5em; height: 1.5em; overflow: hidden; }
.bar-fill { height: 100%; border-radius: .5em; min-width: 3px; transition: width .4s ease; }
.bar-count { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row.dim { opacity: .45; }
.bar-row.correct .bar-label::after { content: "✓"; color: var(--good); font-weight: 900; margin-left: .2em; }
@media (max-width: 600px) {
  .bar-row { grid-template-columns: minmax(0, 1fr) 4.6em; row-gap: .25em; }
  .bar-label { grid-column: 1 / -1; }
}
.rating-result { display: grid; gap: .8em; width: 100%; }
.rating-avg { font-size: 3em; font-weight: 800; text-align: center; }
.rating-avg small { font-size: .4em; }
.cloud { display: flex; flex-wrap: wrap; gap: .25em .8em; justify-content: center; align-items: baseline; font-weight: 750; line-height: 1.15; }
.texts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: .6em; width: 100%; }
.text-card { background: var(--panel); border-radius: .7em; padding: .7em .9em; overflow-wrap: anywhere; }

.timer { display: flex; align-items: center; gap: .7em; width: 100%; }
.timer-track { flex: 1; height: .5em; background: var(--panel-2); border-radius: 1em; overflow: hidden; }
.timer-fill { height: 100%; background: var(--warn); border-radius: 1em; transition: width .2s linear; }
.timer-num { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; }
.timer.urgent .timer-fill { background: var(--bad); }
.timer.urgent .timer-num { color: var(--bad); }

.board { display: grid; gap: .45em; width: 100%; max-width: 34em; margin: 0 auto; }
.board-row { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .7em; align-items: center; background: var(--panel); border-radius: .7em; padding: .4em .9em; font-weight: 650; }
.board-row:first-child { background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 34%, var(--panel)), var(--panel)); }
.board-row .rank { color: var(--muted); font-weight: 800; }
.board-row .score { font-variant-numeric: tabular-nums; }
.board-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- content slides ----- */
.slide-title h1 { font-size: 3em; font-weight: 850; }
.slide-title p { font-size: 1.4em; color: var(--muted); margin: .8em 0 0; }
.slide-content { text-align: left; }
.slide-content h2 { font-size: 2.1em; font-weight: 800; margin-bottom: .6em; }
.slide-body { font-size: 1.35em; line-height: 1.4; }
.slide-body p { margin: 0 0 .6em; }
.slide-body ul { margin: 0 0 .6em; padding-left: 1.2em; }
.slide-body li { margin-bottom: .35em; }
.slide-body li::marker { color: var(--accent); }
.slide-body ul ul { font-size: .88em; margin: .3em 0 0; color: var(--muted); }
.slide-image img { display: block; width: 100%; height: 100%; object-fit: contain; }

@font-face {
  font-family: "Public Sans";
  src: url("/vendor/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("/vendor/fonts/public-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
html.font-public-sans body { font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }