/* shared.css — loaded by every game page (not index.html) */

/* ── Theme tokens ── */
:root {
  /* ── Surfaces and rules ──
     Every panel, hairline and outline on a host page comes from these, so the
     whole site can be repainted by redefining this list in one place. They are
     deliberately semantic — "the second surface", "the bright rule" — rather
     than named after the colour they happen to be right now. */
  --bg: #0d0d1a;           /* the page itself                       */
  --surface: #13132b;      /* cards and panels sitting on the page  */
  --surface-2: #1a1a38;    /* a panel nested inside another         */
  --surface-b: #100f25;    /* the darker half of a panel gradient   */
  --border: #1e1e42;       /* the default hairline                  */
  --border-2: #2e2e5e;     /* a rule that needs to be noticed       */
  --border-3: #35335e;     /* a button's own outline                */
  --border-dim: rgba(255,255,255,.06);
  /* ── Text has to survive a projector ──
     Every colour here is contrast-checked against --bg. The host shares this
     screen over a call, so the picture is scaled down and video-compressed
     before anyone reads it: greys that look merely "quiet" on the machine it
     was built on disappear completely on the other end. #555 body text was
     2.6:1 and #333 hints were 1.4:1 — they were not quiet, they were gone.
     Anything a host or player has to READ uses --text / --text-dim /
     --text-muted, all of which clear 4.5:1 on every surface they land on.
     --text-faint is for rules and separators, never for words. */
  --text-hi: #fff;         /* 18.1:1 — the brightest thing on the page, and text
                              sitting on a solid colour block                  */
  --text: #eee;            /* 16.6:1 — headings, card words                */
  --text-2: #ddd;          /* 13.6:1 — body copy inside a card                 */
  --text-3: #ccc;          /* 11.0:1 — the quieter half of a card              */
  --text-dim: #9999bb;     /* 7.0:1  — body copy, and any label on a button face */
  --text-muted: #82829f;   /* 5.2:1  — small captions on the page or a card      */
  --text-faint: #2a2a50;   /* decoration only: hairlines, dividers, watermarks   */

  /* ── State colours, split by job ──
     A colour bright enough to be a fill is not automatically readable as words
     on top of one. So the bright hexes stay written inline wherever they paint
     a SHAPE (fill, rule, glow) — those need no help — and every place that
     paints a WORD goes through one of these instead. Retuning the site's text
     for legibility is then this short list, not a sweep of every file. */
  --ok-text: #22c55e;
  --ok-text-lit: #4ade80;
  --bad-text: #ef4444;
  --bad-text-soft: #fca5a5;   /* a note about a failure, not the failure itself */
  --warn-text: #f59e0b;
  --warn-text-soft: #fdba74;
  --gold-text: #eab308;
  --info-text: #93c5fd;
  --violet-text: #a78bfa;
  --divider: #1e1e3a;
  /* ── Every button has a face ──
     A control filled with the page colour reads as a label, not something to
     press: the Taboo! verdicts sat next to an outlined Deal button and got
     pressed by mistake for exactly that reason. So the one action the host is
     meant to take is a solid accent fill, and every other button sits on a
     slate face that is clearly lighter than the page behind it. */
  --btn-face: #22224a;
  --btn-face-hi: #2d2d5e;
  --btn-off: #2a2a4a;      /* a disabled button's fill */
  /* An accent bright enough to be a solid fill is not automatically bright enough
     to be TEXT on --btn-face: indigo #6366f1 reads 3.4:1 there. Each page that
     paints its accent as words overrides --accent-text (and --accent-alt-text)
     with a lightened version; the fill, border and glow keep the exact brand
     colour, because those are shapes, not something anyone has to read. */
  --accent-text: var(--accent);
  --btn-ink: #050510;      /* text on a solid accent fill — dark enough that even
                              the lightest accent (indigo) clears 4.5:1 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(28px, env(safe-area-inset-top))
           max(20px, env(safe-area-inset-right))
           max(72px, calc(env(safe-area-inset-bottom) + 24px))
           max(20px, env(safe-area-inset-left));
  overflow-x: hidden;
  position: relative;
  transition: background .3s, color .3s;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

.topbar {
  width: 100%; max-width: 1100px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 36px;
  animation: fadeUp .45s ease both;
  position: relative; z-index: 1;
}
a.back {
  color: var(--text-muted); text-decoration: none; font-size: 14px;
  transition: color .2s;
}
a.back:hover { color: var(--text); }
.round-badge { font-size: 13px; color: var(--text-muted); }
.round-badge span { font-weight: 700; }

.header {
  text-align: center; margin-bottom: 32px;
  animation: fadeUp .45s .1s ease both;
  position: relative; z-index: 1;
}
.header h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800;
}

.reset-btn {
  background: var(--btn-face); color: var(--text-dim);
  border: 2px solid #35355e; border-radius: 999px;
  padding: 16px 28px; font-size: 1rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .2s, color .2s, border-color .2s, transform .1s;
}
.reset-btn:hover { background: var(--btn-face-hi); color: var(--text); border-color: var(--text-muted); }
.reset-btn:active { transform: scale(.97); }
.reset-btn:disabled { opacity: .3; cursor: not-allowed; }

.hint {
  margin-top: 14px; font-size: 13px; color: var(--text-muted);
  text-align: center; transition: color .3s;
}

/* ── Soft theme: game-render.js class overrides ── */

/* ── Sunset theme: game-render.js class overrides ── */

/* ── Forest theme: game-render.js class overrides ── */


@media (max-width: 520px) {
  .topbar { margin-bottom: 24px; }
  .header { margin-bottom: 22px; }
  .reset-btn { padding: 13px 20px; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Host-page chrome ──
   Every host page draws the same warning strip, section headings and pair of
   buttons; only the colour changes. Each page sets its own --accent (and
   --accent-alt for the secondary button's hover, where it differs), so these
   rules live here once instead of being copied into ten <style> blocks.
   A page that genuinely needs a different shape still overrides below — its
   own <style> comes after this file. */
.hidden { display: none !important; }

/* the line under a Draw/Spin button that says the cards are deciding the next round
   (next-round.js) — small and dim: it is a status, the button above it is the backup */
.next-status {
  text-align: center; font-size: .9rem; color: var(--text-dim); line-height: 1.5;
  max-width: 560px; margin: 10px auto 0;
}
/* the same line while a next-round countdown runs: brighter, so the projected
   screen shows the number every card is showing */
.next-status.is-counting { color: var(--warn-text); font-weight: 800; }

.fb-warning {
  width: 100%; max-width: 1100px;
  background: color-mix(in srgb, var(--warn, var(--accent)) 10%, transparent);
  border: 1.5px solid var(--warn, var(--accent));
  color: var(--warn, var(--accent));
  border-radius: 12px; padding: 12px 16px; font-size: .82rem; line-height: 1.6;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.fb-warning code { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 4px; }

.section-hdr {
  width: 100%; max-width: 1100px;
  font-size: .86rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin: 6px 0 10px;
  position: relative; z-index: 1;
}

.btn-primary {
  background: var(--accent); color: var(--btn-ink); border: 2px solid var(--accent);
  border-radius: 12px; padding: 12px 26px;
  font-size: .95rem; font-weight: 800; font-family: inherit; cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 26%, transparent);
  transition: filter .2s, transform .1s;
}
.btn-primary:hover  { filter: brightness(1.08); }
.btn-primary:active { transform: scale(.98); }

.btn-secondary {
  background: var(--btn-face); color: var(--text-dim); border: 2px solid var(--border-3);
  border-radius: 12px; padding: 12px 22px;
  font-size: .9rem; font-weight: 700; font-family: inherit; cursor: pointer;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.btn-secondary:hover  { background: var(--btn-face-hi); border-color: var(--accent-alt, var(--accent)); color: var(--accent-alt-text, var(--accent-text)); }
.btn-secondary:active { transform: scale(.98); }

/* ── Game guide ──
   The how-to-play briefing guide.js injects above every game. Deliberately
   larger and brighter than the rest of the chrome: the host reads it out from
   a shared screen, so body copy is pure white at ~18px rather than the dimmer
   greys used elsewhere. Colour comes from each page's own --accent. */
.guide-veiled { display: none !important; }

.guide-screen {
  width: 100%; max-width: 900px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 18px;
  padding: 32px 34px 28px;
  margin-bottom: 28px;
  position: relative; z-index: 1;
  animation: fadeUp .45s .15s ease both;
}

.guide-top { margin-bottom: 16px; }
.guide-badge {
  display: inline-block;
  font-size: .95rem; font-weight: 800; letter-spacing: .5px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px; padding: 6px 16px;
}

.guide-tagline {
  font-size: 1.3rem; line-height: 1.7; font-weight: 700;
  color: var(--text-hi);
  padding-bottom: 22px; margin-bottom: 6px;
  border-bottom: 1px solid var(--divider);
}

.guide-sec { margin-top: 26px; }
.guide-sec-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.4rem; font-weight: 800; color: var(--accent);
  margin-bottom: 14px;
}
.guide-sec-icon { font-size: 1.5rem; line-height: 1; }

/* Body copy: bright white, comfortably large for a shared screen. */
.guide-p,
.guide-steps li,
.guide-tips li,
.guide-role-desc {
  font-size: 1.15rem; line-height: 1.85; color: var(--text-hi);
}
.guide-p + .guide-p { margin-top: 12px; }

.guide-steps { list-style: none; counter-reset: guide-step; }
.guide-steps li {
  counter-increment: guide-step;
  position: relative; padding-left: 46px; margin-bottom: 14px;
}
.guide-steps li::before {
  content: counter(guide-step);
  position: absolute; left: 0; top: .15em;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

.guide-roles { display: grid; gap: 12px; }
.guide-role {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface-b);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.guide-role-emoji { font-size: 1.8rem; line-height: 1.2; flex-shrink: 0; }
.guide-role-body { min-width: 0; }
.guide-role-name {
  font-size: 1.15rem; font-weight: 800; color: var(--accent);
  margin-bottom: 4px;
}

.guide-tips { list-style: none; }
.guide-tips li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
}
.guide-tips li::before {
  content: '•';
  position: absolute; left: 6px; top: 0;
  color: var(--accent); font-weight: 900;
}

.guide-actions {
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--divider);
  display: flex; justify-content: center;
}
.guide-start {
  background: var(--accent); color: var(--btn-ink);
  border: none; border-radius: 14px;
  padding: 18px 46px;
  font-size: 1.2rem; font-weight: 800; font-family: inherit;
  cursor: pointer;
  transition: filter .2s, transform .1s;
}
.guide-start:hover  { filter: brightness(1.12); }
.guide-start:active { transform: scale(.98); }

@media (max-width: 520px) {
  .guide-screen { padding: 24px 20px 22px; border-radius: 14px; }
  .guide-tagline { font-size: 1.15rem; }
  .guide-sec-title { font-size: 1.22rem; }
  .guide-p,
  .guide-steps li,
  .guide-tips li,
  .guide-role-desc { font-size: 1.05rem; line-height: 1.8; }
  .guide-steps li { padding-left: 40px; }
  .guide-steps li::before { width: 28px; height: 28px; font-size: .92rem; }
  .guide-start { width: 100%; padding: 16px 24px; font-size: 1.08rem; }
}

/* ── Buttons quoted inside a guide ──
   guide-data.js renders real <button>s carrying each page's own button class,
   so the briefing shows the exact control the host will tap rather than naming
   it. These rules only neutralise the parts that do not survive being dropped
   into a sentence — full-width sizing, margins, entry animations, clicks — and
   leave colour, border, radius and weight to the page's own class. !important
   is needed because each page's <style> loads after this file.
   The is-* variants below are for buttons that live on the player cards
   (play.html), which has no stylesheet in common with the host pages; the
   values mirror the ones there. */
.guide-btn {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: auto !important;
  max-width: 100% !important;
  margin: 2px 3px !important;
  vertical-align: middle;
  pointer-events: none;
  animation: none !important;
  box-shadow: none;
}
.guide-btn-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 4px;
}
.guide-btn-row .guide-btn { margin: 0 !important; }

/* filled card buttons — buzzers, Taboo! calls, the judge's verdict */
.guide-btn.is-green,
.guide-btn.is-red {
  border-radius: 14px; padding: 12px 20px;
  font-size: 1rem; font-weight: 900; font-family: inherit;
}
.guide-btn.is-green { background: #22c55e; border: 2px solid #22c55e; color: var(--btn-ink); }
.guide-btn.is-red   { background: #ef4444; border: 2px solid #ef4444; color: #2b0505; }

/* outlined card buttons — A/B/C picks, the jury's two options */
.guide-btn.is-choice {
  background: var(--bg); border: 2px solid var(--border); color: var(--text-2);
  border-radius: 14px; padding: 12px 20px;
  font-size: .95rem; font-weight: 800; font-family: inherit;
}
/* a filled card button in the page's own accent — Say It's deal button */
.guide-btn.is-accent { background: var(--accent); border: 2px solid var(--accent); color: var(--btn-ink); }
.guide-btn.is-choice.is-tint-red   { color: var(--bad-text); background: #ef44441f; }
.guide-btn.is-choice.is-tint-green { color: var(--ok-text); background: #22c55e1f; }

@media (max-width: 520px) {
  .guide-btn.is-green,
  .guide-btn.is-red,
  .guide-btn.is-choice { padding: 10px 14px; font-size: .92rem; }
}

/* ── Phone mockups inside a guide ──
   Some games deal a secret card to each player's phone, and describing that in
   words never lands — the host has never seen the card either, because it is
   the one thing that must not appear on the shared screen. So the guide draws
   it: a phone frame with a scaled-down replica of the real card.
   The values below are copied from play.html (border 2px, radius 26px, the
   name chip's filled pill, the 6rem emoji…) and scaled down together, because
   play.html has no stylesheet in common with the host pages — same reason the
   is-green / is-red buttons above carry their own copy. Card colour follows
   each page's own --accent, which already matches that game's theme in
   play.html. */
.guide-phones {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin: 4px 0 2px;
}
.guide-phone-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.guide-phone-cap {
  font-size: .92rem; font-weight: 800; color: var(--accent);
  text-align: center;
}

.guide-phone {
  width: 208px; flex-shrink: 0;
  background: var(--bg);
  border: 7px solid #2c2c4e;
  border-radius: 30px;
  padding: 20px 12px 16px;
  position: relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
/* the speaker slot, so it reads as a phone and not just a rounded box */
.guide-phone::before {
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 5px; border-radius: 999px; background: #2c2c4e;
}

.gp-card {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: 18px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  text-align: center;
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 18%, transparent);
}
.gp-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 900; letter-spacing: .5px;
  color: var(--btn-ink); border: 2px solid; border-radius: 999px;
  padding: 4px 13px 4px 9px; max-width: 100%;
}
.gp-name::before {
  content: ''; flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.gp-emoji { font-size: 3.1rem; line-height: 1; }
.gp-word  { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.15; overflow-wrap: break-word; }
.gp-hint  {
  font-size: .8rem; color: #8b8ba7; line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 11px; width: 100%;
}
/* the rest of the card parts, each scaled down from its play.html original:
   .pick-chip / .pick-text / .pick-sub / .taboo-target / .taboo-banned / .role-box */
.gp-chip {
  font-size: .64rem; font-weight: 900; letter-spacing: .8px; text-transform: uppercase;
  border: 1px solid; border-radius: 20px; padding: 3px 11px;
}
.gp-text { width: 100%; font-size: .84rem; font-weight: 700; color: #fff; line-height: 1.5; }
.gp-sub  { font-size: .74rem; color: #8b8ba7; line-height: 1.5; }

.gp-target {
  width: 100%; background: var(--bg); border: 2px solid var(--accent); border-radius: 12px;
  padding: 12px 9px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.gp-target .gp-tt-emoji { font-size: 1.9rem; line-height: 1; }
.gp-target .gp-tt-word  { font-size: 1.25rem; font-weight: 900; color: #fff; line-height: 1.2; overflow-wrap: break-word; max-width: 100%; }

.gp-pills { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.gp-pill-label {
  font-size: .62rem; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--bad-text);
}
.gp-pill-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.gp-pill {
  background: rgba(239,68,68,.1); border: 1.5px solid rgba(239,68,68,.45); color: var(--bad-text-soft);
  border-radius: 8px; padding: 4px 9px; font-size: .72rem; font-weight: 800;
}

.gp-role {
  width: 100%; background: var(--bg); border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 12px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.gp-role .gp-role-key  { font-size: .62rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.gp-role .gp-role-name { font-size: 1.05rem; font-weight: 900; color: #fff; line-height: 1.2; }
.gp-role .gp-role-hint { font-size: .74rem; color: #bbb; line-height: 1.5; }

.gp-turnbar {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  width: 100%; border: 2px solid; border-radius: 11px; padding: 9px 11px;
}
.gp-turnbar .gp-ct-token { font-size: .95rem; line-height: 1; align-self: center; }
.gp-turnbar .gp-ct-name { font-size: .95rem; font-weight: 900; letter-spacing: .4px; }
.gp-turnbar .gp-ct-suffix { font-size: .68rem; font-weight: 800; opacity: .75; }

.gp-btns { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.gp-btn {
  border-radius: 11px; padding: 9px 8px;
  font-size: .82rem; font-weight: 900; font-family: inherit;
  border: 2px solid transparent;
}
.gp-btn.is-green  { background: #22c55e; border-color: #22c55e; color: #06230f; }
.gp-btn.is-red    { background: #ef4444; border-color: #ef4444; color: #2b0505; }
.gp-btn.is-choice { background: #0d0d1a; border-color: var(--border); color: #ddd; }
/* the card's own accent-filled button (dark ink, as everywhere a filled accent
   carries text) */
.gp-btn.is-accent { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }

.guide-phone-note {
  font-size: 1.05rem; line-height: 1.8; color: var(--text-hi);
  margin-top: 14px;
  border-left: 3px solid var(--accent); padding-left: 14px;
}

@media (max-width: 520px) {
  .guide-phones { gap: 14px; justify-content: center; }
  .guide-phone { width: 160px; border-width: 6px; padding: 16px 9px 13px; }
  .gp-hint { font-size: .74rem; }
  .gp-emoji { font-size: 2.4rem; }
  .gp-word  { font-size: 1.2rem; }
  /* the narrower phone leaves the framed target word about 120px to sit in —
     "Pineapple" at the full size spills straight out of its own border */
  .gp-target .gp-tt-word { font-size: 1.05rem; }
  .guide-phone-note { font-size: .98rem; }
}