/* The Hunt Is On: life and motion layer (2026-10-17).
   Loaded on every page after site.css. Adds the topographic map background, glow, the lit trail,
   reveal-on-scroll, the step illustrations, the phone and board previews, and hover light.
   Motion only runs when fx.js adds .fx to <html> and the visitor has not asked for reduced motion,
   so without JavaScript every page still shows in full. */

/* ---------- Topographic map under everything ---------- */
body::before {
  content: ""; position: fixed; inset: -8%; z-index: -1; pointer-events: none;
  background: url("topo.svg") center / cover no-repeat;
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 30%, #000 30%, transparent 85%);
  mask-image: radial-gradient(130% 90% at 50% 30%, #000 30%, transparent 85%);
}
.fx body::before { animation: topo-drift 90s ease-in-out infinite alternate; }
@keyframes topo-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2.5%, -2%, 0) scale(1.04); } }

/* Soft coloured light bands behind alternate sections, like a lit chart table */
.stop { isolation: isolate; }
.stop::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; width: 100vw; transform: translateX(-50%);
  top: 12%; bottom: 12%; opacity: 0.9;
  background: radial-gradient(60% 55% at 30% 50%, rgba(47, 181, 163, 0.09), transparent 70%);
}
.stop:nth-of-type(even)::after { background: radial-gradient(60% 55% at 70% 50%, rgba(227, 167, 47, 0.08), transparent 70%); }

/* Header lights up once you scroll */
.top { transition: box-shadow 300ms ease; }
.top.is-scrolled { box-shadow: 0 1px 0 rgba(240, 194, 90, 0.35), 0 8px 24px rgba(0, 0, 0, 0.55); }

/* ---------- The trail: a lit fuse that follows you down the page ---------- */
@media (min-width: 1100px) {
  /* The lit line sits underneath the sections, so each keyhole pin covers it instead of being cut through */
  .trail > .stop { z-index: 1; }
  .trail::after {
    content: ""; position: absolute; z-index: 0; left: 1.35rem; top: 2rem; width: 7px; border-radius: 4px; pointer-events: none;
    height: calc((100% - 5rem) * var(--trail-p, 0));
    background: linear-gradient(180deg, #f6d878, #e3a72f 70%, #fff3c4);
    box-shadow: 0 0 10px rgba(240, 194, 90, 0.75), 0 0 26px rgba(227, 167, 47, 0.35);
  }
  .stop-mark { z-index: 2; }
  .fx .stop-mark svg { opacity: 0.45; filter: grayscale(0.6) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); transition: opacity 400ms ease, filter 400ms ease, transform 400ms cubic-bezier(.3, 1.6, .5, 1); transform: translateY(-6px); }
  .fx .stop.is-in .stop-mark svg { opacity: 1; filter: drop-shadow(0 0 8px rgba(240, 194, 90, 0.6)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); transform: none; }
  .stop-mark::after { content: ""; position: absolute; left: 0.32rem; top: 0.25rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid rgba(240, 194, 90, 0.7); opacity: 0; pointer-events: none; }
  .fx .stop.is-in .stop-mark::after { animation: ring 2.6s ease-out 300ms infinite; }
}
@keyframes ring { 0% { transform: scale(0.6); opacity: 0.8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- Reveal on scroll ---------- */
.fx .fx-reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms ease, transform 650ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 70ms); }
.fx .fx-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Buttons: a sheen sweeps across gold buttons ---------- */
.btn.gold { overflow: hidden; }
.btn.gold::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 64%);
  transform: translateX(-120%);
}
.btn.gold:hover::before, .btn.gold:focus-visible::before { transition: transform 700ms ease; transform: translateX(120%); }
.btn { transition: border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease; }
.btn:not(.gold):hover { box-shadow: 0 0 0 1px rgba(240, 194, 90, 0.35), 0 0 16px rgba(240, 194, 90, 0.18), 0 3px 8px rgba(0, 0, 0, 0.4); }

/* ---------- Cards: lift, accent glow and a light that follows the pointer ---------- */
.case, .plate, .way, .town-chip, .board-list a { transition: transform 260ms cubic-bezier(.2, .8, .2, 1), box-shadow 260ms ease, border-color 260ms ease; }
.case.mini:hover, .case.mini:focus-within { transform: translateY(-5px) rotate(-0.4deg); }
.case[class*="kind-"]:hover { box-shadow: inset 0 6px 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 30%, transparent), 0 18px 34px rgba(0, 0, 0, 0.6); }
.town-chip:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(240, 194, 90, 0.5), 0 0 20px rgba(47, 181, 163, 0.35), 0 8px 18px rgba(0, 0, 0, 0.45); }
.board-list a:hover { transform: translateX(4px); }
.fx-light { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms ease; z-index: 1;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 236, 190, 0.12), transparent 60%); }
.plate:hover > .fx-light, .case:hover > .fx-light { opacity: 1; }
.sheet .fx-light { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 60%); mix-blend-mode: soft-light; }

/* Ways to play: chips, and the card glows in its own colour */
.way-meta { list-style: none; margin: 0.35rem 0 0.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.way-meta li { font-family: var(--mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 999px;
  color: var(--accent-ink, var(--gold-ink)); border: 1px solid color-mix(in srgb, var(--accent, #e3a72f) 55%, transparent); background: color-mix(in srgb, var(--accent, #e3a72f) 10%, transparent); }
.way[class*="kind-"]:hover, .way[class*="kind-"]:focus-within {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 0 40px color-mix(in srgb, var(--accent) 10%, transparent), 0 14px 28px rgba(0, 0, 0, 0.5);
}
.way[class*="kind-"]:hover .badge { animation: badge-spin 700ms cubic-bezier(.3, 1.5, .5, 1); }
@keyframes badge-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(-14deg) scale(1.12); } 100% { transform: rotate(0) scale(1); } }

/* ---------- How it plays: step illustrations and the route that lights up ---------- */
.step-art { color: var(--gold-ink); }
.step-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.route li { grid-template-areas: "pin art" "pin text"; grid-template-rows: auto 1fr; }
.route li > .pin { grid-area: pin; }
.route li > .step-art { grid-area: art; width: 5.6rem; height: 3.5rem; padding: 0.3rem 0.4rem; margin-bottom: 0.4rem; border-radius: 0.45rem;
  border: 1px solid #4b5254; background: linear-gradient(180deg, rgba(43, 49, 51, 0.9), rgba(28, 32, 34, 0.9)); box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4); }
.route li > div:not(.pin):not(.step-art) { grid-area: text; }
@media (min-width: 980px) {
  .route li { grid-template-areas: "art" "pin" "text"; grid-template-rows: auto auto 1fr; }
  .route li > .step-art { width: 100%; max-width: 7.5rem; height: 4.6rem; margin-bottom: 0.9rem; }
  .route li::before { top: calc(4.6rem + 0.9rem + 1.45rem); }
  .route li::after { content: ""; position: absolute; left: 3.6rem; right: -1.2rem; top: calc(4.6rem + 0.9rem + 1.45rem); height: 5px; border-radius: 3px; pointer-events: none;
    background: linear-gradient(90deg, #f6d878, #e3a72f); box-shadow: 0 0 10px rgba(240, 194, 90, 0.7); transform-origin: left; transform: scaleX(0); }
  .route li:last-child::after { display: none; }
  .fx .route.is-in li::after { transform: scaleX(1); transition: transform 600ms ease; transition-delay: calc(var(--d, 0) * 350ms + 200ms); }
}
.fx .route .pin { transform: translateY(-14px) scale(0.85); opacity: 0; transition: transform 500ms cubic-bezier(.3, 1.6, .5, 1), opacity 300ms ease; transition-delay: calc(var(--d, 0) * 350ms); }
.fx .route.is-in .pin { transform: none; opacity: 1; }

/* The little illustrations move while they are on screen */
.fx .is-in .fx-bob { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.fx .is-in .fx-dash { animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.fx-bar { transform-box: fill-box; transform-origin: center; }
.fx .is-in .fx-bar { animation: eq 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }
@keyframes eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.fx-ping { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fx .is-in .fx-ping { animation: ping 2s ease-out infinite; }
.fx .is-in .fx-ping2 { animation-delay: 1s; }
@keyframes ping { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
.fx-spin { transform-box: fill-box; transform-origin: center; }
.fx .is-in .fx-spin { animation: spin-tick 4s steps(12) infinite; }
@keyframes spin-tick { to { transform: rotate(360deg); } }
.fx-stamp { transform-box: fill-box; transform-origin: center; }
.fx .is-in .fx-stamp { animation: stamp 3.2s ease-in-out infinite; }
@keyframes stamp { 0%, 55% { transform: scale(1.5) rotate(4deg); opacity: 0; } 65% { transform: scale(0.94); opacity: 1; } 72%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }

/* ---------- Phone preview ---------- */
.head-split { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .head-split { grid-template-columns: 1fr auto; } }
.phone { margin: 0 auto; width: 13.5rem; perspective: 900px; }
.phone-body { position: relative; border-radius: 2rem; padding: 0.65rem; background: linear-gradient(145deg, #3a4245, #121516 60%); border: 1px solid #5d6668;
  box-shadow: 0 0 0 2px #0b0d0e, 0 0 40px rgba(240, 194, 90, 0.18), 0 30px 50px rgba(0, 0, 0, 0.6); transform: rotateY(-14deg) rotateX(6deg) rotate(4deg); transition: transform 600ms ease; }
.phone:hover .phone-body { transform: rotateY(-4deg) rotateX(2deg) rotate(1deg); }
.fx .phone-body { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -8px; } }
.phone-notch { position: absolute; top: 0.95rem; left: 50%; width: 3.6rem; height: 0.9rem; transform: translateX(-50%); border-radius: 999px; background: #0b0d0e; z-index: 2; }
.phone-screen { border-radius: 1.5rem; overflow: hidden; padding: 2.2rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
  background: radial-gradient(120% 70% at 50% 0%, #22343a, #0f1415 75%); border: 1px solid #233033; }
.ph-kicker { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ph-clock { font-family: var(--mono); font-weight: 700; font-size: 1.9rem; letter-spacing: 0.04em; color: #ff8b72; text-shadow: 0 0 14px rgba(255, 139, 114, 0.55); font-variant-numeric: tabular-nums; }
.ph-map { width: 100%; height: auto; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.35); border: 1px solid #2c3a3d; }
.ph-route { stroke-dasharray: 160; stroke-dashoffset: 160; }
.fx .ph-route { animation: route 3.6s ease-in-out infinite; }
@keyframes route { 0% { stroke-dashoffset: 160; } 60%, 100% { stroke-dashoffset: 0; } }
.ph-ring { transform-box: fill-box; transform-origin: center; }
.fx .ph-ring { animation: ping 1.8s ease-out infinite; }
.ph-dist { font-size: 0.78rem; color: #bcd6d8; }
.ph-btn { width: 100%; text-align: center; font-weight: 700; font-size: 0.9rem; padding: 0.55rem; border-radius: 0.5rem; color: var(--on-gold); background: linear-gradient(180deg, #f6d878, #c48e1f); }
.fx .ph-btn { animation: glow-pulse 2.2s ease-in-out infinite; }
@keyframes glow-pulse { 50% { box-shadow: 0 0 18px rgba(240, 194, 90, 0.75); } }

/* ---------- Leaderboard preview ---------- */
.next-duo { align-items: center; }
.mini-board { padding: 1.1rem 1.1rem 0.9rem; max-width: 24rem; width: 100%; justify-self: center; box-shadow: 0 0 30px rgba(240, 194, 90, 0.12), 0 10px 22px rgba(0, 0, 0, 0.45); }
.mb-head { display: flex; justify-content: space-between; font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-ink); margin-bottom: 0.6rem; }
.mb-head span { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.1em; }
.mini-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.mini-board li { display: grid; grid-template-columns: 1.8rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0.6rem; border-radius: 0.35rem; background: #0d1112; border: 1px solid #1f2729; font-family: var(--mono); }
.mini-board li b { color: var(--gold-ink); }
.mini-board li span { color: var(--muted); font-style: italic; }
.mini-board li i { font-style: normal; color: #f0c25a; }
.mini-board li:first-child { border-color: rgba(240, 194, 90, 0.6); box-shadow: 0 0 14px rgba(240, 194, 90, 0.25); }
.fx .mini-board li { opacity: 0; transform: translateX(16px); transition: opacity 400ms ease, transform 400ms ease; transition-delay: calc(var(--i) * 120ms + 150ms); }
.fx .mini-board.is-in li, .fx .is-in .mini-board li { opacity: 1; transform: none; }
.mb-cap { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

/* ---------- Coast Passport: stamps ink in their own colours ---------- */
.stamp-btn:nth-child(5n+1) { --ink: #e3a72f; } .stamp-btn:nth-child(5n+2) { --ink: #2fb5a3; } .stamp-btn:nth-child(5n+3) { --ink: #9a7ae6; }
.stamp-btn:nth-child(5n+4) { --ink: #3d9be9; } .stamp-btn:nth-child(5n+5) { --ink: #e4553f; }
.stamp-btn[aria-pressed="true"] { position: relative; color: #15191a; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--ink) 55%, #fff), var(--ink) 78%);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 6px color-mix(in srgb, var(--ink) 45%, #000), 0 0 22px color-mix(in srgb, var(--ink) 60%, transparent); }
.stamp-btn[aria-pressed="true"]::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--ink); opacity: 0; animation: ink-burst 600ms ease-out; pointer-events: none; }
@keyframes ink-burst { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
.stamp-btn.finale.open { box-shadow: inset 0 0 0 4px #e0573e, inset 0 0 0 6px #6b1d12, 0 0 30px rgba(224, 87, 62, 0.7); }
.fx .stamp-btn.finale.open { animation: thunk 300ms ease, finale-glow 1.6s ease-in-out 300ms infinite; }
@keyframes finale-glow { 50% { box-shadow: inset 0 0 0 4px #e0573e, inset 0 0 0 6px #6b1d12, 0 0 44px rgba(224, 87, 62, 0.95); } }

/* Map: the land draws itself in */
.fx .map .land { stroke-dasharray: 6000; stroke-dashoffset: 6000; }
.fx .is-in .map .land, .fx .map.is-in .land { transition: stroke-dashoffset 2.8s ease-in-out; stroke-dashoffset: 0; }

/* Hero cipher sheet floats a little */
.fx .cipher { animation: sheet-float 7s ease-in-out infinite; }
@keyframes sheet-float { 50% { translate: 0 -6px; } }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx body::before, .fx .phone-body, .fx .cipher, .fx .ph-btn, .fx .ph-route, .fx .ph-ring,
  .fx .is-in .fx-bob, .fx .is-in .fx-dash, .fx .is-in .fx-bar, .fx .is-in .fx-ping, .fx .is-in .fx-spin, .fx .is-in .fx-stamp,
  .fx .stop.is-in .stop-mark::after, .way[class*="kind-"]:hover .badge, .stamp-btn[aria-pressed="true"]::after, .fx .stamp-btn.finale.open { animation: none !important; }
  .fx .fx-reveal, .fx .route .pin, .fx .mini-board li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx .route li::after { transform: scaleX(1) !important; transition: none !important; }
  .ph-route { stroke-dashoffset: 0; } .fx-stamp, .fx-ping { opacity: 1; } .fx-ping2 { opacity: 0; }
  .fx .map .land { stroke-dashoffset: 0 !important; transition: none !important; }
  .case.mini:hover, .way[class*="kind-"]:hover, .town-chip:hover, .board-list a:hover { transform: none; }
}

/* ======================================================================
   Page by page (2026-10-17): briefing tags, heading props, questions,
   boards, locations and case files
   ====================================================================== */

/* Briefing tag under each page title */
.mission { display: inline-flex; align-self: flex-start; gap: 0.4rem; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 0.25rem 0.6rem; border: 1px solid #4b5254; border-radius: 0.25rem; background: rgba(0, 0, 0, 0.35); }
.mission b { color: var(--gold-ink); font-weight: 700; }

/* Heading props: folders, compass, trophy, map and torch */
.head-prop { margin: 0 auto; width: min(19rem, 80vw); filter: drop-shadow(0 0 22px rgba(240, 194, 90, 0.28)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6)); }
.head-prop svg { width: 100%; height: auto; display: block; overflow: visible; }
.fx .head-prop svg { animation: float 7s ease-in-out infinite; }
.fx .prop-needle { animation: needle 5s ease-in-out infinite; transform-origin: 0 0; }
@keyframes needle { 0%, 100% { transform: rotate(-24deg); } 30% { transform: rotate(18deg); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(8deg); } }
.fx .prop-trophy { animation: trophy-glint 3.4s ease-in-out infinite; }
@keyframes trophy-glint { 50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 230, 150, 0.8)); } }
.fx .prop-route { animation: dash 2.4s linear infinite; }
.prop-blip { transform-box: fill-box; transform-origin: center; }
.fx .prop-blip { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; transform: scale(1.5); } }
.fx .prop-beam { animation: beam 4s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: 0.75; } 45% { opacity: 1; } 50% { opacity: 0.55; } 55% { opacity: 0.95; } }
@media (max-width: 859px) { .head-prop { width: min(14rem, 62vw); } }

/* Every main page carries the trail now; tidy the pieces that became trail stops */
.kind-block.stop, .region-block.stop { padding-block: 1.6rem 2.4rem; }
.page-head.want { padding-block: 2.5rem 3rem; }
.trail > .head-split, .trail > .crumbs { position: relative; }

/* ---------- Questions: gold folder tabs ---------- */
.faq { display: flex; flex-direction: column; gap: 0.7rem; }
.faq details, .faq details[open] { border: 0; border-radius: 0.45rem; background: none; box-shadow: none; padding: 0; }
.faq details > summary { position: relative; display: flex; flex-direction: column; gap: 0.15rem; cursor: pointer; list-style: none; padding: 0.75rem 3rem 0.75rem 1rem; border-radius: 0.45rem;
  color: #201d17; font-weight: 700; border: 1px solid #8a6a22;
  background-image: var(--grain), linear-gradient(180deg, #f2dfa8, #d9b766 70%, #c9a24f);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 14px rgba(0, 0, 0, 0.45); transition: box-shadow 250ms ease, transform 200ms ease; }
.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2.5px solid #3d2c0a; border-bottom: 2.5px solid #3d2c0a; transform: translateY(-70%) rotate(45deg); transition: transform 300ms ease; }
.faq details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > summary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #f0c25a, 0 0 22px rgba(240, 194, 90, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45); }
.faq details[open] > summary { border-radius: 0.45rem 0.45rem 0 0; box-shadow: 0 0 0 1px #f0c25a, 0 0 26px rgba(240, 194, 90, 0.5); }
.q-tag { align-self: flex-start; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #6b4d10; border: 1px solid #a07a2a; border-radius: 0.2rem; padding: 0 0.35rem; background: rgba(255, 250, 230, 0.4); }
.q-tag::before { content: "[ "; } .q-tag::after { content: " ]"; }
.faq details > summary { align-items: flex-start; justify-content: flex-start; text-align: left; }
.q-text { font-size: 1.05rem; text-align: left; }
.faq details > p { overflow: hidden; margin: 0; max-width: none; padding: 1.1rem 1.2rem 1.2rem; color: #ece4d2; border: 1px solid rgba(240, 194, 90, 0.55); border-top: 0; border-radius: 0 0 0.45rem 0.45rem;
  background-image: var(--grid), linear-gradient(180deg, #23292b, #15181a); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(240, 194, 90, 0.15); }
.faq details > p a { color: var(--gold-ink); }

/* Still stuck: a typewriter that leads to the contact form */
.still-duo { align-items: center; }
.still-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem; max-width: 22rem; width: 100%; justify-self: center; text-decoration: none; color: inherit; }
.still-card svg { width: 100%; height: auto; }
.sc-head { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-ink); }
.sc-cta { font-weight: 700; color: var(--gold-ink); }
.still-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--gold), 0 0 28px rgba(240, 194, 90, 0.3), 0 12px 24px rgba(0, 0, 0, 0.5); }
.tw-paper { transform-box: fill-box; }
.fx .is-in .tw-paper, .fx .still-card:hover .tw-paper { animation: paper-feed 4s ease-in-out infinite; }
@keyframes paper-feed { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tw-line { stroke-dasharray: 60; stroke-dashoffset: 60; }
.fx .is-in .tw-line { animation: type-line 4s steps(14) infinite; }
@keyframes type-line { 0% { stroke-dashoffset: 60; } 60%, 100% { stroke-dashoffset: 0; } }

/* ---------- Leaderboards ---------- */
.board { box-shadow: 0 0 0 1px rgba(111, 216, 200, 0.35), 0 0 34px rgba(47, 181, 163, 0.22), 0 10px 22px rgba(0, 0, 0, 0.45); }
.board { --gold: #6fd8c8; }
.board .board-tabs button[aria-selected="true"] { color: var(--on-gold); border-color: #6b4d10; background: linear-gradient(180deg, #f6d878, #c48e1f); }
.board tbody tr:nth-child(1) td { color: #f0c25a; background: linear-gradient(90deg, rgba(240, 194, 90, 0.16), transparent); }
.board tbody tr:nth-child(2) td { background: linear-gradient(90deg, rgba(220, 220, 220, 0.08), transparent); }
.board tbody tr:nth-child(3) td { background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent); }
.fx .is-in .board tbody tr { animation: row-in 500ms ease both; }
.fx .is-in .board tbody tr:nth-child(2) { animation-delay: 80ms; } .fx .is-in .board tbody tr:nth-child(3) { animation-delay: 160ms; }
.fx .is-in .board tbody tr:nth-child(4) { animation-delay: 240ms; } .fx .is-in .board tbody tr:nth-child(5) { animation-delay: 320ms; }
@keyframes row-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.board-list a { position: relative; overflow: hidden; align-items: center; background-image: url("topo.svg"), linear-gradient(180deg, #2b3133, #1c2022); background-size: 260px auto, auto; background-position: right -40px center, 0 0; background-repeat: no-repeat; }
.board-list li[class*="kind-"] a { border-left: 4px solid var(--accent); }
.board-list a:hover { border-color: var(--accent, var(--gold)); box-shadow: 0 0 0 1px var(--accent, var(--gold)), 0 0 22px color-mix(in srgb, var(--accent, #e3a72f) 35%, transparent); }
.board-list a b { flex: 1; }
.bl-status { font-style: normal; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent-ink, var(--gold-ink)); padding: 0.1rem 0.45rem; border: 1px solid color-mix(in srgb, var(--accent, #e3a72f) 60%, transparent); border-radius: 0.2rem; background: rgba(0, 0, 0, 0.45); }
.bl-status::before { content: "[ "; } .bl-status::after { content: " ]"; }

/* ---------- Locations: town tiles glow like lit sectors ---------- */
.town-chips { gap: 0.7rem; }
.town-chip { position: relative; min-width: 9.5rem; padding: 0.8rem 1.1rem; background-image: var(--grid), linear-gradient(180deg, #2b3133, #1c2022); border-color: #4b5254; }
.town-chip::before { content: ""; position: absolute; inset: 4px; pointer-events: none; opacity: 0.9; --c: #6fd8c8;
  background: linear-gradient(var(--c), var(--c)) top left / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 12px no-repeat; }
.town-chip:nth-child(3n+2)::before { --c: #f0c25a; }
.town-chip:nth-child(3n+1) { border-color: rgba(47, 181, 163, 0.6); box-shadow: 0 0 18px rgba(47, 181, 163, 0.18), 0 4px 10px rgba(0, 0, 0, 0.35); }
.town-chip:nth-child(3n+2) { border-color: rgba(227, 167, 47, 0.55); box-shadow: 0 0 18px rgba(227, 167, 47, 0.15), 0 4px 10px rgba(0, 0, 0, 0.35); }
.town-chip b { font-size: 1.3rem; }
.town-chip span { color: #a7c4c6; }
.town-chip:hover { border-color: #6fd8c8; box-shadow: 0 0 0 1px #6fd8c8, 0 0 26px rgba(47, 181, 163, 0.45), 0 10px 20px rgba(0, 0, 0, 0.5); }

/* ---------- Case files: paperclip, Classified stamp, radar screens ---------- */
.case.mini::after { content: ""; position: absolute; top: -0.7rem; right: 1.4rem; width: 0.9rem; height: 2.4rem; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 48'%3E%3Cpath d='M5 40V8a4 4 0 0 1 8 0v30a6 6 0 0 1-12 0V12' fill='none' stroke='%23b9b19c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.case-stamp { position: absolute; right: 0.9rem; bottom: 0.9rem; font-family: var(--display); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(165, 40, 30, 0.75); border: 2.5px solid rgba(165, 40, 30, 0.65); border-radius: 0.25rem; padding: 0 0.4rem; transform: rotate(-9deg); mix-blend-mode: multiply; pointer-events: none; }
.fx .case.mini.is-in .case-stamp { animation: stamp-in 450ms cubic-bezier(.3, 1.6, .5, 1) 500ms both; }
@keyframes stamp-in { from { transform: scale(1.8) rotate(4deg); opacity: 0; } to { transform: rotate(-9deg); opacity: 1; } }
.case.mini:hover .poster { box-shadow: 0 0 0 1px var(--accent, var(--gold)), 0 0 24px color-mix(in srgb, var(--accent, #e3a72f) 45%, transparent), 0 10px 22px rgba(0, 0, 0, 0.45); }
.poster.blank .radar { width: 62%; height: auto; color: var(--accent-ink, #6fd8c8); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent, #2fb5a3) 70%, transparent)); }
.radar-sweep { transform-box: view-box; transform-origin: 50px 50px; }
.fx .radar-sweep { animation: sweep 3.2s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar-blip { transform-box: fill-box; transform-origin: center; }
.fx .radar-blip { animation: blink 3.2s ease-in-out infinite; }

/* Filter panel gets corner brackets */
.filters { position: relative; border-color: #4b5254; background-image: var(--grid), linear-gradient(180deg, rgba(43, 49, 51, 0.85), rgba(22, 25, 26, 0.85)); }
.filters::before { content: ""; position: absolute; inset: 5px; pointer-events: none;
  background: linear-gradient(var(--gold), var(--gold)) top left / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top left / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top right / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 2px 16px no-repeat; }
.btn.small-f[aria-pressed="true"] { box-shadow: 0 0 14px rgba(240, 194, 90, 0.45); }
.btn.small-f.kind-trail[aria-pressed="true"] { color: #062a26; border-color: #0b6156; background: linear-gradient(180deg, #8ee6d9, #2fb5a3); box-shadow: 0 0 14px rgba(47, 181, 163, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .fx .head-prop svg, .fx .prop-needle, .fx .prop-trophy, .fx .prop-route, .fx .prop-blip, .fx .prop-beam, .fx .radar-sweep, .fx .radar-blip,
  .fx .is-in .tw-paper, .fx .is-in .tw-line, .fx .is-in .board tbody tr, .fx .case.mini.is-in .case-stamp { animation: none !important; }
  .tw-line { stroke-dashoffset: 0; }
}
.board-list li { min-width: 0; }
.board-list a { flex-wrap: wrap; row-gap: 0.3rem; }
.board-list a b { flex: 1 1 11rem; min-width: 0; }

/* ---------- Warm-up cipher: spin, sound and the solve (2026-10-17) ---------- */
.cipher { position: relative; }
.wheel { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.wheel.dragging { cursor: grabbing; }
.wheel.dragging .inner, .wheel.spinning .inner { transition: none; }
.wheel:hover { filter: drop-shadow(0 0 10px rgba(240, 194, 90, 0.45)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.keeper.is-hint { color: #9b2c1c; font-weight: 700; }
.fx .keeper.is-hint { animation: hint-in 400ms ease; }
@keyframes hint-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* The solved message sits over the controls, so nothing below the card moves */
.cipher .win { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 4; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem 0.9rem; font-size: 0.9rem; line-height: 1.35;
  box-shadow: 0 0 0 1px rgba(240, 194, 90, 0.6), 0 0 30px rgba(240, 194, 90, 0.35), 0 14px 26px rgba(0, 0, 0, 0.55); }
.fx .cipher .win:not([hidden]) { animation: win-up 450ms cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes win-up { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.win-line b { color: #f0c25a; }
.win-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.win-go { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0.25rem 0.9rem; border-radius: 0.4rem; text-decoration: none !important; font-family: var(--body); font-weight: 700;
  color: var(--on-gold) !important; background: linear-gradient(180deg, #f6d878, #c48e1f); border: 1px solid #6b4d10; }
.win-again, .win-share { font: inherit; font-family: var(--body); font-weight: 700; min-height: 2.4rem; padding: 0.25rem 0.9rem; border-radius: 0.4rem; cursor: pointer; color: #ece4d2;
  border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); }
.win-again:hover, .win-share:hover { border-color: var(--gold); }

/* CRACKED stamp thumps onto the card */
.cracked-stamp { position: absolute; top: 34%; left: 50%; z-index: 3; pointer-events: none; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 7cqi, 3.4rem);
  letter-spacing: 0.08em; text-transform: uppercase; color: #a5281e; border: 5px solid #a5281e; border-radius: 0.4rem; padding: 0 0.7rem;
  background: rgba(239, 226, 192, 0.88); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) rotate(-12deg) scale(0); opacity: 0; }
.cipher.is-solved .cracked-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
.fx .cipher.is-solved .cracked-stamp { animation: cracked 520ms cubic-bezier(.3, 1.6, .5, 1) 120ms both; }
@keyframes cracked { 0% { transform: translate(-50%, -50%) rotate(-4deg) scale(2.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } }
.fx .cipher.is-solved { animation: sheet-float 7s ease-in-out infinite, card-glow 1.4s ease-out; }
@keyframes card-glow { 0% { box-shadow: 0 0 0 0 rgba(240, 194, 90, 0.9), 0 14px 30px rgba(0, 0, 0, 0.55); } 100% { box-shadow: 0 0 0 26px rgba(240, 194, 90, 0), 0 14px 30px rgba(0, 0, 0, 0.55); } }
.fx .cipher.is-solved .cipher-body { animation: shake 380ms ease 100ms; }
@keyframes shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(2px, 1px); } }

.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }

/* Sound on and off */
.cipher-foot { gap: 0.6rem; }
.snd-btn { width: 2.6rem; height: 2.6rem; flex: none; margin-left: auto; display: grid; place-items: center; cursor: pointer; border-radius: 0.4rem; color: #ece4d2;
  border: 1.5px solid #6c7273; background: linear-gradient(180deg, #353c3e, #1f2325); }
.snd-btn svg { width: 1.3rem; height: 1.3rem; }
.snd-btn[aria-pressed="false"] { color: #a7a191; opacity: 0.8; }
.snd-btn:hover { border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .fx .keeper.is-hint, .fx .cipher .win:not([hidden]), .fx .cipher.is-solved .cracked-stamp, .fx .cipher.is-solved, .fx .cipher.is-solved .cipher-body { animation: none !important; }
}

/* Question tags sit on the right as dark chips, so they read clearly on the gold tabs (2026-10-17) */
.faq details > summary { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; row-gap: 0.35rem; padding: 0.85rem 3.2rem 0.85rem 1.1rem; }
.faq details > summary .q-text { order: 1; flex: 1 1 14rem; }
.faq details > summary .q-tag { order: 2; align-self: center; flex: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; color: #f0c25a; background: #201d17; border: 1px solid #3d3324; padding: 0.2rem 0.55rem; border-radius: 0.3rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.faq details > summary .q-tag::before, .faq details > summary .q-tag::after { content: none; }

/* The solved message only shows once solved (display:flex above would otherwise override the hidden attribute) */
.cipher .win[hidden] { display: none !important; }

/* ---------- Covers: animated type icon on every game (2026-10-17) ---------- */
/* The frame carries the tilt so the badge tilts with the artwork */
.poster-frame { position: relative; display: block; }
.poster-frame > .poster { margin: 0 !important; transform: none !important; max-width: none !important; }
.mini .poster-frame { margin-bottom: 0.4rem; transform: rotate(0.8deg); }
.featured .poster-frame { width: 100%; max-width: 16rem; margin-inline: auto; transform: rotate(-1.8deg); }
@media (min-width: 640px) { .game-hero .featured .poster-frame { max-width: 18rem; } }
.case.mini:hover .poster-frame .poster { box-shadow: 0 0 0 1px var(--accent, var(--gold)), 0 0 24px color-mix(in srgb, var(--accent, #e3a72f) 45%, transparent), 0 10px 22px rgba(0, 0, 0, 0.45); }

/* Badge in the top corner, clear of the title printed along the bottom of each poster */
.cover-badge { position: absolute; top: 7px; left: 7px; z-index: 2; display: flex; align-items: center; gap: 0.45rem; max-width: calc(100% - 14px);
  padding: 0.3rem 0.6rem 0.3rem 0.35rem; border-radius: 0.35rem; pointer-events: none;
  background: rgba(10, 12, 13, 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--accent, #e3a72f) 60%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent, #e3a72f) 30%, transparent), 0 4px 10px rgba(0, 0, 0, 0.45); }
.cb-icon { width: 2rem; height: 2rem; flex: none; color: var(--accent-ink, #f0c25a); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent, #e3a72f) 70%, transparent)); }
.cb-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.cb-text b { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink, #f0c25a); }
.cb-text i { font-style: normal; font-family: var(--display-plain); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase; color: #efe6d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case.mini:hover .cover-badge, .featured:hover .cover-badge { border-color: var(--accent, #e3a72f); box-shadow: 0 0 22px color-mix(in srgb, var(--accent, #e3a72f) 55%, transparent), 0 4px 10px rgba(0, 0, 0, 0.45); }
.game-hero .cb-icon { width: 2.4rem; height: 2.4rem; }
.game-hero .cb-text i { font-size: 1.05rem; }

/* Covers without artwork: the type's icon drawn large */
.poster.blank svg.ti.big, .poster.blank .ti.big { width: 52%; height: auto; color: var(--accent-ink, #f0c25a); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent, #e3a72f) 70%, transparent)); }

/* The icons move */
.ti * { transform-box: view-box; }
.ti-orbit { transform-origin: 50px 50px; }
.ti-lens { transform-origin: 50px 28px; }
.fx .ti-orbit { animation: ti-orbit 7s linear infinite; }
.fx .ti-lens { animation: ti-orbit 7s linear infinite reverse; }
@keyframes ti-orbit { to { transform: rotate(360deg); } }
.ti-ring { transform-origin: 50px 50px; }
.fx .ti-ring { animation: ti-orbit 24s linear infinite; }
.ti-needle { transform-origin: 50px 50px; }
.fx .ti-needle { animation: ti-needle 4.5s ease-in-out infinite; }
@keyframes ti-needle { 0%, 100% { transform: rotate(-28deg); } 35% { transform: rotate(36deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(12deg); } }
.ti-glass { transform-origin: 50px 50px; }
.fx .ti-glass { animation: ti-flip 4s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes ti-flip { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
.fx .ti-sand-top { animation: ti-sand-top 4s linear infinite; }
.fx .ti-sand-bot { animation: ti-sand-bot 4s linear infinite; }
@keyframes ti-sand-top { 0% { opacity: 1; } 70%, 100% { opacity: 0.15; } }
@keyframes ti-sand-bot { 0% { opacity: 0.15; } 70%, 100% { opacity: 1; } }
.fx .ti-wave { animation: ti-wave 1.8s ease-out infinite; }
.fx .ti-wave.w2 { animation-delay: 0.3s; } .fx .ti-wave.w3 { animation-delay: 0.6s; }
@keyframes ti-wave { 0% { opacity: 0.15; } 30% { opacity: 1; } 100% { opacity: 0.15; } }

@media (prefers-reduced-motion: reduce) {
  .fx .ti-orbit, .fx .ti-lens, .fx .ti-ring, .fx .ti-needle, .fx .ti-glass, .fx .ti-sand-top, .fx .ti-sand-bot, .fx .ti-wave { animation: none !important; }
}

/* ======================================================================
   Load and scroll moments (2026-10-17): opening splash, letter drop,
   the phone walkthrough, the 3-2-1 finale and the corner runner
   ====================================================================== */

/* ---------- Opening splash ---------- */
@property --hole { syntax: '<length>'; inherits: false; initial-value: 0px; }
.splash { display: none; }
.splash-on .splash { position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; pointer-events: auto;
  background: url("topo.svg") center / cover no-repeat, radial-gradient(120% 80% at 50% 40%, #1f2527, #0c0e0f 70%);
  -webkit-mask: radial-gradient(circle at 50% 44%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  mask: radial-gradient(circle at 50% 44%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  animation: sp-failsafe 0s linear 4s forwards; }
.splash-on body { overflow: hidden; }
@keyframes sp-failsafe { to { visibility: hidden; pointer-events: none; } }
.sp-inner { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding: 1rem; }
.sp-pin { width: clamp(3.4rem, 9vw, 5rem); height: auto; filter: drop-shadow(0 0 22px rgba(240, 194, 90, 0.55)); animation: sp-pin 900ms cubic-bezier(.3, 1.6, .5, 1) 100ms both; }
@keyframes sp-pin { 0% { transform: translateY(-60vh) scale(0.8); } 60% { transform: translateY(0) scale(1.12, 0.86); } 80% { transform: translateY(-8px) scale(0.97, 1.04); } 100% { transform: none; } }
.sp-title { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.9;
  font-size: clamp(2.8rem, 11vw, 7rem); color: #efe6d0; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.sp-title span { display: inline-block; animation: sp-slam 520ms cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(500ms + var(--i) * 55ms); }
.sp-title .sp-gap { width: 0.28em; animation: none; }
.sp-title .sp-gold { color: #f0c25a; text-shadow: 0 0 24px rgba(240, 194, 90, 0.5), 0 4px 0 rgba(0, 0, 0, 0.5); }
@keyframes sp-slam { 0% { transform: translateY(-0.8em) scale(1.8) rotate(-8deg); opacity: 0; } 60% { transform: translateY(0) scale(0.92, 1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
.sp-sub { margin: 0; font-family: var(--mono); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; font-size: clamp(0.7rem, 2vw, 0.9rem); color: var(--gold-ink);
  animation: sp-sub 600ms ease 1.25s both; }
@keyframes sp-sub { from { opacity: 0; letter-spacing: 0.8em; } to { opacity: 1; letter-spacing: 0.3em; } }
.splash.sp-exit { animation: sp-iris 780ms cubic-bezier(.7, 0, .2, 1) forwards; }
.splash.sp-exit .sp-inner { animation: sp-out 500ms ease forwards; }
@keyframes sp-iris { to { --hole: 160vmax; opacity: 0; } }
@keyframes sp-out { to { transform: scale(1.15); opacity: 0; } }

/* ---------- Home heading: letters drop in, squash, bounce ---------- */
.hero h1 .w { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; }
.fx .hero h1 .ch { opacity: 0; }
.fx.hero-go .hero h1 .ch { animation: ch-drop 760ms cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: calc(var(--i) * 32ms); }
@keyframes ch-drop { 0% { transform: translateY(-1.3em) rotate(-10deg); opacity: 0; } 55% { transform: translateY(0) scale(1.14, 0.8); opacity: 1; } 75% { transform: translateY(-0.08em) scale(0.95, 1.06); } 100% { transform: none; opacity: 1; } }
.fx:not(.hero-go) .hero h1 .row-pin svg { animation: none; opacity: 0; }

/* ---------- How it plays: the phone walkthrough ---------- */
.story-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.step-k { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.step h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 0.92; margin: 0.3rem 0 0.5rem; color: #efe6d0; }
.step p:last-child { color: var(--muted); max-width: 26rem; }
.story-num { display: none; }
.story-dots { display: none; }
.story-cta { margin-top: 2rem; }

/* static fallback: phone shows the first screen, steps list underneath */
.story-sticky { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .story-sticky { grid-template-columns: auto 1fr; } }
.story-phone { margin: 0 auto; width: min(15.5rem, 70vw); }
.sp-body { position: relative; border-radius: 2.2rem; padding: 0.6rem; background: linear-gradient(145deg, #3a4245, #121516 60%); border: 1px solid #5d6668;
  box-shadow: 0 0 0 2px #0b0d0e, 0 0 50px rgba(240, 194, 90, 0.16), 0 30px 50px rgba(0, 0, 0, 0.6); }
.sp-notch { position: absolute; top: 0.9rem; left: 50%; width: 3.8rem; height: 0.95rem; transform: translateX(-50%); border-radius: 999px; background: #0b0d0e; z-index: 3; }
.sp-screen { position: relative; aspect-ratio: 9 / 18.5; border-radius: 1.7rem; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #22343a, #0f1415 75%); border: 1px solid #233033; }
.scr { position: absolute; inset: 0; padding: 2.4rem 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 420ms ease, transform 420ms ease; }
.scr.on, .story:not(.is-live) .scr.s1 { opacity: 1; transform: none; }
.scr-k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.scr-card { display: flex; flex-direction: column; padding: 0.55rem 0.65rem; border-radius: 0.6rem; background: #1b2224; border: 1px solid #2f3a3d; transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; }
.scr-card b { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; font-size: 1rem; color: #efe6d0; }
.scr-card span { font-size: 0.72rem; color: var(--muted); }
.scr-card.pick { border-color: #e3a72f; box-shadow: 0 0 16px rgba(240, 194, 90, 0.35); transform: scale(1.02); }
.scr-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 0.3rem; border-radius: 999px; background: #1b2224; border: 1px solid #2f3a3d; font-size: 0.75rem; font-weight: 700; text-align: center; }
.scr-toggle span { position: relative; z-index: 1; padding: 0.35rem; color: #ece4d2; }
.scr-toggle i { position: absolute; inset: 2px 50% 2px 2px; border-radius: 999px; background: linear-gradient(180deg, #f6d878, #c48e1f); transition: inset 400ms cubic-bezier(.3, 1.4, .5, 1); }
.s1.team .scr-toggle i { inset: 2px 2px 2px 50%; }
.scr-name { font-size: 0.72rem; color: var(--muted); } .scr-name b { color: var(--gold-ink); }
.scr-title { font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; line-height: 1; color: #efe6d0; }
.scr-wave { display: flex; align-items: center; gap: 3px; height: 3.2rem; margin: 0.4rem 0; }
.scr-wave i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #f6d878, #c48e1f); transform: scaleY(0.25); transform-origin: center; }
.fx .s2.on .scr-wave i { animation: eq 1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.11s); }
.scr-line { font-family: var(--mono); font-size: 0.74rem; line-height: 1.45; color: #d8d0bd; }
.scr-clock { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.6rem; border-radius: 0.5rem; background: #121516; border: 1px solid #2f3a3d; font-size: 0.7rem; color: var(--muted); }
.scr-clock b { font-family: var(--mono); font-size: 1.05rem; color: #ff8b72; }
.scr-map { width: 100%; height: auto; border-radius: 0.6rem; background: rgba(0, 0, 0, 0.35); border: 1px solid #2c3a3d; }
.scr-ring { transform-box: fill-box; transform-origin: center; }
.fx .s3.on .scr-ring { animation: ping 1.6s ease-out infinite; }
.scr-dist { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.scr-dist b { font-family: var(--mono); font-size: 1.7rem; color: #f0c25a; font-variant-numeric: tabular-nums; }
.scr-dist b::after { content: " m"; font-size: 0.9rem; }
.scr-dist span { font-size: 0.7rem; color: var(--muted); }
.scr-check { align-self: center; margin-top: 0.2rem; padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; color: #062a26; background: linear-gradient(180deg, #8ee6d9, #2fb5a3);
  box-shadow: 0 0 18px rgba(47, 181, 163, 0.6); transform: scale(0); transition: transform 380ms cubic-bezier(.3, 1.6, .5, 1); }
.s3.arrived .scr-check { transform: scale(1); }
.scr-wheel { width: 72%; align-self: center; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.scr-tiles { display: flex; justify-content: center; gap: 4px; }
.scr-tiles span { width: 1.6rem; height: 1.9rem; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: #f0c25a; background: linear-gradient(180deg, #2a3032, #15181a); border: 1px solid #4b5254; border-radius: 0.25rem; transition: background 300ms ease, color 300ms ease; }
.s4.solved .scr-tiles span { color: #2a1c04; background: linear-gradient(180deg, #f6d878, #d9a33a); border-color: #6b4d10; }
.scr-cracked, .scr-stamp { align-self: center; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #a5281e; background: rgba(239, 226, 192, 0.92);
  border: 3px solid #a5281e; border-radius: 0.3rem; padding: 0 0.5rem; font-size: 1.5rem; transform: rotate(-10deg) scale(0); opacity: 0; transition: transform 420ms cubic-bezier(.3, 1.7, .5, 1), opacity 200ms ease; }
.s4.solved .scr-cracked, .s5.on .scr-stamp { transform: rotate(-10deg) scale(1); opacity: 1; }
.scr-time { font-family: var(--mono); font-weight: 700; font-size: 2.6rem; line-height: 1; color: #f0c25a; text-shadow: 0 0 18px rgba(240, 194, 90, 0.5); }
.scr-sub { font-size: 0.78rem; color: #d8d0bd; }
.scr-board { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.4rem; align-items: center; padding: 0.45rem 0.6rem; border-radius: 0.45rem; background: #0d1112; border: 1px solid rgba(240, 194, 90, 0.6);
  font-family: var(--mono); font-size: 0.78rem; box-shadow: 0 0 14px rgba(240, 194, 90, 0.25); }
.scr-board span { color: #f0c25a; font-weight: 700; } .scr-board b { color: #ece4d2; } .scr-board i { font-style: normal; color: #f0c25a; }
.scr-confetti i { position: absolute; top: -8%; width: 6px; height: 10px; border-radius: 1px; opacity: 0; }
.scr-confetti i:nth-child(odd) { background: #f6d878; } .scr-confetti i:nth-child(even) { background: #2fb5a3; } .scr-confetti i:nth-child(3n) { background: #e4553f; }
.scr-confetti i:nth-child(1) { left: 8%; } .scr-confetti i:nth-child(2) { left: 18%; } .scr-confetti i:nth-child(3) { left: 28%; } .scr-confetti i:nth-child(4) { left: 38%; } .scr-confetti i:nth-child(5) { left: 48%; }
.scr-confetti i:nth-child(6) { left: 58%; } .scr-confetti i:nth-child(7) { left: 68%; } .scr-confetti i:nth-child(8) { left: 78%; } .scr-confetti i:nth-child(9) { left: 88%; } .scr-confetti i:nth-child(10) { left: 94%; }
.fx .s5.on .scr-confetti i { animation: scr-fall 2.4s linear infinite; }
.fx .s5.on .scr-confetti i:nth-child(2n) { animation-delay: 0.6s; } .fx .s5.on .scr-confetti i:nth-child(3n) { animation-delay: 1.2s; } .fx .s5.on .scr-confetti i:nth-child(5n) { animation-delay: 1.8s; }
@keyframes scr-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(42vh) rotate(540deg); opacity: 0; } }

/* live: the section pins and the phone walks through the steps as you scroll */
.story.is-live .story-track { height: 520vh; height: 520svh; }
.story.is-live .story-sticky { position: sticky; top: var(--hdr, 3.6rem); height: calc(100vh - var(--hdr, 3.6rem)); height: calc(100svh - var(--hdr, 3.6rem)); grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; justify-items: center; align-content: center; gap: 0.9rem; }
.story.is-live .story-num { display: block; position: absolute; left: 0; top: 0.5rem; margin: 0; font-family: var(--display); font-weight: 900; line-height: 0.8; font-size: clamp(4rem, 14vw, 13rem); color: #e3a72f;
  text-shadow: 0 0 40px rgba(240, 194, 90, 0.3); opacity: 0.95; }
.story.is-live .story-num span { color: transparent; -webkit-text-stroke: 2px rgba(240, 194, 90, 0.55); }
.story.is-live .story-num b { display: inline-block; transition: transform 300ms ease; }
.story.is-live .story-num.flip b { animation: num-flip 420ms cubic-bezier(.3, 1.5, .5, 1); }
@keyframes num-flip { 0% { transform: translateY(0.4em) scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.story.is-live .story-phone { width: min(15.5rem, 58vw, 34vh); }
.story.is-live .story-steps { position: relative; width: min(26rem, 100%); min-height: 8.5rem; }
.story.is-live .step { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(16px); transition: opacity 380ms ease, transform 380ms ease; text-align: center; }
.story.is-live .step.on { opacity: 1; transform: none; }
.story.is-live .step p:last-child { margin-inline: auto; }
.story.is-live .story-dots { display: flex; gap: 6px; position: absolute; left: 0; bottom: 1rem; }
.story.is-live .story-dots i { width: 1.6rem; height: 4px; border-radius: 2px; background: #3d4446; transition: background 300ms ease, width 300ms ease; }
.story.is-live .story-dots i.on { background: #e3a72f; width: 2.6rem; box-shadow: 0 0 8px rgba(240, 194, 90, 0.6); }
@media (min-width: 900px) {
  .story.is-live .story-sticky { grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr; }
  .story.is-live .story-num { position: static; justify-self: start; align-self: end; margin-bottom: 2rem; }
  .story.is-live .story-steps { justify-self: start; }
  .story.is-live .step { text-align: left; }
  .story.is-live .step p:last-child { margin-inline: 0; }
  .story.is-live .story-phone { width: min(17rem, 60vh); }
}
@media (max-width: 899px) { .story.is-live .story-num { font-size: clamp(3.4rem, 18vw, 6rem); top: 0; } }

/* ---------- Finale: 3, 2, 1, then gold floods in ---------- */
.finale { position: relative; }
.fin-flood { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: clamp(3rem, 10vw, 6rem) 1rem;
  background-image: var(--grain), radial-gradient(120% 90% at 50% 40%, #f6d878, #e3a72f 55%, #b9831c); color: #2a1c04; }
.fin-flood h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 12vw, 8rem); line-height: 0.88; color: #1d1405; text-shadow: 0 3px 0 rgba(255, 245, 210, 0.35); margin: 0; }
.fin-flood p { max-width: 30rem; font-size: 1.1rem; color: #3d2a08; }
.fin-pin { width: 3.4rem; height: auto; filter: drop-shadow(0 6px 10px rgba(60, 35, 0, 0.45)); }
.fin-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.fin-ctas .btn { color: #f0c25a; background: linear-gradient(180deg, #2a2f31, #121516); border-color: #121516; }
.fin-ctas .btn.dark { color: #2a1c04; background: rgba(255, 248, 225, 0.35); border-color: rgba(42, 28, 4, 0.5); }
.fin-count { display: none; }
.finale.is-live .fin-track { height: 280vh; height: 280svh; }
.finale.is-live .fin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.finale.is-live .fin-count { display: grid; place-items: center; position: absolute; inset: 0; pointer-events: none; }
.finale.is-live .fin-count b { grid-area: 1 / 1; font-family: var(--display); font-weight: 900; font-size: clamp(10rem, 45vw, 28rem); line-height: 1; color: #efe6d0;
  text-shadow: 0 0 60px rgba(240, 194, 90, 0.35); opacity: 0; transform: scale(0.6); transition: opacity 260ms ease, transform 420ms cubic-bezier(.3, 1.5, .5, 1); }
.finale.is-live .fin-count b.on { opacity: 1; transform: scale(1); }
.finale.is-live .fin-count b.gone { opacity: 0; transform: scale(1.6); }
.finale.is-live .fin-flood { position: absolute; inset: 0; clip-path: circle(var(--flood, 0%) at 50% 55%); }

/* ---------- Corner runner: scroll progress, tap to go back up ---------- */
.runner { position: fixed; right: max(0.8rem, env(safe-area-inset-right)); bottom: max(0.8rem, env(safe-area-inset-bottom)); z-index: 60; width: 8.5rem; height: 2.6rem; padding: 0 0.7rem;
  display: flex; align-items: center; border-radius: 999px; background: rgba(18, 21, 22, 0.88); border: 1px solid #4b5254; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity 300ms ease, transform 300ms ease; }
.runner.show { opacity: 1; transform: none; pointer-events: auto; }
.runner:hover { border-color: var(--gold); }
.runner-track { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(240, 194, 90, 0.45) 0 5px, transparent 5px 9px); }
.runner-fill { position: absolute; left: 0; top: -1px; height: 4px; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: #e3a72f; box-shadow: 0 0 8px rgba(240, 194, 90, 0.7); }
.runner-pin { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 1.15rem; height: auto; transform: translate(-50%, -88%); filter: drop-shadow(0 0 6px rgba(240, 194, 90, 0.6)); }
.runner.moving .runner-pin { animation: runner-bob 380ms ease-in-out infinite; }
@keyframes runner-bob { 50% { transform: translate(-50%, -112%) rotate(-6deg); } }
.runner-x { width: 0.9rem; height: 0.9rem; margin-left: 0.55rem; flex: none; border-radius: 50%; border: 2px solid #9b2c1c; position: relative; }
.runner-x::before, .runner-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 2px; background: #e0573e; transform: translate(-50%, -50%) rotate(45deg); }
.runner-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 600px) { .runner { width: 6.8rem; height: 2.3rem; } }

@media (prefers-reduced-motion: reduce) {
  .sp-pin, .sp-title span, .sp-sub, .fx.hero-go .hero h1 .ch, .runner.moving .runner-pin, .fx .s2.on .scr-wave i, .fx .s5.on .scr-confetti i, .fx .s3.on .scr-ring { animation: none !important; }
}

/* Full-width light bands are 100vw, which includes the scrollbar: clip sideways overflow without breaking sticky sections */
html, body { overflow-x: clip; }

/* Phone-width walkthrough: a smaller phone, and the step number tucked into the top-right corner */
@media (max-width: 899px) {
  .story.is-live .story-phone { width: min(48vw, 27vh, 13rem); }
  .story.is-live .story-num { left: auto; right: 0; top: 0.4rem; font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .story.is-live .story-num span { -webkit-text-stroke-width: 1.5px; }
}
.scr-cracked, .scr-stamp { white-space: nowrap; font-size: 1.25rem; }

/* ---------- Phone menu (2026-10-17) ---------- */
.menu-btn { display: none; width: 2.75rem; height: 2.75rem; flex: none; padding: 0; cursor: pointer; border-radius: 0.45rem; border: 1.5px solid #6c7273;
  background: linear-gradient(180deg, #353c3e, #1f2325); place-content: center; gap: 5px; }
.menu-btn span { display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: #f0c25a; transition: transform 260ms ease, opacity 200ms ease; }
.menu-btn[aria-expanded="true"] { border-color: var(--gold); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav { position: fixed; left: 0; right: 0; bottom: 0; top: var(--hdr, 4.2rem); z-index: 55; overflow-y: auto; overscroll-behavior: contain;
  background: url("topo.svg") center / cover no-repeat, linear-gradient(180deg, #16191a, #0c0e0f); background-color: #121516; border-top: 1px solid rgba(240, 194, 90, 0.35);
  opacity: 0; transform: translateY(-10px); transition: opacity 240ms ease, transform 240ms ease; }
.mnav.open { opacity: 1; transform: none; }
.mnav[hidden] { display: none; }
.mnav-in { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.2rem 1rem calc(1.6rem + env(safe-area-inset-bottom)); max-width: 30rem; margin: 0 auto; }
.mnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.mnav li { opacity: 0; transform: translateX(-14px); transition: opacity 300ms ease, transform 300ms ease; transition-delay: calc(var(--i) * 45ms + 60ms); }
.mnav.open li { opacity: 1; transform: none; }
.mnav li a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.8rem; border-radius: 0.45rem; text-decoration: none; border: 1px solid transparent; }
.mnav li a b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 1; letter-spacing: 0.01em; color: #efe6d0; }
.mnav li a small { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted); }
.mnav li a:hover, .mnav li a:focus-visible { border-color: rgba(240, 194, 90, 0.45); background: rgba(240, 194, 90, 0.06); }
.mnav li a[aria-current="page"] b { color: #f0c25a; }
.mnav li a[aria-current="page"] { border-left: 3px solid #e3a72f; }
.mnav-cta { align-self: stretch; }
.mnav-foot { display: flex; gap: 1.2rem; justify-content: center; font-size: 0.9rem; }
.mnav-foot a { color: var(--muted); }
.menu-open, .menu-open body { overflow: hidden; }
@media (max-width: 760px) {
  .menu-btn { display: grid; }
  .top .nav > .btn.gold.small { display: none; }
  .top .nav { gap: 0.6rem; }
}
@media (min-width: 761px) { .mnav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav li, .menu-btn span { transition: none; } }

/* ---------- Home: the top opens on gold, like the finale (2026-10-17) ---------- */
.hero { position: relative; z-index: 1; isolation: isolate; color: #2a1c04; }
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 130vw; transform: translateX(-50%); top: 0; bottom: 0;
  background: url("topo.svg") center / cover no-repeat, var(--grain), radial-gradient(120% 90% at 35% 35%, #f6d878, #e3a72f 55%, #b9831c);
  background-blend-mode: multiply, normal, normal;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
  box-shadow: inset 0 -40px 60px rgba(90, 55, 0, 0.18); }
.hero { padding-bottom: calc(clamp(2rem, 5vw, 3.5rem) + 3.5vw); }
.hero .eyebrow { color: #4a3208; }
.hero h1 { color: #1d1405; text-shadow: 0 3px 0 rgba(255, 245, 210, 0.35); }
.hero h1 .gold { color: #fff; text-shadow: 0 3px 0 rgba(90, 55, 0, 0.45), 0 0 30px rgba(255, 240, 200, 0.35); }
.hero h1 .row-pin svg { filter: drop-shadow(0 4px 4px rgba(60, 35, 0, 0.45)); }
.hero .lede { color: #3d2a08; }
.hero .ticks { color: #4a3208; }
.hero .ticks li::before { border-color: #2a1c04; }
.hero .ctas .btn.gold { color: #f0c25a; border-color: #121516; background: linear-gradient(180deg, #2a2f31, #121516);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px rgba(60, 35, 0, 0.45); }
.hero .ctas .btn.gold::after { filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg); }
.hero .ctas .btn:not(.gold) { color: #2a1c04; border-color: rgba(42, 28, 4, 0.5); background: rgba(255, 248, 225, 0.4); box-shadow: 0 4px 12px rgba(60, 35, 0, 0.25); }
.hero .ctas .btn:not(.gold):hover { border-color: #2a1c04; box-shadow: 0 0 0 1px #2a1c04, 0 6px 14px rgba(60, 35, 0, 0.3); }
.hero .cipher { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 22px 44px rgba(70, 40, 0, 0.55); }
.hero .stop-mark { display: none; }
/* The splash opens straight onto the gold */
.splash-on .splash { background: url("topo.svg") center / cover no-repeat, radial-gradient(120% 80% at 50% 40%, #1f2527, #0c0e0f 70%); }

/* ---------- Game pages: the case file comes alive (2026-10-17) ---------- */
/* A soft glow in the game's colour sits behind the case; the case slides in and the town name drops letter by letter */
.game-page .game-hero { position: relative; isolation: isolate; }
.game-page .game-hero::before { content: ""; position: absolute; z-index: -2; inset: -3rem -20vw -1rem; pointer-events: none;
  background: radial-gradient(42% 58% at 24% 52%, color-mix(in srgb, var(--accent, #e3a72f) 30%, transparent), transparent 72%);
  animation: g-breathe 7s ease-in-out infinite alternate; }
@keyframes g-breathe { to { opacity: 0.6; transform: scale(1.06); } }
.fx .game-page .game-hero { animation: g-case-in 800ms cubic-bezier(.2, .9, .25, 1.05) both; }
@keyframes g-case-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.game-hero h1.town .w { display: inline-block; white-space: nowrap; }
.game-hero h1.town .ch { display: inline-block; }
.fx .game-hero h1.town .ch { animation: ch-drop 760ms cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: calc(350ms + var(--i) * 45ms); }

/* The cover drifts as you scroll and tilts towards the pointer, with a glint that follows it */
.game-hero .featured .poster-frame { transform: perspective(900px) translateY(var(--sy, 0px)) rotate(-1.8deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.game-hero .featured .poster-frame.tilting { transition: transform 90ms linear; }
.game-hero .poster-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 244, 214, 0.38), transparent 55%); mix-blend-mode: soft-light; }
.game-hero .poster-frame.tilting::after { opacity: 1; }
.fx .game-hero .poster-frame { animation: g-poster-in 900ms 120ms cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes g-poster-in { from { opacity: 0; translate: -24px 18px; scale: 0.9; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* The story carries a lit trail that fills as you read */
.game-page .game-body .story { position: relative; padding-left: 1.7rem; }
.game-page .game-body .story::before, .game-page .game-body .story::after { content: ""; position: absolute; left: 0.25rem; top: 0.5rem; width: 4px; border-radius: 2px; pointer-events: none; }
.game-page .game-body .story::before { bottom: 0; background: repeating-linear-gradient(180deg, rgba(239, 230, 208, 0.16) 0 10px, transparent 10px 18px); }
.game-page .game-body .story::after { height: calc(100% - 0.5rem); background: linear-gradient(180deg, var(--accent, #e3a72f), var(--accent-ink, #f0c25a));
  box-shadow: 0 0 12px var(--accent, #e3a72f), 0 0 3px var(--accent-ink, #f0c25a); }
.fx .game-page .game-body .story::after { height: calc(var(--p, 0) * (100% - 0.5rem)); }

/* "What you'll do": each line slides in and its tick stamps down */
.fx .fx-li { opacity: 0; transform: translateX(-16px); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 110ms); }
.fx .fx-li.is-in { opacity: 1; transform: none; }
.fx .fx-li > svg { transform: scale(0) rotate(-35deg); transition: transform 520ms cubic-bezier(.3, 1.7, .5, 1); transition-delay: calc(var(--d, 0) * 110ms + 200ms); }
.fx .fx-li.is-in > svg { transform: none; animation: g-tick 1s ease-out both; animation-delay: calc(var(--d, 0) * 110ms + 300ms); }
@keyframes g-tick { 0% { filter: drop-shadow(0 0 0 transparent); } 30% { filter: drop-shadow(0 0 8px var(--accent, #e3a72f)); } 100% { filter: drop-shadow(0 0 0 transparent); } }

/* "Where it takes you": pins drop one after another along a dashed route */
.puzzles.marks li { position: relative; }
.puzzles.marks li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.8rem - 1.5px); top: 2.2rem; bottom: -0.55rem; border-left: 3px dashed color-mix(in srgb, var(--accent, #e3a72f) 65%, transparent); transform-origin: top; }
.fx .puzzles.marks .fx-li::after { transform: scaleY(0); transition: transform 500ms ease; transition-delay: calc(var(--d, 0) * 110ms + 350ms); }
.fx .puzzles.marks .fx-li.is-in::after { transform: scaleY(1); }
.fx .puzzles.marks .fx-li > svg { transform: translateY(-18px) scale(0.8); opacity: 0; transition: transform 520ms cubic-bezier(.3, 1.6, .5, 1), opacity 250ms ease; transition-delay: calc(var(--d, 0) * 110ms + 150ms); }
.fx .puzzles.marks .fx-li.is-in > svg { transform: none; opacity: 1; }

/* Suspects get a rubber stamp as they arrive */
.game-page .suspect { position: relative; }
.fx .game-page .suspect b { padding-right: 5.8rem; }
.fx .game-page .suspect.is-in::after { content: "Suspect"; position: absolute; top: 0.75rem; right: 0.8rem; padding: 0.15rem 0.45rem; border: 2px solid currentColor; border-radius: 0.25rem;
  font-family: var(--mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #b8382a; opacity: 0.85;
  animation: stamp-in 380ms cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: 500ms; }

/* Next on the trail: the cards sit on a gold band, like the top and bottom of the home page */
.next-band { position: relative; z-index: 1; isolation: isolate; color: #2a1c04; margin-top: clamp(1rem, 3vw, 2rem);
  padding-top: calc(clamp(2.5rem, 6vw, 4rem) + 3.5vw) !important; padding-bottom: clamp(3rem, 7vw, 5rem) !important; }
.next-band::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 130vw; transform: translateX(-50%); top: 0; bottom: 0;
  background: url("topo.svg") center / cover no-repeat, var(--grain), radial-gradient(120% 90% at 60% 40%, #f6d878, #e3a72f 55%, #b9831c);
  background-blend-mode: multiply, normal, normal; clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 40px 60px rgba(90, 55, 0, 0.18); }
.next-band .eyebrow { color: #4a3208; }
.next-band h2 { color: #1d1405; text-shadow: 0 3px 0 rgba(255, 245, 210, 0.35); }
.next-band .stop-mark { display: none; }
.next-band .case { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 36px rgba(70, 40, 0, 0.5); }
.game-page:has(.next-band) { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .game-page .game-hero::before { animation: none; }
  .game-hero .featured .poster-frame { transition: none; }
}

/* ---------- Prices (2026-10-17): free trails, $5 launch price on mysteries, a dated Free this month slot ---------- */
.chip.price { background: #fff8e1; border-color: #8a6414; color: #4a3208; }
.chip.price.free { background: #1f8f5a; border-color: #146b42; color: #fff; }
.case .price-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; font-family: var(--mono); color: var(--paper-ink); }
.case .price-line b { display: inline-block; padding: 0 0.4rem; margin-right: 0.15rem; border-radius: 0.25rem; background: #2a2f31; color: #f0c25a; }
.case .price-line.free b { background: #1f8f5a; color: #fff; }
.gamecard dd b { color: var(--accent-ink, #f0c25a); }
.free-month { margin: 0 0 1.6rem; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; border-left: 6px solid #1f8f5a; }
.free-month .eyebrow { color: #146b42; }
.free-month h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }

/* ---------- Pocket cases: copper, played anywhere (2026-10-17) ---------- */
:root { --pocket: #c8733a; --pocket-ink: #eaa26e; --pocket-paper: #7a3d14; }
.kind-pocket { --accent: var(--pocket); --accent-ink: var(--pocket-ink); --accent-paper: var(--pocket-paper); }
.game-page.kind-pocket .gamecard { background-image: var(--rivets), var(--grid), var(--grain), linear-gradient(180deg, #3a2a20, #1f1814); }
.btn.small-f.kind-pocket[aria-pressed="true"] { color: #2a1206; border-color: #7a3d14; background: linear-gradient(180deg, #f3c29a, #c8733a); box-shadow: 0 0 14px rgba(200, 115, 58, 0.5); }
.fx .ti-ring-phone { transform-origin: 50% 60%; animation: ti-ring 2.4s ease-in-out infinite; }
@keyframes ti-ring { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-9deg); } 65% { transform: rotate(9deg); } 70% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } 85% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .fx .ti-ring-phone { animation: none !important; } }

/* ---------- Scroll sounds: the speaker on the countdown (2026-10-17) ---------- */
.fin-sticky .fx-snd { position: absolute; z-index: 3; top: calc(var(--hdr, 3.6rem) + 0.9rem); right: max(1rem, env(safe-area-inset-right)); margin: 0;
  background: rgba(12, 14, 15, 0.7); border: 1px solid rgba(240, 194, 90, 0.5); color: #f0c25a; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fin-sticky .fx-snd[aria-pressed="false"] { color: #efe6d0; animation: snd-nudge 2.4s ease-in-out infinite; }
@keyframes snd-nudge { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(240, 194, 90, 0); } 80% { box-shadow: 0 0 0 6px rgba(240, 194, 90, 0.35); } }
@media (prefers-reduced-motion: reduce) { .fin-sticky .fx-snd { animation: none !important; } }

/* The splash invites a tap, which is what lets the countdown play its sound later (browsers need one) */
.sp-tap { margin: 1.4rem 0 0; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: #f0c25a; opacity: 0; animation: sp-tap-in 400ms ease 350ms forwards, sp-tap-pulse 1.4s ease-in-out 800ms infinite; }
@keyframes sp-tap-in { to { opacity: 0.85; } }
@keyframes sp-tap-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sp-tap { animation: none; opacity: 0.85; } }

/* The countdown's launch button: shown while sound is not yet playing (a phone needs one tap; scrolling never counts) */
.fin-launch { position: absolute; z-index: 4; left: 50%; bottom: max(14vh, 5.5rem); transform: translate(-50%, 1rem) scale(0.9); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.5rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 800 1rem/1 var(--display-plain, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: #2a1c04;
  border: 2px solid #6b4d10; background: linear-gradient(180deg, #f6d878 0%, #e4b03c 45%, #c48e1f 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 26px rgba(0, 0, 0, 0.55); transition: opacity 300ms ease, transform 300ms cubic-bezier(.3, 1.5, .5, 1); }
.fin-launch svg { width: 1.4rem; height: 1.4rem; flex: none; }
.need-tap .fin-launch { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; animation: launch-pulse 1.6s ease-in-out 400ms infinite; }
@keyframes launch-pulse { 0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(240, 194, 90, 0.6); }
  50% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 0 14px rgba(240, 194, 90, 0); } }
.need-tap .fx-snd { animation: none; }
@media (prefers-reduced-motion: reduce) { .need-tap .fin-launch { animation: none; } }

/* ---------- Guides (2026-10-17): long-form pages for search ---------- */
.guide-body { max-width: 46rem; }
.guide-body h2 { margin-top: 2.2rem; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { margin-top: 1.6rem; font-size: 1.25rem; color: var(--gold-ink, #f0c25a); }
.guide-body ul, .guide-body ol { padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.guide-body li b { color: #efe6d0; }
.guide-body .tip { margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--gold, #e3a72f); background: rgba(240, 194, 90, 0.07); border-radius: 0 0.4rem 0.4rem 0; }
.guide-body .tip b { color: var(--gold-ink, #f0c25a); }
.guide-updated { margin-top: 2rem; font-size: 0.9rem; }
.guide-grid { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
.guide-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 1.4rem 1.3rem; text-decoration: none; color: var(--paper-ink); }
.guide-card h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--paper-ink); }
.guide-card .eyebrow { color: #7a5a14; }
.guide-card .more { margin-top: auto; font-family: var(--mono); font-weight: 700; color: #7a3d14; }
.guide-card:hover { transform: translateY(-3px); }
.town-chip span { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: #a7a191; font-weight: 400; }

/* ---------- Game credit line and content note (2026-10-17, the ALWAYS game) ---------- */
.game-credit { margin: -0.2rem 0 0.2rem; font-family: var(--mono); font-size: 0.86rem; color: #7a3d14; }
.chip.rating { background: #1c1c1c; border-color: #1c1c1c; color: #fff; }
.game-body .content-note { margin: 0.4rem 0 1rem; padding: 1rem 1.2rem; border-left: 4px solid #b3261e; background: rgba(179, 38, 30, 0.09); border-radius: 0 0.4rem 0.4rem 0; }
.game-body .content-note b { color: #f08a80; margin-right: 0.3rem; }

/* ---------- The book behind the game (2026-10-17) ---------- */
.book-block { display: grid; gap: 1.2rem; align-items: start; margin-top: 1.6rem; padding: 1.3rem; }
@media (min-width: 560px) { .book-block { grid-template-columns: 8.5rem 1fr; } }
.book-block img { width: 100%; max-width: 10rem; height: auto; border-radius: 0.25rem; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); transform: rotate(-2deg); }
.book-block h2 { margin: 0.1rem 0 0; font-size: clamp(1.6rem, 3.4vw, 2.1rem); color: var(--paper-ink); }
.book-block .eyebrow { color: #7a3d14; }
.book-by { margin: 0; font-family: var(--mono); font-weight: 700; color: var(--paper-ink); }
.book-line { font-style: italic; color: var(--paper-ink); }
.book-copy p { color: var(--paper-ink); }
.book-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }

/* ---------- Game theme: ALWAYS (Stay on the Line), 2026-10-17 trial ----------
   The page takes the book's look: black, one red light, a dark support ticket instead of a paper case file. */
.theme-always { --accent: #d61f1f; --accent-ink: #ff5a4f; --accent-paper: #6b0b0b; --always-red: #e3241b; color: #e6e1d9; }
.theme-always::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 55% at 50% 0%, rgba(140, 0, 0, 0.28), transparent 65%), radial-gradient(60% 40% at 80% 100%, rgba(120, 0, 0, 0.18), transparent 70%), #060606; }
/* lights going out: the edges darken as you scroll down */
.theme-always::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: var(--dim, 0);
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.85) 100%); transition: opacity 400ms linear; }

/* the hero: the game's hallway behind a dark support ticket */
.theme-always .game-hero::before { inset: -1.6rem calc(50% - 50vw) -1rem; border-radius: 0; animation: always-flicker 11s steps(1) infinite;
  background: linear-gradient(90deg, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0.86) 38%, rgba(6, 6, 6, 0.97) 70%), linear-gradient(180deg, transparent 60%, #060606 100%), url("../img/always-hall.webp") 20% 50% / cover no-repeat; }
@keyframes always-flicker { 0%, 61%, 63.5%, 100% { opacity: 1; } 62% { opacity: 0.45; } 63% { opacity: 0.85; } }
.theme-always .game-hero .case { background: linear-gradient(180deg, rgba(22, 20, 20, 0.92), rgba(10, 9, 9, 0.95)); color: #e6e1d9; border: 1px solid #4a0d0b;
  box-shadow: 0 0 0 1px #1d0505, 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 80px rgba(214, 31, 31, 0.14); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.theme-always .game-hero .case::before, .theme-always .game-hero .case::after { background: linear-gradient(170deg, #1a1414, #0e0b0b); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7); }
.theme-always .game-hero .case .tab { background: var(--always-red); color: #fff; letter-spacing: 0.16em; }
.theme-always .game-hero .case .tab::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.55em; border-radius: 50%; background: #fff; vertical-align: 0.08em; animation: always-blink 1.4s ease-in-out infinite; }
.theme-always .game-hero h1.town { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #fff;
  font-size: clamp(2.5rem, 6.5vw, 4.2rem); line-height: 0.95; text-shadow: 0 0 28px rgba(214, 31, 31, 0.35); }
.theme-always .game-hero h1.town::after { content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.12em; border-radius: 50%; vertical-align: 0.12em;
  background: #ff2a1f; box-shadow: 0 0 10px 3px rgba(255, 42, 31, 0.75); animation: always-blink 2.6s ease-in-out infinite; }
@keyframes always-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.theme-always .game-hero .title { color: var(--always-red); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.95rem; }
.theme-always .game-credit { color: #a59f96; }
.theme-always .game-hero .case p:not(.town):not(.title) { color: #cfc9bf; }
.theme-always .game-hero .case .chip { border-color: #4b4545; color: #ddd6cc; background: rgba(255, 255, 255, 0.03); }
.theme-always .game-hero .case .chip.live { background: #1a1a1a; color: #ff6a5f; border-color: #3a1210; }
.theme-always .game-hero .case .chip.kind { background: var(--always-red); border-color: var(--always-red); color: #fff; }
.theme-always .game-hero .case .chip.rating { background: #fff; border-color: #fff; color: #0a0a0a; }
.theme-always .game-hero .case h2, .theme-always .game-hero .case h3, .theme-always .game-hero .case label { color: #f2ece4; }
.theme-always .game-hero .case .notify { border-top-color: #3a1210; }
.theme-always .narr-play { background: linear-gradient(180deg, #2a0b09, #140504); border-color: #6b0b0b; color: #fff; box-shadow: 0 0 0 1px #3a0806, 0 0 24px rgba(214, 31, 31, 0.25); }
.theme-always .narr-play svg { fill: #ff4a3f; }
.theme-always .narr-words { color: #b8b0a6; border-left: 3px solid var(--always-red); padding-left: 0.9rem; }

/* the body below: dark, with red where the gold was */
.theme-always .game-body .story p, .theme-always .game-body li span { color: #cfc9bf; }
.theme-always .game-body h2 { color: #f2ece4; }
.theme-always .game-body .eyebrow { color: #ff5a4f; }
.theme-always .gamecard { background-image: var(--grain), linear-gradient(180deg, #170a09, #0b0606); border-color: #4a0d0b; }
.theme-always .gamecard dt { color: #8f857a; }
.theme-always .gamecard dd { color: #e6e1d9; }
.theme-always .book-block { background: linear-gradient(180deg, #141111, #0b0909); border: 1px solid #4a0d0b; }
.theme-always .book-block h2, .theme-always .book-copy p, .theme-always .book-by, .theme-always .book-line { color: #e6e1d9; }
.theme-always .book-block .eyebrow { color: #ff5a4f; }
.theme-always .fiction { color: #8f857a; }
/* the next-games band turns red for this page */
.theme-always .next-band { color: #f2ece4; }
.theme-always .next-band::before { background: url("topo.svg") center / cover no-repeat, var(--grain), radial-gradient(120% 90% at 60% 40%, #a3141a, #5a060a 60%, #2a0306);
  background-blend-mode: soft-light, normal, normal; }
.theme-always .next-band h2 { color: #fff; text-shadow: none; }
.theme-always .next-band .eyebrow { color: #ffb3ad; }

/* the call timer: you are on the line with Tess for as long as the page is open */
.call-chip { position: fixed; z-index: 45; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem 0.55rem 0.7rem; border-radius: 999px; background: rgba(12, 10, 10, 0.88); border: 1px solid #4a0d0b; color: #e6e1d9;
  font: 700 0.78rem/1.1 var(--mono, monospace); letter-spacing: 0.06em; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translateY(150%); opacity: 0; transition: transform 500ms cubic-bezier(.3, 1.4, .5, 1), opacity 300ms ease; }
.call-chip.on { transform: none; opacity: 1; }
.call-chip i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #2fd06a; box-shadow: 0 0 8px rgba(47, 208, 106, 0.8); animation: always-blink 1.6s ease-in-out infinite; }
.call-chip span { color: #a59f96; font-weight: 400; }
.call-chip b { color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .call-chip span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .theme-always .game-hero::before, .theme-always .game-hero .case .tab::before, .theme-always .game-hero h1.town::after, .call-chip i { animation: none !important; }
}
/* ALWAYS theme, tuning: let the hallway show through the ticket, and the sign-up button goes red */
.theme-always .game-hero::before { background: linear-gradient(90deg, rgba(6, 6, 6, 0.2) 0%, rgba(6, 6, 6, 0.55) 45%, rgba(6, 6, 6, 0.8) 100%), linear-gradient(180deg, transparent 70%, #060606 100%), url("../img/always-hall.webp") 30% 45% / cover no-repeat; }
.theme-always .game-hero .case { background: linear-gradient(180deg, rgba(16, 13, 13, 0.74), rgba(8, 7, 7, 0.86)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.theme-always .game-hero .case::before, .theme-always .game-hero .case::after { opacity: 0.55; }
.theme-always .btn.gold { color: #fff; border-color: #6b0b0b; background: linear-gradient(180deg, #e8392f, #b3160f 60%, #8a0f0a); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 18px rgba(179, 22, 15, 0.45); }
.theme-always .btn.gold::after { filter: brightness(10); }

/* ---------- Game hero banner (2026-10-17): the game's art full width with its title, details below ---------- */
.game-banner { position: relative; isolation: isolate; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); min-height: min(86vh, 52rem); min-height: min(86svh, 52rem);
  display: grid; align-items: end; padding: clamp(5rem, 14vh, 9rem) max(1.2rem, calc(50vw - 36rem)) clamp(3.5rem, 9vh, 6rem); margin-bottom: 1.5rem; }
.game-banner .gb-art { position: absolute; inset: -6% 0 0; z-index: -2; background-size: cover; background-position: var(--pos, 50% 45%); transform: scale(1.06); will-change: transform; }
.game-banner::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0.1) 35%, rgba(6, 6, 6, 0.55) 70%, #060606 100%), linear-gradient(90deg, rgba(6, 6, 6, 0.75) 0%, rgba(6, 6, 6, 0) 65%); }
.gb-copy { max-width: 44rem; display: flex; flex-direction: column; gap: 0.8rem; }
.gb-eyebrow { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ff6a5f; }
.game-banner h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 0.92;
  font-size: clamp(3rem, 10vw, 7.5rem); letter-spacing: 0.01em; text-shadow: 0 0 40px rgba(214, 31, 31, 0.45), 0 4px 20px rgba(0, 0, 0, 0.7); }
.game-banner h1 .w { display: inline-block; white-space: nowrap; }
.game-banner h1 .ch { display: inline-block; }
.fx .game-banner h1 .ch { animation: ch-drop 760ms cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: calc(250ms + var(--i) * 45ms); }
.gb-sub { margin: 0; font-family: var(--mono); font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: #ff4a3f; }
.gb-tag { margin: 0.3rem 0 0; font-size: clamp(1.1rem, 2.3vw, 1.45rem); line-height: 1.4; color: #efe9e1; max-width: 34rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.gb-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.6rem; }
.gb-down { position: absolute; left: 50%; bottom: 1.2rem; width: 1.6rem; height: 2.6rem; margin-left: -0.8rem; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 1rem; }
.gb-down span { position: absolute; left: 50%; top: 0.45rem; width: 4px; height: 0.55rem; margin-left: -2px; border-radius: 2px; background: #fff; animation: gb-wheel 1.8s ease-in-out infinite; }
@keyframes gb-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(0.8rem); opacity: 0; } 100% { opacity: 0; } }
.has-banner .crumbs { margin-top: 0; }
/* with a banner, the card's headline steps down: the title already leads the page */
.has-banner .game-hero h2.town { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.theme-always.has-banner .game-hero::before { background: radial-gradient(42% 58% at 24% 52%, rgba(214, 31, 31, 0.18), transparent 72%); animation: none; }
.theme-always .game-banner h1::after { content: ""; display: inline-block; width: 0.14em; height: 0.14em; margin-left: 0.1em; border-radius: 50%; vertical-align: 0.1em;
  background: #ff2a1f; box-shadow: 0 0 14px 4px rgba(255, 42, 31, 0.75); animation: always-blink 2.6s ease-in-out infinite; }
.theme-always .has-banner .game-hero h2.town::after, .theme-always.has-banner .game-hero h2.town::after { content: none; }
.theme-always .game-banner .gb-art { animation: always-flicker 11s steps(1) infinite; }
@media (max-width: 600px) { .game-banner .gb-art { background-position: 42% 45%; } .game-banner::after { background: linear-gradient(180deg, rgba(6, 6, 6, 0.5) 0%, rgba(6, 6, 6, 0.2) 30%, rgba(6, 6, 6, 0.75) 65%, #060606 100%); } }
@media (prefers-reduced-motion: reduce) { .gb-down span, .theme-always .game-banner .gb-art, .theme-always .game-banner h1::after { animation: none !important; } .game-banner .gb-art { transform: none !important; } }
.theme-always .game-hero h2.town { font-family: Georgia, "Times New Roman", serif; font-weight: 700; text-transform: uppercase; color: #fff; letter-spacing: 0.02em; line-height: 1; }

/* ==========================================================================
   Game page themes (2026-10-17): each game wears its own look over the same page.
   A theme sets the --t-* colours below; these shared rules do the rest. (ALWAYS has its own block above.)
   ========================================================================== */
.themed { color: var(--t-text); --accent: var(--t-accent); --accent-ink: var(--t-accent-ink); --accent-paper: var(--t-accent-deep); }
.themed::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--t-glow-bg, none), var(--t-bg); }
.themed .crumbs, .themed .crumbs a { color: var(--t-muted); }

/* the hero banner */
.themed .game-banner::after { background: linear-gradient(180deg, var(--t-shade-top, rgba(0, 0, 0, 0.5)) 0%, rgba(0, 0, 0, 0.08) 38%, var(--t-shade-mid, rgba(0, 0, 0, 0.5)) 72%, var(--t-bg) 100%),
  linear-gradient(90deg, var(--t-shade-left, rgba(0, 0, 0, 0.7)) 0%, rgba(0, 0, 0, 0) 62%); }
.themed .gb-eyebrow { color: var(--t-accent-ink); }
.themed .game-banner h1 { font-family: var(--t-title-font, var(--display)); font-weight: var(--t-title-weight, 900); color: #fff; text-transform: uppercase;
  text-shadow: 0 0 40px var(--t-glow), 0 4px 22px rgba(0, 0, 0, 0.75); }
.themed .gb-sub { color: var(--t-accent-ink); }
.themed .gb-tag { color: #f4efe6; }
@media (max-width: 600px) { .themed .game-banner::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.7) 66%, var(--t-bg) 100%); } }

/* the details card */
.themed.has-banner .game-hero::before { background: radial-gradient(42% 58% at 24% 52%, var(--t-glow), transparent 72%); }
.themed .game-hero .case { background: var(--t-card); color: var(--t-text); border: 1px solid var(--t-border); box-shadow: 0 0 0 1px var(--t-border-deep, transparent), 0 26px 60px var(--t-drop, rgba(0, 0, 0, 0.6)); }
.themed .game-hero .case::before, .themed .game-hero .case::after { background: var(--t-card-stack, var(--t-card)); opacity: 0.6; }
.themed .game-hero .case .tab { background: var(--t-tab-bg, var(--t-accent)); color: var(--t-on-accent); letter-spacing: 0.14em; }
.themed .game-hero h2.town { font-family: var(--t-title-font, var(--display)); color: var(--t-title); text-transform: uppercase; }
.themed .game-hero .title { color: var(--t-accent-ink); letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.95rem; }
.themed .game-credit, .themed .game-hero .case p:not(.town):not(.title), .themed .narr-words { color: var(--t-muted); }
.themed .game-hero .case .chip { border-color: var(--t-border); color: var(--t-text); background: transparent; }
.themed .game-hero .case .chip.live { background: var(--t-chip-dark, #15181a); color: var(--t-accent-ink); border-color: var(--t-chip-dark, #15181a); }
.themed .game-hero .case .chip.kind { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); }
.themed .game-hero .case h2, .themed .game-hero .case h3, .themed .game-hero .case label { color: var(--t-title); }
.themed .btn.gold { color: var(--t-on-accent); border-color: var(--t-accent-deep); background: linear-gradient(180deg, var(--t-btn-top), var(--t-accent) 55%, var(--t-accent-deep)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 6px 18px var(--t-glow); }
.themed .narr-play { background: var(--t-chip-dark, #15181a); border-color: var(--t-accent-deep); color: #fff; box-shadow: 0 0 22px var(--t-glow); }
.themed .narr-play svg { fill: var(--t-accent-ink); }
.themed .narr-words { border-left: 3px solid var(--t-accent); padding-left: 0.9rem; }

/* the story and the game card */
.themed .game-body .story p, .themed .game-body li span { color: var(--t-text); }
.themed .game-body h2, .themed .game-body li b { color: var(--t-title); }
.themed .game-body .eyebrow { color: var(--t-accent-ink); }
.game-page.themed .gamecard { background-image: var(--grain), var(--t-card-grad, linear-gradient(180deg, var(--t-card), var(--t-card))); border-color: var(--t-border); }
.themed .gamecard h3 { color: var(--t-accent-ink); }
.themed .gamecard dt { color: var(--t-muted); }
.themed .gamecard dd { color: var(--t-text); }
.themed .fiction { color: var(--t-muted); }

/* the band of other games */
.themed .next-band::before { background: url("topo.svg") center / cover no-repeat, var(--grain), var(--t-band); background-blend-mode: soft-light, normal, normal; }
.themed .next-band h2 { color: var(--t-band-title, #fff); text-shadow: none; }
.themed .next-band .eyebrow { color: var(--t-band-eyebrow, rgba(255, 255, 255, 0.75)); }

/* light themes (the picture-book trails): dark words on paper, the header and footer stay as they are */
.themed-light .crumbs, .themed-light .crumbs a { color: var(--t-muted); }
.themed-light .game-hero .case .chip.live { color: #fff; }
.themed-light .notify input[type="email"] { background: #fff; color: #222; border-color: var(--t-border); }
.themed-light .notify .check, .themed-light .notify label, .themed-light .notify p { color: var(--t-muted); }
.themed-light .game-body .puzzles span { color: var(--t-muted); }

/* ---------- the looks ---------- */
/* The Keeper's Last Light and The Keeper's Log: 1942 blackout navy, one lamp-gold light, a lighthouse beam across the hero */
.theme-keeper, .theme-keeperslog { --t-bg: #080d15; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(232, 177, 74, 0.12), transparent 65%); --t-text: #dbe3ec; --t-muted: #95a3b5; --t-title: #f1f4f8;
  --t-accent: #e2a93f; --t-accent-ink: #ffd27a; --t-accent-deep: #8a5d14; --t-btn-top: #ffe19a; --t-on-accent: #1a1204; --t-glow: rgba(232, 177, 74, 0.28);
  --t-card: rgba(13, 20, 31, 0.86); --t-card-stack: #121b29; --t-border: #2b3c55; --t-chip-dark: #0d141f; --t-card-grad: linear-gradient(180deg, #111b2a, #0a111b);
  --t-band: radial-gradient(120% 90% at 60% 40%, #2a4466, #142235 60%, #0a121d); --t-band-eyebrow: #ffd27a; --t-tab-bg: #e2a93f; }
.theme-keeper .game-banner::before, .theme-keeperslog .game-banner::before { content: ""; position: absolute; z-index: -1; left: 72%; top: 38%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 226, 150, 0.16) 8deg, transparent 18deg, transparent 360deg); animation: beam-sweep 9s linear infinite; mix-blend-mode: screen; }
.theme-keeperslog .game-banner::before { left: 60%; top: 30%; animation-duration: 13s; opacity: 0.6; }
@keyframes beam-sweep { to { transform: rotate(360deg); } }

/* The Wharf Job: harbour night, teal water and lantern amber */
.theme-wharf { --t-bg: #061316; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(242, 163, 58, 0.14), transparent 65%); --t-text: #dceae7; --t-muted: #8fb0ab; --t-title: #f3f8f6;
  --t-accent: #f0a23a; --t-accent-ink: #ffc56b; --t-accent-deep: #8e5810; --t-btn-top: #ffd88f; --t-on-accent: #1c1003; --t-glow: rgba(240, 162, 58, 0.28);
  --t-card: rgba(8, 26, 30, 0.86); --t-card-stack: #0c2226; --t-border: #1f4b51; --t-chip-dark: #071a1d; --t-card-grad: linear-gradient(180deg, #0c2428, #061417);
  --t-band: radial-gradient(120% 90% at 60% 40%, #1d6b70, #0e3a3e 60%, #061b1e); --t-band-eyebrow: #ffc56b; --t-tab-bg: #f0a23a; }

/* Murder at the Markets: fairy lights under the figs, crime-scene tape for the tab */
.theme-markets { --t-bg: #091310; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(244, 196, 106, 0.12), transparent 65%); --t-text: #e2ebe4; --t-muted: #9cb3a3; --t-title: #f6f2e6;
  --t-accent: #f2c14e; --t-accent-ink: #ffd97a; --t-accent-deep: #8a6812; --t-btn-top: #ffe59a; --t-on-accent: #16120a; --t-glow: rgba(242, 193, 78, 0.26);
  --t-card: rgba(12, 24, 19, 0.86); --t-card-stack: #10201a; --t-border: #2f4d3b; --t-chip-dark: #0b1712; --t-card-grad: linear-gradient(180deg, #11211a, #09140f);
  --t-band: radial-gradient(120% 90% at 60% 40%, #2c5a3e, #163322 60%, #0a1a11); --t-band-eyebrow: #ffd97a;
  --t-tab-bg: repeating-linear-gradient(-45deg, #f2c14e 0 14px, #141414 14px 28px); --t-on-accent: #141414; }
.theme-markets .game-hero .case .tab { color: #141414; text-shadow: 0 0 6px #f2c14e, 0 0 3px #f2c14e; font-weight: 700; }
.theme-markets .game-banner::before { content: ""; position: absolute; inset: 0 0 45% 30%; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.9) 0 2px, transparent 3px) 0 0 / 46px 38px, radial-gradient(circle, rgba(255, 200, 110, 0.7) 0 1.5px, transparent 2.5px) 23px 19px / 46px 38px;
  -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); animation: twinkle 3.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.85; } }

/* Cane line skin: ember dusk, sepia, drifting smoke */
.theme-canetrain { --t-bg: #110b07; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(224, 136, 58, 0.14), transparent 65%); --t-text: #efe2d2; --t-muted: #b39a82; --t-title: #fbf2e6;
  --t-accent: #df8638; --t-accent-ink: #ffb070; --t-accent-deep: #84440f; --t-btn-top: #ffc690; --t-on-accent: #1c0d03; --t-glow: rgba(223, 134, 56, 0.28);
  --t-card: rgba(30, 19, 12, 0.86); --t-card-stack: #24170e; --t-border: #5a3a22; --t-chip-dark: #1a110a; --t-card-grad: linear-gradient(180deg, #24170e, #140d08);
  --t-band: radial-gradient(120% 90% at 60% 40%, #8a4a1c, #4a250d 60%, #200f05); --t-band-eyebrow: #ffcf9e; --t-title-font: Georgia, "Times New Roman", serif; --t-title-weight: 700; }
.theme-canetrain .game-banner::before { content: ""; position: absolute; inset: -10% -10% 30% 40%; z-index: -1; pointer-events: none; opacity: 0.5;
  background: radial-gradient(40% 30% at 30% 40%, rgba(220, 205, 190, 0.35), transparent 70%), radial-gradient(35% 25% at 65% 25%, rgba(220, 205, 190, 0.25), transparent 70%); animation: smoke 14s ease-in-out infinite alternate; }
@keyframes smoke { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, -6%, 0) scale(1.15); } }

/* Range skin: mist greys, one warm window, fog rolling along the bottom of the hero */
.theme-fog { --t-bg: #0b1011; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(230, 179, 90, 0.08), transparent 65%); --t-text: #dde5e2; --t-muted: #97a6a2; --t-title: #f0f4f2;
  --t-accent: #d9a849; --t-accent-ink: #f0c877; --t-accent-deep: #7d5c18; --t-btn-top: #f6d891; --t-on-accent: #15110a; --t-glow: rgba(217, 168, 73, 0.24);
  --t-card: rgba(17, 23, 24, 0.84); --t-card-stack: #161e1f; --t-border: #3a4846; --t-chip-dark: #0e1415; --t-card-grad: linear-gradient(180deg, #172021, #0d1314);
  --t-band: radial-gradient(120% 90% at 60% 40%, #4a5b58, #283331 60%, #121817); --t-band-eyebrow: #f0c877; --t-title-font: Georgia, "Times New Roman", serif; --t-title-weight: 700; }
.theme-fog .game-banner::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 55%; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 60% at 20% 70%, rgba(200, 212, 208, 0.22), transparent 70%), radial-gradient(35% 60% at 60% 80%, rgba(200, 212, 208, 0.18), transparent 70%), radial-gradient(30% 50% at 95% 70%, rgba(200, 212, 208, 0.2), transparent 70%);
  animation: fog-roll 18s ease-in-out infinite alternate; }
@keyframes fog-roll { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -3%, 0); } }

/* Falls skin: rainforest green and gold light */
.theme-waterfall { --t-bg: #06110a; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(240, 210, 110, 0.12), transparent 65%); --t-text: #e0eee4; --t-muted: #98b6a2; --t-title: #f2f9f4;
  --t-accent: #6fcf97; --t-accent-ink: #a4efc2; --t-accent-deep: #1e7a48; --t-btn-top: #b9f3cf; --t-on-accent: #04170c; --t-glow: rgba(111, 207, 151, 0.26);
  --t-card: rgba(9, 27, 16, 0.85); --t-card-stack: #0d2416; --t-border: #245236; --t-chip-dark: #08180e; --t-card-grad: linear-gradient(180deg, #0e2617, #07150c);
  --t-band: radial-gradient(120% 90% at 60% 40%, #2f7a4c, #164326 60%, #082012); --t-band-eyebrow: #c9f5d9; }

/* Wally's Tall Tales: a sepia family album */
.theme-wally { --t-bg: #140f09; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(226, 181, 106, 0.12), transparent 65%); --t-text: #efe5d3; --t-muted: #b3a185; --t-title: #fbf3e4;
  --t-accent: #d8a85a; --t-accent-ink: #f2cc8a; --t-accent-deep: #7c5a22; --t-btn-top: #f5d9a4; --t-on-accent: #1d1406; --t-glow: rgba(216, 168, 90, 0.26);
  --t-card: rgba(32, 24, 15, 0.86); --t-card-stack: #271d12; --t-border: #6a5233; --t-chip-dark: #1a130a; --t-card-grad: linear-gradient(180deg, #281e12, #17110a);
  --t-band: radial-gradient(120% 90% at 60% 40%, #8b6a35, #4f3a1a 60%, #241a0b); --t-band-eyebrow: #f6dfb2; --t-title-font: Georgia, "Times New Roman", serif; --t-title-weight: 700; }

/* Pip and the Pelican: a sunny picture book, paper and teal, with sketch pages fluttering over the hero */
.theme-pip { --t-bg: #fbf5e8; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(42, 157, 143, 0.12), transparent 65%); --t-text: #2c2a26; --t-muted: #6b645a; --t-title: #1f3b3a;
  --t-accent: #2a9d8f; --t-accent-ink: #1f7f73; --t-accent-deep: #17665d; --t-btn-top: #5fc6b8; --t-on-accent: #fff; --t-glow: rgba(42, 157, 143, 0.22);
  --t-card: #fffdf6; --t-card-stack: #f3e9d2; --t-border: #e2d2ae; --t-chip-dark: #1f3b3a; --t-card-grad: linear-gradient(180deg, #fffaf0, #f6eedb); --t-drop: rgba(120, 90, 40, 0.18);
  --t-band: radial-gradient(120% 90% at 60% 40%, #3fb6a6, #1f8174 60%, #125249); --t-band-eyebrow: #fff1c9; --t-tab-bg: #ef7b63;
  --t-title-font: "Atkinson Hyperlegible", "Segoe UI", sans-serif; --t-title-weight: 700; --t-shade-top: rgba(20, 40, 40, 0.35); --t-shade-mid: rgba(20, 40, 40, 0.35); --t-shade-left: rgba(15, 45, 45, 0.6); }
.theme-pip .game-banner h1 { text-transform: none; letter-spacing: -0.01em; }
.theme-pip .game-banner::before { content: ""; position: absolute; inset: 0 0 30% 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(#fff, #fff) 12% 20% / 26px 34px no-repeat, linear-gradient(#fff, #fff) 46% 8% / 22px 30px no-repeat, linear-gradient(#fff, #fff) 72% 30% / 28px 36px no-repeat, linear-gradient(#fff, #fff) 30% 52% / 20px 26px no-repeat;
  opacity: 0.85; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); animation: pages-flutter 7s ease-in-out infinite alternate; }
@keyframes pages-flutter { from { transform: translate3d(0, 0, 0) rotate(-3deg); } to { transform: translate3d(-4%, -6%, 0) rotate(4deg); } }

/* The Nambour Art Trail: warm concrete, spray-paint orange and sunny yellow */
.theme-ro { --t-bg: #f4efe7; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(242, 107, 29, 0.1), transparent 65%); --t-text: #2a2622; --t-muted: #6c6258; --t-title: #2a2622;
  --t-accent: #f26b1d; --t-accent-ink: #cf5410; --t-accent-deep: #a8430b; --t-btn-top: #ff9a55; --t-on-accent: #fff; --t-glow: rgba(242, 107, 29, 0.2);
  --t-card: #fffdf9; --t-card-stack: #ece3d4; --t-border: #dccdb5; --t-chip-dark: #2a2622; --t-card-grad: linear-gradient(180deg, #fffaf2, #f2eadc); --t-drop: rgba(90, 60, 30, 0.18);
  --t-band: radial-gradient(120% 90% at 60% 40%, #f5a524, #e2661c 60%, #a8430b); --t-band-eyebrow: #fff3c4; --t-tab-bg: #f2c21d; --t-shade-top: rgba(30, 20, 10, 0.3); --t-shade-mid: rgba(30, 20, 10, 0.35); --t-shade-left: rgba(30, 20, 10, 0.55); }
.theme-ro .game-hero .case .tab { color: #2a2622; }

@media (prefers-reduced-motion: reduce) {
  .themed .game-banner::before { animation: none !important; }
}

/* ---------- Phones: game cards two across (Scott, 2026-10-17) ---------- */
@media (max-width: 559px) {
  .minis, .grid-cases { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .case.mini { padding: 0.75rem 0.6rem 0.7rem; gap: 0.3rem; margin-top: 1.3rem; }
  .case.mini .tab { left: 0.5rem; top: -1.3rem; font-size: 0.6rem; padding: 0.25rem 0.5rem 0.2rem; letter-spacing: 0.06em; }
  .case.mini::after { right: 0.7rem; height: 1.8rem; }
  .case.mini .town { font-size: 1.35rem; }
  .case.mini .title { font-size: 0.78rem; line-height: 1.3; }
  .case.mini .price-line { font-size: 0.72rem; line-height: 1.5; }
  .case.mini > p:not(.price-line) { display: none; }   /* the teaser waits for the game page */
  .case.mini .more { font-size: 0.78rem; }
  .case.mini .case-stamp { display: none; }
  .mini .cover-badge { top: 4px; left: 4px; padding: 0.2rem 0.4rem 0.2rem 0.25rem; gap: 0.3rem; }
  .mini .cb-icon { width: 1.3rem; height: 1.3rem; }
  .mini .cb-text b { font-size: 0.5rem; }
  .mini .cb-text i { font-size: 0.68rem; }
}

/* ---------- Card prices as a sale tag (Scott, 2026-10-17): $5 in red, $10 struck through ---------- */
.case .price-line .pl-now { font-family: var(--display); font-weight: 900; font-size: 1.9rem; line-height: 1; color: #c8271d; }
.case .price-line.free .pl-now { color: #1f8f5a; }
.case .price-line .pl-was { font-family: var(--display-plain); font-weight: 800; font-size: 1.15rem; color: #7d7462; text-decoration-thickness: 2px; text-decoration-color: #c8271d; }
.case .price-line .pl-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b5a3a; }
@media (max-width: 559px) {
  .case.mini .price-line .pl-now { font-size: 1.55rem; }
  .case.mini .price-line .pl-was { font-size: 0.95rem; }
  .case.mini .price-line .pl-tag { font-size: 0.6rem; flex-basis: 100%; }
}

/* ---------- Hero banner: title on the right when the art's subject is on the left (2026-10-17) ---------- */
.game-banner.gb-right { justify-items: end; }
.game-banner.gb-right .gb-copy { max-width: 36rem; }
.game-banner.gb-right::after, .themed .game-banner.gb-right::after { background: linear-gradient(180deg, var(--t-shade-top, rgba(0, 0, 0, 0.45)) 0%, rgba(0, 0, 0, 0.05) 38%, var(--t-shade-mid, rgba(0, 0, 0, 0.45)) 72%, var(--t-bg, #060606) 100%),
  linear-gradient(270deg, var(--t-shade-left, rgba(0, 0, 0, 0.7)) 0%, rgba(0, 0, 0, 0) 60%); }
@media (max-width: 600px) {
  .game-banner .gb-art { background-position: var(--pos-m, var(--pos, 42% 45%)); }
  .game-banner.gb-right { justify-items: start; }
  .game-banner.gb-right::after, .themed .game-banner.gb-right::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.7) 66%, var(--t-bg, #060606) 100%); }
}
/* light themes: the words over the art stay light, with a shadow, so they read on bright skies and water */
.themed-light .gb-eyebrow, .themed-light .gb-sub { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.45); }
.themed-light .gb-tag { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.5); }
/* Pip: the art has its own flying pages, so the extra paper squares go (they read as stray boxes) */
.theme-pip .game-banner::before { content: none; }
/* Paper cards inside a themed story (the suspects) keep paper-coloured ink */
.themed .game-body .suspect p, .theme-always .game-body .suspect p { color: var(--paper-ink, #2b2416); }
.themed .game-body .suspect b, .theme-always .game-body .suspect b { color: var(--paper-ink, #2b2416); }

/* ---------- Home games: a swipeable row on phones (Scott, 2026-10-18: "as long as its obvious to swipe") ----------
   The cue is threefold: the next card peeks in from the right, a "Swipe for more games" hint with a moving arrow, and dots. */
.swipe-hint, .swipe-dots { display: none; }
@media (max-width: 559px) {
  .minis.swipe { display: flex; gap: 0.9rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 1rem;
    margin: 0 calc(-1 * var(--gutter, 1rem)); padding: 1.6rem var(--gutter, 1rem) 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .minis.swipe::-webkit-scrollbar { display: none; }
  .minis.swipe > .case.mini { flex: 0 0 74%; scroll-snap-align: center; margin-top: 0; }
  .minis.swipe > .case.mini > p:not(.price-line) { display: block; font-size: 0.85rem; }
  .minis.swipe .case.mini .town { font-size: 1.7rem; }
  .minis.swipe .case.mini .title { font-size: 0.85rem; }
  .swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin: 0.4rem 0 -0.6rem; font-family: var(--mono); font-weight: 700;
    font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink, #f0c25a); transition: opacity 400ms ease; }
  .swipe-hint i { position: relative; width: 2.2rem; height: 2px; background: currentColor; animation: swipe-nudge 1.4s ease-in-out infinite; }
  .swipe-hint i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
  .swipe-wrap.swiped .swipe-hint { opacity: 0; }
  .swipe-dots { display: flex; justify-content: center; gap: 0.45rem; margin: 0.2rem 0 1rem; }
  .swipe-dots b { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(240, 194, 90, 0.3); transition: background 200ms ease, transform 200ms ease; }
  .swipe-dots b.on { background: #f0c25a; transform: scale(1.35); }
}
@keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint i { animation: none; } }
@media (max-width: 559px) {
  .cases, .swipe-wrap { min-width: 0; }
  .swipe-wrap { max-width: 100%; }
  .minis.swipe { width: 100vw; max-width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 1.6rem 1rem 1rem; box-sizing: border-box; }
}

/* ---------- Near me and Share (2026-10-18) ---------- */
.near-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; }
.near-me svg, .share-btn svg { width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: -0.15em; fill: currentColor; }
.share-btn svg { fill: none; }
.near-out { font-size: 0.85rem; }
.town-chip .dist { display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 0.25rem; font-style: normal; font-size: 0.72rem; font-weight: 700;
  background: rgba(240, 194, 90, 0.18); color: #f0c25a; vertical-align: 0.1em; }
.town-chip.nearest { box-shadow: 0 0 0 2px #f0c25a, 0 0 18px rgba(240, 194, 90, 0.35); }
.share-done { position: fixed; z-index: 60; left: 50%; bottom: 5rem; transform: translateX(-50%); padding: 0.6rem 1rem; border-radius: 999px; background: #121516; color: #f0c25a;
  border: 1px solid #f0c25a; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }

/* ---------- Daily cipher tag (2026-10-18) ---------- */
.cipher .daily-tag { margin: 0 0 0.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cipher .daily-tag b { color: #7a3d14; }
.cipher .daily-tag .dt-done { padding: 0.05rem 0.45rem; border-radius: 999px; background: #1f8f5a; color: #fff; font-weight: 700; }
.cipher .daily-tag .dt-streak { padding: 0.05rem 0.45rem; border-radius: 999px; background: #2a2f31; color: #f0c25a; font-weight: 700; }
.cipher .win-share { font: inherit; cursor: pointer; }

/* ---------- Gift cards (2026-10-18) ---------- */
.gift-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 860px) { .gift-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 860px) { .gift-preview { position: sticky; top: 5.5rem; } }
.giftcard { position: relative; aspect-ratio: 1.586; max-width: 30rem; margin: 0 auto; padding: 1.3rem 1.4rem; border-radius: 1rem;
  display: flex; flex-direction: column; color: #ece4d2; background: radial-gradient(120% 90% at 85% 0%, #3a3320 0%, transparent 55%), linear-gradient(150deg, #1b1f20, #0e1112 70%);
  border: 1.5px solid rgba(227, 167, 47, 0.75); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 4px rgba(227, 167, 47, 0.08); }
.giftcard > * { flex-shrink: 0; position: relative; }
.giftcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 236, 190, 0.09) 48%, transparent 60%); }
.giftcard p { margin: 0; }
.gc-top { display: flex; align-items: center; gap: 0.5rem; }
.gc-pin { width: 1.4rem; height: 1.75rem; fill: var(--gold); }
.gc-brand { font-family: var(--display, inherit); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.95rem; }
.gc-eyebrow { margin-top: auto !important; padding-top: 0.8rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.gc-amount { font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--gold-ink); }
.gc-to { font-weight: 700; min-height: 0; }
.gc-msg { margin-top: 0.2rem !important; font-size: 0.8rem; line-height: 1.35; color: #c9c0ac; font-style: italic; overflow-wrap: anywhere; }
.gc-to:empty, .gc-msg:empty { display: none; }
.gc-code { margin-top: 0.5rem !important; display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--mono); }
.gc-code span { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9a927f; }
.gc-code b { font-size: 1.05rem; letter-spacing: 0.12em; }
.gc-how { margin-top: 0.3rem !important; font-size: 0.68rem; color: #9a927f; }
.gift-form { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.6rem 1.3rem; }
.gift-form h2 { margin: 0; padding-right: 1.5rem; font-size: clamp(1.4rem, 5vw, 1.9rem); }
.gift-form .field textarea { min-height: 5.5rem; }
.gift-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.gift-pick input { position: absolute; opacity: 0; pointer-events: none; }
.gift-pick span { display: grid; place-items: center; min-height: 3.6rem; border-radius: 0.6rem; border: 2px solid var(--paper-line, #b9a578); font-size: 1.4rem; font-weight: 800; cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s; }
.gift-pick input:checked + span { background: #1b1f20; color: var(--gold-ink); border-color: #1b1f20; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); }
.gift-pick input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.gift-form .small-print { margin: 0; font-size: 0.82rem; color: var(--muted); }
.gift-form .out[data-tone="bad"] { color: #9b2c1c; font-weight: 700; }
.gt-actions .btn { margin: 0 0.4rem 0.4rem 0; }
.gift-print { padding-top: 2rem; padding-bottom: 2rem; }
.gift-print .gift-preview { position: static; }
.gift-print .no-print { text-align: center; margin-top: 1.5rem; }
@media print {
  body { background: #fff !important; }
  header.top, footer, .mnav, .skip-link, .no-print, .fx-snd, .fin-launch { display: none !important; }
  .gift-print { padding: 0; }
  .giftcard { width: 85.6mm; max-width: none; padding: 5mm; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- Footer: text links in columns, small legal line (Scott, 2026-10-18) ---------- */
footer .foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.5rem; }
@media (min-width: 720px) { footer .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); align-items: start; } footer .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fcol-h { margin: 0 0 0.55rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.fcol a { display: inline-block; padding: 0.3rem 0; color: #d9d1bf; text-decoration: none; font-size: 0.95rem; }
.fcol a:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.fcol a[aria-current="page"] { color: var(--gold-ink); }
.foot-base { grid-column: 1 / -1; margin: 0.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid #3a4042; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; align-items: center;
  font-size: 0.8rem; color: #8d8676; }
.foot-base span { margin-right: auto; }
.foot-base a { color: #a9a190; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(169, 161, 144, 0.4); padding: 0.3rem 0; }
.foot-base a:hover, .foot-base a[aria-current="page"] { color: var(--gold-ink); }
@media (max-width: 480px) { .foot-base span { flex-basis: 100%; } }

/* ---------- Game leaderboards on theme (Scott, 2026-10-18) ---------- */
.theme-always { --t-text: #e6e1d9; --t-muted: #a39b91; --t-title: #fff; --t-accent: #d61f1f; --t-accent-ink: #ff5a4f; --t-accent-deep: #6b0b0b; --t-on-accent: #fff;
  --t-btn-top: #ff6b5f; --t-glow: rgba(214, 31, 31, 0.3); --t-border: #4a0d0b; --t-card-grad: linear-gradient(180deg, #171313, #0b0909); --t-screen: #060505; }
.board-banner { min-height: min(58vh, 34rem); min-height: min(58svh, 34rem); }
.board-page.has-banner .crumbs { margin-top: 1rem; }
:is(.themed, .theme-always) .boards .eyebrow { color: var(--t-accent-ink); }
:is(.themed, .theme-always) .boards h2 { color: var(--t-title); font-family: var(--t-title-font, var(--display)); font-weight: var(--t-title-weight, 900); }
:is(.themed, .theme-always) .rules li { color: var(--t-muted); }
:is(.themed, .theme-always) .rules li b { color: var(--t-title); }
:is(.themed, .theme-always) .rules svg { color: var(--t-accent-ink); }
:is(.themed, .theme-always) .board { background: var(--t-card-grad, var(--t-card)); border-color: var(--t-border); box-shadow: 0 0 0 1px var(--t-border), 0 24px 54px var(--t-drop, rgba(0, 0, 0, 0.6)); }
:is(.themed, .theme-always) .board::before { opacity: 0.25; }
:is(.themed, .theme-always) .board-tabs button { color: var(--t-text); border-color: var(--t-border); background: transparent; }
:is(.themed, .theme-always) .board-tabs button[aria-selected="true"] { color: var(--t-on-accent); border-color: var(--t-accent-deep); background: linear-gradient(180deg, var(--t-btn-top), var(--t-accent) 60%, var(--t-accent-deep)); }
:is(.themed, .theme-always) .board .screen { background: var(--t-screen, rgba(0, 0, 0, 0.42)); border-color: var(--t-border); }
:is(.themed, .theme-always) .board th { color: var(--t-muted); }
:is(.themed, .theme-always) .board td { color: var(--t-text); border-bottom-color: rgba(255, 255, 255, 0.06); }
:is(.themed, .theme-always) .board td.n, :is(.themed, .theme-always) .board td.rank { color: var(--t-accent-ink); text-shadow: 0 0 10px var(--t-glow); }
:is(.themed, .theme-always) .board td.who, :is(.themed, .theme-always) .board .cap { color: var(--t-muted); }
:is(.themed, .theme-always) .board tr.you td { color: var(--t-accent-ink); }
:is(.themed, .theme-always) .board .house-tag { color: var(--t-on-accent); background: var(--t-accent); }
.board-page:is(.themed, .theme-always) .stop-mark svg { filter: drop-shadow(0 0 8px var(--t-glow)); }
.themed-light .board .screen { background: #fff; box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.08); }
.themed-light .board td { border-bottom-color: rgba(0, 0, 0, 0.07); }
.themed-light .board td.n, .themed-light .board td.rank { text-shadow: none; }
.themed-light .board-tabs button { color: var(--t-text); }
.themed-light .board .beat-tag { color: #1f7a3d; border-color: #7cbf8f; }
.themed-light .boards h2, .themed-light.board-page .stop h2 { color: var(--t-title); text-shadow: none; }
.board-page:is(.themed, .theme-always) .stop h2 { color: var(--t-title); font-family: var(--t-title-font, var(--display)); }
:is(.themed, .theme-always) .board-periods button { color: var(--t-text); border-color: var(--t-border); }
:is(.themed, .theme-always) .board-periods button:hover { border-color: var(--t-accent); }
:is(.themed, .theme-always) .board-periods button[aria-pressed="true"] { color: var(--t-on-accent); border-color: var(--t-accent-deep); background: linear-gradient(180deg, var(--t-btn-top), var(--t-accent) 60%, var(--t-accent-deep)); }

/* ---------- About: the GamesMaster's classified file (2026-10-18) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dossier { padding: 1.6rem 1.3rem 1.4rem; max-width: 46rem; }
.dz-head { position: relative; padding-right: 7rem; border-bottom: 2px dashed var(--paper-line, #b9a578); padding-bottom: 0.8rem; }
.dz-ref { margin: 0 0 0.3rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-muted, #6b5f48); }
.dz-head h2 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.2rem); text-transform: uppercase; }
.dz-stamp { top: 0.2rem; right: 0; font-size: 1rem; }
.dz-how { margin: 0.8rem 0 0.4rem; font-family: var(--mono); font-size: 0.8rem; color: var(--paper-muted, #6b5f48); }
.dz-list { margin: 0; display: grid; gap: 0.2rem; }
.dz-row { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 0.4rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(90, 70, 30, 0.18); align-items: start; }
@media (max-width: 520px) { .dz-row { grid-template-columns: 1fr; } }
.dz-row dt { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-muted, #6b5f48); padding-top: 0.2rem; }
.dz-row dd { margin: 0; }
.redact { position: relative; display: block; width: 100%; padding: 0.15rem 0; border: 0; background: none; font: inherit; text-align: left; color: var(--paper-ink, #2b2416); cursor: pointer; }
.redact .rd-text { display: block; line-height: 1.45; }
.redact .rd-bar { position: absolute; inset: 0.15rem -0.2rem 0.15rem; z-index: 1; border-radius: 2px;
  background: repeating-linear-gradient(180deg, #141414 0 1.3em, transparent 1.3em 1.45em); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
  transform-origin: left center; transition: transform 380ms cubic-bezier(.7, 0, .3, 1), opacity 380ms ease; }
.redact:hover .rd-bar { transform: scaleX(0.985) rotate(-0.4deg); }
.redact.open .rd-bar { transform: translateX(104%) rotate(4deg); opacity: 0; }
.redact:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.redact.open { cursor: default; }
.dz-id .rd-text { font-family: var(--display); text-transform: uppercase; color: #a5281e; }
.dz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 1.2rem 0; }
@media (max-width: 520px) { .dz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dz-stat { display: grid; justify-items: center; gap: 0.1rem; padding: 0.7rem 0.4rem; border: 2px solid var(--paper-line, #b9a578); border-radius: 0.4rem; background: rgba(255, 250, 235, 0.35); }
.dz-stat b { font-family: var(--display); font-size: 2.2rem; line-height: 1; color: #7a3d14; font-variant-numeric: tabular-nums; }
.dz-stat span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted, #6b5f48); text-align: center; }
.dz-foot { border-top: 2px dashed var(--paper-line, #b9a578); padding-top: 1rem; display: grid; gap: 0.8rem; }
.dz-note { margin: 0; font-family: var(--mono); font-size: 0.82rem; color: var(--paper-muted, #6b5f48); }
.dz-code { display: inline-block; margin-top: 0.2rem; font-size: 1.05rem; letter-spacing: 0.18em; color: var(--paper-ink, #2b2416); }
.dz-crack label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.dz-crack .row { display: flex; gap: 0.5rem; }
.dz-crack input { flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; min-height: 2.8rem; padding: 0.4rem 0.7rem;
  border-radius: 0.4rem; border: 1.5px solid #3d4446; background: #121516; color: #ece4d2; }
.dz-crack .out { margin: 0.4rem 0 0; min-height: 1.2em; font-size: 0.85rem; color: #9b2c1c; font-weight: 700; }
.dz-crack.nope .row { animation: dz-shake 380ms ease; }
@keyframes dz-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.dz-cleared { display: grid; gap: 0.6rem; justify-items: start; }
.dz-cleared p { margin: 0; }
.dz-ok { position: static; display: inline-block; transform: rotate(-4deg); font-size: 1.4rem; color: rgba(30, 110, 60, 0.85); border-color: rgba(30, 110, 60, 0.75); }
.dz-cleared.fresh .dz-ok { animation: dz-thunk 520ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes dz-thunk { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .redact .rd-bar { transition: opacity 200ms ease; } .redact.open .rd-bar { transform: none; } .dz-cleared.fresh .dz-ok, .dz-crack.nope .row { animation: none; } }

/* ---------- Game bands: centred when there are fewer than four cards (Scott, 2026-10-18) ---------- */
.next-band > .split { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.next-band > .split .stack { align-items: center; }
@media (min-width: 1000px) {
  .next-band .minis { grid-template-columns: repeat(auto-fit, minmax(14rem, 16.75rem)); justify-content: center; }
}

/* About: redaction bars over words inside the lines, so it reads as a blacked-out file (2026-10-18) */
.dz-row dd { line-height: 1.6; }
.dossier .redact { position: relative; display: inline; width: auto; padding: 0 0.1em; margin: 0 -0.05em; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; vertical-align: baseline; }
.dossier .redact .rd-text { display: inline; line-height: inherit; }
.dossier .redact .rd-bar { position: absolute; inset: 0.08em -0.12em 0.02em; z-index: 1; border-radius: 1px; background: #151515;
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 99% 92%, 96% 100%, 2% 96%, 0 100%); filter: none; box-shadow: none; }
.dossier .redact:nth-of-type(2n) .rd-bar { clip-path: polygon(1% 0, 98% 6%, 100% 96%, 4% 100%, 0 90%); transform: rotate(-0.6deg); }
.dossier .redact:hover .rd-bar { transform: scale(1.03) rotate(-0.6deg); }
.dossier .redact .rd-bar { transform-origin: right center; }
.dossier .redact.open .rd-bar { transform: scaleX(0) rotate(4deg); opacity: 0; }
.dossier .dz-list { overflow-x: clip; }
.dossier .redact.open { cursor: default; background: rgba(240, 194, 90, 0.35); border-radius: 2px; }
.dossier .redact.open .rd-text { color: #7a1d12; font-weight: 700; }
.dz-id dd { font-family: var(--mono); }
.dz-id .redact.open .rd-text { font-family: var(--display); text-transform: uppercase; color: #a5281e; }
.dz-all { margin-left: 0.4rem; padding: 0.1rem 0.5rem; font: inherit; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  color: #7a1d12; background: transparent; border: 1.5px solid rgba(122, 29, 18, 0.55); border-radius: 0.25rem; }
.dz-all:hover { background: rgba(122, 29, 18, 0.08); }
.free-caps { color: #3fbf6f; letter-spacing: 0.06em; }

/* ---------- Daily cipher page (2026-10-18) ---------- */
.cipher-solo { max-width: 40rem; }
.cipher-yday { margin: 1rem 0 0; font-family: var(--mono); font-size: 0.85rem; }

/* ---------- Accessibility, Work with us, News, Press (2026-10-18) ---------- */
.ax-table-wrap { overflow-x: auto; border: 1px solid #3a4244; border-radius: 0.4rem; }
.ax-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 40rem; }
.ax-table th, .ax-table td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid #2a3133; }
.ax-table thead th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: #15191a; }
.ax-table tbody th { font-weight: 700; }
.ax-table td { color: #d9d1bf; }
.work-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-card { padding: 1.1rem 1.2rem; border-radius: 0.5rem; border: 1px solid #3a4244; background: linear-gradient(180deg, #1f2426, #15191a); }
.work-card h3 { margin: 0 0 0.4rem; color: var(--gold-ink); }
.work-card p { margin: 0; color: #d9d1bf; }
.news-list { display: grid; gap: 1.2rem; max-width: 46rem; }
.news-item { padding: 1.1rem 1.2rem; border-left: 4px solid var(--gold); background: rgba(240, 194, 90, 0.06); border-radius: 0 0.5rem 0.5rem 0; }
.news-item h2 { margin: 0.2rem 0 0.4rem; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.news-item p { margin: 0 0 0.4rem; }
.news-date { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.press-quote { padding: 0.9rem 1.1rem; border-left: 4px solid var(--gold); background: rgba(240, 194, 90, 0.06); border-radius: 0 0.4rem 0.4rem 0; }
.press-logo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.press-logo img { width: 4rem; height: 4rem; }
.press-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 720px) { .press-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.press-poster { margin: 0; }
.press-poster img { display: block; width: 100%; height: auto; border-radius: 0.3rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.press-poster figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); }

/* ---------- Test your phone: the field kit check (2026-10-18) ---------- */
.pc-dash { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.pc-dial { position: relative; width: 7.5rem; height: 7.5rem; display: grid; place-items: center; text-align: center; }
.pc-dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pc-dial circle { fill: none; stroke-width: 9; }
.pc-ring { stroke: #2a3133; }
.pc-fill { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 500ms cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px rgba(240, 194, 90, 0.5)); }
.pc-dial b { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--gold-ink); margin-top: 1.4rem; }
.pc-dial span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: -1.8rem; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
@media (min-width: 900px) { .pc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-card { padding: 1rem 1.1rem; border-radius: 0.6rem; border: 1.5px solid #3a4244; background: linear-gradient(180deg, #1f2426, #15191a); transition: border-color 300ms, box-shadow 300ms; }
.pc-card[data-state="pass"] { border-color: #2f8f5a; box-shadow: 0 0 0 1px rgba(47, 143, 90, 0.35), 0 0 22px rgba(47, 143, 90, 0.18); }
.pc-card[data-state="weak"] { border-color: #b88a2a; }
.pc-card[data-state="fail"], .pc-card[data-state="blocked"] { border-color: #a5432e; }
.pc-card[data-state="none"] { border-color: #5a6163; }
.pc-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: start; }
.pc-num { font-family: var(--mono); font-weight: 700; color: var(--gold-ink); font-size: 0.85rem; padding-top: 0.2rem; }
.pc-top h3 { margin: 0; font-size: 1.15rem; color: #efe6d0; }
.pc-why { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--muted); }
.pc-chip { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid #4b5254; color: var(--muted); white-space: nowrap; }
.pc-card[data-state="pass"] .pc-chip { background: #1f8f5a; border-color: #1f8f5a; color: #fff; }
.pc-card[data-state="weak"] .pc-chip { background: #b88a2a; border-color: #b88a2a; color: #1d1405; }
.pc-card[data-state="fail"] .pc-chip, .pc-card[data-state="blocked"] .pc-chip { background: #a5432e; border-color: #a5432e; color: #fff; }
.pc-msg { margin: 0.6rem 0 0; font-size: 0.9rem; color: #d9d1bf; min-height: 0; }
.pc-msg:empty { display: none; }
.pc-act { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pc-q { font-weight: 700; margin-right: 0.3rem; }
.pc-auto { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.pc-stage { margin-top: 0.8rem; display: grid; justify-items: center; gap: 0.5rem; }
.pc-hint { margin: 0; font-size: 0.85rem; color: var(--muted); text-align: center; }
.pc-bell { font-size: 2.6rem; animation: pc-ring 0.5s ease-in-out 3; }
@keyframes pc-ring { 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
.pc-level { position: relative; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, #20393a, #0f1a1b 70%); border: 2px solid #3a5a5c; display: grid; place-items: center; overflow: hidden; }
.pc-target { position: absolute; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 2px dashed rgba(240, 194, 90, 0.7); }
.pc-bubble { width: 2rem; height: 2rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9fe0b8 40%, #2f8f5a); box-shadow: 0 0 12px rgba(159, 224, 184, 0.6); transition: transform 90ms linear; }
.pc-bubble.in { box-shadow: 0 0 22px #f0c25a; }
.pc-compass { position: relative; width: 10rem; height: 10rem; border-radius: 50%; border: 3px solid #4b5254; background: radial-gradient(circle, #1f2426, #0e1112); display: grid; place-items: center; }
.pc-compass b { position: absolute; top: 0.3rem; font-family: var(--display); color: #e0573e; }
.pc-needle { width: 0.5rem; height: 7rem; background: linear-gradient(180deg, #e0573e 0 50%, #d9d1bf 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: transform 150ms linear; }
.pc-radar { position: relative; width: 6rem; height: 6rem; border-radius: 50%; border: 2px solid rgba(240, 194, 90, 0.5); }
.pc-radar span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(240, 194, 90, 0.45), transparent 30%); animation: pc-sweep 1.2s linear infinite; }
@keyframes pc-sweep { to { transform: rotate(360deg); } }
.pc-video { width: 100%; max-width: 18rem; border-radius: 0.5rem; background: #000; }
.pc-meter { width: 100%; max-width: 18rem; height: 0.9rem; border-radius: 999px; background: #0e1112; border: 1px solid #3a4244; overflow: hidden; }
.pc-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f8f5a, #f0c25a, #e0573e); transition: width 80ms linear; }
.pc-result { position: relative; margin-top: 1.6rem; padding: 1.3rem 1.2rem; border-radius: 0.6rem; border: 1.5px solid var(--gold); background: rgba(240, 194, 90, 0.05); }
.pc-result h2 { margin: 0 0 0.4rem; padding-right: 7rem; }
.pc-stamp { top: 0.9rem; right: 1rem; opacity: 0; color: rgba(47, 143, 90, 0.9); border-color: rgba(47, 143, 90, 0.8); mix-blend-mode: normal; }
.pc-result.done .pc-stamp { opacity: 1; animation: dz-thunk 520ms cubic-bezier(.2, 1.6, .4, 1) both; }
.pc-games { list-style: none; margin: 0.8rem 0; padding: 0; display: grid; gap: 0.5rem; }
.pc-game { padding: 0.6rem 0.8rem; border-radius: 0.4rem; background: #15191a; border-left: 4px solid #5a6163; }
.pc-game[data-v="ready"] { border-left-color: #2f8f5a; }
.pc-game[data-v="workaround"] { border-left-color: #b88a2a; }
.pc-game > a { font-weight: 700; }
.pc-v { display: inline-block; margin-left: 0.5rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pc-game[data-v="ready"] .pc-v { color: #6fcf97; }
.pc-game[data-v="workaround"] .pc-v { color: #f0c25a; }
.pc-game ul { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; color: #c9c0ac; }
@media (prefers-reduced-motion: reduce) { .pc-bell, .pc-radar span { animation: none; } .pc-result.done .pc-stamp { animation: none; } }

/* Walkthrough on phones: a clear gap under the header, about a centimetre (Scott, 2026-10-18) */
@media (max-width: 899px) {
  .story.is-live .story-sticky { box-sizing: border-box; padding-top: 2.4rem; padding-bottom: 0.8rem; align-content: start; }
  .story.is-live .story-num { top: 2.2rem; }
}

/* Gift cards off until Stripe is live (2026-10-18) */
.gift-form[hidden] { display: none !important; }
.gift-soon .stamp-red { top: 1rem; right: 1rem; }
.gift-soon h2 { padding-right: 7rem; }

/* iPhone: quick double taps on buttons (the cipher wheel arrows, tests, pickers) never zoom the page; pinch zoom still works (Scott, 2026-10-18) */
html { touch-action: manipulation; }
button, a, input, select, textarea, label, summary, [role="button"], [role="tab"] { touch-action: manipulation; }

/* ---------- Live game status and the phone note on case files (2026-10-18) ---------- */
.gs-closed { margin: 0.8rem 0 0; padding: 0.8rem 1rem; border-radius: 0.4rem; border: 1.5px solid #a5432e; background: rgba(165, 67, 46, 0.12); }
.gs-phone { margin: 0.8rem 0 0; font-size: 0.9rem; }
.gs-phone a { text-decoration: underline; text-underline-offset: 3px; }
.gs-phone .gp-v { display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gs-phone .gp-ready { background: #1f8f5a; color: #fff; }
.gs-phone .gp-work { background: #b88a2a; color: #1d1405; }
.chip[data-gs-state="off"] { background: #5a2a22 !important; border-color: #5a2a22 !important; color: #ffd9cf !important; }

/* Card stamps: green Open case for a live game, Coming soon otherwise (Scott, 2026-10-18) */
.case-stamp.is-open { color: rgba(24, 120, 66, 0.9) !important; border-color: rgba(24, 120, 66, 0.85) !important; }
.case-stamp.is-closed { color: rgba(90, 90, 90, 0.85) !important; border-color: rgba(90, 90, 90, 0.75) !important; }
.status-stamp.is-open { color: rgba(24, 120, 66, 0.85) !important; border-color: rgba(24, 120, 66, 0.8) !important; }

/* ---------- You found a clue (2026-10-18) ---------- */
.fd-card { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 720px) { .fd-card { grid-template-columns: 12rem minmax(0, 1fr); } }
.fd-card img { width: 100%; max-width: 12rem; height: auto; border-radius: 0.4rem; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); transform: rotate(-2deg); }
.fd-card .fd-kind { margin: 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.fd-card h2 { margin: 0.3rem 0 0.5rem; }
.fd-card p { margin: 0 0 0.6rem; }
.fd-badge { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 720px) { .fd-badge { grid-template-columns: 8rem minmax(0, 1fr); } }
.fd-medal { width: 7.5rem; height: 7.5rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2a3133, #121516 70%);
  border: 3px solid var(--gold); box-shadow: 0 0 0 6px rgba(227, 167, 47, 0.15), 0 0 30px rgba(240, 194, 90, 0.35); }
.fd-medal svg { width: 3.6rem; height: 4.4rem; }
.found-page.got .fd-medal { animation: fd-pop 700ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fd-pop { 0% { transform: scale(0.6) rotate(-20deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .found-page.got .fd-medal { animation: none; } }

/* News stories with their image (Scott, 2026-10-18) */
.news-list { max-width: 60rem; }
.news-item { display: grid; gap: 1rem 1.4rem; padding: 0; border-left: 0; background: none; border-radius: 0; }
@media (min-width: 760px) { .news-item { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; } }
.news-img { display: block; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5); border: 1px solid #3a4244; }
.news-img img { display: block; width: 100%; height: auto; transition: transform 400ms ease; }
.news-img:hover img { transform: scale(1.03); }
.news-body { border-left: 4px solid var(--gold); padding: 0.2rem 0 0.2rem 1rem; }
@media (prefers-reduced-motion: reduce) { .news-img img { transition: none; } }

/* News article pages (2026-10-18) */
.news-article article { max-width: 46rem; }
.na-hero { margin: 0 0 1.2rem; border-radius: 0.6rem; overflow: hidden; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); border: 1px solid #3a4244; }
.na-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.news-article h1 { margin: 0.2rem 0 0.6rem; font-size: clamp(2.2rem, 7vw, 3.6rem); }
.na-body p { font-size: 1.08rem; line-height: 1.65; }
.na-back { margin-top: 2rem; }
.news-body h2 a { color: inherit; text-decoration: none; }
.news-body h2 a:hover { color: var(--gold-ink); }
.news-article h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; }
.news-article .lede { margin: 0 0 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid #3a4244; color: #d9d1bf; font-size: 1.15rem; }

/* ---------- Today's puzzle (2026-10-18) ---------- */
.d-box { max-width: 40rem; }
.d-box .d-name { margin: 0.2rem 0 0.4rem; }
.d-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }
.d-lvl, .d-done, .d-streak { padding: 0.08rem 0.55rem; border-radius: 999px; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.d-easy { background: #1f8f5a; color: #fff; } .d-medium { background: #b88a2a; color: #1d1405; } .d-hard { background: #a5432e; color: #fff; }
.d-done { background: #1f8f5a; color: #fff; } .d-streak { background: #2a2f31; color: #f0c25a; }
.d-intro { padding: 1.3rem 1.2rem; }
.d-intro p { margin: 0 0 0.8rem; }
.d-bar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; font-family: var(--mono); }
.d-clock { font-size: 1.3rem; font-weight: 700; color: var(--gold-ink); }
.d-wrongs { font-size: 0.8rem; color: var(--muted); }
.d-giveup { margin-left: auto; font: inherit; font-size: 0.78rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid #4b5254; background: transparent; color: var(--muted); cursor: pointer; }
.d-stage { min-height: 22rem; }
.d-result { margin-top: 1rem; padding: 1.2rem; border-radius: 0.6rem; border: 1.5px solid var(--gold); background: rgba(240, 194, 90, 0.06); }
.d-line { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; }
.d-stars { display: flex; gap: 0.3rem; margin: 0.4rem 0; }
.d-star { font-size: 2rem; line-height: 1; width: 2.8rem; height: 2.8rem; border-radius: 0.5rem; border: 1px solid #3a4244; background: #15191a; color: #4b5254; cursor: pointer; }
.d-star[aria-pressed="true"] { color: #f0c25a; border-color: #b88a2a; text-shadow: 0 0 10px rgba(240, 194, 90, 0.6); }
.d-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.d-tag { font: inherit; font-size: 0.82rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid #4b5254; background: transparent; color: #d9d1bf; cursor: pointer; }
.d-tag[aria-pressed="true"] { background: #f0c25a; border-color: #f0c25a; color: #1d1405; font-weight: 700; }
.d-thanks { color: #6fcf97; font-weight: 700; }
.d-yday { margin-top: 1rem; font-family: var(--mono); font-size: 0.82rem; }
.d-box .d-name { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.92; font-size: clamp(2.4rem, 9vw, 3.6rem); }

/* ================= Dossier look (Scott's mockups, 2026-10-18) ================= */
/* Painted props beside page titles */
.head-photo-split { display: grid; gap: 0.5rem 1.5rem; align-items: center; }
@media (min-width: 860px) { .head-photo-split { grid-template-columns: minmax(0, 1fr) 19rem; } }
.head-photo { margin: 0 auto; width: min(13rem, 62vw); }
@media (min-width: 860px) { .head-photo { width: 19rem; margin: -1rem 0 -1.5rem; } }
.head-photo img { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 100%); mask-image: radial-gradient(closest-side, #000 66%, transparent 100%);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)); }
.fx .head-photo img { animation: prop-in 900ms cubic-bezier(.2, .9, .25, 1.05) both; }
@keyframes prop-in { from { opacity: 0; transform: translateY(14px) rotate(-3deg) scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx .head-photo img { animation: none; } }

/* Bracket tags: [ DAILY PUZZLE ] */
.tag { display: inline-block; vertical-align: middle; padding: 0.12rem 0.5rem; border: 1px solid currentColor; border-radius: 0.2rem; background: rgba(0, 0, 0, 0.25);
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; color: var(--gold-ink); white-space: nowrap; }
.tag::before { content: "[ "; } .tag::after { content: " ]"; }
.tag-green { color: #6fcf97; } .tag-red { color: #ff6a5f; } .tag-blue { color: #8ab8ff; }
.tag-btn { cursor: pointer; font-size: 0.7rem; padding: 0.3rem 0.65rem; }
.tag-btn.done { color: #6fcf97; }

/* Bracket cards: a dark plate with gold corner brackets */
.bcard { position: relative; margin: 0; padding: 1.1rem 1.2rem; border-radius: 0.3rem; border: 1px solid #343b3d;
  background: linear-gradient(180deg, rgba(31, 36, 38, 0.92), rgba(16, 19, 20, 0.92)); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); color: #d9d1bf; }
.bcard::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: 0.3rem;
  background: linear-gradient(var(--gold), var(--gold)) top left / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top left / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top right / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 16px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 2px 16px no-repeat; }
.bcard .bc-h { margin: 0 0 0.7rem; font-size: 1.25rem; text-transform: uppercase; }
.bcard > .tag:first-child { position: absolute; top: 0.6rem; right: 0.7rem; }
a.bcard { display: block; text-decoration: none; transition: border-color 200ms, transform 200ms, box-shadow 200ms; }
a.bcard:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(240, 194, 90, 0.35), 0 0 26px rgba(240, 194, 90, 0.18); }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

/* News: tags beside the headline */
.news-body h2 .tag { margin-left: 0.3rem; font-size: 0.6rem; }

/* Press kit */
.press-cols { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .press-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.cb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.cb-head h2 { margin: 0; }
.copy-block .bcard { font-family: var(--mono); font-size: 0.92rem; line-height: 1.6; }
.logo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.logo-tile { display: grid; justify-items: center; gap: 0.4rem; padding: 0.7rem; border-radius: 0.4rem; text-decoration: none; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.logo-tile img { width: 100%; max-width: 8rem; height: auto; border-radius: 0.4rem; }
.logo-tile.dark { background: #0d1011; color: #c9c0ac; border: 1px solid #3a4244; }
.logo-tile.light { background: #f3ead6; color: #2b2416; }
.press-mini { display: grid; gap: 1rem; }
@media (min-width: 560px) and (max-width: 899px) { .press-mini { grid-template-columns: 1fr 1fr; } }
.press-poster { padding: 0.5rem; border-radius: 0.4rem; background: #1c2123; border: 1px solid #343b3d; }
.press-poster figcaption { display: grid; gap: 0.15rem; text-align: center; }
.press-poster figcaption span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--gold-ink); }

/* Icon cards and steps boxes (dossier, 2026-10-18) */
.icard-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.icard { padding-top: 1.3rem; }
.icard h3 { margin: 0.7rem 0 0.35rem; font-size: 1.1rem; color: var(--gold-ink); }
.icard p { margin: 0; line-height: 1.55; }
.icard > .tag:first-child { font-size: 0.58rem; }
.ic-ring { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid rgba(240, 194, 90, 0.55); color: var(--gold); background: rgba(240, 194, 90, 0.07); }
.d-icon { width: 1.4rem; height: 1.4rem; }
.steps-box .bc-h { margin-bottom: 1rem; }
.steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { display: flex; gap: 0.75rem; align-items: flex-start; }
.steps p { margin: 0; line-height: 1.5; }
.st-n { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: #1a1405; font-weight: 800; font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Accessibility table, dossier style */
.ax-table-wrap { border: 1px solid #343b3d; border-radius: 0.35rem; overflow-x: auto; background: rgba(16, 19, 20, 0.85); }
.ax-table th[scope="col"] { background: linear-gradient(180deg, #2a2412, #1c180c); color: var(--gold-ink); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ax-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }

/* Guides index: hero banner and folder cards (2026-10-18) */
.guides-hero { position: relative; margin: 0 0 1rem; border-radius: 0.6rem; overflow: hidden; border: 1px solid #343b3d; min-height: 19rem; display: grid; align-items: end; }
.guides-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guides-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 13, 0.92) 0%, rgba(10, 12, 13, 0.7) 45%, rgba(10, 12, 13, 0.1) 100%), linear-gradient(0deg, rgba(10, 12, 13, 0.8), transparent 55%); }
.guides-hero .gh-in { position: relative; z-index: 1; padding: 2rem 1.4rem 1.6rem; max-width: 40rem; }
@media (min-width: 860px) { .guides-hero { min-height: 26rem; } .guides-hero .gh-in { padding: 3rem 2.4rem 2.2rem; } }
.folder-grid { display: grid; gap: 2rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); padding-top: 1rem; }
.folder-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: #2b2416; background: linear-gradient(180deg, #ecd9a8, #d9bf82);
  border-radius: 0 0.45rem 0.45rem 0.45rem; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45); transition: transform 220ms, box-shadow 220ms; }
.folder-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 0 0 2px var(--gold), 0 20px 36px rgba(0, 0, 0, 0.5); }
.fc-tab { position: absolute; left: 0; bottom: 100%; padding: 0.3rem 0.9rem 0.25rem; border-radius: 0.45rem 0.45rem 0 0; background: #ecd9a8;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5d4a1f; }
.fc-pic { display: block; margin: 0.7rem 0.7rem 0; border: 4px solid #fbf6ea; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); transform: rotate(-1deg); }
.fc-pic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fc-body { display: grid; gap: 0.45rem; padding: 0.9rem 1rem 1.1rem; justify-items: start; }
.fc-body h2 { margin: 0; font-size: 1.3rem; line-height: 1.1; color: #1d170b; text-transform: uppercase; }
.fc-body p { margin: 0; color: #3f3420; line-height: 1.5; }
.fc-body .tag { color: #9b2c1c; background: rgba(155, 44, 28, 0.08); }
.fc-body .more { font-weight: 700; color: #6b4d10; }

/* Guide bodies: date chips, trail rows, flowing steps, idea cards */
.guide-body .date-chips { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: 1rem 0; }
.date-chip { display: grid; gap: 0.4rem; justify-items: start; }
.date-chip b { font-size: 1.05rem; color: var(--gold-ink); }
.date-chip p { margin: 0; font-size: 0.9rem; color: #bfb6a2; }
.guide-body .trail-rows { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.6rem; }
.trail-rows li { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.75rem 0.9rem; border: 1px solid #343b3d; border-left: 3px solid var(--gold); border-radius: 0.3rem; background: rgba(16, 19, 20, 0.7); }
.trail-rows li p { margin: 0; }
.trail-rows .tag { flex: none; min-width: 4.6rem; text-align: center; }
.guide-body .steps-flow { list-style: none; padding: 0; margin: 1rem 0; grid-template-columns: none; }
@media (min-width: 760px) { .guide-body .steps-flow { grid-template-columns: 1fr 1fr; } }
.guide-body .idea-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1rem 0 1.5rem; }
.idea-grid .bcard h3 { margin: 0.8rem 0 0.4rem; color: var(--gold-ink); }
.idea-grid .bcard p { margin: 0; }
.bcard.date-chip > .tag:first-child, .idea-grid .bcard > .tag:first-child { position: static; }
.folder-card .fc-pic img { height: 10.5rem; aspect-ratio: auto; }
@media (min-width: 600px) { .guide-body .date-chips { grid-template-columns: 1fr 1fr; } }

/* Phone check: icons, the 2 min badge, a bracketed tips box (2026-10-18) */
.pc-num { display: grid; justify-items: center; gap: 0.25rem; padding-top: 0; font-size: 0.7rem; }
.pc-num .ic-ring { width: 2.4rem; height: 2.4rem; }
#pc-h .tag { margin-left: 0.4rem; font-size: 0.62rem; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 760px) { .tips { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; } }
.tips li { display: flex; gap: 0.75rem; align-items: flex-start; }
.tips li > .d-icon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--gold); margin-top: 0.1rem; }
.tips p { margin: 0; line-height: 1.5; }

/* Work with us: Your story case card (2026-10-18) */
.story-card { display: grid; gap: 1.4rem; align-items: center; padding: 1.4rem; }
@media (min-width: 760px) { .story-card { grid-template-columns: minmax(0, 1fr) 15rem; padding: 1.8rem; } }
.story-card .sc-text { display: grid; gap: 0.8rem; justify-items: start; }
.story-card h2 { margin: 0; }
.story-card p { margin: 0; line-height: 1.6; }
.story-card .row-btns { margin-top: 0.3rem; }
.sc-poster { display: block; justify-self: center; width: min(15rem, 70vw); transform: rotate(2deg); transition: transform 250ms; }
.sc-poster:hover { transform: rotate(0deg) scale(1.02); }
.sc-poster img { display: block; width: 100%; height: auto; border-radius: 0.3rem; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 106, 95, 0.35); }

/* ===== Dossier look, second round (2026-10-18): contact, gift cards, safety, privacy, daily, cipher ===== */
@media (min-width: 760px) { .steps { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.contact-cols { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .contact-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.contact-cols .tips { grid-template-columns: none; }
/* Safety rule cards */
.rule-grid { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); max-width: none; }
.rule-grid .rule { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem; }
.rule-grid .rule p { margin: 0; line-height: 1.5; font-size: 0.95rem; }
.rule-grid .rule b { color: var(--gold-ink); }
.rule-grid .ic-ring { flex: none; width: 2.4rem; height: 2.4rem; }
.rule-grid .rule-sos { border-color: #a5432e; background: linear-gradient(180deg, rgba(90, 24, 16, 0.9), rgba(40, 12, 9, 0.9)); }
.rule-grid .rule-sos .ic-ring { color: #ff6a5f; border-color: rgba(255, 106, 95, 0.6); background: rgba(255, 106, 95, 0.08); }
/* Contents strip */
.toc { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.4rem; padding: 0.9rem; border: 1px dashed rgba(240, 194, 90, 0.4); border-radius: 0.35rem; }
.toc a { padding: 0.25rem 0.6rem; border: 1px solid #3a4244; border-radius: 0.25rem; background: rgba(16, 19, 20, 0.7); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #d9d1bf; text-decoration: none; }
.toc a:hover, .toc a:focus-visible { border-color: var(--gold); color: var(--gold-ink); }
/* Numbered document sections (terms, privacy) */
.prose.doc { counter-reset: doc; }
.prose.doc h2 { counter-increment: doc; position: relative; padding: 0.5rem 0 0.5rem 0.9rem; border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgba(240, 194, 90, 0.1), transparent 70%); scroll-margin-top: 5rem; }
.prose.doc h2::before { content: counter(doc, decimal-leading-zero) " // "; font-family: var(--mono); font-size: 0.7em; color: var(--gold-ink); vertical-align: 0.15em; }
/* Today's puzzle prop (desktop only, hidden while playing) */
.daily-page .stop { position: relative; }
.d-prop { display: none; }
@media (min-width: 980px) {
  .d-prop { display: block; position: absolute; right: 0; top: -1rem; width: 15rem; margin: 0; pointer-events: none; }
  .d-prop img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 100%); mask-image: radial-gradient(closest-side, #000 66%, transparent 100%); }
  .daily-page .d-box > .eyebrow, .daily-page .d-box > .d-name, .daily-page .d-box > .d-meta { max-width: calc(100% - 16rem); }
  .daily-page:has([data-d-play]:not([hidden])) .d-prop, .daily-page:has([data-d-result]:not([hidden])) .d-prop { display: none; }
}
.rule-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.prose ul.rule-grid { display: grid; flex-direction: initial; }
.prose ul.rule-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

/* The Coolum Art Trail: Nan's Postcard Dare. Postcard cream, sea teal, airmail red and blue (2026-10-18) */
.theme-nan { --t-bg: #f8f2e4; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(31, 138, 150, 0.12), transparent 65%); --t-text: #2b2823; --t-muted: #6a6256; --t-title: #1d3a4a;
  --t-accent: #1f8a96; --t-accent-ink: #176d77; --t-accent-deep: #11545c; --t-btn-top: #5cc0c9; --t-on-accent: #fff; --t-glow: rgba(31, 138, 150, 0.22);
  --t-card: #fffdf7; --t-card-stack: #efe4cc; --t-border: #dfcfab; --t-chip-dark: #1d3a4a; --t-card-grad: linear-gradient(180deg, #fffaf0, #f4ead4); --t-drop: rgba(110, 85, 40, 0.18);
  --t-band: radial-gradient(120% 90% at 60% 40%, #3db3bd, #1f8a96 60%, #134f57); --t-band-eyebrow: #fff1c9; --t-tab-bg: #d6453d;
  --t-title-font: "Atkinson Hyperlegible", "Segoe UI", sans-serif; --t-title-weight: 700; --t-shade-top: rgba(20, 40, 50, 0.3); --t-shade-mid: rgba(20, 40, 50, 0.35); --t-shade-left: rgba(15, 40, 50, 0.6); }
.theme-nan .game-banner h1 { text-transform: none; letter-spacing: -0.01em; }
.theme-nan .game-hero .case .tab { color: #fff; background: repeating-linear-gradient(135deg, #d6453d 0 10px, #fffaf0 10px 16px, #2b5fa8 16px 26px, #fffaf0 26px 32px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

/* Game pages: Good for tags and the per-game questions (search wording, 2026-10-18) */
.good-for { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 1rem 0 0.4rem; }
.good-for b { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.3rem; }
.good-for .tag { font-size: 0.62rem; }
.game-faq { margin: 2.4rem 0 1rem; max-width: 52rem; }
.game-faq h2 { margin-bottom: 1rem; }
.themed .game-faq h2 { color: var(--t-title); font-family: var(--t-title-font, inherit); font-weight: var(--t-title-weight, 900); }
.themed-light .good-for b { color: var(--t-text); }
.themed-light .good-for .tag { color: var(--t-accent-ink); background: rgba(255, 255, 255, 0.6); }

/* Daily Codebreaker: today's code card (2026-10-19) */
.cb-card { display: grid; gap: 0.8rem; }
.cb-card .cb-tag { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-card .cb-type { padding: 0.1rem 0.5rem; border-radius: 99px; background: #1f3b3a; color: #fff1c9; }
.cb-card h2 { margin: 0; }
.cb-hintline { margin: 0; padding: 0.5rem 0.7rem; border-left: 3px solid var(--gold); background: rgba(240, 194, 90, 0.12); }
.cb-card .d-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.dt-link { margin-left: 0.4rem; font-weight: 700; }
#cb-mount .hk-hint-btn, #cb-mount .hk-skip-btn { display: none !important; }
.cb-card { grid-template-columns: minmax(0, 1fr); }
.cb-card > *, .cb-card .d-stage { min-width: 0; max-width: 100%; }
/* Passport stamp labels sized to the circle, not the screen, so long names fit the small account-page stamps (Scott, 2026-10-19) */
.stamp-btn { container-type: inline-size; }
.stamp-btn span { font-size: clamp(0.62rem, 14cqi, 0.95rem); max-width: 86%; overflow-wrap: anywhere; letter-spacing: 0.03em; }
.stamp-btn svg { width: 34%; }
/* Today's puzzle: the prop belongs to the puzzle box, so it steps aside with it on code and wheel days (2026-10-19) */
.daily-page:has([data-daily][hidden]) .d-prop { display: none; }
.daily-page .cipher-solo, .daily-page .cb-card { max-width: 46rem; }

/* Play at home (2026-10-19): the At-home case type in rose, beside the copper pocket cases; the home band and the hub */
:root { --athome: #d0577f; --athome-ink: #f08fb0; --athome-paper: #7d2443; }
.kind-athome { --accent: var(--athome); --accent-ink: var(--athome-ink); --accent-paper: var(--athome-paper); }
.game-page.kind-athome .gamecard { background-image: var(--rivets), var(--grid), var(--grain), linear-gradient(180deg, #3a1f2a, #1f1418); }
.btn.small-f.kind-athome[aria-pressed="true"] { color: #2a0614; border-color: #7d2443; background: linear-gradient(180deg, #f6b9cd, #d0577f); box-shadow: 0 0 14px rgba(208, 87, 127, 0.5); }
.case .price-line .pl-now.pl-tbc { font-size: 1.3rem; color: #6b5a3a; }
.athome-band { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "k b i" "k s i"; gap: 0.15rem 1rem; align-items: center; margin-top: 1rem; padding: 1rem 1.2rem;
  border-radius: 0.6rem; text-decoration: none; color: #f6e9ee; background: linear-gradient(120deg, #3a1f2a, #24161c 60%, #2a1c14); border: 1px solid rgba(208, 87, 127, 0.55);
  box-shadow: 0 0 0 1px rgba(200, 115, 58, 0.25), 0 14px 30px rgba(0, 0, 0, 0.35); transition: transform 200ms, box-shadow 200ms; }
.athome-band:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--athome), 0 0 26px rgba(208, 87, 127, 0.3); }
.athome-band .ab-k { grid-area: k; font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.6rem; border-radius: 99px; background: var(--athome); color: #2a0614; }
.athome-band b { grid-area: b; font-size: 1.15rem; }
.athome-band span:not(.ab-k) { grid-area: s; color: #d8c3cb; font-size: 0.95rem; }
.athome-band i { grid-area: i; font-style: normal; font-size: 1.6rem; color: var(--athome-ink); }
@media (max-width: 560px) { .athome-band { grid-template-columns: 1fr auto; grid-template-areas: "k i" "b i" "s i"; } .athome-band .ab-k { justify-self: start; } }
.athome-strip .split { align-items: end; }

/* Home hero reel (Scott, 2026-10-19): Your house / couch / street / town is the escape room, on a loop that pauses on hover, focus or tap.
   Three fixed lines; fx.js builds the reel. Without it (no script, reduced motion) the line reads "Your house". */
.hero h1 .hl1 { display: block; white-space: nowrap; }
.hero h1 .reel { position: relative; display: inline-block; }
.fx:not(.hero-go) .hero h1 .reel { opacity: 0; }
.hero h1 .reel-base { display: inline-block; }
.hero h1 .reel-on .reel-base { visibility: hidden; }
.hero h1 .reel-win { position: absolute; left: 0; top: -0.05em; bottom: -0.05em; overflow: hidden; pointer-events: none; }
.hero h1 .reel-strip { display: block; padding-top: 0.05em; will-change: transform; }
.hero h1 .reel-w { display: block; width: max-content; transform-origin: 0 50%; visibility: hidden; }
.hero h1 .reel-w.on { visibility: visible; }
.hero h1 .reel-w::before { content: attr(data-w); }
.hero h1 .reel-tick .reel-win { animation: reel-glow 900ms ease-out; }
@keyframes reel-glow { 0% { text-shadow: none; } 45% { text-shadow: 0 0 .3em rgba(255, 196, 64, .75); } 100% { text-shadow: none; } }
.hero h1 .reel[role="button"] { cursor: pointer; border-radius: 0.12em; }
.hero h1 .reel:focus-visible { outline: 3px solid var(--gold); outline-offset: 0.08em; }
.hero h1 .reel-paused .reel-win::after { content: ""; position: absolute; right: 0.1em; top: 50%; width: 0.16em; height: 0.3em; margin-top: -0.15em;
  border-left: 0.05em solid currentColor; border-right: 0.05em solid currentColor; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .hero h1 .reel-win { display: none; } .hero h1 .reel-on .reel-base { visibility: visible; } }

/* Play at home hub: the three proof points under the headline (2026-10-19) */
.ah-proof { margin: 0 0 2.2rem; }

/* Best mystery games guide: best for / you'll need / watch for */
.prose ul.kind-list { list-style: none; padding: 0.9rem 1.1rem; margin: 0.8rem 0 1rem; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, 0.04); border-radius: 0 0.4rem 0.4rem 0; }
.prose ul.kind-list li { margin: 0.25rem 0; }

/* Murder in the Dark role dealer (assets/dealer.js, 2026-10-19): one phone, passed round */
.dealer { margin: 1.2rem 0 2rem; max-width: 30rem; border: 1px solid var(--line); border-radius: 0.8rem; padding: 1.2rem; background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 30px rgba(0, 0, 0, 0.3); }
.dealer h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; line-height: 1; margin: 0 0 0.6rem; outline: none; }
.dealer .dl-hint { color: var(--muted); margin: 0 0 1rem; }
.dealer .dl-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.9rem; }
.dealer .dl-lab { font-weight: 700; }
.dealer .dl-step { display: flex; align-items: center; gap: 0.6rem; }
.dealer .dl-btn { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: inherit; font: 700 1.4rem/1 var(--display); cursor: pointer; }
.dealer .dl-btn:disabled { opacity: 0.35; cursor: default; }
.dealer .dl-num { min-width: 2.2ch; text-align: center; font: 900 2rem/1 var(--display); color: var(--gold); }
.dealer .dl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden; }
.dealer .dl-seg button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; padding: 0.55rem 1rem; min-height: 2.8rem; cursor: pointer; }
.dealer .dl-seg button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.dealer .dl-seg button:disabled { opacity: 0.35; cursor: default; }
.dealer .dl-check { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.2rem 0 1.2rem; }
.dealer .dl-check input { width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; accent-color: var(--gold); }
.dealer .dl-go { width: 100%; margin-top: 0.4rem; }
.dealer .dl-quit { display: block; margin: 0.9rem auto 0; border: 0; background: none; color: var(--muted); text-decoration: underline; font: inherit; cursor: pointer; min-height: 2.6rem; }
.dealer .dl-count { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--muted); margin: 0 0 0.3rem; }
.dealer .dl-count b { color: var(--gold); font-size: 1.1rem; }
.dealer .dl-card { display: block; width: 100%; min-height: 15rem; border: 0; padding: 0; margin: 0.4rem 0 0.4rem; border-radius: 0.8rem; color: inherit; font: inherit; cursor: pointer; perspective: 900px; background: none; }
.dealer .dl-back, .dealer .dl-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; min-height: 15rem; padding: 1.4rem; border-radius: 0.8rem; text-align: center; }
.dealer .dl-back { background: repeating-linear-gradient(45deg, rgba(232, 178, 58, 0.12) 0 10px, rgba(232, 178, 58, 0.04) 10px 20px), #17191b; border: 2px dashed rgba(232, 178, 58, 0.55); font-weight: 700; }
.dealer .dl-card:hover .dl-back, .dealer .dl-card:focus-visible .dl-back { border-style: solid; }
.dealer .dl-seal { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9443c, #7e1612); color: #fff; font: 900 2.2rem/1 var(--display);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.dealer .dl-face { --rc: #9aa3a6; background: #121416; border: 2px solid var(--rc); color: #efe6d0; }
.dealer .dl-face.dl-det { --rc: #e8b23a; }
.dealer .dl-face.dl-mur { --rc: #e0453c; background: radial-gradient(ellipse at 50% 0, rgba(224, 69, 60, 0.28), #121416 70%); }
.dealer .dl-face.dl-wit { --rc: #5ea3e0; }
.dealer .dl-you { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; opacity: 0.8; }
.dealer .dl-role { font: 900 2.6rem/1 var(--display); text-transform: uppercase; color: var(--rc); border: 3px solid var(--rc); padding: 0.25rem 0.8rem 0.15rem; transform: rotate(-4deg); border-radius: 0.3rem; }
.dealer .dl-text { max-width: 22rem; line-height: 1.45; }
.dealer .dl-flip .dl-face { animation: dl-flip 520ms cubic-bezier(.3, 1.3, .5, 1) both; }
.dealer .dl-flip .dl-role { animation: dl-stamp 420ms 320ms cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes dl-flip { from { transform: rotateY(90deg) scale(0.96); } to { transform: none; } }
@keyframes dl-stamp { from { transform: rotate(-4deg) scale(1.8); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
.dealer .dl-steps { margin: 0 0 1rem 1.2rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .dealer .dl-flip .dl-face, .dealer .dl-flip .dl-role { animation: none; } }

/* Halloween: the haunted wheel (widgets.js adds .spooky on 31 October 2026 and with ?try=halloween). Family spooky, no gore. */
.sheet.cipher.spooky { background: radial-gradient(120% 80% at 70% 0%, rgba(240, 127, 26, 0.22), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(122, 79, 184, 0.35), transparent 60%), linear-gradient(170deg, #2a2135, #16111d);
  color: #efe6d0; border-color: #5b4870; box-shadow: 0 0 0 1px rgba(240, 127, 26, 0.25), 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 60px rgba(240, 127, 26, 0.12); }
.sheet.cipher.spooky::before { background: linear-gradient(170deg, #3a2d4a, #241b2f); }
.sheet.cipher.spooky::after { background: linear-gradient(170deg, #31263f, #1d1626); }
.sheet.cipher.spooky h2 { color: #ffb347; text-shadow: 0 0 18px rgba(240, 127, 26, 0.45); }
.sheet.cipher.spooky .eyebrow { color: #b98be6; }
.sheet.cipher.spooky .stamp-red { color: #8bd16a; border-color: #8bd16a; }
.sheet.cipher.spooky .keeper { border-left-color: #f07f1a; color: #e9dcc2; }
.sheet.cipher.spooky .keeper.is-hint { color: #ffb347; }
.sheet.cipher.spooky .tiles .lbl { color: #b9a9cc; }
.sheet.cipher.spooky .word.coded span { background: rgba(185, 139, 230, 0.12); border-color: #6d5786; color: #f2e6cf; }
.sheet.cipher.spooky .word.plain span { color: #ffb347; }
.sheet.cipher.spooky .word.plain.solved span { background: linear-gradient(180deg, #ffb347, #f07f1a); color: #1a0d02; border-color: #7a3606; }
.sheet.cipher.spooky .cipher-foot { border-top-color: rgba(185, 139, 230, 0.35); }
.sheet.cipher.spooky .daily-tag, .sheet.cipher.spooky .daily-tag b { color: #e9dcc2; }
.sheet.cipher.spooky .cracked-stamp { color: #ffb347; border-color: #ffb347; }
.sheet.cipher.spooky .wheel { filter: drop-shadow(0 0 14px rgba(240, 127, 26, 0.35)); }
.cipher.spooky .jack-face { animation: jack-flicker 2.6s steps(1) infinite; }
@keyframes jack-flicker { 0%, 100% { opacity: 1; } 42% { opacity: 0.7; } 44% { opacity: 1; } 71% { opacity: 0.82; } 73% { opacity: 1; } }
.cipher.spooky .bats { position: absolute; inset: 0 0 auto 0; height: 3.4rem; pointer-events: none; overflow: hidden; z-index: 3; }
.cipher.spooky .bats svg { position: absolute; width: 2.2rem; fill: #0d0a12; filter: drop-shadow(0 0 3px rgba(240, 127, 26, 0.6)); top: 0.6rem; left: 8%; animation: bat-fly 9s linear infinite; }
.cipher.spooky .bats svg:nth-child(2) { width: 1.6rem; top: 1.6rem; animation-duration: 12s; animation-delay: -4s; }
.cipher.spooky .bats svg:nth-child(3) { width: 1.3rem; top: 0.2rem; animation-duration: 15s; animation-delay: -9s; }
@keyframes bat-fly { 0% { transform: translate(-3rem, 0.4rem) scaleY(1); } 10% { transform: translate(2rem, -0.2rem) scaleY(0.5); } 20% { transform: translate(7rem, 0.5rem) scaleY(1); }
  30% { transform: translate(12rem, 0) scaleY(0.5); } 40% { transform: translate(17rem, 0.6rem) scaleY(1); } 50% { transform: translate(22rem, 0.1rem) scaleY(0.5); }
  60% { transform: translate(27rem, 0.5rem) scaleY(1); } 70%, 100% { transform: translate(40rem, 0) scaleY(0.6); } }
@media (prefers-reduced-motion: reduce) { .cipher.spooky .jack-face, .cipher.spooky .bats svg { animation: none; } .cipher.spooky .bats svg:nth-child(2) { left: 70%; } .cipher.spooky .bats svg:nth-child(3) { left: 45%; } }
.sheet.cipher.spooky .daily-tag a, .sheet.cipher.spooky .dt-link { color: #ffb347; }
.sheet.cipher.spooky .dt-streak, .sheet.cipher.spooky .dt-done { color: #8bd16a; }

/* Keeper's wheel, 2026-10-19 (Scott): the outer ring turns; the result sits under the puzzle in the flow (the page scrolls
   to it), so the solved wheel and the READS row stay in view; the stamp thumps on, holds, then shrinks to a corner badge. */
.wheel { cursor: default; touch-action: pan-y; }   /* the page scrolls from the middle; widgets.js blocks scrolling only for a touch that starts on the ring */
.wheel .outer { transform-origin: 0 0; transition: transform 260ms cubic-bezier(.4, 1.4, .5, 1); }
.wheel .ring-hit { pointer-events: stroke; cursor: grab; }
.wheel.dragging .outer, .wheel.spinning .outer { transition: none; }
.wheel.dragging .ring-hit { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .wheel .outer { transition: none; } }
.cipher .win { position: static; left: auto; right: auto; bottom: auto; margin: 0; scroll-margin-bottom: 1.2rem; }
.cipher .cracked-stamp { transition: top 520ms cubic-bezier(.5, 0, .2, 1), left 520ms cubic-bezier(.5, 0, .2, 1), transform 520ms cubic-bezier(.5, 0, .2, 1); }
.fx .cipher.is-solved.stamp-badge .cracked-stamp, .cipher.is-solved.stamp-badge .cracked-stamp { animation: none; top: 1.6rem; left: calc(100% - 5.4rem); transform: translate(-50%, -50%) rotate(-10deg) scale(0.36); }
.cipher.is-solved .stamp-red { opacity: 0; transition: opacity 300ms; }
@media (prefers-reduced-motion: reduce) { .cipher .cracked-stamp { transition: none; } }
/* Halloween card art (Scott, 2026-10-19): painted, only fetched when the card is .spooky (31 October and ?try=halloween);
   darkened behind the wheel and tiles so every letter stays easy to read */
/* on the top paper layer: the card's own background sits under its stacked-paper layers */
.sheet.cipher.spooky::after { background: linear-gradient(180deg, rgba(20, 15, 27, 0.5) 0%, rgba(20, 15, 27, 0.5) 22%, rgba(20, 15, 27, 0.74) 40%, rgba(20, 15, 27, 0.86) 58%, rgba(16, 12, 22, 0.92) 100%),
  url(../img/halloween/haunted-wheel.webp) center top / cover no-repeat, #16111d; }
.sheet.cipher.spooky .eyebrow, .sheet.cipher.spooky .daily-tag, .sheet.cipher.spooky .keeper, .sheet.cipher.spooky .tiles .lbl { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.9); }
.sheet.cipher.spooky .eyebrow { color: #d2b4f2; }
/* hidden means hidden on Today's puzzle, whatever display a card sets (the code card showed on puzzle days, fixed 2026-10-19) */
.daily-page [hidden], .cb-card[hidden] { display: none !important; }

/* "Free extra" cards (2026-10-19): Murder in the Dark on the Play at home shelf is a free party game, not one of our cases,
   so it takes a neutral slate colour rather than a case type's */
:root { --extra: #8fa6b2; --extra-ink: #b9cbd4; --extra-paper: #3b4a52; }
.kind-extra { --accent: var(--extra); --accent-ink: var(--extra-ink); --accent-paper: var(--extra-paper); }

/* Guide pictures (2026-10-19): each guide has its own frame. Best mystery games: photos clipped into a case file.
   Murder in the Dark: torchlit snapshots on a dark board. */
.guide .g-fig { margin: 1.2rem 0 1.4rem; max-width: 40rem; }
.guide .g-fig img { display: block; width: 100%; height: auto; }
.guide .g-fig figcaption { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 0.5rem; }
.gd-best-mystery-games-at-home .g-fig { position: relative; padding: 0.7rem 0.7rem 0.9rem; background: linear-gradient(180deg, #e8d9b0, #d9c595); border-radius: 0.25rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); transform: rotate(-0.6deg); }
.gd-best-mystery-games-at-home .g-fig:nth-of-type(even) { transform: rotate(0.7deg); }
.gd-best-mystery-games-at-home .g-fig::before { content: ""; position: absolute; top: -0.9rem; left: 1.6rem; width: 0.9rem; height: 2.6rem; border: 3px solid #9aa3a6; border-radius: 0.5rem; border-bottom-color: transparent; }
.gd-best-mystery-games-at-home .g-fig img { border-radius: 0.15rem; }
.gd-best-mystery-games-at-home .g-fig figcaption { color: #4a3f2c; }
.gd-murder-in-the-dark .g-fig { position: relative; padding: 0.55rem; background: #101315; border: 1px solid #2c3437; border-radius: 0.35rem;
  box-shadow: 0 0 0 1px rgba(240, 194, 90, 0.08), 0 12px 30px rgba(0, 0, 0, 0.55); }
.gd-murder-in-the-dark .g-fig::after { content: ""; position: absolute; inset: 0.55rem; pointer-events: none; border-radius: 0.2rem;
  background: radial-gradient(120% 90% at 30% 20%, transparent 45%, rgba(0, 0, 0, 0.45) 100%); }
.gd-murder-in-the-dark .g-fig img { border-radius: 0.2rem; }
@media (prefers-reduced-motion: no-preference) { .gd-best-mystery-games-at-home .g-fig { transition: transform 300ms ease; } .gd-best-mystery-games-at-home .g-fig:hover { transform: rotate(0deg) scale(1.01); } }
.gd-hero .gh-in .eyebrow, .gd-hero .gh-in .lede { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* Murder in the Dark: deal to phones (assets/party.js, 2026-10-19). The host's QR room, the players' wait, and the role card
   you press and hold (or tap) to see. No sound. */
.party { margin: 1.2rem 0; max-width: 30rem; }
.party .pt-card { border: 1px solid var(--line); border-radius: 0.8rem; padding: 1.2rem; background: rgba(0, 0, 0, 0.22); display: grid; gap: 0.7rem; }
.party .pt-card > * { margin: 0; }
.party h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.party h4 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; }
.party .pt-msg { color: var(--muted); }
.party .pt-small { font-size: 0.88rem; color: var(--muted); }
.party .pt-link { border: 0; background: none; color: var(--gold); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }
.party .pt-qr { background: #fff; border-radius: 0.6rem; padding: 0.8rem; width: min(100%, 17rem); justify-self: center; }
.party .pt-qr svg { display: block; width: 100%; height: auto; }
.party .pt-code { text-align: center; font-family: var(--mono); letter-spacing: 0.08em; }
.party .pt-code b { font-size: 1.5rem; color: var(--gold); letter-spacing: 0.18em; }
.party .pt-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.party .pt-names { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.party .pt-names li { padding: 0.25rem 0.7rem; border-radius: 99px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); font-size: 0.9rem; }
.party .pt-names small { color: var(--muted); }
.party .pt-opts { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.party .pt-lab { font-weight: 700; }
.party .pt-picks { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.party .pt-pick { font: inherit; font-weight: 700; padding: 0.45rem 0.85rem; min-height: 2.6rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.party .pt-pick:hover, .party .pt-pick:focus-visible { border-color: var(--gold); }
.party .pt-nick { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
.party .pt-nick label { display: grid; gap: 0.3rem; flex: 1 1 12rem; font-weight: 700; }
.party .pt-nick input { font: inherit; padding: 0.6rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: inherit; min-height: 2.8rem; }
.party .pt-count { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--muted); }
.party .pt-count b { color: var(--gold); font-size: 1.1rem; }
.party .pt-hold { position: relative; aspect-ratio: 3 / 4; width: min(100%, 22rem); justify-self: center; border-radius: 0.8rem; overflow: hidden; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.party .pt-hold:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.party .pt-back, .party .pt-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; text-align: center; padding: 1.2rem; }
.party .pt-back { background: repeating-linear-gradient(45deg, rgba(232, 178, 58, 0.12) 0 10px, rgba(232, 178, 58, 0.04) 10px 20px), #17191b; border: 2px dashed rgba(232, 178, 58, 0.55); border-radius: 0.8rem; font-weight: 700; }
.party .pt-face { visibility: hidden; justify-content: flex-end; color: #fff; }
.party .pt-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.party .pt-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85) 75%); }
.party .pt-face > span { position: relative; z-index: 1; }
.party .pt-hold.is-open .pt-face { visibility: visible; }
.party .pt-hold.is-open .pt-back { visibility: hidden; }
.party .pt-you { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; opacity: 0.85; }
.party .pt-role { font: 900 2.4rem/1 var(--display); text-transform: uppercase; color: var(--rc, #fff); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.party .pt-text { max-width: 20rem; line-height: 1.4; font-size: 0.95rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.party .pt-mur { --rc: #ff6b5e; } .party .pt-det { --rc: #f0c25a; } .party .pt-wit { --rc: #8cc4f0; } .party .pt-inn { --rc: #a9dba0; }
.party .pt-hold.is-open .pt-face .pt-role { animation: dl-stamp 320ms cubic-bezier(.3, 1.6, .5, 1) both; }
@media (prefers-reduced-motion: reduce) { .party .pt-hold.is-open .pt-face .pt-role { animation: none; } }

/* Murder in the Dark, red and "murdery" (Scott, 2026-10-19). The type chip stays the slate "Free party game"; the art, title and
   accents are red. Family-friendly: drama from light and shadow, never blood. */
:root { --mitd: #ff5a4e; --mitd-deep: #8e1712; }
.mitd-card { --accent: var(--mitd); --accent-ink: #ffb1a8; --accent-paper: var(--mitd-deep); }
.mitd-card > .tab { --accent: var(--extra); }
.mitd-card .mitd-frame { position: relative; display: block; }
.mitd-card .mitd-frame .poster { box-shadow: 0 0 0 1px rgba(255, 90, 78, 0.35), 0 10px 26px rgba(120, 10, 6, 0.45); }
.mitd-card .mitd-title { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 0.9rem 0.8rem 2.6rem; display: grid; gap: 0.05em;
  font: 900 clamp(1.7rem, 7.5cqi, 2.3rem)/0.88 var(--display); text-transform: uppercase; letter-spacing: 0.01em; color: #fff;
  background: linear-gradient(180deg, rgba(10, 2, 2, 0.88), rgba(10, 2, 2, 0.55) 60%, transparent); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.mitd-card .mitd-title span:first-child { color: var(--mitd); text-shadow: 0 0 18px rgba(255, 60, 40, 0.55), 0 2px 0 rgba(0, 0, 0, 0.7); font-size: 1.25em; }
.mitd-card { container-type: inline-size; }
.mitd-chips { list-style: none; padding: 0; margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mitd-chips li { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 99px;
  border: 1px solid rgba(142, 23, 18, 0.55); background: rgba(142, 23, 18, 0.12); color: #6d120d; }
.mitd-chips li:first-child { background: #2f6b2a; border-color: #2f6b2a; color: #fff; }
.mitd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.4rem; }
.mitd-actions .btn.small { min-height: 2.6rem; }
.mitd-card .more { margin-top: 0; }

/* the guide page in the same red */
.gd-murder-in-the-dark .guides-hero { border-color: rgba(255, 90, 78, 0.35); box-shadow: 0 0 40px rgba(142, 23, 18, 0.35); }
.gd-murder-in-the-dark .guides-hero::after { background: linear-gradient(90deg, rgba(8, 2, 2, 0.94) 0%, rgba(12, 3, 3, 0.75) 48%, rgba(20, 4, 4, 0.15) 100%), linear-gradient(0deg, rgba(8, 2, 2, 0.85), transparent 55%); }
.gd-murder-in-the-dark .page-head h1 { display: grid; gap: 0.12em; }
.gd-murder-in-the-dark .page-head h1 .h1-a { color: var(--mitd); text-shadow: 0 0 22px rgba(255, 50, 30, 0.45), 0 3px 0 rgba(0, 0, 0, 0.7); white-space: nowrap; font-size: clamp(2.1rem, 8.6vw, 4.6rem); line-height: 0.9; }
.gd-murder-in-the-dark .page-head h1 .h1-b { color: #f3ead6; font-size: clamp(1.5rem, 5.4vw, 2.8rem); line-height: 1; }
.gd-murder-in-the-dark .page-head h1 .h1-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gd-murder-in-the-dark .page-head .eyebrow, .gd-murder-in-the-dark .page-head .mission b { color: #ff8a80; }
.gd-murder-in-the-dark .guide-body h2 { color: #ffd7d2; }
.gd-murder-in-the-dark .guide-body h2::first-letter { color: var(--mitd); }
.gd-murder-in-the-dark .mitd-lead { font-size: 1.15rem; line-height: 1.5; border-left: 3px solid var(--mitd); padding-left: 0.9rem; }
.gd-murder-in-the-dark .mitd-jump a { color: #ff8a80; font-weight: 700; }
.gd-murder-in-the-dark .dealer, .gd-murder-in-the-dark .party .pt-card { border-color: rgba(255, 90, 78, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 90, 78, 0.06), 0 10px 30px rgba(80, 6, 4, 0.35); }
.gd-murder-in-the-dark .g-fig { box-shadow: 0 0 0 1px rgba(255, 90, 78, 0.18), 0 12px 30px rgba(60, 4, 2, 0.55); }
.dealer .dl-sub { margin-left: 1.9rem; margin-top: -0.6rem; }
.party .pt-lights { margin: 0; padding: 0.7rem 0.9rem; border-radius: 0.5rem; background: rgba(240, 194, 90, 0.1); border: 1px solid rgba(240, 194, 90, 0.4); }
.party .pt-lights b { color: var(--gold); }
.party .dl-sub { margin-left: 1.9rem; margin-top: -0.4rem; }
/* the party card keeps its buttons on phones (the teaser line still waits, like the other cards) */
@media (max-width: 640px) { .case.mini.mitd-card > p.mitd-actions { display: flex; } .case.mini.mitd-card .mitd-chips li { font-size: 0.66rem; } }
.party .pt-setup summary { cursor: pointer; font-weight: 700; color: var(--gold); min-height: 2.4rem; display: flex; align-items: center; }
.party .pt-setup[open] { display: grid; gap: 0.6rem; }
/* the card laid out like the others (Scott, 2026-10-19: "text on the card needs to be on the bottom like the others") */
.mitd-card .mitd-title { display: none; }
.mitd-card .town .mitd-red { color: #c0261c; }
.mitd-card .mitd-chips li:first-child { background: rgba(142, 23, 18, 0.12); border-color: rgba(142, 23, 18, 0.55); color: #6d120d; }

/* Murder in the Dark, Scott's test (2026-10-19). One dealer with a mode choice; the party plays in a full-screen game window;
   every role card looks the same from across the room (no role colours, no different glow); a long press selects nothing. */
.dealer .dl-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0 0 1rem; }
.dealer .dl-mode button { display: grid; gap: 0.15rem; text-align: left; padding: 0.7rem 0.8rem; min-height: 3.4rem; border-radius: 0.6rem; border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; cursor: pointer; }
.dealer .dl-mode button b { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.02em; }
.dealer .dl-mode button span { font-size: 0.82rem; color: var(--muted); }
.dealer .dl-mode button[aria-checked="true"] { border-color: var(--mitd, var(--gold)); background: rgba(255, 90, 78, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 90, 78, 0.35); }
/* the pass-round faces: one look for every role */
.dealer .dl-face, .dealer .dl-face.dl-det, .dealer .dl-face.dl-mur, .dealer .dl-face.dl-wit { --rc: #f3ead6; background: #121416; border: 2px solid #3a3f42; }
.dealer .dl-role { color: #f3ead6; border-color: #f3ead6; }
/* the game window */
html.pt-game, html.pt-game body { overflow: hidden; }
.pt-shell { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(120% 70% at 50% 0%, #2a0907, #0b0707 70%);
  color: #f3ead6; padding: 0 1rem 2rem; }
.pt-shell[hidden] { display: none; }
.pt-shell .pt-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.8rem 0; margin-bottom: 0.6rem;
  background: linear-gradient(180deg, #160605 70%, rgba(22, 6, 5, 0)); }
.pt-shell .pt-brand { margin: 0; font: 900 1.35rem/1 var(--display); text-transform: uppercase; }
.pt-shell .pt-brand span { color: var(--mitd); }
.pt-shell .pt-who { margin: 0; font-family: var(--mono); font-size: 0.78rem; color: #c9b9a8; flex: 1; }
.pt-shell .pt-rules { margin-left: auto; }
.pt-shell .party { max-width: 30rem; margin: 0 auto; }
/* the party lobby and rounds (Scott, 2026-10-19: "the qr code for everyone to scan, then it shows whos in the room, and then a start
   the game button appears when 3+ people have joined"): QR on the left and the room on the right on a big screen, stacked on a phone */
.party .pt-two { display: grid; gap: 1rem; }
.party .pt-invite { border: 1px solid rgba(255, 90, 78, 0.35); border-radius: 0.8rem; padding: 1.2rem; background: rgba(0, 0, 0, 0.35); display: grid; gap: 0.7rem; align-content: start; }
.party .pt-invite > * { margin: 0; }
.party .pt-invite h3, .party .pt-card h3 { font: 900 1.4rem/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.party .pt-card h3 small { font: 600 0.85rem var(--mono); color: #c9b9a8; text-transform: none; }
.party .pt-invite-big h3 { text-align: center; }
.party .pt-invite-big .pt-qr { width: min(100%, 20rem); }
.party .pt-round .pt-invite:not(.is-open) { display: none; }
.party .pt-wait { margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3rem; border-radius: 0.5rem;
  border: 1px dashed rgba(240, 194, 90, 0.5); color: var(--gold); font-weight: 700; }
.party .pt-dots { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--gold); animation: pt-pulse 1.2s ease-in-out infinite; }
@keyframes pt-pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .party .pt-dots { animation: none; } }
.party .dl-go { width: 100%; min-height: 3.2rem; font-size: 1.1rem; }
.party .pt-actions .btn { min-height: 2.8rem; }
.party .btn.pt-end { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 90, 78, 0.55); color: #ffb3aa; }
.party .btn.pt-end:hover, .party .btn.pt-end:focus-visible { background: rgba(255, 90, 78, 0.14); color: #fff; }
.party .pt-foot { justify-content: space-between; align-items: center; }
.party .pt-invite { scroll-margin-top: 5rem; }
.pt-shell .pt-rules { border: 1px solid rgba(243, 234, 214, 0.35); background: rgba(255, 255, 255, 0.05); color: #f3ead6; font: inherit; font-weight: 700; font-size: 0.85rem; line-height: 1;
  padding: 0.55rem 0.8rem; border-radius: 0.45rem; cursor: pointer; }
.pt-shell .pt-rules:hover, .pt-shell .pt-rules:focus-visible { border-color: var(--gold); color: var(--gold); }
@media (max-width: 600px) { .pt-shell .pt-who { order: 3; flex-basis: 100%; } }
.party .dl-check small { color: #c9b9a8; }
@media (min-width: 900px) {
  .pt-shell .party { max-width: 62rem; }
  .pt-shell .party > .pt-card { max-width: 32rem; margin: 0 auto; }
  .party .pt-two { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .party .pt-round .pt-invite:not(.is-open) { display: grid; }
  .party .pt-round .pt-invite { position: sticky; top: 4.2rem; }
  .party .pt-round .pt-invite .pt-qr { width: min(100%, 14rem); }
  .party .pt-round .pt-invite-btn { display: none; }
  .pt-shell .pt-top { max-width: 62rem; margin-left: auto; margin-right: auto; }
}
.pt-shell .pt-card { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 90, 78, 0.35); }
.pt-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 1500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.pt-pill[hidden] { display: none; }
/* the press-and-hold card: one look for every role, art as a background, nothing selectable */
.party .pt-hold, .party .pt-hold * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.party .pt-hold { touch-action: none; }
.party .pt-face { background: #0d0b0b center / cover no-repeat; }
.party .pt-face::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.88) 75%); }
.party .pt-face::before { content: ""; position: absolute; inset: 0.45rem; z-index: 1; border: 2px solid rgba(214, 178, 96, 0.55); border-radius: 0.5rem; pointer-events: none; }
.party .pt-role, .party .pt-mur .pt-role, .party .pt-det .pt-role, .party .pt-wit .pt-role, .party .pt-inn .pt-role { color: #f3ead6; --rc: #f3ead6; }
.party .pt-hold.is-open .pt-face .pt-role { animation: none; }

/* Green Play now on every playable card (Scott, 2026-10-19). One place and style everywhere: under the text, above the small
   Case file or How to play link. #1a7d4f with white text is 5.1:1 (the "Free" green deepened a step for the button). */
.btn.play-now { display: flex; width: 100%; justify-content: center; margin: 0.6rem 0 0.35rem; min-height: 3rem; padding: 0.55rem 1rem; border-radius: 0.5rem;
  background: linear-gradient(180deg, #23955f, #1a7d4f); border: 1px solid #12583a; color: #fff !important; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em;
  text-decoration: none !important; box-shadow: 0 3px 0 #0f4a31, 0 8px 16px rgba(10, 60, 35, 0.3); }
.btn.play-now:hover, .btn.play-now:focus-visible { background: linear-gradient(180deg, #27a368, #1a7d4f); border-color: #0f4a31; color: #fff; }
.btn.play-now:active { transform: translateY(2px); box-shadow: 0 1px 0 #0f4a31; }
.btn.play-now[hidden] { display: none; }
.case-stamp[hidden] { display: none !important; }
.featured .btn.play-now { width: auto; display: inline-flex; margin: 0; padding-inline: 1.6rem; }
.case.mini .more { display: inline-block; font-size: 0.85rem; }
@media (max-width: 559px) { .btn.play-now { font-size: 0.95rem; min-height: 2.8rem; } }

/* Murder in the Dark on the game page banner (Scott, 2026-10-19): the knife art on the right, darkened behind the text */
.gd-banner .game-banner .gb-art { background-position: 70% 45%; }
.gd-banner .game-banner::after { background: linear-gradient(180deg, rgba(6, 2, 2, 0.5) 0%, rgba(6, 2, 2, 0.1) 35%, rgba(6, 2, 2, 0.6) 70%, #060606 100%),
  linear-gradient(90deg, rgba(6, 2, 2, 0.88) 0%, rgba(6, 2, 2, 0.55) 45%, rgba(6, 2, 2, 0) 75%); }
.gd-banner .game-banner h1 { font-family: var(--display); letter-spacing: 0.01em; color: #f6efe0; text-shadow: 0 4px 22px rgba(0, 0, 0, 0.8); }
.gd-banner .game-banner h1 .h1-a { color: var(--mitd); text-shadow: 0 0 30px rgba(255, 40, 20, 0.5), 0 4px 0 rgba(0, 0, 0, 0.7); }
.gd-banner .gb-eyebrow { color: #ff8a80; }
.gd-banner .gb-sub { color: var(--gold); letter-spacing: 0.26em; }
.gd-banner .gb-ctas .btn.play-now { width: auto; display: inline-flex; margin: 0; padding-inline: 1.8rem; }
.gd-banner > .crumbs { margin-top: 0; }
.gd-banner .stop-mark { display: none; }
.gd-banner .stop { padding-left: 0; }
@media (max-width: 600px) { .gd-banner .game-banner .gb-art { background-position: 64% 40%; } }

/* Every card (Scott, 2026-10-19): a bigger gap between the poster and the text, and the title and its label one size smaller */
.mini .poster-frame, .mini .poster { margin-bottom: 1rem; }
.mini .town { font-size: 1.7rem; }
.mini .title { font-size: 0.84rem; }
@media (max-width: 559px) {
  .case.mini .poster-frame { margin-bottom: 0.8rem; }
  .case.mini .town { font-size: 1.15rem; }
  .case.mini .title { font-size: 0.72rem; }
  .minis.swipe .case.mini .town { font-size: 1.45rem; }
  .minis.swipe .case.mini .title { font-size: 0.78rem; }
}
.mini .town { line-height: 0.95; }
@media (max-width: 559px) { .case.mini .town { line-height: 1; margin-top: 0.1rem; } }
.gd-banner .game-body .story > h2:first-child { margin-top: 0; }
.gd-banner .game-hero .mitd-red, .gd-banner .town .mitd-red { color: #c0261c; }
/* Murder in the Dark's case card: dark like the themed game pages (The Keeper's Log), in its red */
.gd-banner .game-hero .sheet.case { background: radial-gradient(70% 90% at 15% 0%, rgba(160, 20, 12, 0.22), transparent 60%), linear-gradient(180deg, #1b0e0d, #110909);
  color: #efe6d6; border-color: rgba(255, 90, 78, 0.35); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.gd-banner .game-hero .sheet.case::before { background: linear-gradient(170deg, #2a1312, #1a0c0b); }
.gd-banner .game-hero .sheet.case::after { background: linear-gradient(170deg, #241110, #160a09); }
.gd-banner .game-hero .town { color: #f3ead6; }
.gd-banner .game-hero .town .mitd-red { color: var(--mitd); }
.gd-banner .game-hero .title { color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; }
.gd-banner .game-hero .copy > p { color: #d9cbb8; }
.gd-banner .game-hero .tab { --accent: var(--mitd); }
/* the wide banner (Scott, 2026-10-19: knife smaller and to the right): keep the hand in view on the right at every width */
.gd-banner .game-banner .gb-art { background-position: 88% 50%; }
@media (max-width: 600px) { .gd-banner .game-banner .gb-art { background-position: 86% 40%; } }
/* the dealer fills the story column beside the game card on desktop (Scott: "make the box fit that area") */
.gd-banner .game-body .dealer, .gd-banner .game-body .party { max-width: none; }
@media (min-width: 900px) {
  .gd-banner .dealer .dl-setup { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem; row-gap: 0.2rem; align-items: center; }
  .gd-banner .dealer .dl-setup > :not(.dl-row) { grid-column: 1 / -1; }
  .gd-banner .dealer .dl-setup .dl-row { margin: 0.2rem 0 0.8rem; }
  .gd-banner .dealer .dl-setup .dl-check { margin: 0.1rem 0 0.4rem; }
  .gd-banner .dealer .dl-setup .dl-go { margin-top: 0.8rem; }
}

/* At-home cases, coming soon (2026-10-19): one skin each, from its own art.
   The Missing Surfboard: a Noosa dawn, sunrise coral on sea green */
.theme-surf { --t-bg: #07161a; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(255, 154, 107, 0.16), transparent 65%); --t-text: #e4efec; --t-muted: #9dbcb6; --t-title: #fbf3e6;
  --t-accent: #ff9a6b; --t-accent-ink: #ffb894; --t-accent-deep: #9a4a22; --t-btn-top: #ffc7a8; --t-on-accent: #241005; --t-glow: rgba(255, 154, 107, 0.26);
  --t-card: rgba(9, 30, 34, 0.86); --t-card-stack: #0d2629; --t-border: #2a5a5c; --t-chip-dark: #08191c; --t-card-grad: linear-gradient(180deg, #0e292c, #07171a);
  --t-band: radial-gradient(120% 90% at 60% 40%, #2b6f6c, #123c3c 60%, #071a1c); --t-band-eyebrow: #ffb894; --t-tab-bg: #ff9a6b; }
/* The Wreck at Dicky Beach: storm grey and lamp brass */
.theme-dicky { --t-bg: #0b0f14; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(233, 182, 92, 0.13), transparent 65%); --t-text: #e3e6ea; --t-muted: #a3acb6; --t-title: #f6efe0;
  --t-accent: #e9b65c; --t-accent-ink: #f3cd85; --t-accent-deep: #8a6420; --t-btn-top: #f7dca4; --t-on-accent: #1d1404; --t-glow: rgba(233, 182, 92, 0.24);
  --t-card: rgba(18, 24, 31, 0.88); --t-card-stack: #161d25; --t-border: #3a4654; --t-chip-dark: #0d1218; --t-card-grad: linear-gradient(180deg, #19212a, #0c1116);
  --t-band: radial-gradient(120% 90% at 60% 40%, #3f4d5c, #1d2731 60%, #0b0f14); --t-band-eyebrow: #f3cd85; --t-tab-bg: #e9b65c; }
/* The Glass House File: a night sky and one green light */
.theme-nightowls { --t-bg: #050a14; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(110, 255, 170, 0.12), transparent 65%); --t-text: #dfe6f2; --t-muted: #9aa7bd; --t-title: #f3f6fb;
  --t-accent: #6fe8a4; --t-accent-ink: #8dffbe; --t-accent-deep: #1f7a4a; --t-btn-top: #b5ffd5; --t-on-accent: #04170c; --t-glow: rgba(110, 255, 170, 0.24);
  --t-card: rgba(10, 17, 32, 0.88); --t-card-stack: #0d1628; --t-border: #253554; --t-chip-dark: #070d1a; --t-card-grad: linear-gradient(180deg, #101a30, #060b16);
  --t-band: radial-gradient(120% 90% at 60% 40%, #1d2f55, #0e1832 60%, #050a14); --t-band-eyebrow: #8dffbe; --t-tab-bg: #6fe8a4; }
/* Summer of '86: a milk bar afternoon, sun yellow and pool teal (never red neon) */
.theme-summer86 { --t-bg: #0c1018; --t-glow-bg: radial-gradient(80% 50% at 50% 0%, rgba(63, 224, 208, 0.14), transparent 65%); --t-text: #eef0f2; --t-muted: #aab4c0; --t-title: #fff6d6;
  --t-accent: #ffe14a; --t-accent-ink: #ffe873; --t-accent-deep: #8f7a10; --t-btn-top: #fff0a0; --t-on-accent: #1d1800; --t-glow: rgba(63, 224, 208, 0.26);
  --t-card: rgba(16, 22, 34, 0.88); --t-card-stack: #141c2b; --t-border: #2c4a58; --t-chip-dark: #0b1019; --t-card-grad: linear-gradient(180deg, #172133, #0b1019);
  --t-band: radial-gradient(120% 90% at 60% 40%, #1f6e78, #123a48 60%, #0b1019); --t-band-eyebrow: #3fe0d0; --t-tab-bg: #ffe14a; }

/* One phone, pass it round, in the same game window as Everyone's phone (Scott, 2026-10-20) */
.party.dl-stage[hidden], .pt-shell .party[hidden] { display: none; }
.party .dl-steps { margin: 0 0 0.4rem 1.2rem; line-height: 1.5; }
.party .dl-go[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.party .pt-card h3 + .pt-small { margin-top: -0.3rem; }
.party h3[tabindex="-1"]:focus { outline: none; }

/* Party games hub (2026-10-20) */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.pg-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0 1rem; border-radius: 0.9rem; overflow: hidden; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); }
.pg-card > :not(.pg-art):not(.pg-link) { margin-left: 1rem; margin-right: 1rem; }
.pg-card.is-live { border-color: rgba(26, 125, 79, 0.7); box-shadow: 0 0 0 1px rgba(26, 125, 79, 0.35); }
.pg-card .pg-kind { order: -1; margin: 0.9rem 1rem 0; font: 700 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.pg-link { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; }
.pg-art { display: block; aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; }
.pg-name { display: block; margin: 0 1rem; font: 900 1.45rem/1 var(--display); text-transform: uppercase; }
.pg-line { margin-top: 0; margin-bottom: 0; color: #d8d0c0; font-size: 0.95rem; }
.pg-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0; margin-bottom: 0; }
.pg-facts span { padding: 0.15rem 0.6rem; border-radius: 99px; border: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }
.pg-card .btn.play-now { margin-bottom: 0; }
.pg-state { align-self: flex-start; margin-top: 0.2rem; margin-bottom: 0; padding: 0.2rem 0.7rem; border-radius: 99px; font: 700 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--line); color: var(--muted); }
.pg-pack { display: grid; gap: 0.4rem; padding: 1.2rem 1.3rem; border-radius: 0.9rem; border: 1px dashed rgba(240, 194, 90, 0.6); background: rgba(240, 194, 90, 0.07); }
.pg-pack h3 { margin: 0; font: 900 1.6rem/1 var(--display); text-transform: uppercase; color: var(--gold); } .pg-pack p { margin: 0; }
.pg-pack .pg-kind { font: 700 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ctas-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.pg-card .btn.play-now { width: auto; }
.pg-facts span { border-radius: 0.7rem; }
.pg-pack .pg-state { justify-self: start; }

/* Remove a player and lock the room (rooms 0.7.1, 2026-10-20) */
.party .pt-names li { display: inline-flex; align-items: center; gap: 0.45rem; }
.party .pt-kick { min-height: 2rem; padding: 0.1rem 0.6rem; border-radius: 99px; border: 1px solid rgba(255, 90, 78, 0.55); background: transparent; color: #ffb3aa; font: 700 0.75rem/1 inherit; cursor: pointer; }
.party .pt-kick:hover, .party .pt-kick:focus-visible { background: rgba(255, 90, 78, 0.16); color: #fff; }
.party .pt-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.party .pt-lock p { margin: 0; flex: 1 1 12rem; font-size: 0.9rem; }
.party .pt-lock.is-hint { border-color: rgba(240, 194, 90, 0.7); background: rgba(240, 194, 90, 0.1); }
.party .pt-lock.is-on { border-color: rgba(26, 125, 79, 0.7); background: rgba(26, 125, 79, 0.12); }
.party .pt-lock-btn { min-height: 2.75rem; }

/* Snooze Bandit (2026-10-20): its page, and the game window and cards in the kids' night colours (html.skin-snooze) */
:root { --snz: #b9a7ff; --snz-ink: #e5dcff; }
.pg-steps { padding-left: 1.3rem; } .pg-steps li { margin: 0 0 0.7rem; }
.gd-snooze .game-banner h1 { color: #fff3c4; }
.gd-snooze .game-banner h1 .h1-a, .gd-snooze .mitd-red { color: #b9e4ff; text-shadow: 0 0 28px rgba(150, 200, 255, 0.45), 0 4px 0 rgba(30, 20, 70, 0.6); }
.gd-snooze .game-banner .gb-art { background-position: 70% 50%; }
.gd-snooze .game-hero .town .mitd-red { color: #b9e4ff; }
.gd-snooze .gb-eyebrow, .gd-snooze .gb-sub { color: #fff3c4; }
.gd-snooze .mitd-card { --accent: var(--snz); --accent-ink: var(--snz-ink); --accent-paper: #4b3d9a; }
.gd-snooze .game-hero .sheet.case { background: radial-gradient(70% 90% at 15% 0%, rgba(185, 167, 255, 0.18), transparent 60%), linear-gradient(180deg, #221c4a, #17133a); border-color: rgba(185, 167, 255, 0.45); }
.gd-snooze .game-hero .sheet.case::before { background: linear-gradient(170deg, #2a2358, #1a1640); }
.gd-snooze .game-hero .sheet.case::after { background: linear-gradient(170deg, #262052, #18143c); }
.gd-snooze .game-hero .tab { --accent: var(--snz); }
.gd-snooze .dealer { border-color: rgba(185, 167, 255, 0.45); box-shadow: 0 10px 30px rgba(20, 14, 60, 0.4); }
.gd-snooze .dealer .dl-mode button[aria-checked="true"] { border-color: var(--snz); background: rgba(185, 167, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(185, 167, 255, 0.4); }
/* too few to deal (Snooze Bandit needs 4, 2026-10-20): a sleepy note under a little moon, never an error red */
.dl-few { margin: 0.2rem 0 1rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; border: 1px dashed var(--muted); }
.dl-few[hidden] { display: none; }
.dealer .dl-go[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.skin-snooze .dl-few { position: relative; padding: 0.75rem 1rem 0.75rem 2.9rem; border: 1px solid rgba(185, 167, 255, 0.5); border-radius: 99px;
  background: linear-gradient(90deg, rgba(43, 36, 112, 0.92), rgba(29, 24, 80, 0.92)); color: #fff3c4; font-weight: 600; line-height: 1.35;
  box-shadow: 0 0 22px rgba(150, 130, 255, 0.22); }
.skin-snooze .dl-few::before { content: ""; position: absolute; left: 1.05rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -0.58rem; border-radius: 50%;
  box-shadow: -0.32rem 0.12rem 0 0 #fff3c4; }
.skin-snooze .dl-few::after { content: "z"; position: absolute; left: 1.95rem; top: 0.35rem; font-size: 0.7rem; color: #b9e4ff; opacity: 0.85; }
.skin-snooze .party .dl-few { margin: 0.6rem 0; text-align: left; }
/* the game window, in the kids' night colours */
.skin-snooze .pt-shell { background: radial-gradient(120% 70% at 50% 0%, #3b3188, #15123a 70%); }
.skin-snooze .pt-shell .pt-top { background: linear-gradient(180deg, #1d1848 70%, rgba(29, 24, 72, 0)); }
.skin-snooze .pt-shell .pt-brand span { color: #b9e4ff; }
.skin-snooze .pt-shell .pt-card, .skin-snooze .party .pt-invite { border-color: rgba(185, 167, 255, 0.45); background: rgba(20, 16, 54, 0.6); }
.skin-snooze .party .pt-face::after { background: linear-gradient(180deg, rgba(20, 14, 60, 0) 0%, rgba(20, 14, 60, 0) 50%, rgba(24, 18, 66, 0.92) 76%); }
/* the kids' cards keep the animal's face clear: the picture sits at the top and the words stay low and small */
.skin-snooze .party .pt-face { background-position: center top; gap: 0.35rem; padding-bottom: 1.1rem; }
.skin-snooze .party .pt-role { font-size: 1.7rem; } .skin-snooze .party .pt-you { font-size: 0.7rem; } .skin-snooze .party .pt-text { font-size: 0.88rem; line-height: 1.35; }
.skin-snooze .party .pt-face::before { border-color: rgba(255, 243, 196, 0.7); }
.skin-snooze .party .pt-back { background: repeating-linear-gradient(45deg, #2a2358 0 14px, #231d4c 14px 28px); }
.skin-snooze .party .pt-lights { display: none; }
.snooze-card { --accent: #b9a7ff; --accent-ink: #e5dcff; }
.mitd-kids { padding: 0.7rem 0.9rem; border-radius: 0.6rem; border: 1px solid rgba(185, 167, 255, 0.45); background: rgba(185, 167, 255, 0.08); }

/* Menu revamp (2026-10-20): the phone menu's smaller More group, and a six-column footer */
.mnav-more-h { margin: 1.2rem 0 0.4rem; font: 700 0.72rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.mnav-more { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1rem; }
.mnav-more a { display: flex; align-items: center; min-height: 44px; color: #e6dece; text-decoration: none; font-weight: 600; }
.mnav-more a[aria-current="page"] { color: var(--gold-ink); }
@media (min-width: 1000px) { footer .foot-cols:has(> .fcol:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } footer .wrap:has(.fcol:nth-child(6)) { grid-template-columns: 1fr; } }
@media (min-width: 720px) and (max-width: 999px) { footer .foot-cols:has(> .fcol:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Footer links (Scott, 2026-10-20: "the footer is very tall"): about 34 px from one link to the next on desktop, the same gap
   whether a link wraps or not; 44 px tap targets on phones and tablets, with no extra space between them */
.foot-cols:has(> .fcol:nth-child(6)) .fcol ul { gap: 0.3rem; }
.foot-cols:has(> .fcol:nth-child(6)) .fcol a { display: block; min-height: 0; padding: 0.25rem 0; line-height: 1.35; }
.foot-cols:has(> .fcol:nth-child(6)) .fcol-h { margin-bottom: 0.4rem; }
@media (max-width: 899px), (pointer: coarse) {
  .foot-cols:has(> .fcol:nth-child(6)) .fcol ul { gap: 0; }
  .foot-cols:has(> .fcol:nth-child(6)) .fcol a { display: flex; align-items: center; min-height: 44px; padding: 0.2rem 0; }
}
@media (max-width: 480px) { .top .cta-play { display: none; } }   /* the phone menu has it */

/* The 404 (2026-10-20): a dropped case file, a spinning compass and a radio that has lost the signal */
.lost-page { display: grid; gap: 2rem; padding-block: 2.5rem 3rem; align-items: center; }
@media (min-width: 900px) { .lost-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lost-found { grid-column: 1 / -1; } }
.lost-copy h1 { margin: 0.3rem 0 0.6rem; }
.lost-term { margin: 1.4rem 0 1.6rem; padding: 1rem 1.1rem; border-radius: 0.5rem; border: 1px solid rgba(240, 194, 90, 0.35); background: rgba(0, 0, 0, 0.35);
  font: 700 0.9rem/1.6 var(--mono); color: #9fe3b4; min-height: 6.2rem; letter-spacing: 0.04em; }
.lost-term p { margin: 0; min-height: 1.6em; }
.lost-term p:first-child { color: #ff8a7a; }
.lost-term p.typing::after { content: ""; display: inline-block; width: 0.55em; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: lost-caret 0.8s steps(1) infinite; }
@keyframes lost-caret { 50% { opacity: 0; } }
.lost-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.lost-ctas .btn { min-height: 2.9rem; }
.btn.bracket { position: relative; }
.btn.bracket::before { content: ""; position: absolute; inset: -5px; pointer-events: none; border: 2px solid transparent; border-radius: 0.2rem;
  background: linear-gradient(var(--gold), var(--gold)) top left / 10px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top left / 2px 10px no-repeat,
  linear-gradient(var(--gold), var(--gold)) bottom right / 10px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 2px 10px no-repeat; opacity: 0.8; }
.lost-art { position: relative; aspect-ratio: 900 / 1117; width: min(100%, 34rem); justify-self: center; background: url(../img/props/lost.webp) center / contain no-repeat;
  container-type: inline-size; }
.lost-sheet { position: absolute; left: 45.8%; top: 52.3%; width: 30%; transform: translate(-50%, -50%) rotate(-16deg); display: grid; justify-items: center; gap: 0.6cqw;
  color: #3b2f22; text-align: center; mix-blend-mode: multiply; }
.ls-k, .ls-l { font: 700 2.1cqw/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.ls-404 { font: 900 12cqw/0.85 var(--display); letter-spacing: 0.02em; color: #2b2219; }
.ls-stamp { margin-top: 2.2cqw; padding: 0.6cqw 1.8cqw; border: 0.6cqw solid #b3261e; border-radius: 0.8cqw; color: #b3261e; font: 900 4.2cqw/1 var(--display);
  letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-7deg); opacity: 0.85; }
.lost-radio { position: absolute; left: 62%; top: 52%; width: 22%; height: 26%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 1rem; }
.lost-radio:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lost-screen { position: absolute; left: 61.8%; top: 17.5%; width: 39%; height: 14.5%; transform: translate(-50%, -50%) rotate(11deg); display: grid; place-items: center;
  font: 700 1.2cqw/1 var(--mono); letter-spacing: 0.04em; color: #12351f; white-space: nowrap; animation: lost-static 2.4s steps(1) infinite; }
.lost-radio.is-found .lost-screen { color: #0d5a2c; animation: none; }
/* static: at most two short flashes in each 2.4 s, well under three a second */
@keyframes lost-static { 0%, 40%, 46%, 100% { opacity: 1; } 42% { opacity: 0.35; } 44% { opacity: 0.85; } 80% { opacity: 0.5; } 82% { opacity: 1; } }
.lost-calm .lost-screen, .lost-calm .lost-term p.typing::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .lost-screen, .lost-term p.typing::after { animation: none; } }
.lost-found h2 { margin: 0.2rem 0 1rem; }
.lost-ways { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.lost-ways a { display: grid; gap: 0.2rem; padding: 1rem 1.1rem; border-radius: 0.7rem; border: 1px solid rgba(240, 194, 90, 0.45); background: rgba(240, 194, 90, 0.07); color: inherit; text-decoration: none; min-height: 44px; }
.lost-ways a:hover, .lost-ways a:focus-visible { border-color: var(--gold); background: rgba(240, 194, 90, 0.14); }
.lost-ways b { font: 900 1.3rem/1 var(--display); text-transform: uppercase; color: var(--gold-ink); } .lost-ways span { color: var(--muted); font-size: 0.9rem; }
.lost-copy h1 { font: 900 clamp(2.6rem, 6vw, 4.4rem)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.01em; color: #f3ead6; }
.lost-art { -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 62%, transparent 100%); }
.lost-radio.is-found .lost-screen { font-size: 1.05cqw; }

/* KIDS tag (2026-10-20): one look for every kids' card, in the soft Snooze night colour so it stands apart from the gold FREE */
.tag-kids { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 99px; background: #b9a7ff; color: #1b1440; font: 700 0.72rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.pg-card .pg-top { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.9rem 1rem 0; }
.pg-card .pg-top .pg-kind { margin: 0; }
.btn.small-f.kind-kids .swatch { background: #b9a7ff; }
.btn.small-f.kind-kids[aria-pressed="true"] { color: #1b1440; border-color: #6b5bc4; background: linear-gradient(180deg, #d9cfff, #b9a7ff); box-shadow: 0 0 14px rgba(185, 167, 255, 0.5); }
.snooze-card .cover-badge, .gd-snooze .cover-badge { background: rgba(27, 20, 64, 0.82); }   /* Snooze Bandit's badge in its night colours */
/* Snooze Bandit's card in its own night colours, never Murder in the Dark's red (2026-10-20) */
.snooze-card { --accent: #b9a7ff; --accent-ink: #e5dcff; --accent-paper: #4b3d9a; }
.snooze-card .mitd-chips li, .snooze-card .mitd-chips li:first-child { border-color: rgba(75, 61, 154, 0.55); background: rgba(185, 167, 255, 0.18); color: #3a2f80; }
.snooze-card .more { color: #4b3d9a; }

/* Coming-soon party cards on /games/ (2026-10-20): the house card, in the party games' slate, never Murder in the Dark's red */
.party-soon:not(.snooze-card) { --accent: #9fb4c8; --accent-ink: #dfe9f2; --accent-paper: #2f4558; }
.party-soon .mitd-chips li { border-color: rgba(47, 69, 88, 0.5); background: rgba(159, 180, 200, 0.18); color: #2f4558; }
.party-soon .price-line:not(.free) .pl-now { color: #2f4558; }
div.case-link { display: block; color: inherit; }
/* the KIDS tag sits inside the normal header height, so every card in a row lines up */
.pg-card .pg-top { min-height: 1.1rem; line-height: 1; }
.pg-card .pg-top .tag-kids { padding: 0.12rem 0.5rem; margin-block: -0.2rem; font-size: 0.66rem; line-height: 1.1; }

/* Audience tags (2026-10-20): plain words in a pill, one colour each; never a classification shape */
.tag-aud { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 99px; font: 700 0.66rem/1.1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.tag-kids { background: #b9a7ff; color: #1b1440; }
.tag-family { background: #8fdcaa; color: #0d3b22; }
.tag-teens { background: #8ec5ff; color: #0b2a4a; }
.tag-adults { background: #ff9a90; color: #4a0d08; }
.pg-card .pg-top .tag-aud { margin-block: -0.2rem; }
/* on the shelf cards: a second tab, top right, beside the clip */
.case.mini { position: relative; }
.case.mini > .tag-aud.on-card { position: absolute; top: -1.2rem; right: 2.4rem; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.btn.small-f.kind-family .swatch { background: #8fdcaa; } .btn.small-f.kind-teens .swatch { background: #8ec5ff; } .btn.small-f.kind-adults .swatch { background: #ff9a90; }
.btn.small-f.kind-family[aria-pressed="true"] { color: #0d3b22; border-color: #3c8a5c; background: linear-gradient(180deg, #c3f0d3, #8fdcaa); box-shadow: 0 0 14px rgba(143, 220, 170, 0.5); }
.btn.small-f.kind-teens[aria-pressed="true"] { color: #0b2a4a; border-color: #3f78b5; background: linear-gradient(180deg, #c6e2ff, #8ec5ff); box-shadow: 0 0 14px rgba(142, 197, 255, 0.5); }
.btn.small-f.kind-adults[aria-pressed="true"] { color: #4a0d08; border-color: #b8504a; background: linear-gradient(180deg, #ffcbc5, #ff9a90); box-shadow: 0 0 14px rgba(255, 154, 144, 0.5); }

/* Findability fixes (2026-10-20) */
.grecaptcha-badge { visibility: hidden !important; }
.rc-note { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--muted); }
.rc-note a { color: inherit; }
/* back to the top: bottom left, 44 px, so it never sits on a card's links */
.runner { right: auto; left: max(0.8rem, env(safe-area-inset-left)); height: 2.75rem; }
.pg-notify { margin-top: 0.4rem; }
.pg-notify summary { cursor: pointer; font-weight: 700; color: var(--gold-ink); min-height: 44px; display: flex; align-items: center; }
.pg-notify .notify { margin-top: 0.4rem; }
.pg-pack .notify { margin-top: 0.6rem; }
.btn.small-f.kind-soon .swatch { background: #c9b9a8; }
/* tap targets on phones: 44 px, by padding, not bigger type */
@media (max-width: 760px) {
  .case.mini .more, .case .more { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-block; padding-block: 0.8rem; }
  .filters .btn.small-f { min-height: 44px; }
  .top .btn.acct { min-height: 44px; }
  .mnav-foot a, .foot-base a { display: inline-flex; align-items: center; min-height: 44px; }
  .dt-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* About: the "Got the word?" form fits at 360 */
.dz-crack .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dz-crack .row input { flex: 1 1 8rem; min-width: 0; }
.dz-crack .row .btn { flex: none; }

/* Tester invites (2026-10-20): the welcome banner on /account/, the Host tab's codes, and /testers/ */
.invite-banner { margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: 0.6rem; border: 1px solid rgba(240, 194, 90, 0.5); background: rgba(240, 194, 90, 0.1); font-weight: 700; }
.invite-banner[data-tone="bad"] { border-color: rgba(255, 90, 78, 0.55); background: rgba(255, 90, 78, 0.1); }
.invite-banner[hidden] { display: none; }
.code-tag { justify-self: start; display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 99px; background: rgba(255, 90, 78, 0.15); color: #ffb3aa; font: 700 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.codes .links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.codes .links .more { min-height: 44px; padding: 0 0.4rem; border: 0; background: none; color: var(--gold-ink); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.testers-page .t-how { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--gold); background: rgba(240, 194, 90, 0.07); }
.testers-page .t-who { font-weight: 700; color: var(--gold-ink); }
.t-group { margin: 2rem 0 0; } .t-group h2 { margin: 0 0 0.8rem; }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.t-game { padding: 1rem 1.1rem; border-radius: 0.8rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.28); display: grid; gap: 0.5rem; align-content: start; }
.t-game h3 { margin: 0; font: 900 1.3rem/1 var(--display); text-transform: uppercase; }
.t-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.t-meta span { padding: 0.1rem 0.55rem; border-radius: 99px; border: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }
.t-meta .t-sent { border-color: rgba(26, 125, 79, 0.6); color: #8fdcaa; }
.t-play { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .t-play .btn { min-height: 44px; }
.t-note { margin: 0; color: var(--muted); }
.t-fb summary { cursor: pointer; font-weight: 700; color: var(--gold-ink); min-height: 44px; display: flex; align-items: center; }
.t-fb form { display: grid; gap: 0.5rem; } .t-fb textarea, .t-fb select { width: 100%; font: inherit; }
.t-fb label { display: grid; gap: 0.25rem; font-size: 0.9rem; } .t-count { margin: 0; font-size: 0.78rem; color: var(--muted); }
.t-msg { padding: 1.2rem; border-radius: 0.8rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.28); }

/* Findability batch B (2026-10-20): the home page's compact town hunts band, and coming-2027 labels on How it plays */
.town-band .tb-box { display: grid; gap: 1rem; padding: 1.3rem 1.4rem; border-radius: 0.9rem; border: 1px dashed rgba(156, 199, 207, 0.4); background: rgba(0, 0, 0, 0.25); }
.town-band .tb-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.town-band .tb-points li { padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: rgba(156, 199, 207, 0.08); color: var(--muted); font-size: 0.92rem; }
.town-band .tb-points b { display: block; color: var(--ink, #f6efe0); }
.town-band .row-btns { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.town-band .row-btns .more { min-height: 44px; display: inline-flex; align-items: center; }
.how-page .row-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.way-meta .wm-soon { background: rgba(240, 194, 90, 0.16); border-color: rgba(240, 194, 90, 0.55); color: var(--gold-ink); font-weight: 700; }

/* /party-games/ restyle (2026-10-20, behind HUNT_PARTY_RESTYLE until Scott OKs it): Scott's mock-up with the shelf's poster cards */
.pgx-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 1.5rem; align-items: center; margin-bottom: 1rem; }
.pgx-head .page-head { margin-bottom: 0; }
.pgx-strap { margin: 0.4rem 0 0; font: 700 0.8rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.pgx-proof { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.pgx-proof li { display: grid; justify-items: center; gap: 0.4rem; padding: 0.8rem 0.6rem; text-align: center; border-radius: 0.6rem; border: 1px solid rgba(240, 194, 90, 0.35);
  background: rgba(0, 0, 0, 0.3); font: 700 0.78rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink, #f6efe0); }
.pgx-proof svg { width: 1.6rem; height: 1.6rem; color: var(--gold); }
.pgx-case { width: 100%; height: auto; max-width: 30rem; justify-self: end; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.pgx-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.1rem; }
.pgx-panel { padding: 1.4rem; border-radius: 1rem; border: 1px solid rgba(240, 194, 90, 0.45);
  background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(240, 194, 90, 0.12), transparent 70%),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 22px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 22px), #0d0f12;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.pgx-panel-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-bottom: 1.3rem; }
.pgx-panel-head h2 { margin: 0; } .pgx-panel-head p { margin: 0; }
.pgx-pack-cta { padding: 1rem; border-radius: 0.7rem; border: 1px dashed rgba(240, 194, 90, 0.55); background: rgba(240, 194, 90, 0.06); }
.pgx-pack-cta .pg-state { margin: 0 0 0.5rem; }
.pgx-qa { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 1.6rem; align-items: start; }
.pgx-room { width: 100%; height: auto; border-radius: 0.9rem; border: 1px solid rgba(240, 194, 90, 0.35); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); position: sticky; top: 5.5rem; }
.pgx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pgx-chips li { padding: 0.25rem 0.7rem; border-radius: 0.3rem; border: 1px solid rgba(240, 194, 90, 0.55); font: 700 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.pgx .game-faq { margin: 0; }
.pgx .pg-notify { margin-top: 0.4rem; }
@media (max-width: 860px) {
  .pgx-head, .pgx-panel-head, .pgx-qa { grid-template-columns: 1fr; }
  .pgx-case { max-width: 20rem; justify-self: center; order: -1; margin-bottom: -1rem; }
  .pgx-room { position: static; }
  .pgx-panel { padding: 1rem; }
}
@media (max-width: 520px) {
  .pgx-proof { grid-template-columns: 1fr; }
  .pgx-proof li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .pgx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
}
/* poster card grids on the hub (Scott, 2026-10-21: "on Desktop, lets make it show 3 or 4 across not 5, as it cuts stuff off"):
   2 across on phones and tablets, 3 on mid widths, 4 on wide desktops; never 5 */
@media (min-width: 521px) and (max-width: 860px) { .pgx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 861px) { .pgx-row, .pgx-panel .pgx-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1200px) { .pgx-row, .pgx-panel .pgx-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }
/* the tab and the audience tag on a mini card (2026-10-21): the tag rides the card's right edge, clear of the tab, and on
   narrow cards both get smaller so "Coming soon" and the tag always read in full */
.case.mini > .tag-aud.on-card { right: 0.4rem; }
.case .price-line .pl-was { margin: 0 0.45rem 0 0.4rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; opacity: 0.65; }   /* the full price, struck through only while an offer runs (shop.js) */
@media (max-width: 520px), (min-width: 861px) and (max-width: 1000px) {
  .case.mini > .tab { left: 0.6rem; padding: 0.3rem 0.5rem 0.22rem; font-size: 0.6rem; letter-spacing: 0.05em; }
  .case.mini > .tag-aud.on-card { right: 0.25rem; top: -1.1rem; padding: 0.1rem 0.38rem; font-size: 0.56rem; letter-spacing: 0.06em; }
}

/* the entity line under the footer's base row (2026-10-20) */
.foot-entity { margin: 0.35rem 0 0; font: 400 0.72rem var(--mono); letter-spacing: 0.04em; color: var(--muted); }

/* Buy boxes and the checkout toast (assets/shop.js, 2026-10-20) */
.buy-box { display: grid; gap: 0.4rem; margin: 0.6rem 0 0; }
.buy-box[hidden], .buy-box [hidden] { display: none; }
.buy-box .btn { min-height: 44px; justify-self: start; }
.buy-owned { margin: 0; padding: 0.5rem 0.7rem; border-radius: 0.5rem; background: rgba(26, 125, 79, 0.16); border: 1px solid rgba(26, 125, 79, 0.55); }
.buy-test { margin: 0; font: 700 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #ffb3aa; }
.sheet .buy-box .btn { width: 100%; justify-content: center; }
.sheet .buy-owned { color: #14361f; background: rgba(26, 125, 79, 0.18); }
.shop-toast { position: fixed; z-index: 90; left: 50%; bottom: 1.2rem; transform: translateX(-50%); max-width: min(34rem, calc(100vw - 2rem)); padding: 0.85rem 1.1rem;
  border-radius: 0.7rem; background: #12151a; color: #f6efe0; border: 1px solid rgba(240, 194, 90, 0.6); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); font-weight: 700; }
.shop-toast[data-tone="good"] { border-color: rgba(26, 125, 79, 0.9); }
.shop-toast[data-tone="bad"] { border-color: rgba(255, 90, 78, 0.8); }
.shop-toast[hidden] { display: none; }

/* Become a tester (2026-10-20) */
.apply-spots { margin: 0.6rem 0 0; padding: 0.6rem 0.9rem; border-radius: 0.6rem; border: 1px solid rgba(26, 125, 79, 0.6); background: rgba(26, 125, 79, 0.12); font-weight: 700; }
.apply-spots[data-open="no"] { border-color: rgba(240, 194, 90, 0.6); background: rgba(240, 194, 90, 0.1); }
.apply-spots[hidden] { display: none; }
.apply-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.apply-form, .apply-thanks { display: grid; gap: 0.9rem; }
.apply-form h2, .apply-thanks h2 { margin: 0; }
.apply-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.apply-form legend { font-weight: 700; margin-bottom: 0.4rem; padding: 0; }
.apply-form .choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.apply-form .pick { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.85rem; border-radius: 0.5rem; border: 1px solid rgba(20, 17, 11, 0.35); background: rgba(255, 255, 255, 0.35); cursor: pointer; }
.apply-form .pick:has(input:checked) { border-color: #14110b; background: rgba(240, 194, 90, 0.55); font-weight: 700; }
.apply-form .check { display: flex; gap: 0.6rem; align-items: flex-start; min-height: 44px; cursor: pointer; }
.apply-form .check input { margin-top: 0.25rem; width: 1.2rem; height: 1.2rem; flex: none; }
.apply-form .promise { padding: 0.7rem 0.8rem; border-radius: 0.5rem; border: 1px dashed rgba(20, 17, 11, 0.45); font-weight: 700; }
.apply-form [aria-invalid="true"] { outline: 3px solid #c0392b; outline-offset: 2px; border-radius: 0.5rem; }
.apply-thanks { position: relative; }
.apply-thanks:focus { outline: none; }
.apply-thanks[hidden], .apply-form[hidden] { display: none; }
@media (max-width: 860px) { .apply-cols { grid-template-columns: 1fr; } }
.apply-form, .apply-thanks { padding: 1.5rem 1.4rem; }
.apply-form .pick input, .apply-form .check input { -webkit-appearance: auto; appearance: auto; width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; margin: 0; border: 0; box-shadow: none; flex: none; accent-color: #14110b; background: none; }
.apply-form .check input { margin-top: 0.2rem; }
.apply-thanks h2 { padding-right: 7rem; }
.apply-thanks .stamp-red { position: absolute; top: 1.1rem; right: 1.1rem; transform: rotate(-8deg); }
.apply-spots { margin-bottom: 1rem; }
@media (max-width: 520px) { .apply-form, .apply-thanks { padding: 1.1rem 0.95rem; } .apply-thanks h2 { padding-right: 0; margin-top: 2.2rem; } }

/* Snooze Bandit in-game moments (2026-10-20, assets/party-fx.js): the night sky, flip cards, shuffle and slam, host tabs, goodbye.
   Everything here is scoped to html.skin-snooze, so Murder in the Dark looks exactly as before. Calm mode and reduced motion
   (html.fx-calm) hold everything still. No flashing: the stars drift and glow slowly, never blink. */
.skin-snooze .pt-shell { background: linear-gradient(180deg, #120f33 0%, #1d1850 45%, #2b2470 100%); }
.skin-snooze .pt-shell::before, .skin-snooze .pt-shell::after { content: ""; position: fixed; pointer-events: none; z-index: 0; }
.skin-snooze .pt-shell::before { inset: -40% -10% 0 -10%; opacity: 0.85;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 22% 30%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 35% 8%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 47% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 62% 14%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 74% 34%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 88% 10%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 94% 28%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 15% 52%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 30% 66%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 56% 48%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 70% 62%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 84% 54%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 40% 82%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 66% 88%, #fff8d6 50%, transparent 52%), radial-gradient(1.2px 1.2px at 6% 86%, #fff 50%, transparent 52%);
  background-size: 100% 60%; animation: fx-drift 90s linear infinite; }
.skin-snooze .pt-shell::after { top: 4.5rem; right: max(1.2rem, calc(50% - 30rem)); width: 4.2rem; height: 4.2rem; border-radius: 50%;
  box-shadow: -1.1rem 0.7rem 0 0 #fff3c4; filter: drop-shadow(0 0 1.1rem rgba(255, 243, 196, 0.45)); transform: rotate(-18deg); opacity: 0.95; }
.skin-snooze .pt-shell > *:not(.fx-intro) { position: relative; z-index: 1; }
.skin-snooze .pt-shell > .pt-top { position: sticky; z-index: 3; }
.skin-snooze .pt-shell .pt-top { background: linear-gradient(180deg, rgba(18, 15, 51, 0.96) 70%, rgba(18, 15, 51, 0)); }
@keyframes fx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2%, 40%, 0); } }
.fx-calm.skin-snooze .pt-shell::before { animation: none; }

/* the card: a branded back, and a 3D flip to the role (press and hold, or tap in tap mode); the face never shows while closed */
.skin-snooze .party .pt-hold { overflow: visible; perspective: 1400px; background: none; border: 0; }
.skin-snooze .party .pt-back, .skin-snooze .party .pt-face { border-radius: 0.9rem; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform-style: preserve-3d; transition: transform 560ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 280ms; }
.skin-snooze .party .pt-back { background: url(../img/party/snooze/card-back.webp) center / cover no-repeat; border: 0; justify-content: flex-end; padding-bottom: 1.1rem;
  transform: rotateY(0deg); visibility: visible; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.skin-snooze .party .pt-back .dl-seal { display: none; }
.skin-snooze .party .pt-back > span:last-child { padding: 0.45rem 0.9rem; border-radius: 99px; background: rgba(18, 15, 51, 0.82); border: 1px solid rgba(243, 198, 106, 0.7);
  color: #fff3c4; font-size: 0.85rem; }
.skin-snooze .party .pt-face { transform: rotateY(180deg); visibility: hidden; }
.skin-snooze .party .pt-hold.is-open .pt-back { transform: rotateY(-180deg); visibility: hidden; }
.skin-snooze .party .pt-hold.is-open .pt-face { transform: rotateY(0deg); visibility: visible; transition: transform 560ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s; }
.skin-snooze .party .pt-hold.is-open .pt-face .pt-role { animation: none; }
.fx-calm.skin-snooze .party .pt-back, .fx-calm.skin-snooze .party .pt-face { transition: none; }

/* a new round: the deck riffles and stacks, then the round lands across the screen */
.fx-intro { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; background: rgba(12, 10, 36, 0.78); transition: opacity 300ms ease; }
.fx-intro.is-out { opacity: 0; }
.fx-deck { position: absolute; left: 50%; top: 42%; width: 9rem; height: 12rem; margin: -6rem 0 0 -4.5rem; }
.fx-c { position: absolute; inset: 0; border-radius: 0.7rem; background: url(../img/party/snooze/card-back.webp) center / cover; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(calc(var(--i) * -2px)); }
.fx-intro.is-shuffle .fx-c { animation: fx-riffle 1150ms cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes fx-riffle {
  0% { transform: translate(0, calc(var(--i) * -2px)) rotate(0); }
  28% { transform: translate(calc((var(--i) - 2.5) * 34px), -18px) rotate(calc((var(--i) - 2.5) * 7deg)); }
  52% { transform: translate(calc((2.5 - var(--i)) * 26px), -6px) rotate(calc((2.5 - var(--i)) * 5deg)); }
  80% { transform: translate(0, calc(var(--i) * -3px)) rotate(calc((var(--i) - 2.5) * 1.5deg)); }
  100% { transform: translate(0, calc(var(--i) * -2px)) rotate(0); } }
.fx-intro.is-round .fx-deck { opacity: 0; transition: opacity 240ms ease; }
.fx-slam { position: relative; z-index: 1; text-align: center; opacity: 0; transform: scale(1.9) rotate(-6deg); }
.fx-intro.is-round .fx-slam { opacity: 1; transform: scale(1) rotate(-3deg); transition: transform 380ms cubic-bezier(.2, 1.5, .4, 1), opacity 160ms ease; }
.fx-slam b { display: block; padding: 0.35rem 1.4rem 0.2rem; border: 6px solid #f3c66a; border-radius: 1rem; background: #1d1850; color: #fff3c4;
  font: 900 clamp(3.6rem, 18vw, 7.5rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.02em; box-shadow: 0 0 0 6px #1d1850, 0 20px 60px rgba(0, 0, 0, 0.55); }
.fx-slam span { display: block; margin-top: 1rem; font: 800 clamp(1.1rem, 4.6vw, 1.5rem)/1.2 var(--display); text-transform: uppercase; color: #b9e4ff; letter-spacing: 0.04em; }
.fx-calm .fx-slam, .fx-calm .fx-intro.is-round .fx-slam { transform: none; transition: opacity 200ms ease; }

/* the host's two tabs: Game, and Players and settings. One shows at a time, sliding across. */
.fx-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; max-width: 32rem; margin: 0 auto 0.9rem; padding: 0.3rem; border-radius: 99px; background: rgba(18, 15, 51, 0.7); border: 1px solid rgba(185, 167, 255, 0.4); }
.fx-tabs [role="tab"] { min-height: 44px; border: 0; border-radius: 99px; background: none; color: #d9d2ff; font: 800 0.95rem/1.1 var(--sans, inherit); cursor: pointer; }
.fx-tabs [role="tab"][aria-selected="true"] { background: #f3c66a; color: #1d1850; }
.fx-tabs [role="tab"]:focus-visible { outline: 3px solid #fff3c4; outline-offset: 2px; }
.fx-panes { display: grid; overflow: hidden; max-width: 32rem; margin: 0 auto; }
.fx-pane { grid-area: 1 / 1; transition: transform 360ms cubic-bezier(.2, .8, .2, 1), opacity 260ms ease, visibility 0s linear 360ms; }
.fx-panes[data-tab="game"] #fx-p-players, .fx-panes[data-tab="players"] #fx-p-game { visibility: hidden; opacity: 0; height: 0; overflow: hidden; }
.fx-panes[data-tab="game"] #fx-p-players { transform: translateX(40%); }
.fx-panes[data-tab="players"] #fx-p-game { transform: translateX(-40%); }
.fx-panes[data-tab="game"] #fx-p-game, .fx-panes[data-tab="players"] #fx-p-players { visibility: visible; opacity: 1; transform: none; transition: transform 360ms cubic-bezier(.2, .8, .2, 1), opacity 260ms ease, visibility 0s linear 0s; }
.fx-pane .pt-invite { display: block; }
.fx-calm .fx-pane { transition: none; }

/* goodbye */
.fx-bye { text-align: center; }
.fx-bye-art { position: relative; width: min(16rem, 70%); margin: 0.6rem auto 0.4rem; }
.fx-bye-art img { width: 100%; height: auto; border-radius: 1rem; display: block; animation: fx-sway 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.fx-bubble { position: absolute; left: 52%; top: -0.4rem; margin: 0; padding: 0.6rem 0.9rem; border-radius: 1rem; background: #fff8e6; color: #1d1850;
  font: 800 1rem/1.2 var(--sans, inherit); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); animation: fx-pop 420ms cubic-bezier(.2, 1.5, .4, 1) both 200ms; }
.fx-bubble::after { content: ""; position: absolute; left: 1rem; bottom: -0.55rem; border: 0.6rem solid transparent; border-top-color: #fff8e6; border-bottom: 0; }
.fx-bye-btns { justify-content: center; flex-wrap: wrap; }
.fx-bye-btns .btn { min-height: 44px; }
@keyframes fx-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.fx-calm .fx-bye-art img, .fx-calm .fx-bubble { animation: none; }
@media (prefers-reduced-motion: reduce) { .fx-bye-art img, .fx-bubble, .fx-intro.is-shuffle .fx-c { animation: none; } }
.fx-bye-art { justify-self: center; }
.fx-bubble { width: max-content; max-width: 13rem; }
/* the back turns away and back on its own (its 3D back face hides it); only the face waits, so a closed card never shows the role */
.skin-snooze .party .pt-back, .skin-snooze .party .pt-hold.is-open .pt-back { visibility: visible; transition: transform 560ms cubic-bezier(.2, .8, .2, 1); }
.fx-calm.skin-snooze .party .pt-back { transition: none; }
.fx-bubble { left: auto; right: -0.4rem; top: -0.9rem; max-width: min(11rem, 62vw); }
@media (max-width: 600px) { .skin-snooze .pt-shell::after { top: auto; bottom: 1.6rem; right: 1.6rem; width: 3rem; height: 3rem; box-shadow: -0.8rem 0.5rem 0 0 #fff3c4; opacity: 0.8; } }

/* Murder in the Dark's moments (2026-10-20, assets/party-fx.js with the page's HuntFXConf): the same moments as Snooze Bandit in
   the red lights-out look. Scoped to html.fx-mitd, so Snooze stays as it is. No flashing: the light under the door glows and
   fades slowly (seconds, never a blink), and Calm mode (html.fx-calm) holds it still. */
.fx-mitd .pt-shell { background: radial-gradient(90% 60% at 50% 100%, #1a0b0a 0%, #0a0707 55%, #050404 100%); }
.fx-mitd .pt-shell::before, .fx-mitd .pt-shell::after { content: ""; position: fixed; pointer-events: none; z-index: 0; left: 50%; }
.fx-mitd .pt-shell::before { bottom: 0; width: min(22rem, 70vw); height: min(34rem, 62vh); transform: translateX(-50%); border: 2px solid rgba(120, 30, 24, 0.35); border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0; background: linear-gradient(180deg, rgba(20, 8, 8, 0.6), rgba(10, 5, 5, 0.9)); }
.fx-mitd .pt-shell::after { bottom: 0; width: min(20rem, 64vw); height: 0.5rem; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 120, 80, 0.75), rgba(255, 60, 40, 0.25) 45%, rgba(255, 60, 40, 0) 75%);
  box-shadow: 0 0 2.4rem 1rem rgba(255, 70, 50, 0.16); animation: fx-door 7s ease-in-out infinite; }
@keyframes fx-door { 0%, 100% { opacity: 0.55; } 30% { opacity: 0.8; } 45% { opacity: 0.62; } 70% { opacity: 0.9; } }
.fx-calm.fx-mitd .pt-shell::after { animation: none; opacity: 0.7; }
.fx-mitd .pt-shell > .party, .fx-mitd .pt-shell > .pt-top { position: relative; z-index: 1; }
.fx-mitd .pt-shell > .pt-top { position: sticky; z-index: 3; }

/* the card: the switch back, and a 3D flip to the role; the face never shows while closed */
.fx-mitd .party .pt-hold { overflow: visible; perspective: 1400px; background: none; border: 0; }
.fx-mitd .party .pt-back, .fx-mitd .party .pt-face { border-radius: 0.9rem; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; }
.fx-mitd .party .pt-back, .fx-mitd .party .pt-hold.is-open .pt-back { visibility: visible; transition: transform 560ms cubic-bezier(.2, .8, .2, 1); }
.fx-mitd .party .pt-back { background: url(../img/party/mitd-card-back.webp) center / cover no-repeat; border: 0; justify-content: flex-end; padding-bottom: 1.1rem;
  transform: rotateY(0deg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }
.fx-mitd .party .pt-back .dl-seal { display: none; }
.fx-mitd .party .pt-back > span:last-child { padding: 0.45rem 0.9rem; border-radius: 99px; background: rgba(8, 4, 4, 0.85); border: 1px solid rgba(255, 74, 61, 0.7); color: #f6efe0; font-size: 0.85rem; }
.fx-mitd .party .pt-face { transform: rotateY(180deg); visibility: hidden; transition: transform 560ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 280ms; }
.fx-mitd .party .pt-hold.is-open .pt-back { transform: rotateY(-180deg); }
.fx-mitd .party .pt-hold.is-open .pt-face { transform: rotateY(0deg); visibility: visible; transition: transform 560ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s; }
.fx-mitd .party .pt-hold.is-open .pt-face .pt-role { animation: none; }
.fx-calm.fx-mitd .party .pt-back, .fx-calm.fx-mitd .party .pt-face { transition: none; }

/* a new round, in red and black */
.fx-mitd .fx-intro { background: rgba(5, 3, 3, 0.86); }
.fx-mitd .fx-c { background-image: url(../img/party/mitd-card-back.webp); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7); }
.fx-mitd .fx-slam b { border-color: #ff4a3d; background: #0b0707; color: #f6efe0; box-shadow: 0 0 0 6px #0b0707, 0 0 40px rgba(255, 40, 20, 0.35), 0 20px 60px rgba(0, 0, 0, 0.7); }
.fx-mitd .fx-slam span { color: #ff8a7a; }

/* the host's tabs, in red */
.fx-mitd .fx-tabs { background: rgba(10, 6, 6, 0.8); border-color: rgba(255, 74, 61, 0.45); }
.fx-mitd .fx-tabs [role="tab"] { color: #e8d6cf; }
.fx-mitd .fx-tabs [role="tab"][aria-selected="true"] { background: #ff4a3d; color: #140806; }

/* goodbye: Lights on! The switch flicks up and the room warms, once, over most of a second (a fade, never a flash) */
.fx-lights { display: grid; place-items: center; height: 11rem; margin: 0.4rem 0 0.2rem; }
.fx-switch { position: relative; width: 5.6rem; height: 8.8rem; border-radius: 0.8rem; background: linear-gradient(160deg, #efe6d6, #c9bba5 70%, #a8987f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -5px 10px rgba(0, 0, 0, 0.25), 0 14px 30px rgba(0, 0, 0, 0.6); }
.fx-switch i { position: absolute; left: 50%; top: 50%; width: 2rem; height: 3.6rem; margin: -1.8rem 0 0 -1rem; border-radius: 0.4rem;
  background: linear-gradient(180deg, #b9ab94 0%, #e9e0cf 46%, #d8ccb6 100%); box-shadow: 0 5px 0 #8c7d66, 0 8px 12px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 50%; transform: perspective(200px) rotateX(-28deg); transition: transform 260ms cubic-bezier(.3, 1.6, .5, 1); }
.fx-lights.is-on .fx-switch i { transform: perspective(200px) rotateX(28deg); box-shadow: 0 -5px 0 #8c7d66, 0 -6px 12px rgba(0, 0, 0, 0.3); }
.fx-lights .fx-switch { transition: box-shadow 900ms ease; }
.fx-lights.is-on .fx-switch { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 0 0 0.6rem rgba(255, 230, 170, 0.12), 0 0 4rem 1rem rgba(255, 226, 160, 0.4); }
.fx-bye-lights h3 { font-size: 2.2rem; color: #fff1c9; }
.fx-bye-extra { margin: 0.6rem 0 0; font-size: 0.9rem; }
.fx-bye-extra a { color: #b9e4ff; }

/* The host's $2 for hosting a free party game (2026-10-20, plan/rooms-api.md "The party host's $2"; party.js rewardLine): a small
   win on the host's goodbye, never a button. Gold stamp on Murder in the Dark's red, lavender on Snooze Bandit's night sky. It lands
   once, gently (a press, never a flash); Calm mode and reduced motion show it still. */
.pt-reward { max-width: 24rem; margin: 0.4rem auto 0.9rem; padding: 0.6rem 0.9rem; border: 2px solid #e3a72f; border-radius: 0.6rem;
  background: rgba(227, 167, 47, 0.1); color: #f6efe0; font-size: 0.95rem; line-height: 1.35; text-align: center; }
.pt-reward b { display: block; color: #f6d878; font: 800 1.05rem/1.2 var(--display, inherit); text-transform: uppercase; letter-spacing: 0.02em; }
.fx-bye .pt-reward { animation: pt-reward-in 520ms cubic-bezier(.2, 1.4, .4, 1) both 900ms; }
@keyframes pt-reward-in { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
.fx-mitd .pt-reward { border-style: double; border-width: 4px; border-color: #e3a72f; background: rgba(20, 8, 8, 0.82); transform: rotate(-1.5deg);
  box-shadow: 0 0 0 1px rgba(255, 74, 61, 0.35), 0 10px 26px rgba(0, 0, 0, 0.55); }
.fx-mitd .fx-bye .pt-reward { animation-name: pt-reward-stamp; }
@keyframes pt-reward-stamp { from { opacity: 0; transform: scale(1.35) rotate(-6deg); } to { opacity: 1; transform: rotate(-1.5deg); } }
.skin-snooze .pt-reward { border: 2px solid #b9a7ff; border-radius: 1rem; background: rgba(185, 167, 255, 0.16); color: #f1edff;
  box-shadow: 0 0 1.4rem rgba(185, 167, 255, 0.28); }
.skin-snooze .pt-reward b { color: #e4dcff; }
.fx-calm .pt-reward, .fx-calm .fx-bye .pt-reward { animation: none; }
@media (prefers-reduced-motion: reduce) { .fx-bye .pt-reward { animation: none; } }
.fx-calm .fx-switch i, .fx-calm .fx-lights .fx-switch { transition: none; }
.fx-lights::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 900ms ease;
  background: radial-gradient(80% 60% at 50% 30%, rgba(255, 214, 150, 0.32), rgba(255, 190, 120, 0.12) 55%, rgba(255, 190, 120, 0) 85%); }
.fx-lights.is-on::before { opacity: 1; }
.fx-calm .fx-lights::before { transition: none; }
.fx-mitd .party .pt-back { justify-content: flex-start; padding-top: 0.9rem; padding-bottom: 0; }

/* ---------- News opt-in box, claim card, Emails setting (2026-10-20, plan/play-email-api.md) ---------- */
.news-box[hidden], .news-set[hidden], .claim-card[hidden], .claim-card form[hidden], .claim-card .row-btns[hidden] { display: none; }
.news-box { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; cursor: pointer; }
.news-box input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: #855700; flex: none; }
/* Add my town sits on the dark map plate: its labels are small caps and its inputs are text boxes, so undo both here */
.vote label.news-box { font-weight: 400; font-size: 0.88rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.vote .news-box input { flex: none; min-height: 0; width: 1.2rem; height: 1.2rem; padding: 0; border: 0; box-shadow: none; background: none; accent-color: var(--gold); }

.claim-card { position: relative; display: grid; gap: 0.8rem; padding: 1.5rem 1.4rem; margin: 1rem 0 1.4rem; max-width: 46rem; }
.claim-card:focus { outline: none; }
.claim-card { scroll-margin-top: 6rem; }
.claim-card h2 { margin: 0; padding-right: 7.5rem; font-size: clamp(1.5rem, 5vw, 2.1rem); }
.claim-card .eyebrow { margin: 0; }
.claim-card .claim-body { display: grid; gap: 0.45rem; }
.claim-card .claim-body p { margin: 0; }
.claim-card .claim-msg { font-size: 1.12rem; font-weight: 700; }
.claim-card form { display: grid; gap: 0.8rem; }
.claim-card .tick { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; }
.claim-card .tick input { width: 1.25rem; height: 1.25rem; margin-top: 0.12rem; accent-color: #855700; flex: none; }
.claim-card .row-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.claim-card .stamp-red { top: 1.2rem; right: 1.2rem; transform: rotate(-8deg); }
.claim-card.is-claimed .stamp-red { animation: claim-stamp 520ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes claim-stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(2.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .claim-card.is-claimed .stamp-red { animation: none; } }
@media (max-width: 520px) {
  .claim-card { padding: 1.15rem 0.95rem; }
  .claim-card h2 { padding-right: 0; }
  .claim-card.is-claimed h2 { margin-top: 2.1rem; }
  .claim-card .row-btns .btn { flex: 1 1 100%; text-align: center; }
}

.news-set { display: grid; gap: 0.35rem; }
.news-switch { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; min-height: 44px; }
.news-switch input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 3rem; height: 1.7rem; margin: 0; padding: 0;
  border-radius: 1rem; border: 1.5px solid #3d4446; background: #121516; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); cursor: pointer; transition: background 200ms ease, border-color 200ms ease; }
.news-switch input::after { content: ""; position: absolute; top: 0.17rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #9aa0a0; transition: transform 200ms ease, background 200ms ease; }
.news-switch input:checked { background: rgba(227, 167, 47, 0.25); border-color: var(--gold); }
.news-switch input:checked::after { transform: translateX(1.25rem); background: var(--gold); }
.news-switch input:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.news-switch input:disabled { opacity: 0.6; }
.news-switch span { display: grid; line-height: 1.25; }
.news-switch i { font-style: normal; font-size: 0.85rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .news-switch input, .news-switch input::after { transition: none; } }

/* Murder in the Dark, one phone: the host's own optional email (Scott, 2026-10-20; plan/play-email-api.md section 13).
   dealer.js draws it only on a page with data-host-email, so Snooze Bandit and the party rooms never get it. Red, like the game. */
.dealer .dl-mail { margin: 0.1rem 0 0.5rem; padding: 0.5rem 0.65rem 0.45rem; border-radius: 0.6rem; border: 1px dashed rgba(255, 90, 78, 0.55); background: rgba(255, 90, 78, 0.07); }
.dealer .dl-mail-lab { display: block; font-weight: 700; font-size: 0.92rem; line-height: 1.25; margin: 0 0 0.3rem; }
.dealer .dl-opt { display: inline-block; vertical-align: 0.1em; margin-left: 0.3rem; padding: 0.15rem 0.45rem; border-radius: 99px; border: 1px solid rgba(255, 138, 128, 0.55);
  font: 700 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #ff8a80; }
.dealer .dl-mail-in { display: block; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1.5px solid rgba(255, 90, 78, 0.45);
  background: #0d0909; color: #f6efe0; font: inherit; font-size: 1rem; }
.dealer .dl-mail-in::placeholder { color: #9b8b86; }
.dealer .dl-mail-in:focus { outline: 2px solid var(--mitd); outline-offset: 1px; border-color: var(--mitd); }
.dealer .dl-mail-in[aria-invalid="true"] { border-color: #ff5a4e; }
.dealer .dl-mail-err { margin: 0.35rem 0 0; color: #ff8a80; font-weight: 700; font-size: 0.85rem; line-height: 1.3; }
.dealer .dl-mail .dl-news { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.25; gap: 0.5rem; }
.dealer .dl-mail .dl-news input, .party .dl-mailretry .dl-news input { accent-color: var(--mitd); width: 1.15rem; height: 1.15rem; margin-top: 0.05rem; flex: none; }
.dealer .dl-mail-fine { margin: 0.3rem 0 0; font-size: 0.74rem; line-height: 1.25; color: var(--muted); }
.dealer .dl-mail-fine a { color: #ffb1a8; }
/* the answer, in the game window: on "Everyone has a role" once, and on the lights-on goodbye */
.party .dl-mailnote { margin: 0.2rem 0 0.6rem; padding: 0.55rem 0.8rem; border-radius: 0.5rem; border: 1px solid rgba(255, 90, 78, 0.4); background: rgba(255, 90, 78, 0.08); font-size: 0.9rem; }
.party .dl-mailnote.is-bad { border-style: dashed; color: #ffb1a8; }
.party .dl-mailretry { display: grid; gap: 0.5rem; margin: 0 0 0.8rem; }
.party .dl-mailretry .dl-news { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; }
.fx-bye .dl-mailnote { max-width: 24rem; margin-left: auto; margin-right: auto; }
/* the setup screen fits one phone screen with the box in it (360 px wide, under the sticky header) */
@media (max-width: 600px) {
  .gd-murder-in-the-dark .dealer { padding: 0.7rem 0.8rem 0.75rem; margin-top: 0.8rem; }
  .gd-murder-in-the-dark .dealer h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
  .gd-murder-in-the-dark .dealer .dl-mode { gap: 0.4rem; margin-bottom: 0.4rem; }
  .gd-murder-in-the-dark .dealer .dl-mode button { padding: 0.3rem 0.55rem; min-height: 2.75rem; gap: 0; line-height: 1.2; }
  .gd-murder-in-the-dark .dealer .dl-mode button b { font-size: 0.9rem; white-space: nowrap; }
  .gd-murder-in-the-dark .dealer .dl-mode button span { font-size: 0.72rem; }
  .gd-murder-in-the-dark .dealer .dl-hint { font-size: 0.82rem; line-height: 1.3; margin-bottom: 0.5rem; }
  .gd-murder-in-the-dark .dealer .dl-setup { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.8rem; }
  .gd-murder-in-the-dark .dealer .dl-setup > :not(.dl-row) { grid-column: 1 / -1; }
  .gd-murder-in-the-dark .dealer .dl-setup .dl-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; margin: 0 0 0.55rem; }
  .gd-murder-in-the-dark .dealer .dl-lab { font-size: 0.85rem; }
  .gd-murder-in-the-dark .dealer .dl-btn { width: 2.75rem; height: 2.75rem; }
  .gd-murder-in-the-dark .dealer .dl-num { font-size: 1.7rem; }
  .gd-murder-in-the-dark .dealer .dl-seg button { padding: 0.45rem 0.8rem; min-height: 2.75rem; }
  .gd-murder-in-the-dark .dealer .dl-check { font-size: 0.86rem; line-height: 1.25; margin: 0 0 0.35rem; }
  .gd-murder-in-the-dark .dealer .dl-check input { width: 1.15rem; height: 1.15rem; margin-top: 0.05rem; }
  .gd-murder-in-the-dark .dealer .dl-sub { margin-top: -0.15rem; }
  .gd-murder-in-the-dark .dealer .dl-mail { margin-top: 0.3rem; margin-bottom: 0.4rem; }
  .gd-murder-in-the-dark .dealer .dl-go { margin-top: 0.2rem; }
}