@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Monoton&family=Righteous&family=Rye&family=Mountains+of+Christmas:wght@400;700&display=swap');

:root {
  --bg: #15101f;
  --bg2: #1e1730;
  --card: #241b39;
  --card-border: #3a2d57;
  --ink: #ece7f7;
  --muted: #a99fc4;
  --gold: #e8c468;
  --purple: #8b6cf0;
  --purple-dim: #6b51c4;
  --green: #57c98a;
  --red: #e07070;
  --radius: 14px;
  --bloom-rgb: 232, 196, 104;   /* solve-bloom tint (matches --gold); overridden per pack */
}

* { box-sizing: border-box; }

/* Disable the double-tap-to-zoom gesture on touch devices (also removes the
   ~300ms tap delay) while keeping pinch-to-zoom for accessibility. */
html { touch-action: manipulation; }

html { scroll-behavior: smooth; scroll-padding-top: 74px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg2), var(--bg));
  color: var(--ink);
  min-height: 100vh;
}

/* Inline / prose hyperlinks — any anchor without its own class uses the brand
   gold instead of the browser-default blue/purple, site-wide. Every button, nav
   link, and card link carries a class, so those keep their own styling. */
a:not([class]) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
a:not([class]):visited { color: var(--gold); }
a:not([class]):hover   { color: #f2d488; }

/* Per-room hero art on the checkout/terms page (terms.php). */
.terms-hero {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 18px 0 24px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}

/* ── Shared sticky site navigation (injected by nav.js) ── */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(21, 16, 31, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-nav.is-scrolled {
  border-bottom-color: var(--card-border);
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
  background: rgba(21, 16, 31, .94);
}
.site-nav__inner {
  max-width: 1000px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 18px;
}
.site-nav__brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: 1.02rem; white-space: nowrap;
}
.site-nav__logo { display: block; border-radius: 7px; }
.site-nav__brand:hover .site-nav__name { color: var(--gold); }
.site-nav__links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.site-nav__links a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 8px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.site-nav__links a:hover { background: #2c2247; color: var(--gold); }
/* CTA — fixed colours so it looks identical on every page, even room pages
   whose body theme remaps --gold. */
.site-nav__cta {
  text-decoration: none; white-space: nowrap; font-weight: 700; font-size: .92rem;
  padding: 9px 18px; border-radius: 999px; background: #e8c468; color: #2a2010;
  border: 1px solid #caa84f; transition: filter .15s ease, transform .05s ease;
}
.site-nav__cta:hover { filter: brightness(1.06); }
.site-nav__cta:active { transform: translateY(1px); }
.site-nav__toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--card-border); border-radius: 10px;
  cursor: pointer; align-items: center; justify-content: center;
}
.site-nav__bars, .site-nav__bars::before, .site-nav__bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.site-nav__bars { position: relative; }
.site-nav__bars::before, .site-nav__bars::after { content: ""; position: absolute; left: 0; }
.site-nav__bars::before { top: -6px; }
.site-nav__bars::after  { top: 6px; }

@media (max-width: 640px) {
  .site-nav__name { display: none; }
  .site-nav__toggle { display: flex; }
  .site-nav__cta { margin-left: auto; padding: 8px 14px; font-size: .85rem; }
  .site-nav__links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(21,16,31,.98); border-bottom: 1px solid var(--card-border);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .site-nav.is-open .site-nav__links { max-height: 220px; }
  .site-nav__links a { padding: 14px 18px; border-radius: 0; border-top: 1px solid var(--card-border); }
  .site-nav.is-open .site-nav__bars { background: transparent; }
  .site-nav.is-open .site-nav__bars::before { transform: translateY(6px) rotate(45deg); }
  .site-nav.is-open .site-nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }
}

.wrap { max-width: 900px; margin: 0 auto; padding: 24px 18px 60px; }

/* The GAME screen only (game.html). 900px is right for the checkout and legal pages
   that share .wrap — long prose needs a narrow measure — but the play screen is a
   dashboard: role roster, timer, progress dots, clue panels and puzzle art, all of
   which sat in a thin column with dead space either side on a desktop monitor. Widen
   it in two steps so laptops gain a little and large displays gain more. Prose inside
   keeps its own measure (.story-body), so text widens with the frame but stops well
   short of edge-to-edge. */
@media (min-width: 1024px) { .wrap-game { max-width: 1080px; } }
@media (min-width: 1400px) { .wrap-game { max-width: 1240px; } }

.hero { text-align: center; margin: 26px 0 34px; }
.hero h1 { font-size: 2.5rem; margin: 0; letter-spacing: .5px; }
.tagline { color: var(--muted); margin-top: 6px; }

.panels { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .panels { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card h2 { margin: 0 0 6px; color: var(--gold); }

.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }

.input {
  width: 100%;
  padding: 12px 14px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #1b1430;
  color: var(--ink);
  font-size: 1rem;
}
.code-input { text-transform: uppercase; letter-spacing: 4px; font-weight: 700; text-align: center; }

.btn {
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #2c2247;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease;
}
.btn:hover { background: #34284f; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--purple); border-color: var(--purple-dim); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--purple-dim); }
.btn-gold { background: var(--gold); border-color: #caa84f; color: #2a2010; font-weight: 700; }
.btn-gold:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { width: auto; padding: 8px 12px; font-size: .85rem; }
a.btn { text-decoration: none; text-align: center; }
.share-success { display: block; width: 100%; max-width: 280px; margin: 14px auto 0; }

.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--muted); }

/* ════════════════════════════════════════════════════════════
   LANDING / SALES PAGE
   ════════════════════════════════════════════════════════════ */
.landing { max-width: 1000px; margin: 0 auto; padding: 0 18px 40px; }
.accent { color: var(--gold); }

.hero-land { text-align: center; padding: 60px 10px 40px; }
.hero-badge {
  display: inline-block; background: #2c2247; border: 1px solid var(--card-border);
  color: var(--gold); border-radius: 999px; padding: 6px 16px; font-size: .85rem;
  letter-spacing: .5px; margin-bottom: 22px;
}
.hero-badge--avail { background: #1f7a4d; border-color: #1f7a4d; color: #eafff2; margin-right: 8px; }
/* Inside the centered hero figure, pin the status pill to the top-left so it doesn't
   overlap the centered descriptor badge. Extra class raises specificity above the
   later `.hero-figure .hero-badge` centering rule. */
.hero-figure .hero-badge.hero-badge--avail { left: 12px; transform: none; margin-right: 0; }
.hero-land h1 { font-size: 3rem; line-height: 1.1; margin: 0 0 18px; }
.hero-figure { position: relative; }
.hero-img-title { margin: 0 0 20px; line-height: 0; }
.hero-figure .hero-badge {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  margin: 0; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
@media (max-width: 640px) { .hero-figure .hero-badge { top: 10px; font-size: .72rem; padding: 5px 12px; } }
.hero-img {
  display: block; width: 100%; height: auto; margin: 0 auto;
  border-radius: 16px; border: 1px solid var(--card-border);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.hero-tagline { font-size: 1.5rem; font-weight: 700; margin: 0 0 18px; }
.hero-sub { max-width: 640px; margin: 0 auto 26px; font-size: 1.18rem; color: #d8d2ea; line-height: 1.5; }
.hero-note { color: var(--muted); margin-top: 16px; font-size: .95rem; }
.played-counter {
  margin-top: 12px; font-size: .9rem; font-weight: 600;
  color: var(--gold); opacity: .9; min-height: 1.4em;
}
@media (max-width: 640px) { .hero-land h1 { font-size: 2.1rem; } .hero-tagline { font-size: 1.2rem; } .hero-sub { font-size: 1.05rem; } }

/* 404 error page */
.error-page { padding-top: 40px; }
.error-code {
  font-size: 8rem; line-height: 1; font-weight: 800; letter-spacing: 4px;
  color: var(--gold); margin: 0 0 6px;
  text-shadow: 0 6px 30px rgba(232,196,104,.25);
  opacity: .9;
}
.error-page h1 { font-size: 2.4rem; margin: 0 0 18px; }
.error-link { color: var(--gold); text-decoration: none; font-weight: 600; }
.error-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .error-code { font-size: 5rem; }
  .error-page h1 { font-size: 1.7rem; }
}

.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn.big { width: auto; font-size: 1.1rem; padding: 16px 28px; font-weight: 700; }
.btn.ghost { background: transparent; border-color: var(--purple); color: var(--ink); }
.btn.ghost:hover { background: rgba(139,108,240,.12); }

/* at-a-glance stats */
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 6px 0 4px; }
@media (max-width: 720px) { .glance { grid-template-columns: 1fr 1fr; } }
/* "What's included" + "What you'll need" two-column info panel on room pages. */
.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
@media (max-width: 720px) { .info-cols { grid-template-columns: 1fr; } }
.reqs-list { list-style: none; padding: 0; margin: 0; }
.reqs-list li { margin: 11px 0; padding-left: 28px; position: relative; }
.reqs-list li::before { content: "›"; position: absolute; left: 4px; color: var(--gold); font-weight: 800; }

/* ── Animated "See how it works" demo (self-contained, no video file) ────────── */
.demo { max-width: 560px; margin: 6px auto 0; }
.demo-screen {
  position: relative; background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.4); overflow: hidden;
}
.demo-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--card-border); }
.demo-dot { width: 9px; height: 9px; border-radius: 50%; background: #4a3d6b; }
.demo-title { margin-left: 8px; font-weight: 700; color: var(--ink); font-size: .9rem; }
.demo-timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--gold); letter-spacing: .5px; }
.demo-tabs { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.demo-tab {
  font-size: .72rem; padding: 4px 9px; border-radius: 999px; background: #2c2247;
  border: 1px solid var(--card-border); color: var(--muted); animation: demoTab 8s infinite;
}
.demo-tab:nth-child(1) { animation-delay: 0s; }
.demo-tab:nth-child(2) { animation-delay: 2s; }
.demo-tab:nth-child(3) { animation-delay: 4s; }
.demo-tab:nth-child(4) { animation-delay: 6s; }
@keyframes demoTab {
  0%, 3%    { background: #2c2247; color: var(--muted); border-color: var(--card-border); }
  5%, 25%   { background: var(--gold); color: #2a2010; border-color: var(--gold); }
  29%, 100% { background: #2c2247; color: var(--muted); border-color: var(--card-border); }
}
.demo-stage { position: relative; height: 92px; }
.demo-clue {
  position: absolute; inset: 0; opacity: 0; background: var(--bg2); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 12px 14px; animation: demoFade 8s infinite;
}
.demo-clue:nth-child(1) { animation-delay: 0s; }
.demo-clue:nth-child(2) { animation-delay: 2s; }
.demo-clue:nth-child(3) { animation-delay: 4s; }
.demo-clue:nth-child(4) { animation-delay: 6s; }
.demo-who { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--purple); font-weight: 700; }
.demo-clue p { margin: 6px 0 0; color: var(--ink); }
@keyframes demoFade {
  0%        { opacity: 0; transform: translateY(6px); }
  4%, 25%   { opacity: 1; transform: none; }
  29%, 100% { opacity: 0; transform: translateY(-6px); }
}
.demo-chat { position: relative; height: 22px; margin-top: 10px; }
.demo-msg { position: absolute; left: 0; font-size: .8rem; color: var(--muted); opacity: 0; animation: demoMsg 8s infinite; }
.demo-msg2 { animation-delay: 4s; }
@keyframes demoMsg { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: none; } 40% { opacity: 1; } 48%, 100% { opacity: 0; } }
.demo-toast {
  position: absolute; right: 14px; bottom: 14px; background: var(--green); color: #0c2417;
  font-weight: 800; font-size: .8rem; padding: 6px 12px; border-radius: 999px; opacity: 0; animation: demoToast 8s infinite;
}
@keyframes demoToast { 0%, 80% { opacity: 0; transform: translateY(8px) scale(.9); } 87% { opacity: 1; transform: none; } 96% { opacity: 1; } 100% { opacity: 0; } }
.demo-cap { text-align: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .demo-tab, .demo-clue, .demo-msg, .demo-toast { animation: none !important; }
  .demo-clue:nth-child(1) { opacity: 1; }
  .demo-tab:nth-child(1) { background: var(--gold); color: #2a2010; border-color: var(--gold); }
}
.stat { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; text-align: center; }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.stat-value { font-size: 1.9rem; font-weight: 800; color: var(--gold); line-height: 1.1; margin: 4px 0; }
.stat-unit { font-size: 1rem; color: var(--muted); }
.stat-foot { font-size: .82rem; color: var(--muted); }
.pips { font-size: 1rem; letter-spacing: 3px; }
.pips .on, .pips .half { color: var(--gold); }
.pips .off { color: var(--card-border); }

.section { padding: 34px 0; }
.section-title { text-align: center; font-size: 1.9rem; color: var(--gold); margin: 0 0 26px; }

/* benefits */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .benefits { grid-template-columns: 1fr; } }
.benefit {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 22px; transition: transform .12s ease, border-color .12s ease;
}
.benefit:hover { transform: translateY(-3px); border-color: var(--purple-dim); }
.benefit .bi { font-size: 2rem; }
.benefit h3 { margin: 10px 0 6px; color: var(--ink); font-size: 1.15rem; }
.benefit p { color: var(--muted); margin: 0; line-height: 1.5; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: #1f1836; border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 24px; text-align: center;
}
.step-n {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--purple); color: #fff; font-size: 1.4rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin: 0 0 6px; color: var(--gold); }
.step p { color: var(--muted); margin: 0; line-height: 1.5; }

/* teamwork callout */
.callout {
  background: linear-gradient(135deg, #2a2147, #1d1733);
  border: 1px solid var(--purple-dim); border-radius: var(--radius);
  padding: 34px; text-align: center;
}
.callout h2 { margin: 0 0 12px; font-size: 1.7rem; }
.callout p { max-width: 680px; margin: 0 auto; color: #d8d2ea; line-height: 1.6; font-size: 1.08rem; }

/* occasion tags */
.tags {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  justify-items: center; max-width: 760px; margin: 0 auto;
}
.tag {
  background: #2c2247; border: 1px solid var(--card-border); border-radius: 999px;
  padding: 9px 16px; font-size: .95rem; white-space: nowrap;
}
@media (max-width: 640px) { .tags { grid-template-columns: 1fr 1fr; max-width: 460px; } }
@media (max-width: 380px) { .tags { grid-template-columns: 1fr; } }

/* pricing */
.pricing {
  max-width: 460px; margin: 0 auto; text-align: center;
  background: var(--card); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 30px; box-shadow: 0 16px 50px rgba(0,0,0,.3);
}
.price-num { font-size: 3.4rem; font-weight: 800; color: var(--gold); line-height: 1; }
.price-sub { color: var(--muted); margin-bottom: 16px; }
.price-list { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; display: inline-block; }
.price-list li { margin: 9px 0; padding-left: 26px; position: relative; }
.price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

/* join band */
.join-band { text-align: center; background: #1b1430; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 30px; }
.join-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 420px; margin: 0 auto; }
.join-row .input { margin: 0; flex: 1; min-width: 180px; }
.join-row .btn { width: auto; }

/* ── Simply Creative Escapes hub ── */
.hub-hero { padding-top: 48px; }
.hub-title { font-size: 3.4rem; line-height: 1.05; margin: 14px 0 12px; font-weight: 800; }
@media (max-width: 640px) { .hub-title { font-size: 2.3rem; } }
.rooms-intro { text-align: center; max-width: 620px; margin: -14px auto 26px; }

/* room picker grid */
.room-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .room-grid { grid-template-columns: 1fr; } }
.room-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  overflow: hidden; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
a.room-card:hover {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.room-card__media { position: relative; aspect-ratio: 16 / 9; background: #120d1c; overflow: hidden; }
.room-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.room-card__media--soon {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #241d3c, #16101f);
}
.soon-emoji { font-size: 3rem; opacity: .7; }
.room-flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--gold); color: #2a2010; font-weight: 700; font-size: .78rem;
  padding: 4px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.room-flag--soon { background: #2c2247; color: var(--gold); border: 1px solid var(--card-border); }
/* Single per-card availability status badge (top-right) — exactly one of three. */
.room-status {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-weight: 700; font-size: .78rem; padding: 4px 11px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); white-space: nowrap;
}
.room-status--avail   { background: #1f7a4d; color: #eafff2; }
.room-status--soon    { background: #2c2247; color: var(--gold); border: 1px solid var(--card-border); }
.room-status--unavail { background: #3a3a44; color: #c9c9d2; border: 1px solid var(--card-border); }
.room-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.room-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.room-badge {
  background: #2c2247; border: 1px solid var(--card-border); border-radius: 999px;
  padding: 4px 11px; font-size: .78rem; color: var(--ink);
}
.room-card__title { margin: 0 0 8px; color: var(--gold); font-size: 1.45rem; }
.room-card__desc { margin: 0 0 18px; color: var(--muted); line-height: 1.55; flex: 1; }
.room-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.room-price { font-size: 1.25rem; font-weight: 800; color: var(--gold); }
.room-price .price-was { font-size: .9rem; font-weight: 600; }
.room-cta { color: var(--purple); font-weight: 700; font-size: .95rem; }
.room-cta--link { text-decoration: none; }
.room-cta--link:hover { color: var(--gold); }
.room-card--soon { cursor: default; opacity: .92; }

/* ── Featured room spotlight (cinematic split banner) ── */
.featured {
  position: relative;
  margin: 8px 0 28px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: #180f2b;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.featured-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.featured-media { position: relative; min-height: 400px; background: #120d1c; overflow: hidden; }
.featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Blend the art into the text panel on the right (and up from the bottom on mobile). */
.featured-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24,15,43,0) 52%, rgba(24,15,43,.97) 96%);
}
.featured-ribbon {
  position: absolute; top: 18px; left: 0; z-index: 2;
  background: var(--gold); color: #2a2010; font-weight: 800;
  font-size: .8rem; letter-spacing: .1em; padding: 7px 18px 7px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.featured-body {
  position: relative; z-index: 1;
  padding: 36px 36px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.featured-kicker {
  color: var(--gold); font-weight: 700; letter-spacing: .18em;
  font-size: .78rem; text-transform: uppercase; margin: 0 0 10px;
}
.featured-title {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 2.9rem; line-height: 1.02; margin: 0 0 8px; color: var(--ink);
}
.featured-sub { font-size: 1.3rem; font-weight: 700; color: var(--gold); margin: 0 0 14px; line-height: 1.25; }
.featured-desc { color: #d8d2ea; line-height: 1.55; margin: 0 0 20px; font-size: 1.02rem; }
.featured-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.featured-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.featured-cta .btn { width: auto; }
@media (max-width: 760px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured-media { min-height: 240px; }
  .featured-media::after {
    background: linear-gradient(0deg, rgba(24,15,43,1) 4%, rgba(24,15,43,0) 60%);
  }
  .featured-body { padding: 24px 22px 26px; }
  .featured-title { font-size: 2.1rem; }
  .featured-sub { font-size: 1.12rem; }
  .featured-cta .btn { width: 100%; }
}

/* ── Trailer inside the featured spotlight (built from the game's art) ── */
.trl { cursor: pointer; }
.trl .trl-stage, .trl .trl-poster, .trl .trl-end { position: absolute; inset: 0; }
.trl .featured-ribbon { z-index: 6; }   /* stay above the poster/end card */

/* Scenes — cross-faded; each image gets a slow Ken Burns move while active. */
.trl-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; }
.trl-scene.is-active { opacity: 1; visibility: visible; }
.trl-scene .trl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
/* readability vignette so captions land on any frame */
.trl-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(12,8,22,.85) 0%, rgba(12,8,22,.12) 46%, rgba(12,8,22,.4) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .trl-s1.is-active .trl-img { animation: kbIn   5s ease-out both; }
  .trl-s2.is-active .trl-img { animation: kbPanR 4.6s ease-out both; }
  .trl-s3.is-active .trl-img { animation: kbOut  4.4s ease-out both; }
  .trl-s4.is-active .trl-img { animation: kbPanL 4.8s ease-out both; }
  .trl-s5.is-active .trl-img { animation: kbIn   5s ease-out both; }
}
@keyframes kbIn   { from { transform: scale(1.04); } to { transform: scale(1.18); } }
@keyframes kbOut  { from { transform: scale(1.2);  } to { transform: scale(1.05); } }
@keyframes kbPanR { from { transform: scale(1.16) translate3d(-2.5%,0,0); } to { transform: scale(1.16) translate3d(2.5%,0,0); } }
@keyframes kbPanL { from { transform: scale(1.16) translate3d(2.5%,0,0); } to { transform: scale(1.16) translate3d(-2.5%,0,0); } }

/* Captions */
.trl-cap {
  position: absolute; left: 26px; right: 26px; bottom: 34px; margin: 0; z-index: 3;
  color: #fff; font-size: 1.35rem; line-height: 1.3; font-weight: 700; text-shadow: 0 2px 18px rgba(0,0,0,.85);
}
.trl-cap--big { font-size: 1.7rem; }
.trl-scene.is-active .trl-cap { animation: trlCapIn .8s .35s ease-out both; }
@keyframes trlCapIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Title card (scene 1) */
.trl-title-card {
  position: absolute; inset: 0; z-index: 3; padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.trl-tc-kicker { color: var(--gold); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; margin-bottom: 10px; }
.trl-tc-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 2.6rem; color: #fff; line-height: 1.05; text-shadow: 0 4px 26px rgba(0,0,0,.75); }
.trl-s1.is-active .trl-tc-kicker { animation: trlCapIn .7s .3s ease-out both; }
.trl-s1.is-active .trl-tc-title  { animation: trlTitle 1s .5s ease-out both; }
@keyframes trlTitle { from { opacity: 0; transform: translateY(16px); letter-spacing: .2em; } to { opacity: 1; transform: none; letter-spacing: normal; } }

/* Progress bar + skip (only while playing) */
.trl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 4; background: rgba(255,255,255,.14); opacity: 0; }
.trl-bar span { display: block; height: 100%; width: 0; background: var(--gold); }
.trl-skip {
  position: absolute; top: 12px; right: 12px; z-index: 4; opacity: 0;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 5px 12px; font-size: .78rem; cursor: pointer;
}
.trl-skip:hover { background: rgba(0,0,0,.78); }
.trl.is-playing .trl-bar, .trl.is-playing .trl-skip { opacity: 1; }

/* Poster / play affordance */
.trl-poster { z-index: 5; transition: opacity .4s ease; }
.trl-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trl-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(12,8,22,.12), rgba(12,8,22,.62)); }
.trl.is-playing .trl-poster, .trl.is-ended .trl-poster { opacity: 0; pointer-events: none; }
.trl-play {
  position: absolute; inset: 0; z-index: 2; background: none; border: 0; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.trl-play-ico {
  display: flex; align-items: center; justify-content: center; width: 74px; height: 74px;
  border-radius: 50%; font-size: 1.5rem; padding-left: 5px;
  background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.trl:hover .trl-play-ico { transform: scale(1.08); background: var(--gold); color: #2a2010; border-color: var(--gold); }
.trl-play-label { font-weight: 700; font-size: .9rem; letter-spacing: .04em; background: rgba(0,0,0,.5); padding: 6px 14px; border-radius: 999px; }

/* End card */
.trl-end {
  z-index: 5; padding: 24px; text-align: center; opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(12,8,22,.7); transition: opacity .5s ease;
}
.trl.is-ended .trl-end { opacity: 1; pointer-events: auto; }
.trl-end-title { font-family: "Cinzel", serif; font-size: 1.9rem; color: #fff; margin: 0; text-shadow: 0 3px 20px rgba(0,0,0,.7); }
.trl-end-cta { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; max-width: 280px; }
.trl-end-cta .btn { width: 100%; }
.trl-replay { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 10px; padding: 9px 16px; cursor: pointer; font-size: .9rem; }
.trl-replay:hover { border-color: var(--gold); color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .trl-scene { transition: none; } }
@media (max-width: 760px) {
  .trl-tc-title { font-size: 2rem; }
  .trl-cap { font-size: 1.12rem; bottom: 26px; }
  .trl-cap--big { font-size: 1.35rem; }
  .trl-play-ico { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: no-preference) {
  .trl-s6.is-active .trl-img { animation: kbOut 4.8s ease-out both; }
}

/* Snowfall over the trailer while it plays (two drifting dot layers; motion-safe only). */
.trl-snow {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background-image:
    radial-gradient(rgba(255,255,255,.85) 1.2px, transparent 2px),
    radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.6px);
  background-size: 64px 64px, 37px 37px;
  background-position: 0 0, 18px 11px;
}
@media (prefers-reduced-motion: no-preference) {
  .trl.is-playing .trl-snow, .trl.is-ended .trl-snow { opacity: .75; animation: trlSnow 9s linear infinite; }
}
@keyframes trlSnow {
  from { background-position: 0 0, 18px 11px; }
  to   { background-position: 32px 640px, 4px 381px; }
}

/* ── Featured spotlight, Christmas skin (The Great Santa Search) ──
   Self-contained hex colours: the hub keeps its default palette everywhere else. */
.featured--christmas {
  background: linear-gradient(160deg, #143526, #0b1c15 70%);
  border-color: #2b5a45;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,209,102,.08) inset;
}
.featured--christmas::before {   /* candy-cane trim along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 7;
  background: repeating-linear-gradient(135deg, #e63946 0 12px, #fff7f0 12px 24px);
}
.featured--christmas .featured-media { background: #0a1712; }
.featured--christmas .trl-poster img { object-position: 22% center; }   /* keep the art's title lettering in frame */
.featured--christmas .trl-s1 .trl-img { object-position: center 70%; }  /* panorama: favour the village over the sky */
.featured--christmas .featured-media::after {
  background: linear-gradient(90deg, rgba(14,36,26,0) 55%, rgba(14,36,26,.97) 97%);
}
.featured--christmas .featured-ribbon { background: #ffd166; color: #4a1a10; top: 22px; }
.featured--christmas .featured-kicker { color: #ff8a8a; }
.featured--christmas .featured-title,
.featured--christmas .trl-tc-title,
.featured--christmas .trl-end-title {
  font-family: 'Mountains of Christmas', 'Georgia', serif; font-weight: 700;
}
.featured--christmas .featured-title { color: #fff4d6; font-size: 3.1rem; text-shadow: 0 0 22px rgba(255,209,102,.25); }
.featured--christmas .trl-tc-title { font-size: 2.9rem; color: #fff4d6; text-shadow: 0 0 12px rgba(255,209,102,.55), 0 4px 26px rgba(0,0,0,.8); }
.featured--christmas .trl-end-title { font-size: 2.2rem; color: #fff4d6; }
.featured--christmas .featured-sub { color: #ffd166; }
.featured--christmas .featured-desc { color: #dcebe2; }
.featured--christmas .room-badge { background: #173b2c; border-color: #2b5a45; color: #e8f3ec; }
.featured--christmas .btn-gold,
.tour-cta .btn-gold {
  background: linear-gradient(100deg, #e63946, #ff6b6b); border-color: #ffd166; color: #fff;
  text-shadow: 0 1px 2px rgba(80,0,10,.35);
}
.featured--christmas .btn-gold:hover,
.tour-cta .btn-gold:hover { filter: brightness(1.08); }
.featured--christmas .btn.ghost { border-color: #3e7a5f; }
.featured--christmas .btn.ghost:hover { background: rgba(62,207,122,.1); }
.featured--christmas .trl-end { background: rgba(6,18,12,.72); }
.featured--christmas .trl-bar span { background: linear-gradient(90deg, #e63946, #ffd166); }
.featured--christmas .trl:hover .trl-play-ico { background: #e63946; color: #fff; border-color: #ffd166; }
.featured--christmas .trl-poster::after { background: radial-gradient(120% 90% at 50% 50%, rgba(6,18,12,0), rgba(6,18,12,.55)); }
@media (max-width: 760px) {
  .featured--christmas .featured-media::after { background: linear-gradient(0deg, rgba(14,36,26,1) 4%, rgba(14,36,26,0) 60%); }
  .featured--christmas .featured-title { font-size: 2.3rem; }
  .featured--christmas .trl-tc-title { font-size: 2.1rem; }
  /* show the whole 2:1 key art, and drop the ribbon to the foot so it clears the lettering */
  .featured--christmas .featured-media { min-height: 0; aspect-ratio: 2 / 1; }
  .featured--christmas .trl-poster img { object-position: center; }
  .featured--christmas .featured-ribbon { top: auto; bottom: 12px; font-size: .7rem; padding: 5px 14px 5px 10px; }
  .featured--christmas .trl-play-label { display: none; }
}

/* ── "See how it works" screenshot tour (homepage; JS: tour.js) ── */
.tour {
  display: grid; grid-template-columns: minmax(250px, 340px) 1fr; gap: 22px; align-items: center;
  max-width: 1080px; margin: 8px auto 0;
}
.tour-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tour-step {
  position: relative; overflow: hidden; width: 100%; text-align: left; cursor: pointer;
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px;
  background: transparent; border: 1px solid transparent; border-radius: 12px; color: var(--muted);
  font: inherit; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tour-step:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.tour-step:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.tour-step.is-active { background: #122a20; border-color: #2b5a45; color: var(--ink); }
.tour-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8rem; background: #1d2a24; color: var(--muted); border: 1px solid #2b5a45;
}
.tour-step.is-active .tour-n { background: linear-gradient(135deg, #e63946, #ff6b6b); color: #fff; border-color: #ffd166; }
.tour-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.tour-txt b { font-size: .98rem; }
.tour-txt span { font-size: .84rem; display: none; }
.tour-step.is-active .tour-txt span { display: block; color: #cfe3d7; }
/* per-step progress fill (only while auto-advancing) */
.tour-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.tour-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e63946, #ffd166); }
.tour.is-running .tour-step.is-active .tour-prog span { animation: tourProg var(--tour-step-ms, 5200ms) linear both; }
@keyframes tourProg { from { width: 0; } to { width: 100%; } }

.tour-frame {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #2b5a45;
  background: linear-gradient(175deg, #143526, #0a1712);
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
}
.tour-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(0,0,0,.28); border-bottom: 1px solid #2b5a45; }
.tour-url {
  margin-left: 10px; flex: 1; max-width: 320px; font-size: .75rem; color: #b9d4c5; background: rgba(0,0,0,.3);
  border-radius: 999px; padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tour-shots { position: relative; aspect-ratio: 16 / 11; }
.tour-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px;
  opacity: 0; transform: scale(.985); transition: opacity .55s ease, transform .55s ease;
}
.tour-shot.is-active { opacity: 1; transform: none; }
.tour-caption { display: none; margin: 0; text-align: center; line-height: 1.4; color: #cfe3d7; font-size: .92rem; }
.tour-caption b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
.tour-cta { justify-content: center; margin-top: 22px; }
.tour-cta .btn { width: auto; }
@media (prefers-reduced-motion: reduce) { .tour-shot { transition: none; } }
@media (max-width: 820px) {
  .tour { grid-template-columns: 1fr; gap: 14px; }
  .tour-frame { order: -1; }
  .tour-shot { padding: 8px; }
  /* steps collapse to a row of numbered dots; the active step's text shows beneath */
  .tour-steps { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .tour-steps li { flex: none; }
  .tour-step { padding: 6px; border-radius: 999px; }
  .tour-step .tour-txt { display: none; }
  .tour-step.is-active { background: transparent; border-color: transparent; }
  .tour-prog { display: none; }
  .tour-caption { display: block; }
}

/* ── Auto-play cinematic reel (room landing pages; JS: reel.js) ──
   Reuses the trailer's Ken Burns keyframes (kbIn/kbPanR/kbOut/kbPanL)
   and trlCapIn caption reveal, so motion stays consistent site-wide. */
.reel-section { text-align: center; }
.reel-eyebrow {
  color: var(--gold); letter-spacing: .22em; text-transform: uppercase;
  font-size: .72rem; margin: 0 0 6px;
}
.reel { max-width: 900px; margin: 6px auto 0; outline: none; }

.reel-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--card-border);
  background: #0c0816; box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
/* letterbox scrim (bottom, for captions) + soft vignette */
.reel-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(12,8,22,.92) 0%, rgba(12,8,22,0) 44%),
    radial-gradient(120% 100% at 50% 40%, rgba(12,8,22,0) 55%, rgba(8,5,16,.55) 100%);
}
.reel-track { position: absolute; inset: 0; }

/* Slides — crossfaded; only the active one is visible. */
.reel-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s ease;
}
.reel-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.reel-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.reel-slide[data-kind="art"] .reel-img { object-fit: cover; transform: scale(1.06); }
.reel-slide[data-kind="ui"]  .reel-img { object-fit: contain; }
/* blurred fill behind letterboxed screenshots (added by reel.js) */
.reel-bg {
  position: absolute; inset: -6%; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(30px) brightness(.42) saturate(1.1); transform: scale(1.12);
}

/* Ken Burns — art gets the varied pans, screenshots a gentle zoom. */
@media (prefers-reduced-motion: no-preference) {
  .reel-slide.is-active.kb-1   .reel-img { animation: kbIn    5.6s ease-out both; }
  .reel-slide.is-active.kb-2   .reel-img { animation: kbPanR  5.6s ease-out both; }
  .reel-slide.is-active.kb-3   .reel-img { animation: kbOut   5.6s ease-out both; }
  .reel-slide.is-active.kb-4   .reel-img { animation: kbPanL  5.6s ease-out both; }
  .reel-slide.is-active.kb-soft .reel-img { animation: kbSoft 5.8s ease-out both; }
  .reel.is-paused .reel-slide.is-active .reel-img { animation-play-state: paused; }
}
@keyframes kbSoft { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Captions (reuse trlCapIn). Static + visible when motion is reduced. */
.reel-cap {
  position: absolute; left: 26px; right: 26px; bottom: 30px; z-index: 4; margin: 0;
  color: #fff; font-size: 1.3rem; line-height: 1.32; font-weight: 700;
  text-shadow: 0 2px 18px rgba(0,0,0,.9);
}
.reel-cap--big { font-size: 1.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .reel-slide .reel-cap { opacity: 0; }
  .reel-slide.is-active .reel-cap { animation: trlCapIn .8s .3s ease-out both; }
}

/* Prev / next arrows — appear on hover or keyboard focus. */
.reel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; padding: 0 0 3px;
  background: rgba(0,0,0,.42); color: #fff; border: 1px solid rgba(255,255,255,.28);
  opacity: 0; transition: opacity .25s ease, background .15s ease, color .15s ease;
}
.reel-prev { left: 12px; }
.reel-next { right: 12px; }
.reel:hover .reel-arrow, .reel:focus-within .reel-arrow { opacity: 1; }
.reel-arrow:hover { background: var(--gold); color: #2a2010; border-color: var(--gold); }

/* Progress bar. */
.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 5;
  background: rgba(255,255,255,.14);
}
.reel-progress span { display: block; height: 100%; width: 0; background: var(--gold); }

/* Play/pause + dots (below the frame, outside the hover-pause zone). */
.reel-ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.reel-play {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--card-border); color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.reel-play::before { content: "\275A\275A"; letter-spacing: 1px; }   /* ❚❚ pause */
.reel.is-paused .reel-play::before { content: "\25B6"; letter-spacing: 0; }  /* ▶ play */
.reel-play:hover { border-color: var(--gold); color: var(--gold); }
.reel-dots { display: flex; gap: 9px; }
.reel-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #3a2d57; border: 0; transition: background .2s ease, transform .2s ease;
}
.reel-dot:hover { background: var(--purple); }
.reel-dot.is-active { background: var(--gold); transform: scale(1.25); }

@media (max-width: 760px) {
  .reel-cap { font-size: 1.05rem; bottom: 20px; left: 16px; right: 16px; }
  .reel-cap--big { font-size: 1.22rem; }
  .reel-arrow { opacity: 1; width: 36px; height: 36px; }
}

/* final cta + footer */
.final-cta { text-align: center; }
.final-cta h2 { font-size: 2rem; margin-bottom: 6px; }
.site-footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 30px 0 0; border-top: 1px solid var(--card-border); margin-top: 20px; }

/* ── Rich multi-column footer (built by footer.js, full-width band) ── */
.site-footer--rich {
  text-align: left; color: var(--ink); font-size: 1rem;
  margin-top: 60px; padding: 0;
  background: #120d1c; border-top: 1px solid var(--card-border);
}
.site-footer__inner {
  max-width: 1000px; margin: 0 auto; padding: 42px 18px 30px;
  display: grid; grid-template-columns: 1.1fr 2fr; gap: 34px;
}
.site-footer__brand-row { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-footer__brand-row img { display: block; border-radius: 7px; }
.site-footer__brand .ft-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.site-footer__brand-row:hover .ft-name { color: var(--gold); }
.site-footer__brand .ft-tag { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 12px 0 0; max-width: 260px; }
.site-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.ft-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: #241b39; border: 1px solid var(--card-border); color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ft-social:hover { color: var(--gold); border-color: var(--gold); background: #2c2247; }
.ft-social svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ft-col h4 { color: var(--ink); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.ft-col a, .ft-col a:visited { display: block; color: var(--muted); text-decoration: none; font-size: .92rem; padding: 5px 0; transition: color .15s ease; }
.ft-col a:hover { color: var(--gold); }
.site-footer__bar { border-top: 1px solid var(--card-border); }
.site-footer__bar p { max-width: 1000px; margin: 0 auto; padding: 16px 18px; color: var(--muted); font-size: .82rem; }

@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 460px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT / TERMS PAGE
   ════════════════════════════════════════════════════════════ */
.checkout { max-width: 640px; margin: 0 auto; }
.checkout .card { margin-bottom: 18px; }   /* space between stacked checkout cards */
.checkout h1 { font-size: 2rem; }
.lead { color: #d8d2ea; font-size: 1.1rem; margin-bottom: 18px; }
.get-card { border-color: var(--gold); }
.get-list { list-style: none; padding: 0; margin: 0; }
.get-list li { margin: 11px 0; padding-left: 28px; position: relative; }
.get-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.price-tag { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--card-border); }
.price-tag .amt { font-size: 2rem; font-weight: 800; color: var(--gold); }
.price-tag .once { color: var(--muted); }
.trust { display: grid; gap: 8px; margin: 16px 0; }
.trust-item { background: #1f1836; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px; font-size: .95rem; }
.terms-card { background: #1b1430; }
.how-card h3 { margin: 0 0 8px; font-size: 1rem; color: var(--ink); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 4px; }
.how-list { list-style: none; padding: 0; margin: 0; }
.how-list li { margin: 9px 0; padding-left: 22px; position: relative; font-size: .95rem; color: var(--ink); }
.how-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
@media (max-width: 560px) { .how-grid { grid-template-columns: 1fr; gap: 14px; } }
.checkout .btn.big { width: 100%; margin-top: 14px; }

/* "Good to know" small info cards (checkout/terms) */
.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.info-card { background: #1f1836; border: 1px solid var(--card-border); border-radius: 10px; padding: 14px; }
.info-card .ic-emoji { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 8px; }
.info-card h3 { margin: 0 0 5px; font-size: 1rem; color: var(--ink); }
.info-card p { margin: 0; font-size: .9rem; color: var(--muted); }
.info-card a { color: var(--gold); }
@media (max-width: 560px) { .info-cards { grid-template-columns: 1fr; } }

/* terms page */
.terms-box { background: #1b1430; border: 1px solid var(--card-border); border-radius: 10px; padding: 4px 18px; margin: 8px 0 16px; }
.terms-box ul { margin: 12px 0; padding-left: 18px; }
.terms-box li { margin: 8px 0; color: var(--ink); }
.check.agree { align-items: flex-start; gap: 10px; background: #1f1836; border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; color: var(--ink); }
.check.agree input { margin-top: 3px; flex: none; }
.agree-legal { margin: 8px 2px 0; }
.agree-legal a { color: var(--gold); }
.legal { max-width: 720px; margin: 0 auto; line-height: 1.6; }
.legal h1 { font-size: 2rem; }
.legal h2 { color: var(--gold); font-size: 1.15rem; margin: 26px 0 6px; }
.legal p { color: var(--ink); margin: 10px 0; }
.legal ul { margin: 10px 0; padding-left: 20px; }
.legal li { margin: 7px 0; color: var(--ink); }
.legal a { color: var(--gold); }

/* ── game / lobby ── */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.back { color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }

/* ── Inline prose links ──────────────────────────────────────────
   Content links (inside muted/lead/hero copy and the join page) had no
   colour of their own, so they fell back to the browser's default blue —
   and dim purple once visited — which is hard to read on the dark theme.
   Give them the gold accent + a clear underline. Component links (nav,
   footer columns, buttons, room cards) set their own colour and are
   unaffected; buttons are excluded explicitly so a CTA never turns gold-on-gold. */
.muted a:not(.btn),      .muted a:not(.btn):visited,
.lead a:not(.btn),       .lead a:not(.btn):visited,
.hero-sub a:not(.btn),   .hero-sub a:not(.btn):visited,
.join-page a:not(.btn),  .join-page a:not(.btn):visited,
.story-panel a:not(.btn),.story-panel a:not(.btn):visited {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.muted a:not(.btn):hover,
.lead a:not(.btn):hover,
.hero-sub a:not(.btn):hover,
.join-page a:not(.btn):hover,
.story-panel a:not(.btn):hover { color: #f4d98a; }
.status-line { font-size: .95rem; }
.status-line .code { font-weight: 700; color: var(--gold); letter-spacing: 2px; }

.badge { padding: 2px 10px; border-radius: 999px; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.b-ready   { background: #3a2d57; color: var(--ink); }
.b-lobby   { background: var(--purple-dim); color: #fff; }
.b-playing { background: var(--green); color: #07301c; }
.b-won     { background: var(--gold); color: #2a2010; }
.b-lost, .b-expired { background: var(--red); color: #3a0d0d; }

.timers { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 18px; }
.timer { background: #1b1430; border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 14px; }
.timer .label { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.timer .value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.red { border-color: var(--red); }
.timer.red .label { color: #f0d2da; }
.timer.red .value { color: var(--red); }

/* roles */
.roles { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 16px 0; }
@media (max-width: 640px) { .roles { grid-template-columns: 1fr; } }
.role {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
  background: #1f1836;
}
.role.available { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,196,104,.25) inset; }
.role.mine { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple) inset; }
.role h3 { margin: 0 0 2px; color: var(--gold); font-size: 1.05rem; }
.role .desc { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.members { list-style: none; padding: 0; margin: 8px 0; min-height: 22px; }
.members li { display: inline-block; background: #2c2247; border-radius: 999px; padding: 2px 10px; margin: 2px 4px 2px 0; font-size: .82rem; }
.members li.host::after { content: " 👑"; }
.members .empty { color: var(--muted); font-style: italic; }

/* share cluster */
.share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 4px; }
.share .bigcode {
  font-size: 1.6rem; font-weight: 800; letter-spacing: 6px; color: var(--gold);
  background: #1b1430; border: 1px dashed var(--card-border); border-radius: 10px; padding: 8px 16px;
}
/* Once a player has joined the lobby, their room code is shown big + centered. */
.share.share-joined { justify-content: center; width: 100%; margin: 16px 0 8px; }
.share .bigcode-lg {
  font-size: clamp(2rem, 9vw, 3rem);
  /* trailing letter-spacing is offset by an equal text-indent so the glyphs stay optically centered */
  letter-spacing: clamp(8px, 4vw, 14px); text-indent: clamp(8px, 4vw, 14px);
  padding: 16px 28px; text-align: center;
}
/* Joined player: "N players joined" sits centered directly under the room code. */
.players-joined-count { text-align: center; margin: 4px 0 0; }
#qrbox { margin-top: 12px; }
#qrbox img, #qrbox canvas { background: #fff; padding: 8px; border-radius: 8px; }

/* solo / group choice */
.modes { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 16px 0 6px; }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
.mode { border: 1px solid var(--card-border); border-radius: 12px; padding: 16px; background: #1f1836; display: flex; flex-direction: column; }
.mode h3 { color: var(--gold); margin: 0 0 6px; }
.mode p { flex: 1; }
.mode .btn { margin-top: 12px; }

/* play-screen timers */
.gametimer { margin: 18px 0 6px; }
.gametimer .label { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.gametimer .value { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.gametimer .value.red { color: var(--red); }
.closebar {
  /* Pinned to the viewport so the close-countdown stays visible no matter
     where the player has scrolled — not only at the top of the page. */
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 65; margin: 0; max-width: min(360px, calc(100vw - 24px));
  padding: 8px 14px; white-space: nowrap;
  background: #3a2330; border: 1px solid var(--red); border-radius: 10px; color: #f0d2da;
  font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.closebar .value { font-variant-numeric: tabular-nums; }
/* Flash red through the final 10 minutes to escalate urgency. */
.closebar.closebar-flash { animation: closebarFlash 1s ease-in-out infinite; }
@keyframes closebarFlash {
  0%, 100% { background: #3a2330; border-color: var(--red); color: #f0d2da; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
  50%      { background: var(--red); border-color: #ff6b6b; color: #fff; box-shadow: 0 6px 26px rgba(224,112,112,.6); }
}
.goals { margin-top: 18px; text-align: left; }
.goals h3 { color: var(--gold); margin-bottom: 4px; }

/* ════════════════════════════════════════════════════════════
   PUZZLES — magical clue cards
   ════════════════════════════════════════════════════════════ */
.play-top {
  margin-bottom: 16px;
  position: relative;
  /* Game banner behind the timer + progress dots; dark scrim keeps text readable.
     Per-game art follows the convention game.png (default/archmage), game-90s.png,
     game-casino.png, game-bigtop.png, game-christmas.png — overridden in each body.game-<id> block below. */
  background:
    linear-gradient(180deg, rgba(21,16,31,.66), rgba(21,16,31,.82)),
    url("../images/game.png") center / cover no-repeat;
  border-color: rgba(139,108,240,.4);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 60px rgba(10,6,20,.55);
}
.progress { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
.pdot {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .9rem; font-weight: 700;
  border: 1px solid var(--card-border); background: #1b1430; color: var(--muted);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pdot.done { background: var(--green); border-color: var(--green); color: #07301c;
  box-shadow: 0 0 12px -2px rgba(87,201,138,.6); }
.pdot.now  { background: var(--purple); border-color: var(--purple); color: #fff;
  transform: scale(1.12); box-shadow: 0 0 16px -1px rgba(139,108,240,.8); }

/* Fired on the active dot when a correct answer lands, before the DOM re-renders. */
@keyframes pdotBurst {
  0%   { transform: scale(1.12); }
  40%  { transform: scale(1.75); box-shadow: 0 0 0 6px rgba(87,201,138,.35), 0 0 24px rgba(87,201,138,.65); }
  100% { transform: scale(1.45); box-shadow: 0 0 18px rgba(87,201,138,.5); }
}
.pdot-celebrate {
  animation: pdotBurst .7s cubic-bezier(.175,.885,.32,1.275) forwards !important;
  background: var(--green) !important; border-color: var(--green) !important; color: #07301c !important;
}

/* Unlocked-so-far log — solved answers glow like won sigils */
.solvedlog { margin-bottom: 16px;
  background: radial-gradient(120% 120% at 50% -30%, rgba(232,196,104,.08), transparent 60%), var(--card); }
.solvedlog h3 { color: var(--gold); margin: 0 0 8px; }
/* collapsible header (native <details><summary>) */
.solvedlog-summary { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer; list-style: none; user-select: none; }
.solvedlog-summary::-webkit-details-marker { display: none; }
.solvedlog-title { display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold); font-weight: 700; font-size: 1.05rem; }
.solvedlog-title::before { content: '\25B8'; font-size: .8em; transition: transform .15s ease; }
.solvedlog[open] .solvedlog-title::before { transform: rotate(90deg); }
.solvedlog-count { font-size: .8rem; color: var(--muted); font-weight: 600;
  white-space: nowrap; letter-spacing: .5px; }
.solvedlog ul { list-style: none; padding: 0; margin: 12px 0 0; }
.solvedlog li { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.solvedlog li:last-child { border-bottom: none; }
.sl-title { color: var(--muted); }
.sl-ans { font-weight: 800; letter-spacing: 3px; color: var(--gold);
  text-transform: uppercase; text-shadow: 0 0 14px rgba(232,196,104,.45);
  background: #1b1430; border: 1px solid rgba(232,196,104,.35);
  border-radius: 8px; padding: 3px 12px; }

/* the puzzle card itself */
.card.puzzle {
  position: relative; overflow: hidden; border-color: #4a3a6e;
  background:
    radial-gradient(150% 120% at 50% -20%, rgba(139,108,240,.16), transparent 55%),
    var(--card);
}
.puzzle .puzzle-head { text-align: center; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--card-border); }
.puzzle-head-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.puzzle-n { display: inline-block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: 2px; color: var(--purple); font-weight: 800; }
.role-badge-row { display: flex; gap: 5px; flex-wrap: wrap; }
.role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: .7rem; font-weight: 700; letter-spacing: .2px;
  border: 1px solid; white-space: nowrap;
}
.puzzle h2 { margin: 4px 0 0; font-size: 1.7rem;
  text-shadow: 0 0 22px rgba(232,196,104,.35); }
.puzzle-intro { color: #d8d2ea; line-height: 1.6; margin: 10px auto 18px;
  max-width: 640px; text-align: center; }

/* Full-bleed illustration banner under the intro (e.g. the Resonance Chamber).
   Negative margins cancel the card's 22px padding so it spans edge to edge;
   it stands alone with no text overlaid. */
.puzzle-illustration {
  display: block; width: calc(100% + 44px);
  margin: 0 -22px 18px; border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

/* Per-role clue illustration — a single role's "perspective" of the room. Sits
   inside its clue card (see clue_images in the puzzle pack), so it is bounded to
   the clue body rather than bleeding to the card edges like .puzzle-illustration. */
.clue-illustration {
  display: block; width: 100%; max-width: 100%; height: auto;
  margin: 6px 0 10px; border-radius: 8px; border: 1px solid var(--card-border);
}

/* Revealed bonus-clue text (see puzzle `bonus_clues`) — a gold-tinted note under the clue. */
.clue-bonus {
  margin: 8px 0 2px; padding: 10px 12px; border-radius: 8px;
  background: rgba(232, 196, 104, .1); border: 1px solid rgba(232, 196, 104, .35);
  color: var(--ink); font-size: .9rem; line-height: 1.5;
}

/* "Your clues" divider with flourish lines */
.clues-h { color: var(--gold); margin: 0 0 14px; font-size: .95rem;
  text-transform: uppercase; letter-spacing: 2px; text-align: center;
  display: flex; align-items: center; gap: 12px; }
.clues-h::before, .clues-h::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-border), transparent); }

.clues { display: grid; gap: 14px; }

/* a single magical clue card — themed per role via CSS variables */
.clue {
  position: relative; overflow: hidden; border-radius: 14px; padding: 16px 18px;
  border: 1px solid var(--clue-accent, var(--purple));
  background:
    radial-gradient(130% 100% at 0% 0%, var(--clue-tint, rgba(139,108,240,.16)), transparent 58%),
    linear-gradient(160deg, #221a3a, #181229);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03),
              0 10px 26px rgba(0,0,0,.38),
              0 0 26px -8px var(--clue-glow, rgba(139,108,240,.55));
}
.clue.role-1 { --clue-accent: #8b6cf0; --clue-glow: rgba(139,108,240,.6);  --clue-tint: rgba(139,108,240,.18); }
.clue.role-2 { --clue-accent: #57c98a; --clue-glow: rgba(87,201,138,.55);  --clue-tint: rgba(87,201,138,.16);  }
.clue.role-3 { --clue-accent: #6db3f2; --clue-glow: rgba(109,179,242,.55); --clue-tint: rgba(109,179,242,.16); }
.clue.role-4 { --clue-accent: #e8c468; --clue-glow: rgba(232,196,104,.55); --clue-tint: rgba(232,196,104,.16); }

/* faint oversized emblem watermark in the corner */
.clue-emblem { position: absolute; top: -12px; right: -6px; font-size: 4.6rem;
  line-height: 1; opacity: .14; transform: rotate(12deg); pointer-events: none; }

.clue-role { display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;
  color: var(--clue-accent); position: relative; z-index: 1; }
.clue-role .ri { font-size: 1.15rem; filter: drop-shadow(0 0 6px var(--clue-glow)); }
.clue-role::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--clue-accent), transparent); opacity: .45; }

/* the clue body, like aged parchment/ancient script (monospace keeps legends aligned) */
.clue-text { position: relative; z-index: 1; margin: 0;
  white-space: pre-wrap; word-break: break-word;
  font-family: "Cascadia Code", "Consolas", ui-monospace, "Courier New", monospace;
  font-size: .9rem; line-height: 1.6; color: #efeafc;
  background: rgba(8,5,16,.38); border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 12px 14px; }

.clue.no-clue { --clue-accent: var(--card-border); --clue-glow: rgba(0,0,0,0);
  --clue-tint: rgba(255,255,255,.04); text-align: center; }
.clue.no-clue p { margin: 6px 0 0; color: var(--muted); position: relative; z-index: 1; }

/* the answer box */
.answer-row { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.answer-row .input { margin: 0; flex: 1; text-transform: uppercase; letter-spacing: 3px;
  font-weight: 700; text-align: center; }
.answer-row .input:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,196,104,.18); }
.answer-row .btn { width: auto; }
/* Solo-only "Instruction:" label above the answer box (lobby.js soloInstrHtml). */
.solo-instruction { margin-top: 18px; padding: 10px 14px; border-left: 3px solid var(--gold);
  background: rgba(232,196,104,.08); border-radius: 6px; font-size: .95rem; line-height: 1.45; }
.solo-instruction-label { font-weight: 700; color: var(--gold); letter-spacing: .5px; margin-right: 4px; }
.solo-instruction + .answer-row { margin-top: 10px; }
@media (max-width: 540px) { .answer-row { flex-direction: column; align-items: stretch; }
  .answer-row .btn { width: 100%; } }

.shake { animation: shake .4s ease; border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(224,112,112,.22) !important; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ── interactive: the astral cipher wheel ── */
.cipher { margin: 18px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cipher-wheel { width: min(280px, 80vw); }
.cipher-wheel svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 24px rgba(109,179,242,.25)); }
.cw-ring  { fill: #15102a; stroke: #4a3a6e; stroke-width: 1.5; }
.cw-ring2 { fill: #1d1636; stroke: #6db3f2; stroke-width: 1; opacity: .55; }
.cw-out, .cw-in { font: 700 11px "Cascadia Code","Consolas",monospace; text-anchor: middle; }
.cw-out { fill: var(--gold); }
.cw-inner { transition: transform .18s cubic-bezier(.3,1.4,.5,1); }
.cw-in  { fill: #9fd0ff; }
.cw-marker { fill: var(--red); filter: drop-shadow(0 0 4px rgba(224,112,112,.8)); }
.cipher-controls { display: flex; align-items: center; gap: 14px; }
.cw-shift { background: #1b1430; border: 1px solid var(--card-border); border-radius: 10px;
  padding: 6px 14px; font-size: .85rem; color: var(--muted); }
.cw-shift b { color: #9fd0ff; font-size: 1.1rem; }
.cipher-out { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: #1b1430; border: 1px solid rgba(109,179,242,.4); border-radius: 12px; padding: 10px 16px; }
.cw-label { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.cw-decoded { font-family: "Cascadia Code","Consolas",monospace; font-weight: 800;
  font-size: 1.5rem; letter-spacing: 6px; color: #9fd0ff; text-shadow: 0 0 14px rgba(109,179,242,.5); }
.cw-use { width: auto; }
.cipher-wait, .dials-wait { margin: 16px 0; padding: 14px 16px; text-align: center;
  background: #1f1836; border: 1px dashed var(--card-border); border-radius: 12px; color: var(--muted); }

/* ── interactive: the four-lock vault ── */
.dials { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 18px 0 6px; }
.dial { background: linear-gradient(160deg, #241a33, #181126);
  border: 1px solid #6b5a2e; border-radius: 14px; padding: 14px 12px; text-align: center;
  box-shadow: 0 0 22px -8px rgba(232,196,104,.4); transition: border-color .2s, box-shadow .2s; }
.dial.aligned { border-color: var(--gold); box-shadow: 0 0 26px -4px rgba(232,196,104,.7); }
.dial-cap { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.dial-cap b { color: var(--gold); }
.dial-body { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 8px; }
.dial-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--card-border);
  background: #2c2247; color: var(--ink); font-size: 1rem; cursor: pointer; flex: none; }
.dial-btn:hover { background: #34284f; }
.dial-window { width: 78px; height: 78px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 35%, #3a2f12, #15102a);
  border: 2px solid #6b5a2e; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; }
.dial.aligned .dial-window { border-color: var(--gold); }
.dial-sym { font-size: 1.9rem; line-height: 1; color: #ece7f7; }
.dial-num { font-size: 1.1rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums;
  min-height: 1.1em; }
.dial-hint { font-size: .8rem; color: var(--muted); }
.dial-hint .t { color: var(--gold); font-size: 1.05rem; }

/* the shared keypad */
.keypad { margin: 16px auto 4px; max-width: 280px; }
.kp-display { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.kp-slot { width: 48px; height: 60px; border-radius: 10px; background: #15102a;
  border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.kp-slot.filled { border-color: var(--gold); box-shadow: 0 0 12px -3px rgba(232,196,104,.6); }
.kp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kp-key { padding: 14px 0; border-radius: 10px; border: 1px solid var(--card-border);
  background: #2c2247; color: var(--ink); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.kp-key:hover { background: #34284f; }
.kp-key:active { transform: translateY(1px); }
.kp-back { color: var(--red); }
.kp-ok { grid-column: 1 / -1; background: var(--gold); border-color: #caa84f; color: #2a2010;
  font-weight: 800; font-size: 1.05rem; }
.kp-ok:hover { filter: brightness(1.05); }

/* ordered sigil buttons ('order' kind) */
.order-widget { margin: 16px 0 4px; text-align: center; }
.order-widget.order-solved { opacity: .7; }
.order-status { margin-bottom: 14px; font-size: .95rem; }
.order-live { color: var(--gold); font-weight: 600; }
.order-live b { color: var(--red); font-variant-numeric: tabular-nums; }
.order-idle { color: var(--muted); }
.order-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.order-btn { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 120px; padding: 16px 20px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--gold); background: #2c2247; color: var(--ink);
  transition: transform .1s, background .15s, opacity .15s; }
.order-btn:hover:not(:disabled) { background: #34284f; }
.order-btn:active:not(:disabled) { transform: translateY(1px); }
.order-btn:disabled { cursor: default; }
.order-btn-word { font-size: 1.15rem; font-weight: 800; letter-spacing: .5px; }
.order-btn-role { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.order-btn.pressed { background: var(--gold); border-color: #caa84f; color: #2a2010; opacity: .85; }
.order-btn.pressed .order-btn-role { color: #5a4a1a; }
.order-btn:disabled:not(.pressed) { opacity: .5; }
.order-start { margin: 16px auto 0; display: block; min-width: 220px; padding: 14px 22px;
  border-radius: 12px; border: 1px solid #caa84f; background: var(--gold); color: #2a2010;
  font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.order-start:hover { filter: brightness(1.05); }
.order-start:active { transform: translateY(1px); }

/* flashing incantation ('memory' kind) */
.memory-stage { margin: 16px 0 6px; text-align: center; }
.mem-slots { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.mem-slot { width: 46px; height: 58px; border-radius: 10px; border: 2px solid var(--card-border);
  background: #221a38; display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; font-weight: 800; transition: box-shadow .18s, background .18s, border-color .18s; }
.mem-slot.lit { transform: translateY(-2px); }
.mem-orb { font-size: 1.25rem; line-height: 1; }
.mem-controls { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* modal popup */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(8,5,16,.7);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: var(--card); border: 1px solid var(--red); border-radius: var(--radius);
  padding: 26px; max-width: 420px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal h2 { margin: 0 0 10px; color: var(--red); }
.modal .btn { max-width: 220px; margin: 12px auto 0; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.modal-actions .btn { width: auto; max-width: none; margin: 0; }
.start-later-modal { border-color: var(--gold); }
.start-later-modal h2 { color: var(--gold); }
.host-link-block { margin: 14px 0 10px; text-align: left; }
.host-link-box {
  font-family: monospace; font-size: 0.76rem; word-break: break-all;
  background: var(--bg); border: 1px solid var(--card-border); border-radius: 6px;
  padding: 8px 10px; color: var(--muted); margin: 6px 0 8px;
}
.start-later-btn { color: var(--muted); margin-bottom: 10px; }

/* completion rating */
.rating { margin-top: 20px; }
.rating h3 { color: var(--gold); margin-bottom: 6px; }
.stars { display: inline-flex; gap: 4px; font-size: 2.2rem; line-height: 1; }
.stars .star { color: var(--gold); }
.stars span.star:not(.on) { color: var(--card-border); }
.stars button.star { background: none; border: none; cursor: pointer; color: var(--gold); font-size: 2.2rem; padding: 0 2px; transition: transform .05s ease; }
.stars button.star:hover { transform: scale(1.15); }

/* feedback form (after low rating) */
.feedback-textarea { width: 100%; margin-top: 8px; resize: vertical; min-height: 72px; }
.feedback-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: center; }
.feedback-actions .btn { min-width: 130px; }

/* get-notified card */
.notify-card { margin-top: 16px; }
.notify-tagline { font-size: 1.15rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.notify-disclaimer { margin-top: 8px; color: var(--text-muted); font-size: 0.78rem; }
.notify-success { color: #7cdb8f; font-weight: 600; font-size: 1rem; }
.notify-form { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.notify-form .input { flex: 1; min-width: 180px; max-width: 280px; }
.notify-form .btn { flex-shrink: 0; }

/* ── help button ── */
.help-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.help-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── topbar actions (sound toggle + help) ── */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.sound-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.sound-btn:hover { border-color: var(--gold); color: var(--gold); }
.sound-btn.sound-on { border-color: var(--green); color: var(--green); }

/* ── help modal ── */
.help-modal {
  max-width: 560px;
  width: 94vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.help-header h2 { margin: 0; font-size: 1.15rem; color: var(--gold); }
.help-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}
.help-close:hover { color: var(--ink); }
.help-body {
  overflow-y: auto;
  padding: 16px 22px 20px;
  flex: 1;
}
.help-section { margin-bottom: 20px; }
.help-section-title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--card-border);
}
.help-item {
  border-radius: 6px;
  margin-bottom: 4px;
}
.help-item[open] { background: rgba(255,255,255,.03); }
.help-q {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 7px 6px;
  list-style: none;
  user-select: none;
}
.help-q::-webkit-details-marker { display: none; }
.help-q::before { content: '▸ '; color: var(--gold); font-size: .75rem; }
.help-item[open] .help-q::before { content: '▾ '; }
.help-a {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 2px 0 10px 16px;
}
.help-a b { color: var(--ink); }
.help-footer { margin-top: 16px; text-align: center; }
.help-footer a { color: var(--gold); }

/* end-game (host only) */
#endWrap { margin-top: 20px; border-top: 1px solid var(--card-border); padding-top: 16px; }
#endWrap .btn { display: block; width: 100%; max-width: 280px; margin: 8px auto; }
.endbtn { background: #3a2330; border-color: #5a2b3b; color: #f0d2da; }
.endbtn:hover { background: #4a2a3a; }
.skip-puzzle-btn { background: #23303a; border-color: #2b4a5a; color: #d2e6f0; }
.skip-puzzle-btn:hover { background: #2a3d4a; }
.skip-nopenalty {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 8px;
  font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(120, 200, 150, .18); color: #7fe0a8; vertical-align: middle;
}
.endwarn { color: var(--red); margin: 10px auto 14px; max-width: 420px; }

.error { border-color: var(--red); color: var(--red); }
.notice { color: var(--muted); margin: 8px 0; }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #07301c; padding: 10px 18px; border-radius: 10px;
  font-weight: 600; opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   STORY LORE — revealed under each solved puzzle entry
   ════════════════════════════════════════════════════════════ */
.solvedlog li { flex-direction: column; align-items: stretch; gap: 4px; }
.sl-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sl-lore {
  font-size: .78rem; color: var(--muted); font-style: italic; line-height: 1.5;
  padding-left: 2px;
}

/* ════════════════════════════════════════════════════════════
   SEQUENCE PUZZLE — ritual altar ordering widget
   ════════════════════════════════════════════════════════════ */
.sequence { margin: 16px 0 4px; }

.seq-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.seq-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 72px; border-radius: 12px; padding: 10px 8px;
  border: 2px dashed var(--card-border); background: #1b1430;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  text-align: center;
}
.seq-slot:not(.seq-locked):not(.seq-filled):hover {
  border-color: var(--purple); background: rgba(139,108,240,.08);
}
.seq-slot.seq-filled:not(.seq-locked) { border-style: solid; border-color: var(--purple); cursor: pointer; }
.seq-slot.seq-filled:not(.seq-locked):hover { border-color: var(--red); background: rgba(224,112,112,.06); }
.seq-slot.seq-locked {
  border-style: solid; border-color: var(--gold); background: rgba(232,196,104,.08);
  cursor: default; box-shadow: 0 0 12px -4px rgba(232,196,104,.45);
}
.seq-slot.seq-incomplete { animation: shake .4s ease; border-color: var(--red) !important; }

.seq-pos {
  font-size: .65rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); font-weight: 700;
}
.seq-item {
  font-size: .88rem; font-weight: 700; color: var(--ink);
  font-family: "Cascadia Code","Consolas",ui-monospace,monospace;
}
.seq-locked .seq-item { color: var(--gold); }
.seq-empty  { font-size: .78rem; color: var(--border); font-style: italic; }

.seq-pool { margin-top: 4px; }
.seq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seq-chip {
  background: #2c2247; border: 1px solid var(--purple-dim); border-radius: 8px;
  padding: 8px 14px; font-size: .88rem; font-weight: 600; cursor: pointer;
  font-family: "Cascadia Code","Consolas",ui-monospace,monospace;
  transition: background .12s, transform .08s;
}
.seq-chip:hover { background: var(--purple-dim); transform: translateY(-1px); }
.seq-chip:active { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   SHARED NOTEPAD
   ════════════════════════════════════════════════════════════ */
.notepad-card { margin-bottom: 16px; }
.notepad-h {
  color: var(--gold); margin: 0 0 10px; font-size: .9rem;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.notepad-ta {
  width: 100%; min-height: 90px; padding: 10px 12px; resize: vertical;
  background: #1b1430; border: 1px solid var(--card-border); border-radius: 10px;
  color: var(--ink); font-family: "Cascadia Code","Consolas",ui-monospace,monospace;
  font-size: .85rem; line-height: 1.55; transition: border-color .15s;
}
.notepad-ta:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,196,104,.12); }
.notepad-ta::placeholder { color: var(--border); font-style: italic; }

/* ════════════════════════════════════════════════════════════
   ARCHMAGE'S VOICE — timed taunt banner
   ════════════════════════════════════════════════════════════ */
.archmage-banner {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-18px);
  background: linear-gradient(135deg, #2a1f42, #1d1432);
  border: 1px solid rgba(139,108,240,.6); border-radius: 12px;
  padding: 10px 20px; max-width: min(420px, 90vw);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transition: opacity .4s ease, transform .4s ease;
  pointer-events: none; z-index: 60;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px -4px rgba(139,108,240,.4);
}
.archmage-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.archmage-icon { font-size: 1.3rem; flex: none; }
.archmage-text { font-size: .88rem; color: #c8b8f8; line-height: 1.4; }

/* ════════════════════════════════════════════════════════════
   LEADERBOARD — landing page fastest-times section
   ════════════════════════════════════════════════════════════ */
.leaderboard { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); max-width: 680px; margin: 0 auto; }
@media (max-width: 600px) { .leaderboard { grid-template-columns: 1fr; } }

.lb-tier {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 18px;
}
.lb-tier h3 { color: var(--gold); margin: 0 0 12px; font-size: 1rem; }
.lb-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--card-border); font-size: .88rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-rank { color: var(--muted); width: 22px; flex: none; }
.lb-rank.gold   { color: var(--gold); font-weight: 800; }
.lb-rank.silver { color: #b0b8c8; font-weight: 700; }
.lb-rank.bronze { color: #c8895a; font-weight: 700; }
.lb-players { color: var(--muted); font-size: .75rem; }
.lb-time { font-family: "Cascadia Code","Consolas",ui-monospace,monospace; font-weight: 700; color: var(--ink); }
.lb-empty { color: var(--muted); font-size: .85rem; font-style: italic; text-align: center; padding: 10px 0; }

/* ════════════════════════════════════════════════════════════
   HOST SETTINGS FORM
   ════════════════════════════════════════════════════════════ */
.settings-form {
  margin: 18px 0 22px;
  padding: 16px 18px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.settings-h { margin: 0 0 14px; font-size: 1rem; color: var(--gold); }
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0; gap: 12px;
}
.setting-row.setting-check { justify-content: flex-start; }
.setting-label { font-size: .9rem; color: var(--ink); flex: none; }
.setting-select {
  background: #1b1430; border: 1px solid var(--card-border);
  color: var(--ink); border-radius: 8px;
  padding: 6px 10px; font-size: .9rem; cursor: pointer;
  /* Let the select shrink instead of pushing past the card edge on narrow
     screens (a flex item won't shrink below its longest option otherwise). */
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  text-overflow: ellipsis;
}
/* Phones: stack label over a full-width select. 16px text also stops iOS
   Safari from zooming the page when the select is tapped. */
@media (max-width: 560px) {
  .settings-form { padding: 14px 12px; }
  .setting-row:not(.setting-check) {
    flex-direction: column; align-items: stretch; gap: 6px; margin: 14px 0;
  }
  .setting-select { width: 100%; font-size: 16px; padding: 10px 12px; }
}
/* Greyed-out state, e.g. the hint time penalty when Hints are Disabled. */
.setting-select:disabled { opacity: .4; cursor: not-allowed; background: #171022; }
.setting-row.is-disabled .setting-label { opacity: .45; }
.setting-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9rem; }
.setting-check input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; flex: none; }

/* ════════════════════════════════════════════════════════════
   JOIN ERROR — landing page inline message
   ════════════════════════════════════════════════════════════ */
.join-err { color: var(--red); font-size: .9rem; margin: 6px 0 0; min-height: 1.3em; text-align: center; font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   TIMED HINTS
   ════════════════════════════════════════════════════════════ */
.hint-section { margin: 14px 0 0; }
.hint-btn { color: var(--gold) !important; border-color: rgba(232,196,104,.5) !important; }
.hint-btn:hover:not(:disabled) { background: rgba(232,196,104,.1) !important; }
.hint-btn:disabled { opacity: .5; cursor: default; }
.hint-text {
  margin-top: 10px; padding: 12px 14px;
  background: rgba(232,196,104,.08);
  border: 1px solid rgba(232,196,104,.3);
  border-radius: 8px; color: var(--gold);
  font-size: .9rem; line-height: 1.55;
}

/* Graduated hints (nudge → hint → solution) — each revealed tier stacks. */
.hint-tier {
  margin-top: 10px; padding: 12px 14px;
  background: rgba(232,196,104,.08);
  border: 1px solid rgba(232,196,104,.3);
  border-radius: 8px; color: var(--gold);
  font-size: .9rem; line-height: 1.55;
}
.hint-tier p { margin: 0 0 6px; }
.hint-tier p:last-child { margin-bottom: 0; }
.hint-tier-label {
  display: block; margin-bottom: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: .8;
}
/* Tier 3 = the answer: brighter, unmistakable. */
.hint-tier-3 { background: rgba(232,196,104,.16); border-color: rgba(232,196,104,.55); }
.hint-solution { font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }
.hint-btn[data-tier="3"] { color: var(--gold) !important; border-color: rgba(232,196,104,.7) !important; }
.hint-section .hint-btn { margin-top: 10px; }

/* Reveal-the-answer confirmation modal — themed to match the gold hint accent. */
.reveal-answer-modal { text-align: center; border-color: rgba(232,196,104,.4); }
.reveal-answer-modal h2 { color: var(--gold); }
.reveal-answer-icon {
  font-size: 2.4rem; line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px rgba(232,196,104,.35));
}

/* ════════════════════════════════════════════════════════════
   LOCK-OPEN ANIMATION — fires on correct answer before re-render
   ════════════════════════════════════════════════════════════ */
@keyframes lockOpen {
  0%   { transform: scale(1);     box-shadow: none;                                        border-color: var(--card-border); }
  20%  { transform: scale(1.016); box-shadow: 0 0 0 3px rgba(232,196,104,.5), 0 0 55px rgba(232,196,104,.3); border-color: var(--gold); }
  70%  { transform: scale(1.006); box-shadow: 0 0 0 1px rgba(232,196,104,.25);             border-color: var(--gold); }
  100% { transform: scale(1);     box-shadow: none;                                        border-color: var(--card-border); }
}
.puzzle.lock-open { animation: lockOpen 1.2s ease forwards; }

/* ════════════════════════════════════════════════════════════
   5-MINUTE PANIC MODE
   ════════════════════════════════════════════════════════════ */
body.panic::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9997;
  animation: panicGlow 1.4s ease-in-out infinite alternate;
}
@keyframes panicGlow {
  from { box-shadow: inset 0 0 50px rgba(224,112,112,.12); }
  to   { box-shadow: inset 0 0 110px rgba(224,112,112,.48); }
}
body.panic [data-t="elapsed"] {
  animation: panicPulse .85s ease infinite !important;
  color: var(--red) !important;
}
@keyframes panicPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}
body.panic [data-t="left"] { color: var(--red) !important; font-weight: 800; }

/* ════════════════════════════════════════════════════════════
   FINAL-MINUTE CRESCENDO — accelerating heartbeat edge-pulse.
   Placed AFTER .panic so its body::before wins while both classes are on
   (last 60s sits inside the 5-min panic window); the 10s flash below wins in
   turn. Tempo comes from --beat, tightened each second by lobby.js's tick().
   ════════════════════════════════════════════════════════════ */
body.final-minute::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9997;
  box-shadow: inset 0 0 70px rgba(214, 40, 40, .22);
  animation: heartbeatEdge var(--beat, 800ms) ease-in-out infinite;
}
@keyframes heartbeatEdge {
  0%, 100% { box-shadow: inset 0 0 60px  rgba(214, 40, 40, .16); }
  16%      { box-shadow: inset 0 0 150px rgba(224, 46, 46, .62); }  /* lub */
  30%      { box-shadow: inset 0 0 90px  rgba(214, 40, 40, .28); }
  46%      { box-shadow: inset 0 0 140px rgba(224, 46, 46, .52); }  /* dub */
  60%      { box-shadow: inset 0 0 60px  rgba(214, 40, 40, .16); }
}
body.final-minute [data-t="left"] { color: #ff4444 !important; font-weight: 900; }
@media (prefers-reduced-motion: reduce) {
  body.final-minute::before { animation: none; box-shadow: inset 0 0 110px rgba(214, 40, 40, .4); }
}

/* The voice counting down — a giant numeral over everything in the final 10s. */
.final-numeral {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.final-numeral-avatar {
  font-size: 3rem; line-height: 1;
  filter: drop-shadow(0 0 22px rgba(255, 60, 60, .75));
}
.final-numeral-n {
  font-family: 'Cinzel', 'Palatino Linotype', serif; font-weight: 900;
  font-size: min(38vh, 46vw); line-height: .9; color: #ff3b3b;
  text-shadow: 0 0 44px rgba(255, 40, 40, .85), 0 6px 18px rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .final-numeral-n.beat { animation: numeralBeat .9s ease; }
}
@keyframes numeralBeat {
  0%   { transform: scale(1.45); opacity: 0; }
  28%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(.84);  opacity: .82; }
}

/* ════════════════════════════════════════════════════════════
   FINAL 10-SECOND COUNTDOWN — full-screen red flash
   ════════════════════════════════════════════════════════════ */
body.final-countdown::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  animation: finalFlash .5s ease-in-out infinite;
}
@keyframes finalFlash {
  0%, 100% { box-shadow: inset 0 0 0 rgba(220,30,30,0); background: rgba(220,30,30,0); }
  50%       { box-shadow: inset 0 0 0 rgba(220,30,30,0); background: rgba(220,30,30,.28); }
}
body.final-countdown [data-t="left"] {
  color: #ff4444 !important; font-weight: 900;
  animation: finalPulse .5s ease infinite !important;
}
@keyframes finalPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(1.15); }
}

/* ════════════════════════════════════════════════════════════
   AMBIENT ATMOSPHERE — a theme-aware particle bed that drifts
   behind the play screen while a game is in progress. Built once by
   lobby.js (ensureAmbientFx) and faded in only via body.playing-ambient.
   Colour follows the active pack's --gold/--purple (magenta + teal on
   the 90s, gold + jade in the casino, etc.), so it re-skins for free.
   It sits BEHIND all content (z-index:-1), never intercepts input, and
   is switched off entirely for reduced-motion users.
   ════════════════════════════════════════════════════════════ */
.ambient-fx {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  overflow: hidden;
  opacity: 0; transition: opacity 1.4s ease;
}
body.playing-ambient .ambient-fx { opacity: 1; }
.ambient-fx .mote {
  position: absolute;
  left: var(--x); bottom: -14px;
  width: var(--sz); height: var(--sz);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--gold), transparent 68%);
  opacity: 0;
  animation: moteRise var(--dur) linear var(--del) infinite;
  will-change: transform, opacity;
}
/* Every third mote drifts in the pack's secondary colour for depth. */
.ambient-fx .mote:nth-child(3n) {
  background: radial-gradient(circle at 32% 30%, var(--purple), transparent 68%);
}
@keyframes moteRise {
  0%   { transform: translate3d(0, 0, 0) scale(.55);                    opacity: 0; }
  12%  { opacity: var(--op); }
  50%  { transform: translate3d(calc(var(--dx) * .5), -48vh, 0) scale(1); }
  88%  { opacity: var(--op); }
  100% { transform: translate3d(var(--dx), -96vh, 0) scale(.85);        opacity: 0; }
}
/* Big top motes are square confetti; casino motes are larger, slower smoke. */
body.game-bigtop .ambient-fx .mote { border-radius: 2px; }
body.game-casino .ambient-fx .mote { filter: blur(1px); }
/* Christmas motes are snow: white flakes that drift DOWN from the top (every
   third one a warm twinkle-light gold). Same timing vars as the shared bed. */
body.game-christmas .ambient-fx .mote {
  top: -14px; bottom: auto;
  background: radial-gradient(circle at 40% 38%, #ffffff, rgba(255, 255, 255, 0) 70%);
  animation-name: snowFall;
}
body.game-christmas .ambient-fx .mote:nth-child(3n) {
  background: radial-gradient(circle at 40% 38%, var(--gold), transparent 68%);
}
@keyframes snowFall {
  0%   { transform: translate3d(0, 0, 0) scale(.6);                     opacity: 0; }
  10%  { opacity: var(--op); }
  50%  { transform: translate3d(calc(var(--dx) * .5), 48vh, 0) scale(1); }
  90%  { opacity: var(--op); }
  100% { transform: translate3d(var(--dx), 100vh, 0) scale(.9);         opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   SOLVE LIGHT-BLOOM — a one-shot radial burst the instant a puzzle
   unlocks (lobby.js flashSolveBloom), pairing with the lock-open card
   animation and the solve chime. Tinted per pack via --bloom-rgb.
   ════════════════════════════════════════════════════════════ */
.solve-bloom {
  position: fixed; inset: 0;
  z-index: 700; pointer-events: none;
  background: radial-gradient(circle at 50% 44%,
              rgba(var(--bloom-rgb), .5), rgba(var(--bloom-rgb), .12) 32%, transparent 62%);
  opacity: 0;
  animation: solveBloom 1.05s ease-out forwards;
}
@keyframes solveBloom {
  0%   { opacity: 0; transform: scale(.72); }
  18%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.28); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-fx { display: none; }
  .solve-bloom { display: none; }
}

/* ════════════════════════════════════════════════════════════
   LOST CINEMATIC SEQUENCE
   ════════════════════════════════════════════════════════════ */
.lost-cinematic {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px; padding: 24px 16px;
}
.lost-banner {
  width: 100%; max-width: 560px; border-radius: 14px; display: block;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(224, 112, 112, .35);
  opacity: 0; animation: lostBannerIn 1.8s ease forwards;
}
@keyframes lostBannerIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.lost-lines {
  max-width: 540px; text-align: center; display: flex; flex-direction: column; gap: 28px;
}
.lost-line {
  font-size: 1.25rem; line-height: 1.6; color: var(--ink);
  opacity: 0; transform: translateY(12px);
  transition: opacity .9s ease, transform .9s ease;
}
.lost-line-visible { opacity: 1; transform: translateY(0); }
.lost-line .archmage-voice, .lost-line em { color: var(--gold); font-style: italic; }
.lost-end { padding: 36px 24px; }
.lost-title { color: var(--red); margin-bottom: 12px; }
.lost-rating { margin-top: 24px; }
.lost-stars .star { font-size: 1.6rem; }

/* ════════════════════════════════════════════════════════════
   WON CINEMATIC SEQUENCE — victory counterpart to the lost one
   ════════════════════════════════════════════════════════════ */
.won-cinematic {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px; padding: 24px 16px;
}
.won-banner {
  width: 100%; max-width: 560px; border-radius: 14px; display: block;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 196, 104, .45),
              0 0 60px rgba(232, 196, 104, .28);
  opacity: 0; animation: wonBannerIn 1.8s ease forwards;
}
@keyframes wonBannerIn {
  from { opacity: 0; transform: scale(.96); filter: brightness(.6); }
  to   { opacity: 1; transform: scale(1);   filter: brightness(1); }
}
.won-lines {
  max-width: 540px; text-align: center; display: flex; flex-direction: column; gap: 28px;
}
.won-line {
  font-size: 1.25rem; line-height: 1.6; color: var(--ink);
  opacity: 0; transform: translateY(12px);
  transition: opacity .9s ease, transform .9s ease;
}
.won-line-visible { opacity: 1; transform: translateY(0); }
.won-line .archmage-voice, .won-line em { color: var(--gold); font-style: italic; }
.won-line b { color: var(--gold); }

/* ════════════════════════════════════════════════════════════
   OPENING CINEMATIC — sets the scene when the game begins
   ════════════════════════════════════════════════════════════ */
body.opening-open { overflow: hidden; }
.opening-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px; overflow-y: auto;
  background:
    radial-gradient(1100px 720px at 50% -10%, rgba(43,30,92,.93), rgba(9,6,18,.97)),
    var(--bg);
  animation: openingFadeIn 1s ease forwards;
}
.opening-overlay.opening-closing { animation: openingFadeOut .45s ease forwards; }
@keyframes openingFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes openingFadeOut { from { opacity: 1; } to { opacity: 0; } }

.opening-scene {
  width: 100%; max-width: 720px; margin: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.opening-banner {
  width: 100%; border-radius: 16px; display: block;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(139,108,240,.4),
              0 0 60px rgba(139,108,240,.25);
  opacity: 0; animation: openingBannerIn 2s ease forwards;
}
@keyframes openingBannerIn {
  from { opacity: 0; transform: scale(.97); filter: brightness(.55); }
  to   { opacity: 1; transform: scale(1);   filter: brightness(1); }
}
.opening-title {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  color: var(--gold); font-size: 2rem; margin: 0; letter-spacing: .04em;
  text-shadow: 0 0 26px rgba(232,196,104,.45);
  opacity: 0; animation: openingTitleIn 1.6s ease .4s forwards;
}
@keyframes openingTitleIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Cold-open herald — the game's voice character materializes over the dark. */
.opening-herald {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; animation: openingHeraldIn 1.3s ease .3s forwards;
}
.opening-herald-avatar {
  font-size: 4.2rem; line-height: 1;
  filter: drop-shadow(0 0 26px rgba(232, 196, 104, .55));
}
.opening-herald-label {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  text-transform: uppercase; letter-spacing: .2em; font-size: .78rem;
  color: var(--gold); opacity: .85;
}
@keyframes openingHeraldIn {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .opening-herald-avatar { animation: heraldGlow 3.2s ease-in-out infinite alternate; }
}
@keyframes heraldGlow {
  from { filter: drop-shadow(0 0 16px rgba(232, 196, 104, .4)); transform: scale(1); }
  to   { filter: drop-shadow(0 0 34px rgba(232, 196, 104, .7)); transform: scale(1.06); }
}
@media (max-width: 560px) { .opening-herald-avatar { font-size: 3.2rem; } }

.opening-lines {
  display: flex; flex-direction: column; gap: 18px; max-width: 600px; min-height: 1px;
}
.opening-line {
  font-size: 1.15rem; line-height: 1.6; color: var(--ink); margin: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity .9s ease, transform .9s ease;
}
.opening-line-visible { opacity: 1; transform: translateY(0); }
.opening-line-final {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  color: var(--gold); font-size: 1.5rem; font-weight: 700; letter-spacing: .03em;
  text-shadow: 0 0 20px rgba(232,196,104,.4); margin-top: 4px;
}
.opening-begin-btn {
  width: auto; justify-content: center; opacity: 0; transform: translateY(8px);
}
.opening-begin-btn.opening-begin-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}
.opening-skip {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .85rem; padding: 4px 8px; opacity: .7;
}
.opening-skip:hover { opacity: 1; color: var(--ink); }
@media (max-width: 560px) {
  .opening-title { font-size: 1.5rem; }
  .opening-line { font-size: 1.02rem; }
  .opening-line-final { font-size: 1.25rem; }
}

/* ════════════════════════════════════════════════════════════
   GAME VIEW — card stack spacing
   ════════════════════════════════════════════════════════════ */
.view { display: flex; flex-direction: column; gap: 16px; }

/* ════════════════════════════════════════════════════════════
   ROLE PROFILE CARDS — lobby role picker
   ════════════════════════════════════════════════════════════ */
.role-cards-grid {
  display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 16px 0;
}
@media (max-width: 580px) { .role-cards-grid { grid-template-columns: 1fr; } }

.role-card {
  border: 1px solid var(--card-border); border-radius: 14px; padding: 18px 14px;
  background: #1f1836; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; transition: border-color .15s, box-shadow .15s;
}
.role-card.available { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,196,104,.2) inset; }
.role-card.mine { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple) inset; }

.role-card-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; box-shadow: 0 4px 16px rgba(0,0,0,.45);
  margin-bottom: 4px;
}
.role-card-title { margin: 0; color: var(--gold); font-size: 1.05rem; font-weight: 700; }
.role-card-desc { color: var(--muted); font-size: .8rem; margin: 0; }

.role-card-powers {
  list-style: none; padding: 8px 10px; margin: 4px 0;
  text-align: left; width: 100%;
  background: rgba(0,0,0,.2); border-radius: 8px; font-size: .78rem;
}
.role-card-powers li { margin: 3px 0; color: var(--muted); }
.role-card-powers .powers-label {
  color: var(--gold); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px;
}
.role-card-members { width: 100%; }
.role-card .pickBtn { width: 100%; margin-top: 6px; }

/* ════════════════════════════════════════════════════════════
   PLAY AVATARS — role row at top of playing view
   ════════════════════════════════════════════════════════════ */
.play-avatars {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0 4px;
}
.play-avatar {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px; border-radius: 10px; min-width: 74px;
  background: rgba(0,0,0,.2); border: 1px solid var(--card-border);
}
.play-avatar-me { border-color: var(--purple); background: rgba(139,108,240,.1); }
.play-avatar-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.play-avatar-role {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}
.play-avatar-name { font-size: .74rem; color: var(--ink); font-weight: 600; text-align: center; }

/* ════════════════════════════════════════════════════════════
   RECONNECT BANNER — brief welcome-back on page reload mid-game
   ════════════════════════════════════════════════════════════ */
.reconnect-banner {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-18px);
  background: linear-gradient(135deg, #1a302a, #172822);
  border: 1px solid rgba(87,201,138,.5); border-radius: 12px;
  padding: 10px 18px; display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: #a8e6c0; line-height: 1.4;
  opacity: 0; transition: opacity .35s ease, transform .35s ease;
  pointer-events: none; z-index: 60; white-space: nowrap;
  max-width: min(460px, 90vw);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px -4px rgba(87,201,138,.25);
}
.reconnect-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.reconnect-icon { font-size: 1.2rem; flex: none; }

/* ════════════════════════════════════════════════════════════
   ARCHMAGE'S VOICE — dramatic popup modal
   ════════════════════════════════════════════════════════════ */
.archmage-modal {
  position: fixed; inset: 0; background: rgba(8,5,16,.78);
  display: flex; align-items: center; justify-content: center; z-index: 80;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.archmage-modal.show { opacity: 1; pointer-events: auto; }
.archmage-modal-box {
  background: linear-gradient(160deg, #2a1f42, #1a1232);
  border: 1px solid rgba(139,108,240,.7); border-radius: 16px;
  padding: 32px 28px; max-width: min(400px, 90vw); text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.65), 0 0 48px -8px rgba(139,108,240,.5);
  transform: scale(.92); transition: transform .35s ease;
}
.archmage-modal.show .archmage-modal-box { transform: scale(1); }
.archmage-modal-avatar {
  font-size: 3.2rem; line-height: 1; margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(139,108,240,.8));
}
.archmage-modal-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--purple); margin-bottom: 12px;
}
.archmage-modal-text {
  display: block; font-size: 1.15rem; color: #c8b8f8; line-height: 1.6; margin-bottom: 20px;
}
.archmage-modal-dismiss { width: auto; padding: 8px 22px; font-size: .88rem; }

/* ════════════════════════════════════════════════════════════
   CHAT WIDGET — bottom-right popup
   ════════════════════════════════════════════════════════════ */
.chat-widget {
  position: fixed; bottom: 0; right: 20px; width: 300px;
  background: var(--card); border: 1px solid var(--card-border); border-bottom: none;
  border-radius: 12px 12px 0 0; z-index: 70;
  box-shadow: 0 -4px 30px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
}
.chat-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent;
}
.chat-widget.chat-open .chat-header { border-bottom-color: var(--card-border); }
.chat-title { flex: 1; font-weight: 700; font-size: .9rem; color: var(--gold); }
.chat-badge {
  background: var(--red); color: #fff; border-radius: 999px;
  padding: 2px 8px; font-size: .72rem; font-weight: 700;
}
.chat-chevron { color: var(--muted); font-size: .8rem; flex: none; }
.chat-body { display: none; flex-direction: column; height: 260px; }
.chat-widget.chat-open .chat-body { display: flex; }
.chat-msgs {
  flex: 1; overflow-y: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: var(--card-border) transparent;
}
.chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.chat-msg-me { flex-direction: row-reverse; }
.chat-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.chat-bubble { max-width: 76%; }
.chat-msg-me .chat-bubble { display: flex; flex-direction: column; align-items: flex-end; }
.chat-name { font-size: .67rem; color: var(--muted); margin-bottom: 2px; }
.chat-text {
  background: #2c2247; border-radius: 8px; padding: 6px 10px;
  font-size: .84rem; line-height: 1.4; word-break: break-word;
}
.chat-msg-me .chat-text { background: rgba(139,108,240,.22); }
.chat-empty {
  color: var(--muted); font-style: italic; font-size: .84rem;
  text-align: center; margin: auto; padding: 20px 0;
}
.chat-input-row {
  display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--card-border);
}
.chat-input {
  flex: 1; background: #1b1430; border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--ink); padding: 7px 10px; font-size: .84rem;
}
.chat-input:focus { outline: none; border-color: var(--purple); }
@media (max-width: 420px) { .chat-widget { right: 8px; width: calc(100vw - 16px); } }

/* Feature flags (set by nav.js from api/features.php).
   Hide every gift-card entry point when gift cards are disabled (or during beta).
   Covers the landing-page "Give as a gift" buttons (.gift-cta) and anything else
   tagged [data-gift-only] (e.g. the footer link). */
.gifts-off [data-gift-only],
.gifts-off .gift-cta { display: none !important; }

/* ── Bug-report widget ("Report a problem") — beta only ─────────────
   A chat-style collapsible pinned bottom-LEFT so it never collides with the
   bottom-right team chat. Reuses the chat visual language. */
.bug-widget {
  position: fixed; bottom: 0; left: 20px; width: 300px;
  background: var(--card); border: 1px solid var(--card-border); border-bottom: none;
  border-radius: 12px 12px 0 0; z-index: 70;
  box-shadow: 0 -4px 30px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
}
.bug-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  cursor: pointer; user-select: none; border-bottom: 1px solid transparent;
}
.bug-widget.bug-open .bug-header { border-bottom-color: var(--card-border); }
.bug-title { flex: 1; font-weight: 700; font-size: .9rem; color: var(--gold); }
.bug-chevron { color: var(--muted); font-size: .8rem; flex: none; }
.bug-body { display: none; flex-direction: column; padding: 12px; gap: 10px; }
.bug-widget.bug-open .bug-body { display: flex; }
.bug-intro { font-size: .8rem; line-height: 1.45; color: var(--muted); margin: 0; }
.bug-textarea {
  width: 100%; min-height: 88px; resize: vertical;
  background: #1b1430; border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--ink); padding: 8px 10px; font-size: .84rem;
  font-family: inherit; line-height: 1.4;
}
.bug-textarea:focus { outline: none; border-color: var(--purple); }
.bug-thanks {
  color: var(--ink); font-size: .9rem; text-align: center; padding: 24px 8px;
}
@media (max-width: 420px) { .bug-widget { left: 8px; width: calc(100vw - 16px); } }

/* ── Beta post-game survey modal ────────────────────────────────── */
.sv-overlay { z-index: 120; padding: 16px; overflow-y: auto; }
.sv-modal {
  position: relative; max-width: 560px; width: 100%; text-align: left;
  border-color: var(--gold); max-height: 90vh; display: flex; flex-direction: column;
}
.sv-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.sv-title { margin: 0 0 6px; color: var(--gold); }
.sv-intro { margin: 0 0 14px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.sv-body { overflow-y: auto; padding-right: 6px; }
.sv-field { margin-bottom: 16px; }
.sv-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--ink); }
.sv-opts { display: flex; flex-direction: column; gap: 6px; }
.sv-opt { display: flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; }
.sv-textarea, .sv-input {
  width: 100%; background: #1b1430; border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--ink); padding: 8px 10px; font-size: .86rem;
  font-family: inherit; line-height: 1.4;
}
.sv-textarea { min-height: 64px; resize: vertical; }
.sv-textarea:focus, .sv-input:focus { outline: none; border-color: var(--purple); }
.sv-scale { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-scale-cell { position: relative; cursor: pointer; }
.sv-scale-cell input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sv-scale-cell span {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--card-border); border-radius: 6px;
  font-size: .82rem; color: var(--muted);
}
.sv-scale-cell input:checked + span { background: var(--purple); color: #fff; border-color: var(--purple); }
.sv-scale-ends { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: 4px; }
.sv-divider { height: 1px; background: var(--card-border); margin: 8px 0 16px; }
.sv-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.sv-actions .btn { width: auto; max-width: none; margin: 0; }

/* ════════════════════════════════════════════════════════════
   COLLECTIVE PUZZLE — all-roles-must-answer widget
   ════════════════════════════════════════════════════════════ */
.collective { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 14px; }
.collective-role-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: .82rem; font-weight: 700; color: var(--gold);
}
.collective-role-icon { font-size: 1.1rem; }
.collective-answered .collective-input { border-color: var(--green); opacity: .6; }
.collective-answered .collective-submit { background: var(--green); border-color: var(--green); color: #07301c; }

.collective-counter {
  margin: 14px 0 0; padding: 14px; text-align: center;
  background: rgba(139,108,240,.07); border: 1px solid rgba(139,108,240,.25); border-radius: 10px;
}
.collective-counter-label { font-size: .88rem; color: var(--muted); margin-bottom: 10px; }
.collective-pips { display: flex; gap: 10px; justify-content: center; }
.collective-pip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--card-border);
  background: #1b1430; font-size: .88rem; min-width: 50px;
}
.collective-pip.answered {
  border-color: var(--green); background: rgba(87,201,138,.1);
  box-shadow: 0 0 10px -3px rgba(87,201,138,.5);
}
.collective-pip-icon { font-size: 1.1rem; }
.collective-pip-name { font-size: .58rem; text-transform: uppercase; letter-spacing: .5px; line-height: 1.25; overflow-wrap: anywhere; color: var(--muted); }
.collective-pip.answered .collective-pip-name { color: var(--green); }

/* ── Simultaneous puzzle widget ── */
.simul { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.simul-my-role {
  background: var(--bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 14px; transition: border-color .3s, background .3s;
}
.simul-my-role.simul-held {
  border-color: var(--gold); background: rgba(245,158,11,.07);
}
.simul-role-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--muted); margin-bottom: 10px;
}
.simul-held-badge {
  margin-left: auto; color: var(--gold); font-size: .82rem;
  animation: pulse 1s ease-in-out infinite;
}
.simul-status {
  background: var(--bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 14px; text-align: center;
}
.simul-status-label { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.simul-pips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.simul-pip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 68px; padding: 10px 6px; border-radius: 8px;
  background: #1b1430; border: 1px solid var(--card-border);
  font-size: .78rem; color: var(--muted); transition: all .3s ease;
}
.simul-pip.simul-pip-held {
  border-color: var(--gold); background: rgba(245,158,11,.12); color: var(--ink);
  box-shadow: 0 0 12px -3px rgba(245,158,11,.5);
}
.simul-pip-icon { font-size: 1.3rem; }
.simul-pip-name { font-size: .6rem; text-transform: uppercase; letter-spacing: .5px; line-height: 1.25; overflow-wrap: anywhere; }
.simul-pip-glow { font-size: .85rem; color: var(--gold); animation: pulse .6s ease-in-out infinite; }
.simul-window {
  margin-top: 12px; font-size: .88rem; color: var(--muted);
  padding: 6px 12px; border-radius: 6px; display: inline-block;
}
.simul-window b { color: var(--ink); font-size: 1.05rem; }
.simul-window-urgent { background: rgba(239,68,68,.1); }
.simul-window-urgent b { color: var(--red); }

/* ════════════════════════════════════════════════════════════
   HOST SETTINGS TOOLTIPS
   ════════════════════════════════════════════════════════════ */
.tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--card-border);
  color: var(--ink); font-size: .72rem; font-weight: 700; cursor: help; font-style: normal;
  vertical-align: middle; margin-left: 5px; position: relative;
}
.tip::before { content: 'i'; line-height: 1; font-family: Georgia, 'Times New Roman', serif; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: #0e0b1e; border: 1px solid var(--card-border); border-radius: 8px;
  padding: 7px 10px; font-size: .78rem; color: var(--ink); line-height: 1.45;
  white-space: normal; min-width: 180px; max-width: 230px;
  pointer-events: none; z-index: 99;
  opacity: 0; transition: opacity .15s; text-align: left;
}
.tip:hover::after { opacity: 1; }

/* ── Escalating elapsed-timer ──────────────────────────────────
   Replaces the old .red toggle with three graduated stages.
   ════════════════════════════════════════════════════════════ */
@keyframes timer-escalate {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}
.esc-amber {
  color: #e8c468;
  animation: timer-escalate 2.4s ease-in-out infinite;
}
.esc-orange {
  color: #e8944a;
  animation: timer-escalate 1.4s ease-in-out infinite;
}
.esc-red {
  color: var(--red);
  animation: timer-escalate 0.7s ease-in-out infinite;
}

/* ── Branching path fork — vote + reveal modals ────────────────
   ════════════════════════════════════════════════════════════ */
.branch-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.branch-modal {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px 26px 24px;
  max-width: 520px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  text-align: center;
}
.branch-modal-eyebrow {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.branch-modal-lore {
  color: var(--muted); font-size: .92rem; line-height: 1.55;
  margin: 0 0 14px;
}
.branch-timer-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 16px;
}
.branch-countdown {
  font-size: 1.15rem; font-weight: 700;
  color: var(--gold); min-width: 36px;
  transition: color .3s;
}
.branch-cd-urgent { color: var(--red) !important; animation: timer-escalate .6s ease-in-out infinite; }
.branch-vote-status { color: var(--muted); font-size: .85rem; }
.branch-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 6px;
}
@media (max-width: 480px) { .branch-options { grid-template-columns: 1fr; } }
.branch-option {
  background: var(--bg2);
  border: 2px solid var(--card-border);
  border-radius: 12px;
  padding: 16px 14px;
  transition: border-color .2s, box-shadow .2s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.branch-option.branch-voted {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,196,104,.18);
}
.branch-opt-icon { font-size: 2rem; }
.branch-opt-name { font-weight: 700; font-size: .97rem; }
.branch-opt-desc { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.branch-vote-count { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.branch-vote-btn { margin-top: 8px; width: 100%; }
.branch-reveal-title { color: var(--gold); margin: 6px 0 10px; }
.branch-reveal-tally {
  font-size: .88rem; color: var(--muted); margin: 8px 0 16px;
  letter-spacing: .06em;
}

/* ── Resonance Chamber — crystal pillar visuals ────────────────
   ════════════════════════════════════════════════════════════ */
.clue-has-pillar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.clue-has-pillar .clue-body {
  flex: 1;
  min-width: 0;
}
.clue-pillar {
  flex-shrink: 0;
}
.clue-pillar svg {
  width: 80px;
  height: auto;
  display: block;
}

/* clue action row — "I think I know something" + "Reveal Bonus Clue" */
.clue-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 10px; position: relative; z-index: 1;
}
.clue-actions .btn.small { margin: 0; }
.bonus-clue-btn {
  background: rgba(232,196,104,.14); border-color: rgba(232,196,104,.45); color: #f0d894;
  transition: background .2s, box-shadow .2s;
}
.bonus-clue-btn:hover {
  background: rgba(232,196,104,.26);
  box-shadow: 0 0 12px -2px rgba(232,196,104,.5);
}
.bonus-clue-modal { border-color: var(--gold); position: relative; }
.bonus-clue-modal h2 { color: var(--gold); }
.bonus-clue-modal p { color: var(--text); margin: 8px 0; }
/* top-right close (×) shared by dialogs that offer a dismiss affordance */
.modal-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 2px 8px;
  transition: color .15s;
}
.modal-x:hover { color: var(--text); }

/* ════════════════════════════════════════════════════════════
   MOBILE GAME SCREEN — touch targets + layout fixes ≤ 480px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── progress dots ── */
  .progress { flex-wrap: wrap; gap: 8px; }

  /* ── game timer ── */
  .gametimer .value { font-size: 2rem; }

  /* ── play avatar row: shrink to 2-up on very narrow screens ── */
  .play-avatar { min-width: 66px; padding: 6px 8px; }
  .play-avatar-icon { width: 30px; height: 30px; font-size: 1.1rem; }

  /* ── role badge row: allow wrapping without overflow ── */
  .puzzle-head-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .role-badge-row { justify-content: flex-start; }

  /* ── cipher wheel controls: wrap and enlarge touch targets ── */
  .cipher-controls { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .cw-prev, .cw-next { min-height: 44px; padding: 10px 22px; font-size: .9rem; }
  .cw-use  { min-height: 44px; padding: 10px 18px; }
  .cipher-out { flex-direction: column; gap: 6px; text-align: center; }

  /* ── sequence chips: tap-friendly height ── */
  .seq-chip {
    min-height: 44px; padding: 10px 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: .92rem;
  }
  .seq-chips { gap: 10px; }

  /* ── sequence slots: more breathing room ── */
  .seq-slots { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }

  /* ── dial buttons: enlarge to 44px touch target ── */
  .dial-btn { width: 44px; height: 44px; font-size: 1.1rem; }

  /* ── collective / simultaneous role buttons ── */
  .collective-btn, .simul-btn { min-height: 44px; }

  /* ── puzzle title slightly smaller on phones ── */
  .puzzle h2 { font-size: 1.4rem; }
}

/* ════════════════════════════════════════════════════════════
   EMOJI REACTIONS — one-tap chat row + compact pill display
   ════════════════════════════════════════════════════════════ */
.chat-body { height: 300px; } /* slightly taller to fit the reaction row */
.chat-rx-row {
  display: flex; gap: 6px; padding: 6px 10px;
  border-top: 1px solid var(--card-border);
  flex-wrap: wrap;
}
.chat-rx-btn {
  background: rgba(139,108,240,.12); border: 1px solid rgba(139,108,240,.3);
  border-radius: 8px; padding: 4px 10px; font-size: 1.1rem;
  cursor: pointer; transition: background .15s, transform .1s;
  line-height: 1;
}
.chat-rx-btn:hover { background: rgba(139,108,240,.28); transform: scale(1.15); }
.chat-rx-btn:active { transform: scale(.95); }

.chat-reaction {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px; margin: 0 auto;
}
.chat-rx-emoji { font-size: 1.3rem; line-height: 1; }
.chat-rx-who   { font-size: .72rem; color: var(--muted); font-style: italic; }

/* ════════════════════════════════════════════════════════════
   SIGNAL — "I found it!" button + avatar badge
   ════════════════════════════════════════════════════════════ */
.signal-btn {
  margin-top: 10px;
  background: rgba(37,99,235,.15); border-color: rgba(37,99,235,.4); color: #93c5fd;
  transition: background .2s, box-shadow .2s;
}
.signal-btn:hover { background: rgba(37,99,235,.28); }
.signal-btn.signal-active {
  background: rgba(37,99,235,.3); border-color: #3b82f6; color: #bfdbfe;
  box-shadow: 0 0 12px -2px rgba(59,130,246,.5);
  animation: signalPulse 1.8s ease-in-out infinite;
}
@keyframes signalPulse {
  0%, 100% { box-shadow: 0 0 10px -2px rgba(59,130,246,.4); }
  50%       { box-shadow: 0 0 20px 2px rgba(59,130,246,.7); }
}
.play-avatar { position: relative; }
.signal-badge {
  position: absolute; top: -6px; right: -6px;
  font-size: .95rem; line-height: 1;
  animation: signalPulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(59,130,246,.7));
}

/* ════════════════════════════════════════════════════════════
   SPECTATOR MODE — lobby toggle + play-view spectator card
   ════════════════════════════════════════════════════════════ */
.spectator-opt {
  margin-top: 14px; text-align: center;
  border-top: 1px solid var(--card-border); padding-top: 14px;
}
.spectator-opt-btn {
  color: var(--muted); border-color: var(--card-border);
  background: transparent;
}
.spectator-opt-btn:hover { color: var(--ink); border-color: var(--muted); background: rgba(255,255,255,.05); }
.spectator-opt-btn.spectator-active {
  color: #93c5fd; border-color: rgba(37,99,235,.5); background: rgba(37,99,235,.12);
}

/* Manage players (host / guide remove) */
.manage-players-card { border-color: rgba(220,38,38,.28); }
.manage-players-list { list-style: none; margin: 10px 0 0; padding: 0; }
.manage-player-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--card-border);
}
.manage-player-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.manage-player-role { flex: 0 0 auto; }
.manage-remove-btn {
  flex: 0 0 auto; color: #fca5a5; border-color: rgba(220,38,38,.4); background: transparent;
}
.manage-remove-btn:hover { color: #fff; border-color: var(--red); background: rgba(220,38,38,.18); }

.spectator-view {
  background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.25);
}
.spectator-view-head {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .95rem; font-weight: 700; color: #93c5fd; margin-bottom: 14px;
}
.spectator-badge {
  display: inline-block; background: rgba(37,99,235,.18); color: #93c5fd;
  border: 1px solid rgba(37,99,235,.35); border-radius: 6px;
  padding: 1px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  margin-right: 4px;
}
.spectator-icon { font-size: 1.1rem; margin-top: 2px; }
.clue-readonly { opacity: .92; }
.clue-readonly .clue-signal-btn { display: none; }

.play-spectators {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: .78rem; color: var(--muted); justify-content: center;
}
.spectator-name {
  background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.25);
  border-radius: 6px; padding: 2px 8px;
}

/* ════════════════════════════════════════════════════════════
   UPDATE GAME SETTINGS — host button on join page + modal
   ════════════════════════════════════════════════════════════ */
.btn-settings-update {
  width: 100%; margin-top: 10px;
  background: transparent; border-color: var(--card-border); color: var(--muted);
}
.btn-settings-update:hover {
  color: var(--ink); border-color: var(--purple); background: rgba(139,108,240,.1);
}
.settings-update-modal { border-color: var(--purple); max-width: 480px; text-align: left; }
.settings-update-modal h2 { color: var(--purple); text-align: center; }
.settings-update-modal .settings-form { margin: 16px 0 4px; }
.settings-update-modal .modal-actions { justify-content: center; }

/* ════════════════════════════════════════════════════════════
   ALERT MODAL — styled replacement for browser alert()
   ════════════════════════════════════════════════════════════ */
.alert-modal { border-color: var(--gold); max-width: 380px; }
.alert-modal h2 { color: var(--gold); }
.alert-msg { color: var(--ink); margin: 8px 0 4px; font-size: 1rem; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   BEFORE YOU BEGIN modal
   ════════════════════════════════════════════════════════════ */
.btb-overlay { z-index: 200; }
.btb-modal {
  border-color: var(--gold); max-width: 520px; text-align: left;
  max-height: 90vh; overflow-y: auto;
}
.btb-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  justify-content: center;
}
.btb-main-icon { font-size: 2.4rem; line-height: 1; }
.btb-modal h2 { color: var(--gold); margin: 0; }
.btb-rules { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.btb-feature {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(232,196,104,.06); border: 1px solid rgba(232,196,104,.18);
  border-radius: 10px; padding: 12px 14px; line-height: 1.5;
}
.btb-icon { font-size: 1.4rem; flex: none; line-height: 1.2; }
.btb-start-btn { width: 100% !important; max-width: none !important; font-size: 1.1rem; padding: 16px; display: block; }
.btb-start-btn[disabled] { opacity: .55; cursor: default; }
.btb-note { margin-top: 8px; }

/* Synchronized-briefing footer: host ready-roster + Begin/Cancel, or player ready state */
.btb-footer { margin-top: 4px; }
.briefing-ready-count {
  text-align: center; margin-bottom: 12px; color: var(--gold);
  font-size: 1.02rem;
}
.briefing-roster {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.briefing-roster-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 8px 12px;
}
.briefing-roster-row.is-ready {
  background: rgba(120,200,120,.10); border-color: rgba(120,200,120,.28);
}
.briefing-check { font-size: 1.1rem; flex: none; line-height: 1; }
.briefing-cancel {
  display: block; width: 100%; margin-top: 10px; text-align: center;
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: .92rem; text-decoration: underline;
}
.briefing-cancel:hover { color: var(--ink); }

/* ════════════════════════════════════════════════════════════
   SALE PRICE display
   ════════════════════════════════════════════════════════════ */
.price-strike    { text-decoration: line-through; opacity: .55; font-size: .85em; }
.price-strike-sm { text-decoration: line-through; opacity: .55; font-size: .8em; margin-right: 4px; color: var(--muted); }
.price-was       { font-size: .55em; text-decoration: line-through; opacity: .5; vertical-align: middle; margin-left: 10px; }
.price-was-sm    { font-size: .85em; text-decoration: line-through; opacity: .55; color: var(--muted); margin-right: 4px; }
.sale-badge {
  background: var(--red); color: #fff; border-radius: 6px;
  font-size: .65rem; font-weight: 800; padding: 2px 6px;
  letter-spacing: .04em; vertical-align: middle; margin-left: 6px;
}
.gift-cta { margin-top: 10px; }

/* ════════════════════════════════════════════════════════════
   GROUP SIZE on terms.php
   ════════════════════════════════════════════════════════════ */
.group-size-row { margin: 16px 0 4px; }
.group-size-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.group-size-select { width: 100%; }
.group-size-note { margin: 6px 0 0; }
.group-price-note { font-size: .85rem; color: var(--muted); margin: 4px 0 14px; }

/* ════════════════════════════════════════════════════════════
   PROMO CODE on terms.php
   ════════════════════════════════════════════════════════════ */
.coupon-row {
  display: flex; gap: 8px; margin: 14px 0 4px; align-items: center;
}
.coupon-input { flex: 1; text-transform: uppercase; letter-spacing: .06em; }
.coupon-msg   { font-size: .85rem; min-height: 20px; margin-bottom: 10px; }
.coupon-ok    { color: var(--green); }
.coupon-err   { color: var(--red); }

/* gift.html optional label */
.optional-label { font-size: .75rem; color: var(--muted); font-weight: 400; }
.gift-message-input { width: 100%; }

/* gift.html — room picker (shown when no ?game= is supplied) */
.gift-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.gift-game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  min-height: 160px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  overflow: hidden;
  background-color: var(--card, #1b1430);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(232,196,104,.28);
  border-radius: 14px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Legibility scrim over the art. */
.gift-game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,6,20,.92) 0%, rgba(10,6,20,.55) 48%, rgba(10,6,20,.10) 100%);
  z-index: 0;
}
.gift-game-card > * { position: relative; z-index: 1; }
.gift-game-card:hover,
.gift-game-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  outline: none;
}
.gift-game-card .ggc-name  { font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.gift-game-card .ggc-price { color: #ffd873; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.85); }

/* Per-game background art (assets/images/game*.png). */
.ggc--archmage { background-image: url('../images/game.png'); }
.ggc--nineties { background-image: url('../images/game-90s.png'); }
.ggc--casino   { background-image: url('../images/game-casino.png'); }
.ggc--bigtop   { background-image: url('../images/game-bigtop.png'); }
/* Snowy pine-night gradient under the art, so the card still reads before game-christmas.png exists. */
.ggc--christmas {
  background-image: url('../images/game-christmas.png'),
    radial-gradient(rgba(255, 255, 255, .45) 1px, transparent 1.7px),
    linear-gradient(175deg, #1c4a36, #0a1712);
  background-size: cover, 22px 22px, cover;
}

.delivery-opt { align-items: flex-start; margin-bottom: 8px; }
.change-room-link { margin-left: 6px; white-space: nowrap; }

/* gift.html — themed delivery-date calendar popover */
.date-field { position: relative; max-width: 280px; }
#deliverDisplay { cursor: pointer; }
.calendar-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 280px;
  padding: 12px;
  background: var(--card, #1b1430);
  border: 1px solid rgba(232,196,104,.4);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-weight: 700; color: var(--gold); }
.cal-nav {
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid rgba(232,196,104,.35);
  color: var(--gold);
  border-radius: 8px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { background: rgba(232,196,104,.15); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow span { text-align: center; font-size: .72rem; color: var(--muted); padding: 4px 0; }
.cal-day {
  padding: 7px 0;
  text-align: center;
  font-size: .9rem;
  color: var(--text, #ece7f7);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.cal-day:hover:not(:disabled):not(.is-empty) { background: rgba(232,196,104,.18); }
.cal-day:disabled { opacity: .25; cursor: default; }
.cal-day.is-empty { visibility: hidden; cursor: default; }
.cal-day.is-today { outline: 1px solid rgba(232,196,104,.5); }
.cal-day.is-selected { background: var(--gold); color: #2a2010; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   WIN SCREEN — canvas share image + leaderboard
   ════════════════════════════════════════════════════════════ */
.share-canvas-wrap { margin: 16px auto; max-width: 600px; }
.escape-canvas {
  width: 100%; border-radius: 10px;
  border: 1px solid rgba(232,196,104,.35);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  display: block;
}
.share-canvas-btns {
  display: flex; gap: 10px; justify-content: center; margin-top: 10px;
}
/* Download + Share sit side by side at matching height and width. */
.share-canvas-btns .btn {
  flex: 1 1 0; width: auto; max-width: 200px; margin: 0; padding: 10px 12px;
}
.win-leaderboard {
  margin: 16px auto 0; max-width: 360px; text-align: center;
}
.win-rank {
  font-size: 1.1rem; margin-bottom: 12px; color: var(--gold);
}
.win-lb-title {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 0 0 8px;
}
.win-lb-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.win-lb-list li {
  background: rgba(139,108,240,.1); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 6px 14px; font-size: .9rem;
}
.win-lb-us {
  background: rgba(232,196,104,.15) !important;
  border-color: rgba(232,196,104,.5) !important;
  font-weight: 700; color: var(--gold);
}
/* Testimonials */
.testimonials-wrap { max-width: 760px; margin: 0 auto; }
.testimonial-rating {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-bottom: 20px;
}
.t-stars { color: var(--gold); font-size: 1.4rem; letter-spacing: 2px; }
.t-score { font-weight: 700; font-size: 1.1rem; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.testimonial-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 18px 20px;
}
.testimonial-quote { font-style: italic; font-size: .95rem; margin: 0 0 10px; line-height: 1.55; }
.testimonial-stars { color: var(--gold); font-size: 1rem; }
/* Refund policy callout on checkout page */
.refund-callout {
  background: rgba(232,196,104,.08); border: 1px solid rgba(232,196,104,.35);
  border-radius: var(--radius); padding: 12px 16px; margin: 16px 0;
  font-size: .92rem; line-height: 1.5; color: var(--text);
}
.refund-callout a { color: var(--gold); }
/* Post-game referral upsell */
.post-upsell-card { margin-top: 8px; }
.post-upsell-title { font-size: 1.1rem; font-weight: 700; color: var(--gold); margin: 0 0 4px; }
.post-upsell-btn { margin-top: 10px; max-width: 260px; }

/* Cross-sell card: "play another room" buttons on the end screens. */
.next-rooms-card { margin-top: 8px; }
.next-rooms-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 12px; }
.next-room-btn { width: 100%; max-width: 300px; text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   FANTASY ENHANCEMENT — Cinzel typography · glows · animations
   ════════════════════════════════════════════════════════════ */

/* Cinzel on all headings */
h1, h2, h3 { font-family: 'Cinzel', 'Palatino Linotype', serif; letter-spacing: .02em; }

/* ── Cards: deeper purple ambient glow ── */
.card { transition: box-shadow .3s ease; }
.card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.4), 0 0 24px -5px rgba(139,108,240,.22);
}

/* Gold shimmer line along the top edge of centred cards */
.card.center { position: relative; overflow: hidden; }
.card.center::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,196,104,.18) 15%,
    rgba(232,196,104,.75) 50%,
    rgba(232,196,104,.18) 85%,
    transparent 100%);
  pointer-events: none;
}

/* ── btn-gold: shimmer sweep on hover ── */
.btn-gold {
  background: linear-gradient(110deg,
    #c9a030 0%,
    var(--gold) 35%,
    #f5db8a 50%,
    var(--gold) 65%,
    #c9a030 100%);
  background-size: 250% auto;
  transition: background-position .5s ease, box-shadow .2s ease, filter .1s ease;
}
.btn-gold:hover {
  background-position: right center;
  box-shadow: 0 0 18px -2px rgba(232,196,104,.55);
  filter: none;
}

/* ── Unsolved progress dots: soft breath pulse ── */
@keyframes pdotBreath {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1;   box-shadow: 0 0 8px rgba(139,108,240,.4); }
}
.pdot.todo { animation: pdotBreath 3s ease-in-out infinite; }

/* ── Win heading: gold glow pulse ── */
@keyframes winGoldPulse {
  0%, 100% { text-shadow: 0 0 18px rgba(232,196,104,.35), 0 0 50px rgba(232,196,104,.08); }
  50%       { text-shadow: 0 0 32px rgba(232,196,104,.75), 0 0 70px rgba(232,196,104,.25); }
}
#view > .card.center h1 { animation: winGoldPulse 2.8s ease-in-out infinite; }

/* ── Rune-diamond accent before puzzle + help section headings ── */
.puzzle h2::before,
.help-section-title::before { content: '✦ '; color: var(--gold); font-size: .6em; opacity: .75; }

/* ── Role card selected state: sharper purple glow ── */
.role-card.selected {
  box-shadow: 0 0 0 2px var(--purple), 0 0 22px -2px rgba(139,108,240,.55);
}

/* ── Input focus: gold ring ── */
.input:focus {
  outline: none;
  border-color: rgba(232,196,104,.6);
  box-shadow: 0 0 0 3px rgba(232,196,104,.12);
}

/* ════════════════════════════════════════════════════════════
   ACHIEVEMENTS — badge grid on win screen
   ════════════════════════════════════════════════════════════ */
.badges-section { margin: 20px 0 8px; text-align: left; }
.badges-title   { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
                  color: var(--muted); margin: 0 0 10px; }
.badges-row     { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.badge-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 120px; padding: 14px 10px;
  border-radius: 12px; border: 1px solid var(--card-border);
  text-align: center; transition: transform .15s, box-shadow .15s;
}
.badge-card:hover { transform: translateY(-2px); }

.badge-earned {
  background: rgba(232,196,104,.1);
  border-color: rgba(232,196,104,.5);
  box-shadow: 0 0 14px -3px rgba(232,196,104,.4);
}
.badge-unearned { background: rgba(255,255,255,.03); opacity: .55; }

.badge-icon     { font-size: 1.7rem; line-height: 1; }
.badge-label    { font-size: .78rem; font-weight: 700; color: var(--ink); }
.badge-unlocked { font-size: .7rem; color: var(--gold); font-weight: 600; }
.badge-need     { font-size: .68rem; color: var(--muted); line-height: 1.3; }

/* ════════════════════════════════════════════════════════════
   ROLE ABILITIES — in-puzzle action button
   ════════════════════════════════════════════════════════════ */
.ability-section {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--card-border);
}
.ability-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: rgba(139,108,240,.08); border-color: rgba(139,108,240,.35);
  color: var(--ink); text-align: left;
  transition: background .15s, box-shadow .15s;
}
.ability-btn:hover:not(:disabled) {
  background: rgba(139,108,240,.18);
  box-shadow: 0 0 12px -3px rgba(139,108,240,.45);
}
.ability-btn:disabled { opacity: .4; cursor: not-allowed; }
.ability-used { background: rgba(255,255,255,.03) !important; border-color: var(--card-border) !important; }
.ability-btn-name { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.ability-btn-desc { font-size: .78rem; color: var(--muted); }

/* Ability modal */
.ability-modal { max-width: 420px; }

/* Observe modal */
.observe-modal { max-width: 500px; text-align: left; }
.observe-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.observe-header h2 { margin: 0; font-size: 1.1rem; color: #93c5fd; }
.observe-timer {
  font-size: 1.3rem; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.observe-clue {
  background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.25);
  border-radius: 10px; padding: 14px 16px;
  font-family: Cascadia Code, Consolas, monospace;
  font-size: .88rem; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; margin: 0 0 12px;
}

/* ════════════════════════════════════════════════════════════
   ABILITY BANNER — broadcast toast for room-wide events
   ════════════════════════════════════════════════════════════ */
.ability-banner {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-10px);
  z-index: 130; max-width: 420px; width: 90vw;
  background: rgba(36,27,57,.97); border: 1px solid rgba(139,108,240,.5);
  border-radius: 10px; padding: 10px 18px;
  font-size: .88rem; color: var(--ink); text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.ability-banner-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════════════════
   VOICE CALL BANNER — group lobby reminder (dismissible)
   ════════════════════════════════════════════════════════════ */
.voice-banner {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(232,196,104,.07) 0%, var(--card) 60%);
  box-shadow: 0 0 32px -6px rgba(232,196,104,.22), 0 10px 30px rgba(0,0,0,.25);
}
.voice-banner-body {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.voice-banner-icon {
  font-size: 2rem; line-height: 1; flex: none; filter: drop-shadow(0 0 8px rgba(232,196,104,.5));
}
.voice-banner-text { flex: 1; min-width: 180px; line-height: 1.5; }
.voice-banner-text b { display: block; color: var(--gold); margin-bottom: 4px; font-size: 1.02rem; }
.voice-banner-text em { font-style: normal; color: var(--gold); }
.voice-dismiss-btn {
  flex: none; align-self: flex-start; white-space: nowrap;
  background: rgba(232,196,104,.12); border-color: rgba(232,196,104,.4);
  color: var(--gold);
}
.voice-dismiss-btn:hover { background: rgba(232,196,104,.26); color: var(--gold); }
.voice-platforms {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.voice-platforms-label {
  font-size: .78rem; color: var(--muted); white-space: nowrap; flex: none;
}
.voice-platform-btn {
  background: #2c2247 !important; border-color: rgba(232,196,104,.28) !important;
  color: var(--muted) !important; text-decoration: none !important;
  transition: border-color .15s, color .15s, background .15s;
}
.voice-platform-btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(232,196,104,.1) !important;
}

/* Voice check row inside the Before You Begin modal */
.btb-voice-check {
  border-color: rgba(139,108,240,.45) !important;
  background: rgba(139,108,240,.07) !important;
}
.btb-voice-check b { color: #c8b8f8; }
.btb-voice-check em { font-style: normal; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   DISCONNECTION BADGE — avatar overlay when a role goes offline
   ════════════════════════════════════════════════════════════ */
.play-avatar-offline { opacity: .75; }
.disconnected-badge {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  background: rgba(220,50,50,.88); color: #fff;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  pointer-events: none; z-index: 2;
}
/* play-avatar needs position:relative for the badge to anchor */
.play-avatar { position: relative; }

/* ════════════════════════════════════════════════════════════
   PAUSE OVERLAY — sticky banner at top of viewport
   ════════════════════════════════════════════════════════════ */
.pause-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px;
  background: rgba(20,15,36,.92);
  border-bottom: 2px solid var(--gold);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
  animation: pauseSlideIn .25s ease;
}
@keyframes pauseSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.pause-icon { font-size: 1.2rem; }
.pause-msg  { font-weight: 700; color: var(--gold); font-size: .95rem; }
.pause-host-hint { font-size: .78rem; color: var(--muted); }

/* Pause / Resume button renders above End Game, both full-width block in endWrap */

/* ════════════════════════════════════════════════════════════
   HOST SKIP BUTTONS — offline-player override for collective / simultaneous
   ════════════════════════════════════════════════════════════ */
.host-skip-section {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(220,50,50,.07); border: 1px solid rgba(220,50,50,.3);
  border-radius: 8px;
}
.host-skip-label { margin: 0 0 6px; color: rgba(220,50,50,.9); }
.host-skip-btns  { display: flex; gap: 8px; flex-wrap: wrap; }
.host-skip-btn   {
  background: rgba(220,50,50,.12) !important;
  border-color: rgba(220,50,50,.45) !important;
  color: rgba(220,80,80,.95) !important;
}
.host-skip-btn:hover {
  background: rgba(220,50,50,.26) !important;
  border-color: rgba(220,80,80,.7) !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   HOST MODE — in-person group play (guide view)
   ════════════════════════════════════════════════════════════ */

/* ── Lobby: host-mode banner ── */
.host-mode-lobby-banner {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(232,196,104,.09) 0%, var(--card) 60%);
  box-shadow: 0 0 32px -6px rgba(232,196,104,.22), 0 10px 30px rgba(0,0,0,.25);
}
.hm-banner-body {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.hm-banner-icon { font-size: 2rem; line-height: 1; flex: none; filter: drop-shadow(0 0 8px rgba(232,196,104,.5)); }
.hm-banner-text { flex: 1; min-width: 180px; line-height: 1.5; }
.hm-banner-text b { display: block; color: var(--gold); margin-bottom: 4px; font-size: 1.02rem; }

/* ── Lobby: big QR join section ── */
.host-mode-qr-card { text-align: center; }
.host-mode-qr-card h3 { color: var(--gold); margin: 0 0 10px; }
.host-mode-join { text-align: center; margin-top: 14px; }
.host-mode-join-label {
  color: var(--purple); font-size: 1rem; font-weight: 600;
  margin: 0 0 18px; letter-spacing: .01em;
}
.host-mode-join-grid {
  display: flex; align-items: center; justify-content: center;
  gap: 30px; flex-wrap: wrap;
}
.host-mode-join-code {
  font-size: 2.8rem; font-weight: 800; letter-spacing: 12px; color: var(--gold);
  background: #1b1430; border: 1px dashed rgba(232,196,104,.45); border-radius: 14px;
  padding: 18px 20px 18px 32px; display: inline-block; margin: 0;
  text-shadow: 0 0 20px rgba(232,196,104,.35);
}
.host-mode-qr-box { margin: 0; display: inline-block; line-height: 0; }
.host-mode-qr-box img, .host-mode-qr-box canvas {
  background: #fff; padding: 12px; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.host-mode-share-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* ── Game: broadcast layout — body class applied on host screen ── */
body.host-mode .play-top { padding: 28px 22px 22px; }
body.host-mode .gametimer { margin: 22px 0 10px; }
body.host-mode .gametimer .label { font-size: .85rem; letter-spacing: 1px; }
body.host-mode .gametimer .value { font-size: 5.2rem; letter-spacing: 4px; }
body.host-mode .play-avatars { gap: 14px; margin: 18px 0 8px; }
body.host-mode .play-avatar { min-width: 110px; padding: 12px 14px; }
body.host-mode .play-avatar-icon { width: 52px; height: 52px; font-size: 1.9rem; }
body.host-mode .play-avatar-role { font-size: .74rem; }
body.host-mode .play-avatar-name { font-size: .88rem; }
body.host-mode .progress { gap: 14px; margin-top: 20px; }
body.host-mode .pdot { width: 44px; height: 44px; font-size: 1rem; }
body.host-mode .closebar { font-size: 1rem; padding: 10px 18px; max-width: 480px; }

/* HOST MODE badge on the host's broadcast top card */
.host-mode-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(232,196,104,.15); border: 1px solid rgba(232,196,104,.45);
  border-radius: 6px; padding: 4px 12px; font-size: .78rem; font-weight: 700;
  color: var(--gold); letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Game: Presenter collapsible host-controls panel ── */
.presenter-controls {
  border: 1px solid rgba(232,196,104,.28);
  border-radius: 12px;
  background: rgba(20,15,34,.6);
  overflow: hidden;
  margin-top: 4px;
}
.presenter-controls-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  padding: 12px 16px; color: var(--gold);
  font-size: .9rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.presenter-controls-toggle:hover { background: rgba(232,196,104,.08); }
.presenter-controls-toggle .pc-label { flex: 1; text-align: left; }
.presenter-controls-toggle .pc-caret { font-size: .85rem; opacity: .8; }
.presenter-controls-body {
  padding: 0 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.presenter-controls.collapsed .presenter-controls-body { display: none; }

/* ── Game: Presenter shared-screen hints panel ── */
.presenter-hints { border-color: rgba(232,196,104,.35); }
.presenter-hints-h {
  color: var(--gold); margin: 0 0 12px; font-size: 1.4rem;
  letter-spacing: .02em;
}
.presenter-hints .hint-section { gap: 14px; }
.presenter-hints .hint-tier { font-size: 1.15rem; line-height: 1.5; }
.presenter-hints .hint-tier-label { font-size: 1rem; }
.presenter-hints .hint-solution { font-size: 1.3rem; }

/* ── Game: Presenter shared-screen — enlarged transient notifications ──
   The presenter's screen drives a TV/projector, so team-wide popups are scaled up
   (and linger longer — see PRESENTER_NOTIFY_MULT in lobby.js) to read across a room. */
body.presenter-screen .toast {
  font-size: 1.7rem; padding: 20px 38px; border-radius: 14px;
  bottom: 40px; max-width: 80vw; text-align: center;
  box-shadow: 0 8px 34px rgba(0,0,0,.5);
}
body.presenter-screen .ability-banner {
  font-size: 1.6rem; max-width: 80vw; width: auto; padding: 20px 34px;
  top: 90px; border-radius: 14px;
}
body.presenter-screen .archmage-modal-box {
  max-width: min(720px, 85vw); padding: 44px 42px;
}
body.presenter-screen .archmage-modal-avatar { font-size: 4.6rem; margin-bottom: 18px; }
body.presenter-screen .archmage-modal-label  { font-size: 1rem; letter-spacing: 3px; }
body.presenter-screen .archmage-modal-text   { font-size: 1.7rem; line-height: 1.5; margin-bottom: 26px; }
body.presenter-screen .archmage-modal-dismiss { font-size: 1.05rem; padding: 12px 30px; }

/* ── Lobby: Presenter compact, no-scroll layout ──
   The presenter drives a shared TV/projector, so the lobby is laid out wide-and-short
   (join panel + read-only role roster side by side) to fit the screen without scrolling.
   No role-picker is shown — the presenter never holds a puzzle role. */
.presenter-lobby { display: flex; flex-direction: column; gap: 16px; }
.presenter-lobby-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.15fr);
  gap: 16px; align-items: stretch;
}
@media (max-width: 760px) { .presenter-lobby-grid { grid-template-columns: 1fr; } }
.presenter-join-card { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.presenter-join-card .host-mode-join { margin-top: 0; }
.presenter-join-card .host-mode-join-label { margin-bottom: 12px; }
.presenter-join-card .host-mode-join-code { font-size: 1.9rem; letter-spacing: 6px; padding: 10px 12px 10px 18px; }
.presenter-join-card .host-mode-join-grid { gap: 16px; flex-wrap: nowrap; }
.presenter-join-card .host-mode-qr-box img,
.presenter-join-card .host-mode-qr-box canvas { width: 128px; height: 128px; padding: 6px; }
.presenter-join-card .host-mode-share-btns { margin-top: 14px; }
.presenter-roles-h { text-align: center; margin: 0 0 4px; }
.presenter-role-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
}
@media (max-width: 460px) { .presenter-role-grid { grid-template-columns: 1fr; } }
.presenter-role-tile {
  display: flex; align-items: center; gap: 12px;
  background: rgba(20,15,34,.5); border: 1px solid rgba(232,196,104,.18);
  border-radius: 12px; padding: 12px 14px;
}
.presenter-role-tile.open { border-style: dashed; opacity: .82; }
.presenter-role-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.presenter-role-body { flex: 1; min-width: 0; text-align: left; }
.presenter-role-name { color: var(--gold); font-weight: 700; font-size: 1.05rem; margin-bottom: 2px; }
.presenter-role-members { list-style: none; margin: 0; padding: 0; }
.presenter-role-members li { font-size: .95rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presenter-role-members li.empty { color: var(--muted); font-style: italic; }
.presenter-start-card { text-align: center; }

/* Presenter lobby: trim vertical chrome so everything fits without a scrollbar.
   The join panel already carries the "scan to join / keep this screen visible"
   guidance, so the explanatory Presenter banner is dropped on the shared screen. */
body.presenter-screen .wrap { padding-bottom: 20px; }
body.presenter-screen .host-mode-lobby-banner { display: none; }
.presenter-start-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.presenter-start-card .btn { width: auto; display: inline-flex; margin: 0; }
.presenter-start-card .start-later-btn { order: 1; }
.presenter-start-card #startBtn { order: 2; }
.presenter-start-card .btn-settings-update { order: 4; }
.presenter-start-card p { order: 3; flex-basis: 100%; margin: 0; text-align: center; }

/* ── Game: Archmage Dispatch panel ── */
.host-dispatch-panel h3 { color: var(--gold); margin: 0 0 4px; }
.dispatch-preset-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px;
}
@media (max-width: 540px) { .dispatch-preset-grid { grid-template-columns: 1fr; } }
.dispatch-preset-btn {
  text-align: left; background: rgba(139,108,240,.08);
  border-color: rgba(139,108,240,.3) !important; color: var(--muted);
  font-size: .82rem; padding: 8px 12px; line-height: 1.35;
  transition: background .15s, color .15s, border-color .15s;
}
.dispatch-preset-btn:hover {
  background: rgba(139,108,240,.2) !important;
  border-color: rgba(139,108,240,.6) !important; color: #c8b8f8;
}
.dispatch-sep {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
}
.dispatch-sep::before, .dispatch-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--card-border);
}
.dispatch-custom-row { display: flex; gap: 8px; align-items: center; }
.dispatch-input {
  flex: 1; background: #1b1430; border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--ink); padding: 9px 12px; font-size: .88rem;
}
.dispatch-input:focus { outline: none; border-color: var(--purple); }
.dispatch-send-btn { width: auto; white-space: nowrap; }

/* ── Game: solve ceremony overlay ── */
.solve-ceremony {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(8,5,16,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  animation: ceremonyIn .45s ease;
  pointer-events: none;
}
@keyframes ceremonyIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.ceremony-seal {
  font-size: 5rem; line-height: 1; margin-bottom: 14px;
  animation: sealBurst .55s cubic-bezier(.175,.885,.32,1.275);
  filter: drop-shadow(0 0 24px rgba(232,196,104,.7));
}
@keyframes sealBurst {
  from { transform: scale(.4) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1)  rotate(0deg);   opacity: 1; }
}
.ceremony-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--purple); margin-bottom: 8px; font-weight: 700;
}
.ceremony-puzzle-name {
  font-size: 2.2rem; color: var(--gold); margin: 0 0 10px; line-height: 1.2;
  text-shadow: 0 0 28px rgba(232,196,104,.55);
  font-family: 'Cinzel', 'Palatino Linotype', serif;
}
.ceremony-answer {
  font-size: 2.8rem; font-weight: 800; letter-spacing: 8px; color: #fff;
  text-transform: uppercase; text-shadow: 0 0 30px rgba(255,255,255,.4);
  background: rgba(232,196,104,.12); border: 1px solid rgba(232,196,104,.3);
  border-radius: 12px; padding: 10px 28px; margin: 4px 0 14px;
}
.ceremony-lore {
  font-style: italic; color: var(--muted); max-width: 520px;
  font-size: 1rem; line-height: 1.6;
}
.ceremony-next {
  margin-top: 20px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); animation: fadeInUp .4s ease .8s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   STORY MODE — per-puzzle narrative beats + the unlock between them
   Built entirely on the theme vars (--gold / --purple / --bloom-rgb), so all
   four packs re-skin it for free via their body.game-<id> block.
   ════════════════════════════════════════════════════════════ */

/* The beat itself: sits in the puzzle card's slot, dressed as a title card. */
.story-card {
  position: relative; overflow: hidden;
  text-align: center; padding: 34px 26px 30px;
  border-color: rgba(var(--bloom-rgb), .34);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(var(--bloom-rgb), .12), transparent 70%),
    linear-gradient(165deg, var(--bg2), var(--card));
  box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(var(--bloom-rgb), .12) inset;
  animation: storyCardIn .6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes storyCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* A slow sheen crossing the card keeps it feeling like a held frame, not a form. */
.story-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(var(--bloom-rgb), .07) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: storySheen 7s ease-in-out 1.2s infinite;
}
@keyframes storySheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }

.story-glyph {
  font-size: 2.4rem; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 20px rgba(var(--bloom-rgb), .55));
  animation: storyGlyphIn .7s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes storyGlyphIn {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1)  rotate(0deg); }
}
.story-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--purple); font-weight: 700; margin-bottom: 8px;
  animation: fadeInUp .5s ease .1s both;
}
.story-title {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: clamp(1.4rem, 4vw, 2rem); color: var(--gold);
  margin: 0 0 20px; line-height: 1.25;
  text-shadow: 0 0 26px rgba(var(--bloom-rgb), .35);
  animation: fadeInUp .5s ease .2s both;
}
/* The reading measure for a beat. Wide enough to fill the game screen properly, still
   short of the point where the eye loses the line return. NOTE: this is the ONLY width
   cap on beat text — the halves are `.story-beat`, deliberately NOT `.story-panel`,
   which is an unrelated landing-page callout (bigtop/casino/escape90s) that would
   otherwise box each half and cap it at 720px. */
.story-body {
  max-width: 82ch; margin: 0 auto;
  display: flex; flex-direction: column; gap: 15px;
}
.story-beat { display: flex; flex-direction: column; gap: 15px; }
/* Only the SECOND half repeats a label — the first is already headed by the card. */
.story-beat:first-child > .story-label { display: none; }

/* The join between aftermath and next scene. A rule, not a screen transition: the
   two halves are one movement ("a cauldron bubbles" → "you enter the chamber"), so
   the eye should carry across it rather than be stopped and restarted. */
.story-turn {
  height: 1px; margin: 6px auto 2px; width: 62%;
  background: linear-gradient(90deg, transparent, rgba(var(--bloom-rgb), .5), transparent);
  animation: fadeInUp .6s ease both;
}
.story-beat-before > .story-label { color: var(--gold); opacity: .85; }
.story-subtitle {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--gold);
  margin: -4px 0 2px; line-height: 1.3;
  animation: fadeInUp .5s ease both;
}

/* The voice character reacting to the solve — narration says what happened, then the
   antagonist says it to your face. Offset and quoted so it never reads as narration. */
.story-voice {
  margin-top: 4px; padding: 14px 16px 13px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(var(--bloom-rgb), .13), transparent 85%);
  text-align: left;
  animation: storyVoiceIn .7s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes storyVoiceIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.story-voice-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.story-voice-avatar { font-size: 1.25rem; filter: drop-shadow(0 0 12px rgba(var(--bloom-rgb), .6)); }
.story-voice-name {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}
.story-voice-line {
  margin: 0; font-style: italic; font-size: 1.06rem; line-height: 1.65; color: #fff;
  text-shadow: 0 0 18px rgba(var(--bloom-rgb), .25);
}
.story-voice-line::before { content: '\201C'; }
.story-voice-line::after  { content: '\201D'; }
.story-line {
  margin: 0; font-size: 1.04rem; line-height: 1.75; color: var(--ink);
  animation: storyLineIn .8s ease both;   /* per-line delay is set inline */
}
@keyframes storyLineIn {
  from { opacity: 0; transform: translateY(9px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
/* The opening line carries the scene — give it a drop cap's worth of weight. Scoped
   to each half so both sides of a merged interlude get their own lead line. */
.story-beat > .story-line:first-of-type { font-size: 1.12rem; color: #fff; }

.story-continue {
  margin-top: 26px; min-width: 200px;
  animation: fadeInUp .55s ease both;     /* delay set inline, after the last line lands */
}

/* The aftermath beat leans on the win palette; the scene beat stays cooler.
   `.story-interlude` is the merged aftermath + next scene, which arrives on a solve
   exactly like a lone aftermath does — so it shares the treatment. */
.story-after .story-glyph, .story-interlude .story-glyph {
  filter: drop-shadow(0 0 24px rgba(var(--bloom-rgb), .75));
  animation: storyGlyphIn .7s cubic-bezier(.175,.885,.32,1.275) both,
             storyGlyphBreath 3.4s ease-in-out 1.1s infinite;
}
@keyframes storyGlyphBreath {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(var(--bloom-rgb), .75)); }
  50%      { filter: drop-shadow(0 0 38px rgba(var(--bloom-rgb), .95)); }
}
/* This beat is the ONE that isn't reached by a button: it lands the instant the
   puzzle falls, on top of the solve bloom. So it doesn't slide up like a card being
   presented — it resolves out of that light, bright and soft-edged, settling into
   focus. That's what turns puzzle → aftermath from a swap into a transition. */
.story-after, .story-interlude {
  border-color: rgba(var(--bloom-rgb), .5);
  animation: storyAfterIn .95s cubic-bezier(.16,.84,.34,1) both;
}
@keyframes storyAfterIn {
  0%   { opacity: 0; transform: scale(.94); filter: blur(12px) brightness(2.6); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1);   filter: blur(0)    brightness(1); }
}

/* ── The unlock: aftermath → next scene ──────────────────────
   A seal fills the screen, its three tumblers fall in turn, the shackle springs,
   and the light spills through. Timings mirror SCEAudio.unlock() — change one and
   change the other (lobby.js playUnlockTransition holds the 1.9s total). */
body.unlock-open, body.scene-hold { overflow: hidden; }
.unlock-overlay {
  position: fixed; inset: 0; z-index: 820;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 600px at 50% 50%, rgba(20,12,38,.92), rgba(6,4,12,.97));
  animation: openingFadeIn .3s ease both;
  cursor: pointer;   /* tap anywhere to skip */
}
/* Slower than the cover, and the rebuild has already happened underneath (see
   playUnlockTransition) — the light lifts on the next scene mid-entrance. */
.unlock-overlay.unlock-closing { animation: openingFadeOut .42s cubic-bezier(.4,0,.2,1) forwards; }
.unlock-stage {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  position: relative;
}

.unlock-lock { position: relative; width: 132px; height: 168px; }

/* Shackle: the loop that snaps open at the 0.86s latch. */
.unlock-shackle {
  position: absolute; left: 50%; top: 0; width: 76px; height: 84px;
  margin-left: -38px;
  border: 11px solid var(--gold);
  border-bottom: none;
  border-radius: 40px 40px 0 0;
  box-shadow: 0 0 22px rgba(var(--bloom-rgb), .45);
  transform-origin: 88% 100%;
  animation: unlockShackle 1.9s cubic-bezier(.3,1.5,.4,1) both;
}
@keyframes unlockShackle {
  0%, 44%  { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(0deg); }
  62%      { transform: translateY(-16px) rotate(-32deg); }
  100%     { transform: translateY(-18px) rotate(-38deg); }
}

/* Body: shudders as each tumbler drops, then settles. */
.unlock-body {
  position: absolute; left: 50%; bottom: 0; width: 122px; height: 96px;
  margin-left: -61px; border-radius: 16px;
  background: linear-gradient(165deg, var(--gold), rgba(var(--bloom-rgb), .55));
  box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 40px rgba(var(--bloom-rgb), .35);
  display: flex; align-items: center; justify-content: center;
  animation: unlockShudder 1.9s ease both;
}
@keyframes unlockShudder {
  0%, 4%   { transform: translateX(0); }
  6%       { transform: translateX(-3px); }
  8%, 16%  { transform: translateX(0); }
  18%      { transform: translateX(3px); }
  20%, 28% { transform: translateX(0); }
  30%      { transform: translateX(-3px); }
  32%, 43% { transform: translateX(0); }
  46%      { transform: translateX(0) scale(1.06); }
  100%     { transform: translateX(0) scale(1); }
}

.unlock-tumblers { display: flex; gap: 12px; }
.unlock-tumbler {
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(0,0,0,.42);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
  animation: unlockTumbler 1.9s ease both;
}
/* Each tumbler falls on its own click — 0.10s / 0.34s / 0.58s into the 1.9s run. */
.unlock-tumbler:nth-child(1) { animation-delay: .10s; }
.unlock-tumbler:nth-child(2) { animation-delay: .34s; }
.unlock-tumbler:nth-child(3) { animation-delay: .58s; }
@keyframes unlockTumbler {
  0%       { background: rgba(0,0,0,.42); transform: scale(1); }
  6%       { background: #fff; transform: scale(1.5); box-shadow: 0 0 16px #fff; }
  22%, 100%{ background: #fff9e0; transform: scale(1); box-shadow: 0 0 10px rgba(255,255,255,.8); }
}

/* The light through the opened lock. */
.unlock-burst {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(var(--bloom-rgb), .65) 40%, transparent 70%);
  animation: unlockBurst 1.9s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes unlockBurst {
  0%, 47% { opacity: 0; transform: scale(1); }
  56%     { opacity: .95; transform: scale(46); }
  100%    { opacity: 0;  transform: scale(80); }
}

.unlock-caption {
  margin: 0; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3em; color: var(--gold);
  text-shadow: 0 0 22px rgba(var(--bloom-rgb), .6);
  animation: fadeInUp .5s ease 1.05s both;
}

/* ── The veil: a beat → the puzzle it introduces ──────────────
   The quieter counterpart to the unlock. A wash closes over the screen, the puzzle
   is rebuilt underneath it, and the veil lifts on a room already standing — so the
   swap itself is never on screen. Timings mirror playSceneVeil() in lobby.js
   (300ms cover / 460ms reveal) and SCEAudio.sceneChange(); change one, change all. */
.scene-veil {
  position: fixed; inset: 0; z-index: 815; pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 50%, rgba(10,6,20,.97), rgba(4,2,9,.99));
  opacity: 0;
  animation: sceneVeilIn .3s ease forwards;
}
.scene-veil.scene-veil-lifting { animation: sceneVeilOut .46s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sceneVeilIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sceneVeilOut { from { opacity: 1; } to { opacity: 0; } }

/* One blade of light crossing the dark — the page turning under the wash. */
.scene-veil-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(var(--bloom-rgb), .20) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: sceneVeilSweep .76s ease-in-out both;
}
@keyframes sceneVeilSweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* Reduced motion: lobby.js skips the unlock and the veil outright, and the beat
   itself just appears rather than assembling line by line. */
@media (prefers-reduced-motion: reduce) {
  .story-card, .story-after, .story-interlude, .story-glyph, .story-after .story-glyph,
  .story-interlude .story-glyph, .story-label, .story-title, .story-subtitle, .story-line,
  .story-turn, .story-voice, .story-continue { animation: none; opacity: 1; filter: none; transform: none; }
  .story-card::after { animation: none; opacity: 0; }
}

@media (max-width: 560px) {
  .story-card { padding: 26px 18px 24px; }
  .story-line { font-size: 1rem; }
  .story-beat > .story-line:first-of-type { font-size: 1.06rem; }
  .story-voice { padding: 12px 13px 11px; }
  .story-voice-line { font-size: 1rem; }
  .story-continue { width: 100%; min-width: 0; }
  .unlock-lock { width: 108px; height: 140px; transform: scale(.88); }
}

/* ════════════════════════════════════════════════════════════
   RESEND PAGE (resend.html)
   ════════════════════════════════════════════════════════════ */
.resend-card { max-width: 460px; width: 100%; margin: 0 auto; }
.resend-icon { font-size: 2.4rem; margin-bottom: 10px; }
.resend-title { font-size: 1.5rem; margin: 0 0 8px; }
.resend-sub { margin-bottom: 20px; }
.resend-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.resend-row { display: flex; flex-direction: column; gap: 10px; }
.resend-input { width: 100%; }
.resend-submit { width: 100%; justify-content: center; }
.resend-err { min-height: 1.2em; margin: 6px 0 0; font-size: .82rem; color: var(--red, #f87171); }
.resend-divider { border: none; border-top: 1px solid var(--card-border); margin: 20px 0; }

/* Success state */
.resend-success { text-align: center; }
.resend-success-icon { font-size: 2.8rem; margin-bottom: 10px; }
.resend-success-title { font-size: 1.25rem; margin: 0 0 10px; color: var(--green, #4ade80); }
.resend-again { margin-top: 14px; }

/* Footer utility link */
.footer-links {
  margin-top: 8px; font-size: .82rem;
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--gold); }

/* ── Guide view (host Game Master — all clues, hint & answer)
   ════════════════════════════════════════════════════════════ */
.host-controls-card { display: flex; flex-direction: column; gap: 10px; }
.guide-view {
  background: rgba(201,162,39,.05); border-color: rgba(201,162,39,.3);
}
.guide-view-head {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
}
.guide-view-icon { font-size: 1.3rem; }
.guide-view-label { font-size: .95rem; font-weight: 700; color: var(--gold); }
.guide-view-note { margin-bottom: 16px; }
.guide-extra-label {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--gold); margin-bottom: 4px;
}
.guide-hint {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(201,162,39,.08); border: 1px solid rgba(201,162,39,.25);
}
.guide-hint p { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.5; }
.guide-answer {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: rgba(201,162,39,.14); border: 1px solid rgba(201,162,39,.4);
}
.guide-answer-value {
  font-weight: 800; letter-spacing: 2px; color: #fff; font-size: 1.15rem;
  text-transform: uppercase;
}
.guide-role-answers {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: rgba(201,162,39,.08); border: 1px solid rgba(201,162,39,.25);
}
.guide-role-answer {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(201,162,39,.12);
}
.guide-role-answer:last-child { border-bottom: 0; }
.guide-role-answer .ri { font-size: 1.05rem; }
.guide-role-answer-name {
  flex: 1; color: var(--ink); font-size: .9rem; font-weight: 600;
}
.guide-role-answer-value {
  font-weight: 800; letter-spacing: 1.5px; color: #fff; font-size: 1rem;
  text-transform: uppercase;
}

/* ── Spectator play view (watching only — no clue content) ── */
.spectator-intro { color: var(--ink); font-size: .95rem; line-height: 1.55; margin: 4px 0 0; }
.spectator-hidden-note {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(37,99,235,.08); border: 1px dashed rgba(37,99,235,.35);
  color: #93c5fd; font-size: .88rem; text-align: center;
}

/* ── Player Rating (win screen, non-host players)
   ════════════════════════════════════════════════════════════ */
.player-rating {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--card-border);
  text-align: center;
}
.player-rating h3 { margin-bottom: 8px; font-size: 1rem; }

/* ── Role Briefing Modal
   ════════════════════════════════════════════════════════════ */
.role-briefing-overlay { z-index: 200; }
.role-briefing-modal {
  border-color: var(--gold); max-width: 440px; text-align: center;
  max-height: 90vh; overflow-y: auto; position: relative;
}
.rb-close {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  color: var(--muted); font-size: 1.5rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.rb-close:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.rb-role-icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 14px; box-shadow: 0 0 24px rgba(0,0,0,.4);
}
.rb-role-name { color: var(--gold); font-size: 1.4rem; margin-bottom: 14px; }
.rb-desc { font-size: .95rem; line-height: 1.6; margin-bottom: 18px; }
.rb-flavor {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,.05); border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 18px; text-align: left;
}
.rb-flavor-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.rb-flavor p { font-size: .9rem; font-style: italic; line-height: 1.5; color: var(--gold); margin: 0; }
.rb-clue-note { margin-bottom: 22px; }
.rb-ready-btn { width: 100%; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   ESCAPE THE 90s — landing page, hub card + in-game re-skin
   Scoping: `.body-90s` on <body> (landing page) and
   `body.game-nineties` (set by lobby.js on the game screen when
   the room's pack is 'nineties') re-theme the shared components
   via CSS-variable overrides — nothing here touches the Archmage
   pages; `.land-90s` on <main> scopes page-specific pieces.
   The hub-card pieces (.room-card__media--90s, .nnt-*) use
   self-contained hex colors so they render identically on the
   default-palette hub page.
   ════════════════════════════════════════════════════════════ */

/* Page-wide re-theme: neon magenta/teal in place of gold/purple.
   Every shared component built on var(--gold)/var(--purple)
   (badges, stats, titles, pips, pricing, ghost buttons) follows. */
.body-90s,
body.game-nineties {
  --bg: #120b1e;
  --bg2: #221040;
  --card: #1f1535;
  --card-border: #45306b;
  --gold: #ff4fae;        /* accent: hot magenta */
  --purple: #2fe6d6;      /* secondary: neon teal */
  --purple-dim: #1ba99d;
  --bloom-rgb: 255, 79, 174;
}
/* Shared components with hardcoded gold/purple details. */
.body-90s .btn-gold,
body.game-nineties .btn-gold {
  background: linear-gradient(100deg, #ff4fae, #ff8a3c);
  border-color: #ff77c2;
  color: #2a0a20;
}
.body-90s .btn-gold:hover,
body.game-nineties .btn-gold:hover { filter: brightness(1.1); }
.body-90s .step-n { color: #06302b; }
.body-90s .callout {
  background: linear-gradient(135deg, #2a1447, #131033);
  border-color: var(--purple-dim);
}
/* The global heading rule (h1,h2,h3 → Cinzel) is Archmage's fantasy brand —
   on the 90s page/game every heading swaps to the rounded 90s display face. */
.body-90s h1, .body-90s h2, .body-90s h3,
body.game-nineties h1, body.game-nineties h2, body.game-nineties h3 {
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
}

/* In-game banner behind the timer/progress: neon studio glow instead of the
   tower art. (Swap the gradients for url("../images/studio-bg.png") + scrim
   when the 90s art lands.) */
body.game-nineties .play-top {
  /* game-90s.png sits under the scrim; the neon gradients below are the fallback
     until the art lands (a missing image just shows the placeholder). */
  background:
    linear-gradient(180deg, rgba(18, 11, 30, .45), rgba(18, 11, 30, .75)),
    url("../images/game-90s.png") center no-repeat,
    radial-gradient(90% 80% at 12% 0%, rgba(255, 79, 174, .38), transparent 55%),
    radial-gradient(90% 80% at 88% 100%, rgba(47, 230, 214, .32), transparent 55%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px),
    linear-gradient(160deg, #1c0f38, #0d0817);
  background-size: auto, cover, auto, auto, 16px 16px, auto;
  border-color: rgba(255, 79, 174, .4);
}

/* Casino game screen: game-casino.png under the scrim, with the dark-felt
   gradient as the fallback until the art lands. */
body.game-casino .play-top {
  background:
    linear-gradient(180deg, rgba(8, 14, 10, .5), rgba(8, 14, 10, .8)),
    url("../images/game-casino.png") center / cover no-repeat,
    radial-gradient(90% 80% at 50% 0%, rgba(232, 196, 104, .22), transparent 60%),
    linear-gradient(160deg, #0e2416, #060d08);
  border-color: rgba(232, 196, 104, .35);
}

/* ── hero ── */
.hero-90s {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 54px 16px 46px;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255, 79, 174, .22), transparent 55%),
    radial-gradient(90% 70% at 88% 100%, rgba(47, 230, 214, .18), transparent 55%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px),
    linear-gradient(160deg, #1c0f38, #0d0817);
  background-size: auto, auto, 16px 16px, auto;
}
.hero-90s::after {  /* VHS scanlines over the whole panel */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 5px);
  opacity: .5;
}

.neon-title { margin: 4px 0 18px; line-height: 1; }
.nt-top {
  display: block;
  font-family: 'Monoton', 'Righteous', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4.6vw, 2.7rem);
  letter-spacing: .12em;
  color: #8ffff4;
  text-shadow: 0 0 6px rgba(47, 230, 214, .9), 0 0 24px rgba(47, 230, 214, .5), 0 0 64px rgba(47, 230, 214, .35);
}
.nt-90 {
  display: block;
  font-family: 'Monoton', 'Righteous', sans-serif;
  font-weight: 400;
  font-size: clamp(4rem, 13vw, 7.2rem);
  letter-spacing: .06em;
  color: #ffb3dd;
  text-shadow: 0 0 8px rgba(255, 79, 174, .95), 0 0 30px rgba(255, 79, 174, .55), 0 0 90px rgba(255, 79, 174, .4);
}

.frozen-clock {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 9px 18px;
  background: #0d0817;
  border: 1px solid #45306b;
  border-radius: 12px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: 1.02rem;
  letter-spacing: .08em;
  color: #8ffff4;
  text-shadow: 0 0 10px rgba(47, 230, 214, .6);
}
.frozen-clock .on-air {
  color: #ff5c5c;
  font-size: .76rem;
  letter-spacing: .14em;
  text-shadow: 0 0 8px rgba(255, 92, 92, .7);
}
@media (max-width: 480px) {
  .frozen-clock { gap: 9px; padding: 8px 12px; font-size: .84rem; letter-spacing: .05em; }
  .frozen-clock .on-air { font-size: .66rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .nt-90 { animation: neonFlicker 7s infinite; }
  .fc-colon { animation: colonBlink 1s steps(1) infinite; }
  .on-air { animation: onAirPulse 1.6s ease-in-out infinite; }
}
@keyframes neonFlicker {  /* two quick dips — an old sign, not a strobe */
  0%, 41%, 44%, 100% { opacity: 1; }
  42%, 43.5% { opacity: .55; }
  43% { opacity: .85; }
}
@keyframes colonBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
@keyframes onAirPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── story panel ── */
.story-panel {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 34px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}
.story-panel p { margin: 0 0 14px; color: #d8d2ea; line-height: 1.65; }
.story-panel p:last-child { margin-bottom: 0; }
.story-date {
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: 1.12rem;
  letter-spacing: .1em;
  color: var(--purple);
}
.story-kicker { color: var(--gold); font-weight: 700; }

/* ── crew cards ── */
.crew-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .crew-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .crew-grid { grid-template-columns: 1fr; } }
.crew {
  padding: 20px 16px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--crew-accent, var(--gold));
  border-radius: var(--radius);
}
.crew--dj       { --crew-accent: #ff4fae; }
.crew--producer { --crew-accent: #ff8a3c; }
.crew--vj       { --crew-accent: #2fe6d6; }
.crew--mc       { --crew-accent: #b8f04a; }
.crew .ci { font-size: 2.1rem; }
.crew h3 { margin: 8px 0 6px; font-size: 1.18rem; color: var(--crew-accent); }
.crew p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.crew-ability {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 12px;
  background: #0d0817;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--ink);
}

/* ── studio teaser tiles ── */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 640px) { .studio-grid { grid-template-columns: 1fr; } }
.studio-tile {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  background: #1a1130;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.studio-tile .si { font-size: 1.7rem; }
.studio-tile h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--purple); }
.studio-tile p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* ── notify band ── */
.notify-90s { border-color: var(--gold); }
.notify-90s .notify-form .btn { width: auto; }
.notify-90s .notify-form .input { margin: 0; }
#notifyMsg { min-height: 1.3em; margin: 12px 0 0; }
#notifyMsg.err { color: var(--red); }
#notifyMsg.ok { color: #7cdb8f; font-weight: 600; }

/* ── hub room card (renders on the default-palette hub page) ── */
.room-card__media--90s {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(255, 79, 174, .30), transparent 55%),
    radial-gradient(90% 80% at 88% 100%, rgba(47, 230, 214, .24), transparent 55%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px),
    linear-gradient(160deg, #1c0f38, #0d0817);
  background-size: auto, auto, 14px 14px, auto;
}
.room-card__media--90s::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 5px);
  opacity: .45;
}
.nnt-sign { text-align: center; line-height: 1.05; }
.nnt-line1 {
  display: block;
  font-family: 'Monoton', 'Righteous', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .16em;
  color: #8ffff4;
  text-shadow: 0 0 5px rgba(47, 230, 214, .9), 0 0 18px rgba(47, 230, 214, .5);
}
.nnt-line2 {
  display: block;
  margin: 2px 0 8px;
  font-family: 'Monoton', 'Righteous', sans-serif;
  font-size: 3rem;
  letter-spacing: .05em;
  color: #ffb3dd;
  text-shadow: 0 0 7px rgba(255, 79, 174, .95), 0 0 26px rgba(255, 79, 174, .55);
}
.nnt-clock {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(13, 8, 23, .8);
  border: 1px solid #45306b;
  border-radius: 999px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  color: #8ffff4;
}

/* ════════════════════════════════════════════════════════════
   THE HOUSE ALWAYS WINS — landing page, hub card + in-game re-skin
   Scoping: `.body-casino` on <body> (landing page) and
   `body.game-casino` (set by lobby.js on the game screen when
   the room's pack is 'casino') re-theme the shared components
   via CSS-variable overrides (nothing here touches the other
   rooms' pages); `.land-casino` on <main> scopes page-specific
   pieces. The hub-card pieces (.room-card__media--casino, .hw-*)
   use self-contained hex colors so they render identically on
   the default-palette hub. The `.cas-*` block at the end styles
   the bespoke casino puzzle widgets rendered by lobby.js.
   ════════════════════════════════════════════════════════════ */

/* Page-wide re-theme: table-felt green + casino gold + roulette red. */
.body-casino,
body.game-casino {
  --bg: #071009;
  --bg2: #0e2415;
  --card: #0e1c12;
  --card-border: #2e4d38;
  --gold: #f0c24f;        /* accent: casino gold */
  --purple: #45d68e;      /* secondary: felt jade */
  --purple-dim: #2b9a63;
  --bloom-rgb: 240, 194, 79;
}
.body-casino .btn-gold,
body.game-casino .btn-gold {
  background: linear-gradient(100deg, #f0c24f, #d99a2b);
  border-color: #ffd97a;
  color: #241703;
}
.body-casino .btn-gold:hover,
body.game-casino .btn-gold:hover { filter: brightness(1.08); }
.body-casino .step-n { color: #241703; }
.body-casino .callout {
  background: linear-gradient(135deg, #10281a, #0a1510);
  border-color: var(--purple-dim);
}
/* Casino brand face: Cinzel reads "engraved marquee" without a new font import. */
.body-casino h1, .body-casino h2, .body-casino h3,
body.game-casino h1, body.game-casino h2, body.game-casino h3 {
  font-family: 'Cinzel', 'Georgia', serif;
  letter-spacing: .05em;
}

/* ── hero: felt under a table lamp ── */
.hero-casino {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 54px 16px 46px;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(240, 194, 79, .16), transparent 55%),
    radial-gradient(90% 70% at 88% 100%, rgba(214, 48, 49, .14), transparent 55%),
    radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.6px),
    linear-gradient(160deg, #0d2415, #060d08);
  background-size: auto, auto, 16px 16px, auto;
}
.hero-casino::after {  /* lamp-light vignette, in place of the 90s scanlines */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, .42));
}

.marquee-title { margin: 4px 0 18px; line-height: 1.08; }
.mq-top {
  display: block;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 4.4vw, 2.5rem);
  letter-spacing: .16em;
  color: #ffe9b0;
  text-shadow: 0 0 8px rgba(240, 194, 79, .8), 0 0 30px rgba(240, 194, 79, .4);
}
.mq-main {
  display: block;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 8.2vw, 4.5rem);
  letter-spacing: .1em;
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(214, 48, 49, .85), 0 0 36px rgba(214, 48, 49, .45);
}
@media (prefers-reduced-motion: no-preference) {
  .mq-main { animation: neonFlicker 9s infinite; }  /* reuse the 90s sign flicker */
}

.table-sign {  /* lockdown status chip (casino cousin of .frozen-clock) */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 9px 18px;
  background: #060d08;
  border: 1px solid #2e4d38;
  border-radius: 12px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: 1.02rem;
  letter-spacing: .08em;
  color: #ffe9b0;
  text-shadow: 0 0 10px rgba(240, 194, 79, .5);
}
.table-sign .lockdown {
  color: #ff5c5c;
  font-size: .76rem;
  letter-spacing: .14em;
  text-shadow: 0 0 8px rgba(255, 92, 92, .7);
}
@media (max-width: 480px) {
  .table-sign { gap: 9px; padding: 8px 12px; font-size: .84rem; letter-spacing: .05em; }
  .table-sign .lockdown { font-size: .66rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .table-sign .lockdown { animation: onAirPulse 1.6s ease-in-out infinite; }
}

/* ── crew accents (reuses the shared .crew card component) ── */
.crew--dealer  { --crew-accent: #f0c24f; }
.crew--counter { --crew-accent: #45d68e; }
.crew--grifter { --crew-accent: #ff6b6b; }
.crew--cracker { --crew-accent: #7fb2ff; }

/* ── expert-difficulty warning band ── */
.expert-band {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 12px 18px;
  background: rgba(214, 48, 49, .07);
  border: 1px dashed rgba(255, 107, 107, .55);
  border-radius: 12px;
  color: #ffb1b1;
  font-size: .95rem;
  text-align: center;
}

/* ── notify band ── */
.notify-casino { border-color: var(--gold); }
.notify-casino .notify-form .btn { width: auto; }
.notify-casino .notify-form .input { margin: 0; }

/* ── hub room card (renders on the default-palette hub page) ── */
.room-card__media--casino {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(240, 194, 79, .22), transparent 55%),
    radial-gradient(90% 80% at 88% 100%, rgba(214, 48, 49, .20), transparent 55%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px),
    linear-gradient(160deg, #0d2415, #060d08);
  background-size: auto, auto, 14px 14px, auto;
}
.room-card__media--casino::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0, 0, 0, .45));
}
.hw-sign { text-align: center; line-height: 1.1; }
.hw-line1 {
  display: block;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .2em;
  color: #ffe9b0;
  text-shadow: 0 0 6px rgba(240, 194, 79, .8), 0 0 20px rgba(240, 194, 79, .45);
}
.hw-line2 {
  display: block;
  margin: 2px 0 8px;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: .12em;
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(214, 48, 49, .9), 0 0 28px rgba(214, 48, 49, .5);
}
.hw-chip {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(6, 13, 8, .85);
  border: 1px solid #2e4d38;
  border-radius: 999px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  color: #ffe9b0;
}

/* ── casino puzzle widgets (rendered by lobby.js buildCasinoWidget) ──
   One shared frame (.cas-widget) + per-kind pieces. Everything keys off
   the felt palette; nothing here is used outside body.game-casino. */
.cas-widget {
  margin: 18px 0;
  padding: 16px;
  background: linear-gradient(160deg, #0d2013, #081209);
  border: 1px solid #2e4d38;
  border-radius: 12px;
}
.cas-cap {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 1.02rem;
  color: #f0c24f;
  margin-bottom: 12px;
  letter-spacing: .04em;
}
.cas-tip { font-family: 'Segoe UI', sans-serif; font-size: .8rem; color: var(--muted); letter-spacing: 0; }
.cas-op { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.cas-total {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed #2e4d38;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: .82rem; letter-spacing: .1em; color: var(--muted);
}
.cas-total > b { font-size: 1.2rem; color: #f0c24f; letter-spacing: .04em; }
.cas-use { margin-left: auto; }
.cas-picked { background: #f0c24f; color: #241703; border-color: #ffd97a; }

/* chips — the tray */
.cas-chip-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cas-chip {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 4px dashed rgba(255,255,255,.65);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.25);
}
.cas-chip--white  { background: #e8e4d8; border-color: #bdb7a4; }
.cas-chip--red    { background: #c0392b; }
.cas-chip--green  { background: #1e8449; }
.cas-chip--black  { background: #1b1b1b; border-color: #666; }
.cas-chip--purple { background: #6f3fa0; }
.cas-chip-name { width: 54px; font-size: .88rem; color: var(--ink); }
.cas-chip-count { width: 64px; text-align: center; }
.cas-chip-value { width: 72px; text-align: center; }
.cas-chip-sub { margin-left: auto; font-size: .9rem; color: var(--muted); }
.cas-chip-sub b { color: #45d68e; }

/* wheel — rigged roulette */
.cas-wheel-svg { position: relative; max-width: 260px; margin: 0 auto; }
.cas-wrim  { fill: #140b06; stroke: #7a5a2b; stroke-width: 3; }
.cas-whub  { fill: #0d1a10; stroke: #7a5a2b; stroke-width: 2; }
.cas-wmark { fill: #f0c24f; }
.cas-wr { fill: #a3212e; stroke: #140b06; stroke-width: 1; }
.cas-wb { fill: #17130f; stroke: #3a2e1e; stroke-width: 1; }
.cas-wz { fill: #1e8449; stroke: #140b06; stroke-width: 1; }
.cas-wn { fill: #e8e4d8; font-size: 8.5px; text-anchor: middle; dominant-baseline: middle; font-family: 'Righteous', sans-serif; }
.cas-wspin { transition: transform .25s ease; }
.cas-wheel-pocket {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cas-wheel-pocket b { font-size: 2rem; font-family: 'Cinzel', serif; text-shadow: 0 0 14px rgba(0,0,0,.9); }
.cas-wr-t { color: #ff6b6b; }
.cas-wb-t { color: #e8e4d8; }
.cas-wz-t { color: #45d68e; }
.cas-wheel-controls { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* cards — the shoe */
.cas-card-fan { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cas-card {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 40px; height: 56px; border-radius: 6px;
  background: #f4f0e4; color: #17130f;
  border: 1px solid #bdb7a4; box-shadow: 0 2px 5px rgba(0,0,0,.45);
  font-size: .95rem; line-height: 1.05;
}
.cas-card b { font-family: 'Georgia', serif; }
.cas-card i { font-style: normal; font-size: 1.05rem; }
.cas-card--red { color: #b3252e; }
.cas-count-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* slots — the Grand Jackpot */
.cas-slots-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cas-reels {
  display: flex; gap: 8px; padding: 12px;
  background: #140b06; border: 2px solid #7a5a2b; border-radius: 10px;
}
.cas-reel {
  width: 52px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #d9d3c2, #f4f0e4 30%, #f4f0e4 70%, #d9d3c2);
  border-radius: 6px; border: 1px solid #8a8271;
  font-size: 1.9rem; font-family: 'Georgia', serif; color: #a3212e;
  box-shadow: inset 0 4px 8px rgba(0,0,0,.25), inset 0 -4px 8px rgba(0,0,0,.25);
}
.cas-spinning .cas-reel { animation: casReelJitter .12s linear infinite; }
@keyframes casReelJitter { 0% { transform: translateY(0); } 50% { transform: translateY(2px); } 100% { transform: translateY(0); } }
.cas-lever {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 0 0 auto; width: auto; padding: 12px 22px;
  background: #17130f; color: #f0c24f; border: 1px solid #7a5a2b;
  font-family: 'Righteous', sans-serif; letter-spacing: .12em;
}
.cas-lever-knob {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8d8d, #a3212e);
  box-shadow: 0 0 10px rgba(214,48,49,.6);
}

/* bet — the two slips */
.cas-slips { display: flex; gap: 12px; flex-wrap: wrap; }
.cas-slip {
  flex: 1; min-width: 150px; padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border-radius: 10px; font-family: 'Cinzel', serif; letter-spacing: .1em;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cas-slip:hover { transform: translateY(-2px); }
.cas-slip--red {
  background: linear-gradient(160deg, #3d0f14, #240a0d);
  border: 1px solid #a3212e; color: #ff9b9b;
}
.cas-slip--black {
  background: linear-gradient(160deg, #17130f, #0b0908);
  border: 1px solid #55504a; color: #e8e4d8;
}
.cas-slip--held { box-shadow: 0 0 0 2px #f0c24f, 0 0 22px rgba(240,194,79,.35); }
.cas-slip-suits { font-size: 1.25rem; letter-spacing: .3em; }
.cas-slip b { font-size: 1.05rem; }
.cas-slip-note { font-family: 'Segoe UI', sans-serif; font-size: .74rem; color: var(--muted); letter-spacing: 0; }
.cas-bet-warn { margin: 12px 0 0; font-size: .84rem; color: #ff9b9b; text-align: center; }

/* ledger — the audit desk */
.cas-ledger-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cas-ledger-row .input { width: 84px; text-align: center; }
.cas-lg-prod { color: #f0c24f; font-size: 1.05rem; }
.cas-lg-verdict {
  margin-top: 12px; text-align: center; font-family: 'Righteous', sans-serif;
  letter-spacing: .08em; color: var(--muted);
}
.cas-lg-honest { color: #45d68e; }
.cas-lg-forged { color: #ff6b6b; }

/* dice — the rail */
.cas-dice-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cas-die {
  width: 56px; height: 56px; font-size: 2.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #f4f0e4; color: #17130f; border: 1px solid #bdb7a4; border-radius: 10px;
  box-shadow: 0 3px 7px rgba(0,0,0,.45);
}
.cas-die:hover { background: #fffbef; }
.cas-dice-sum { font-size: 1rem; color: var(--muted); }
.cas-dice-sum b { font-size: 1.3rem; color: #f0c24f; }

/* poker — the final table */
.cas-table-felt {
  padding: 20px 12px; border-radius: 60px;
  background: radial-gradient(90% 120% at 50% 0%, #164a28, #0c2a16);
  border: 3px solid #5a3d1e; box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
.cas-seats { display: flex; justify-content: space-around; gap: 8px; }
.cas-seat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 52px; padding: 8px 6px;
  background: rgba(0,0,0,.35); border: 1px solid #2e4d38; border-radius: 10px;
}
.cas-seat-n { font-family: 'Cinzel', serif; color: #f0c24f; font-size: 1.05rem; }
.cas-seat-tag { font-size: .82rem; color: var(--muted); }
.cas-legends { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.cas-legend {
  padding: 3px 10px; border: 1px solid #2e4d38; border-radius: 999px;
  font-size: .74rem; letter-spacing: .12em; color: #45d68e;
  font-family: 'Righteous', sans-serif;
}
.cas-pk-build { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cas-pk-lbl { font-size: .78rem; letter-spacing: .1em; color: var(--muted); margin-right: 2px; }
.cas-pk-lbl + .cas-pk-lbl, .cas-pk-hand + .cas-pk-lbl { margin-left: 8px; }
.cas-pk-out { margin-left: auto; }
.cas-pk-mark { font-family: 'Cinzel', serif; font-size: 1.25rem; color: #f0c24f; letter-spacing: .12em; }

/* liars — the teller windows */
.cas-tellers { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cas-teller {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px; min-width: 72px;
  background: #0b1a10; border: 1px solid #2e4d38; border-radius: 10px 10px 4px 4px;
}
.cas-teller-grill {
  width: 40px; height: 14px; border-radius: 7px 7px 0 0;
  background: repeating-linear-gradient(90deg, #7a5a2b 0 3px, #140b06 3px 7px);
}
.cas-teller-num { width: 56px; text-align: center; }
.cas-teller-flag { min-width: 62px; }
.cas-clean { color: #45d68e; border-color: #2b9a63; }
.cas-skim  { color: #ff6b6b; border-color: #a3212e; }

/* vault — the dials */
.cas-dials-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cas-dial { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cas-dial-plate {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), transparent 45%),
    conic-gradient(#8a6a33 0 8%, #5a4420 8% 16%, #8a6a33 16% 24%, #5a4420 24% 32%,
                   #8a6a33 32% 40%, #5a4420 40% 48%, #8a6a33 48% 56%, #5a4420 56% 64%,
                   #8a6a33 64% 72%, #5a4420 72% 80%, #8a6a33 80% 88%, #5a4420 88% 100%);
  border: 4px solid #3a2c14;
  box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 0 12px rgba(0,0,0,.5);
}
.cas-dial-roman {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.3rem; color: #f7e9c3;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.cas-dial-in { width: 86px; text-align: center; font-family: 'Righteous', sans-serif; letter-spacing: .08em; }

/* lasers — the lattice */
.cas-beam { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cas-beam-name { width: 62px; font-size: .78rem; letter-spacing: .12em; color: var(--muted); font-family: 'Righteous', sans-serif; }
.cas-beam-bar {
  flex: 1; min-width: 70px; height: 8px; border-radius: 4px;
  background: #0b1a10; position: relative; overflow: hidden;
}
.cas-beam-ray {
  position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #ff5c5c 30%, #ffb1b1 50%, #ff5c5c 70%, transparent);
  box-shadow: 0 0 10px rgba(255,92,92,.7);
}
@media (prefers-reduced-motion: no-preference) {
  .cas-beam-ray { animation: casBeamHum 2.2s ease-in-out infinite; }
}
@keyframes casBeamHum { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.cas-beam-off .cas-beam-ray { opacity: .12; box-shadow: none; animation: none; }
.cas-beam-f { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--muted); }
.cas-beam-f .input { width: 58px; text-align: center; padding: 6px 4px; }
.cas-beam-lamp { width: 44px; text-align: center; font-size: .72rem; letter-spacing: .1em; font-family: 'Righteous', sans-serif; color: var(--muted); }
.cas-lamp-dark { color: #45d68e; }
.cas-lamp-live { color: #ff6b6b; }
.cas-lz-t { width: 76px; text-align: center; }
.cas-lz-verdict { font-size: .84rem; color: var(--muted); }

/* floor — the pressure grid */
.cas-floor-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  max-width: 420px; margin: 0 auto;
}
.cas-tile {
  aspect-ratio: 1; padding: 0; cursor: pointer;
  background: #0b1a10; color: var(--muted);
  border: 1px solid #2e4d38; border-radius: 5px;
  font-size: .74rem; font-family: 'Righteous', sans-serif;
}
.cas-tile:hover { border-color: #f0c24f; color: var(--ink); }
.cas-tile-safe {
  background: #1e8449; color: #eafff2; border-color: #45d68e;
  box-shadow: 0 0 8px rgba(69,214,142,.4);
}
.cas-floor-code { font-size: .8rem; }
.cas-floor-code b { color: #f0c24f; font-size: 1.05rem; letter-spacing: .06em; }

@media (max-width: 480px) {
  .cas-chip-sub { margin-left: 0; width: 100%; text-align: right; }
  .cas-use { margin-left: 0; }
  .cas-total { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   UNDER THE BIG TOP — landing page, hub card + in-game re-skin
   Scoping: `.body-bigtop` on <body> (landing page) and
   `body.game-bigtop` (set by lobby.js on the game screen when
   the room's pack is 'bigtop') re-theme the shared components
   via CSS-variable overrides (nothing here touches the other
   rooms' pages); `.land-bigtop` on <main> scopes page-specific
   pieces. The hub-card pieces (.room-card__media--bigtop, .bt-*)
   use self-contained hex colors so they render identically on
   the default-palette hub.
   ════════════════════════════════════════════════════════════ */

/* Page-wide re-theme: circus crimson + marquee-bulb gold + poster teal. */
.body-bigtop,
body.game-bigtop {
  --bg: #180a10;
  --bg2: #33121c;
  --card: #26101a;
  --card-border: #5c2836;
  --gold: #ffc14d;        /* accent: marquee-bulb gold */
  --purple: #40d6c3;      /* secondary: vintage-poster teal */
  --purple-dim: #2aa193;
  --bloom-rgb: 255, 193, 77;
}
.body-bigtop .btn-gold,
body.game-bigtop .btn-gold {
  background: linear-gradient(100deg, #ffc14d, #ff8a3c);
  border-color: #ffd98a;
  color: #33150a;
}
.body-bigtop .btn-gold:hover,
body.game-bigtop .btn-gold:hover { filter: brightness(1.08); }
.body-bigtop .step-n { color: #33150a; }
.body-bigtop .callout {
  background: linear-gradient(135deg, #3a1420, #1b0a12);
  border-color: var(--purple-dim);
}
/* Big-top brand face: Rye reads "vintage circus poster". */
.body-bigtop h1, .body-bigtop h2, .body-bigtop h3,
body.game-bigtop h1, body.game-bigtop h2, body.game-bigtop h3 {
  font-family: 'Rye', 'Georgia', serif;
  font-weight: 400;
  letter-spacing: .03em;
}

/* In-game banner behind the timer/progress: striped canvas under a spotlight
   in place of the tower art. (Swap the gradients for
   url("../images/bigtop-bg.png") + scrim when the circus art lands.) */
body.game-bigtop .play-top {
  /* game-bigtop.png under the scrim; the striped-canvas gradients below are the
     fallback until the art lands. */
  background:
    linear-gradient(180deg, rgba(24, 10, 16, .45), rgba(24, 10, 16, .78)),
    url("../images/game-bigtop.png") center no-repeat,
    radial-gradient(90% 80% at 50% 0%, rgba(255, 193, 77, .32), transparent 60%),
    radial-gradient(rgba(255, 233, 176, .07) 1.2px, transparent 1.8px),
    repeating-linear-gradient(90deg, rgba(163, 33, 46, .32) 0 46px, rgba(0, 0, 0, 0) 46px 92px),
    linear-gradient(170deg, #33121c, #14060c);
  background-size: auto, cover, auto, 22px 22px, auto, auto;
  border-color: rgba(255, 193, 77, .4);
}

/* ── hero: striped canvas under a spotlight ── */
.hero-bigtop {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 54px 16px 46px;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 193, 77, .20), transparent 60%),
    radial-gradient(rgba(255, 233, 176, .07) 1.2px, transparent 1.8px),
    repeating-linear-gradient(90deg, rgba(163, 33, 46, .32) 0 46px, rgba(0, 0, 0, 0) 46px 92px),
    linear-gradient(170deg, #33121c, #14060c);
  background-size: auto, 22px 22px, auto, auto;
}
.hero-bigtop::after {  /* spotlight vignette, in place of the 90s scanlines */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(110% 85% at 50% 8%, transparent 50%, rgba(0, 0, 0, .5));
}

.bigtop-title { margin: 4px 0 18px; line-height: 1.08; }
.btt-top {
  display: block;
  font-family: 'Rye', 'Georgia', serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 4.2vw, 2.3rem);
  letter-spacing: .18em;
  color: #ffe9b0;
  text-shadow: 0 0 8px rgba(255, 193, 77, .8), 0 0 30px rgba(255, 193, 77, .4);
}
.btt-main {
  display: block;
  font-family: 'Rye', 'Georgia', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 5rem);
  letter-spacing: .08em;
  color: #ff6b81;
  text-shadow: 0 0 10px rgba(214, 48, 78, .85), 0 0 36px rgba(214, 48, 78, .45);
}
@media (prefers-reduced-motion: no-preference) {
  .btt-main { animation: neonFlicker 11s infinite; }  /* an old marquee, not a strobe */
}

.showtime-sign {  /* gates-open status chip (big-top cousin of .frozen-clock) */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 9px 18px;
  background: #14060c;
  border: 1px solid #5c2836;
  border-radius: 12px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: 1.02rem;
  letter-spacing: .08em;
  color: #ffe9b0;
  text-shadow: 0 0 10px rgba(255, 193, 77, .5);
}
.showtime-sign .tonight {
  color: #ff5c5c;
  font-size: .76rem;
  letter-spacing: .14em;
  text-shadow: 0 0 8px rgba(255, 92, 92, .7);
}
@media (max-width: 480px) {
  .showtime-sign { gap: 9px; padding: 8px 12px; font-size: .84rem; letter-spacing: .05em; }
  .showtime-sign .tonight { font-size: .66rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .showtime-sign .tonight { animation: onAirPulse 1.6s ease-in-out infinite; }
}

/* ── crew accents (reuses the shared .crew card component) ── */
.crew--ringmaster { --crew-accent: #ffc14d; }
.crew--magician   { --crew-accent: #b98aff; }
.crew--acrobat    { --crew-accent: #40d6c3; }
.crew--clown      { --crew-accent: #ff6b81; }

/* ── family-friendly band (the calm cousin of .expert-band) ── */
.family-band {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 12px 18px;
  background: rgba(64, 214, 195, .07);
  border: 1px dashed rgba(64, 214, 195, .55);
  border-radius: 12px;
  color: #9fe8dd;
  font-size: .95rem;
  text-align: center;
}

/* ── notify band ── */
.notify-bigtop { border-color: var(--gold); }
.notify-bigtop .notify-form .btn { width: auto; }
.notify-bigtop .notify-form .input { margin: 0; }

/* ── hub room card (renders on the default-palette hub page) ── */
.room-card__media--bigtop {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(255, 193, 77, .26), transparent 60%),
    radial-gradient(rgba(255, 233, 176, .08) 1.2px, transparent 1.8px),
    repeating-linear-gradient(90deg, rgba(163, 33, 46, .38) 0 34px, rgba(0, 0, 0, 0) 34px 68px),
    linear-gradient(170deg, #33121c, #14060c);
  background-size: auto, 18px 18px, auto, auto;
}
.room-card__media--bigtop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 5%, transparent 52%, rgba(0, 0, 0, .48));
}
.bt-sign { text-align: center; line-height: 1.1; }
.bt-line1 {
  display: block;
  font-family: 'Rye', 'Georgia', serif;
  font-size: .98rem;
  letter-spacing: .22em;
  color: #ffe9b0;
  text-shadow: 0 0 6px rgba(255, 193, 77, .8), 0 0 20px rgba(255, 193, 77, .45);
}
.bt-line2 {
  display: block;
  margin: 2px 0 8px;
  font-family: 'Rye', 'Georgia', serif;
  font-size: 2.1rem;
  letter-spacing: .1em;
  color: #ff6b81;
  text-shadow: 0 0 8px rgba(214, 48, 78, .9), 0 0 28px rgba(214, 48, 78, .5);
}
.bt-chip {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(20, 6, 12, .85);
  border: 1px solid #5c2836;
  border-radius: 999px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  color: #ffe9b0;
}

/* ════════════════════════════════════════════════════════════
   THE GREAT SANTA SEARCH — landing page, hub card + in-game re-skin
   Scoping: `.body-christmas` on <body> (landing page) and
   `body.game-christmas` (set by lobby.js on the game screen when
   the room's pack is 'christmas') re-theme the shared components
   via CSS-variable overrides (nothing here touches the other
   rooms' pages); `.land-christmas` on <main> scopes page-specific
   pieces. The hub-card pieces (.room-card__media--christmas, .xm-*)
   use self-contained hex colours so they render identically on
   the default-palette hub.
   ════════════════════════════════════════════════════════════ */

/* Page-wide re-theme: pine-night green + berry red + twinkle-light gold. */
.body-christmas,
body.game-christmas {
  --bg: #0a1712;
  --bg2: #133325;
  --card: #122a20;
  --card-border: #2b5a45;
  --gold: #ffd166;        /* accent: twinkle-light gold */
  --purple: #ff6b6b;      /* secondary: berry red */
  --purple-dim: #d9434b;
  --bloom-rgb: 255, 209, 102;
}
/* Candy-cane red buttons with a gold rim. */
.body-christmas .btn-gold,
body.game-christmas .btn-gold {
  background: linear-gradient(100deg, #e63946, #ff6b6b);
  border-color: #ffd166;
  color: #fff;
  text-shadow: 0 1px 2px rgba(80, 0, 10, .35);
}
.body-christmas .btn-gold:hover,
body.game-christmas .btn-gold:hover { filter: brightness(1.08); }
.body-christmas .callout {
  background: linear-gradient(135deg, #1a3d2e, #0c1d16);
  border-color: var(--purple-dim);
}
.body-christmas .hero-badge { background: #0f2a1f; border-color: #2b5a45; }
/* The shared UI hardcodes a few plum surfaces (#1b1430 / #2c2247) rather than using
   the palette vars; tint the most visible ones pine green so nothing purple peeks
   through the Christmas palette. Scoped to this pack only. */
.body-christmas .btn:not(.btn-gold):not(.ghost),
body.game-christmas .btn:not(.btn-gold):not(.ghost),
.body-christmas .tag,
body.game-christmas .members li { background: #173b2c; }
.body-christmas .input,
body.game-christmas .input,
body.game-christmas .setting-select,
body.game-christmas .timer,
body.game-christmas .pdot,
body.game-christmas .sl-ans,
.body-christmas .join-band { background: #0e2219; }
/* Christmas brand face: 'Mountains of Christmas' reads "hand-lettered holiday card". */
.body-christmas h1, .body-christmas h2, .body-christmas h3,
body.game-christmas h1, body.game-christmas h2, body.game-christmas h3 {
  font-family: 'Mountains of Christmas', 'Georgia', serif;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Clue cards: pine card stock, each elf's accent in their role colour
   (List-Keeper red · Wrapper green · Navigator blue · Toymaker gold). */
body.game-christmas .clue {
  background:
    radial-gradient(130% 100% at 0% 0%, var(--clue-tint, rgba(255, 107, 107, .14)), transparent 58%),
    linear-gradient(160deg, #173627, #0f241b);
}
body.game-christmas .clue.role-1 { --clue-accent: #ff5a5f; --clue-glow: rgba(255, 90, 95, .55);  --clue-tint: rgba(255, 90, 95, .16); }
body.game-christmas .clue.role-2 { --clue-accent: #3ecf7a; --clue-glow: rgba(62, 207, 122, .5);  --clue-tint: rgba(62, 207, 122, .15); }
body.game-christmas .clue.role-3 { --clue-accent: #5aa9ff; --clue-glow: rgba(90, 169, 255, .5);  --clue-tint: rgba(90, 169, 255, .15); }
body.game-christmas .clue.role-4 { --clue-accent: #ffc53d; --clue-glow: rgba(255, 197, 61, .5);  --clue-tint: rgba(255, 197, 61, .15); }
body.game-christmas .clue-text { background: rgba(3, 12, 8, .42); }

/* Puzzle widgets (code pad, stocking dials, radio dial, ornament hooks, lights,
   launch switches): pine + twinkle-gold surfaces instead of the tower's plum and
   brass, with the primary actions in the same candy-cane red as .btn-gold. */
body.game-christmas .kp-key,
body.game-christmas .dial-btn,
body.game-christmas .seq-chip,
body.game-christmas .order-btn:not(.pressed) { background: #173b2c; }
body.game-christmas .kp-key:hover,
body.game-christmas .dial-btn:hover,
body.game-christmas .order-btn:hover:not(:disabled):not(.pressed) { background: #1f4a37; }
body.game-christmas .kp-slot,
body.game-christmas .seq-slot { background: #0b1c15; }
body.game-christmas .mem-slot { background: #12281e; }
body.game-christmas .dial { background: linear-gradient(160deg, #1a3a2b, #0e2219); }
body.game-christmas .dial-window { background: radial-gradient(circle at 50% 35%, #3a2f12, #0b1c15); }
body.game-christmas .cw-ring  { fill: #0e2219; stroke: #2b5a45; }
body.game-christmas .cw-ring2 { fill: #133325; }
body.game-christmas .kp-ok,
body.game-christmas .order-start {
  background: linear-gradient(100deg, #e63946, #ff6b6b);
  border-color: #ffd166;
  color: #fff;
}

/* Cold open: a pine-night backdrop instead of the tower's indigo, and Jack Frost's
   closing line in the holiday-card face rather than Archmage's Cinzel. */
body.game-christmas .opening-overlay {
  background:
    radial-gradient(1100px 720px at 50% -10%, rgba(24, 74, 52, .93), rgba(5, 14, 10, .97)),
    var(--bg);
}
body.game-christmas .opening-line-final {
  font-family: 'Mountains of Christmas', 'Georgia', serif;
  letter-spacing: .01em;
}

/* In-game banner behind the timer/progress: a snowy night sky with a warm glow
   in place of the tower art. game-christmas.png slots in under the scrim when
   the art lands; the snow-dot gradients below are the fallback until then. */
body.game-christmas .play-top {
  background:
    linear-gradient(180deg, rgba(10, 23, 18, .45), rgba(10, 23, 18, .78)),
    url("../images/game-christmas.png") center no-repeat,
    radial-gradient(80% 90% at 50% 0%, rgba(255, 209, 102, .28), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1.6px),
    linear-gradient(170deg, #173b2c, #0a1712);
  background-size: auto, cover, auto, 34px 34px, 21px 21px, auto;
  background-position: center, center, center, 0 0, 11px 7px, center;
  border-color: rgba(255, 209, 102, .4);
}

/* ── hero: a snowy night with a candy-cane ribbon along the top ── */
.hero-christmas {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 58px 16px 46px;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 209, 102, .22), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.7px),
    radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1.7px),
    linear-gradient(175deg, #183f2f 0%, #0d2219 55%, #0a1712 100%);
  background-size: auto, 38px 38px, 23px 23px, auto;
  background-position: center, 0 0, 12px 9px, center;
}
.hero-christmas::before {  /* the candy-cane ribbon */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 9px;
  background: repeating-linear-gradient(135deg, #e63946 0 12px, #fff7f0 12px 24px);
  opacity: .9;
}
.hero-christmas::after {  /* soft snowdrifts along the bottom edge */
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -46px;
  height: 100px;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 28% 100%, rgba(255, 255, 255, .13), transparent 70%),
    radial-gradient(55% 100% at 76% 100%, rgba(255, 255, 255, .09), transparent 70%);
}

.xmas-title { margin: 4px 0 18px; line-height: 1.02; }
.xt-top {
  display: block;
  font-family: 'Mountains of Christmas', 'Georgia', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  letter-spacing: .16em;
  color: #fff4d6;
  text-shadow: 0 0 8px rgba(255, 209, 102, .8), 0 0 28px rgba(255, 209, 102, .4);
}
.xt-main {
  display: block;
  font-family: 'Mountains of Christmas', 'Georgia', serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 9.5vw, 5.4rem);
  letter-spacing: .03em;
  color: #ff6b6b;
  text-shadow: 0 2px 0 #7a1418, 0 0 14px rgba(230, 57, 70, .75), 0 0 40px rgba(230, 57, 70, .4);
}
@media (prefers-reduced-motion: no-preference) {
  .xt-main { animation: xmasTwinkle 6s ease-in-out infinite; }  /* a slow glow, not a strobe */
}
@keyframes xmasTwinkle {
  0%, 100% { text-shadow: 0 2px 0 #7a1418, 0 0 14px rgba(230, 57, 70, .75), 0 0 40px rgba(230, 57, 70, .4); }
  50%      { text-shadow: 0 2px 0 #7a1418, 0 0 20px rgba(255, 209, 102, .7), 0 0 52px rgba(230, 57, 70, .5); }
}

.midnight-sign {  /* Christmas Eve status chip (cousin of .showtime-sign) */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 9px 18px;
  background: #0a1712;
  border: 1px solid #2b5a45;
  border-radius: 12px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: 1.02rem;
  letter-spacing: .08em;
  color: #fff4d6;
  text-shadow: 0 0 10px rgba(255, 209, 102, .5);
}
.midnight-sign .eve {
  color: #ff6b6b;
  font-size: .76rem;
  letter-spacing: .14em;
  text-shadow: 0 0 8px rgba(255, 107, 107, .7);
}
@media (max-width: 480px) {
  .midnight-sign { gap: 9px; padding: 8px 12px; font-size: .84rem; letter-spacing: .05em; }
  .midnight-sign .eve { font-size: .66rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .midnight-sign .eve { animation: onAirPulse 1.6s ease-in-out infinite; }
}

/* ── the elves (reuses the shared .crew card component) ── */
.crew--listkeeper { --crew-accent: #ff5a5f; }
.crew--wrapper    { --crew-accent: #3ecf7a; }
.crew--navigator  { --crew-accent: #5aa9ff; }
.crew--toymaker   { --crew-accent: #ffc53d; }

/* ── the twelve-presents strip on the story panel ── */
.present-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 4px;
}
.present-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 209, 102, .25);
}
.present-row span:nth-child(3n+1) { border-color: rgba(255, 107, 107, .45); }
.present-row span:nth-child(3n+2) { border-color: rgba(62, 207, 122, .45); }
.present-row .present-last { border-color: #ffd166; box-shadow: 0 0 14px rgba(255, 209, 102, .35); }

/* ── difficulty band (the festive cousin of .family-band / .expert-band) ── */
.challenge-band {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 12px 18px;
  background: rgba(255, 209, 102, .07);
  border: 1px dashed rgba(255, 209, 102, .55);
  border-radius: 12px;
  color: #ffe8a8;
  font-size: .95rem;
  text-align: center;
}

/* ── notify band ── */
.notify-christmas { border-color: var(--gold); }
.notify-christmas .notify-form .btn { width: auto; }
.notify-christmas .notify-form .input { margin: 0; }

/* ── hub room card (renders on the default-palette hub page) ── */
.room-card__media--christmas {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(255, 209, 102, .26), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.7px),
    radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.7px),
    linear-gradient(175deg, #183f2f, #0a1712);
  background-size: auto, 30px 30px, 19px 19px, auto;
  background-position: center, 0 0, 9px 7px, center;
}
.room-card__media--christmas::before {  /* candy-cane ribbon */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  background: repeating-linear-gradient(135deg, #e63946 0 10px, #fff7f0 10px 20px);
  opacity: .9;
}
.room-card__media--christmas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 5%, transparent 55%, rgba(0, 0, 0, .45));
}
/* With the key art in the card, the Featured flag drops to the foot so it clears the title lettering. */
.room-card__media--christmas .room-flag { top: auto; bottom: 12px; }
.xm-sign { text-align: center; line-height: 1.05; }
.xm-line1 {
  display: block;
  font-family: 'Mountains of Christmas', 'Georgia', serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2em;
  color: #fff4d6;
  text-shadow: 0 0 6px rgba(255, 209, 102, .8), 0 0 20px rgba(255, 209, 102, .45);
}
.xm-line2 {
  display: block;
  margin: 0 0 8px;
  font-family: 'Mountains of Christmas', 'Georgia', serif;
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: .02em;
  color: #ff6b6b;
  text-shadow: 0 2px 0 #7a1418, 0 0 10px rgba(230, 57, 70, .85), 0 0 28px rgba(230, 57, 70, .5);
}
.xm-chip {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(10, 23, 18, .88);
  border: 1px solid #2b5a45;
  border-radius: 999px;
  font-family: 'Righteous', 'Segoe UI', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  color: #fff4d6;
}

/* ── Dedicated Join page ─────────────────────────────────────── */
.join-page { max-width: 640px; margin: 48px auto 0; }
.join-page-icon { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.join-page-intro { max-width: 460px; margin: 0 auto 22px; line-height: 1.55; }
.join-page-divider { border: none; border-top: 1px solid var(--card-border); margin: 22px auto 16px; max-width: 320px; }
.join-page .muted.small { margin: 6px 0; }

/* ── How It Works page hero ──────────────────────────────────── */
.hiw-hero { text-align: center; padding: 40px 0 4px; }
.hiw-hero .hero-badge { margin-bottom: 16px; }
.hiw-hero h1 {
  font-family: "Cinzel", "Segoe UI", serif;
  font-size: 2.4rem; margin: 0 0 14px; color: var(--gold);
}
.hiw-hero p { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }
@media (max-width: 560px) { .hiw-hero h1 { font-size: 1.9rem; } }

/* ── FAQ accordion (native <details>) ────────────────────────── */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease;
}
.faq-item[open] { border-color: var(--purple-dim); }
.faq-item > summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-weight: 700; font-size: 1.06rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; flex: none; color: var(--gold); font-size: 1.6rem; font-weight: 700;
  line-height: 1; transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--gold); }
.faq-item > summary:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.faq-answer { padding: 0 22px 20px; color: var(--muted); line-height: 1.6; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--gold); }

/* ── About the Creator ───────────────────────────────────────── */
.creator-card { display: flex; gap: 26px; align-items: center; max-width: 820px; margin: 0 auto; text-align: left; }
.creator-media { flex: none; }
.creator-photo {
  width: 220px; height: 220px; border-radius: 18px; object-fit: cover;
  border: 1px solid var(--card-border); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.creator-photo--fallback {
  align-items: center; justify-content: center;
  font-family: "Cinzel", serif; font-weight: 700; font-size: 3rem; letter-spacing: .06em;
  color: var(--gold); background: linear-gradient(160deg, var(--bg2), var(--card));
}
.creator-name { margin: 0 0 12px; color: var(--gold); font-size: 1.35rem; }
.creator-body p { line-height: 1.6; margin: 0 0 12px; }
.creator-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .creator-card { flex-direction: column; text-align: center; }
  .creator-photo { width: 160px; height: 160px; }
}