/* Riddle10 — "night observatory": deep ink sky, lantern gold, glass panels. Mobile first. */

:root {
  /* v18 calm edition: softer surfaces, one hairline tone, quiet shadows, no glow. --gold paints fills (button, logo ".com",
     XP bar); --gold-text paints gold text and icons. Correct (--teal, --green) is sky blue and wrong (--rose) amber, so
     colour-blind players tell them apart. */
  --bg: #0a0e1a; --bg-2: #131928; --bg-3: #1a2133;
  --ink: #f7eedc; --ink-2: #b8b2a5; --muted: #a29d91;
  --gold: #f4c76f; --gold-2: #e0a043; --gold-ink: #241703; --gold-text: #e8c27a; --star: #e8c27a;
  --teal: #7ec0e6; --rose: #f2a37a; --green: #7ec0e6;
  --glass: rgba(255, 244, 222, .055); --glass-2: rgba(255, 244, 222, .09); --glass-hi: rgba(255, 244, 222, .16);
  --line: #222a3b; --line-2: #222a3b;
  --shadow: 0 14px 40px -22px rgba(0, 0, 0, .45);
  --glow: 0 6px 20px -10px rgba(0, 0, 0, .5);
  --radius: 20px; --radius-sm: 12px;
  --serif: "Cormorant Garamond", "Noto Kufi Arabic", Georgia, serif;
  --sans: "Inter", "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px; --gutter: 16px;
  --lattice-op: .03;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5efe2; --bg-2: #fbf6ea; --bg-3: #eee3cb;
  --ink: #1e1910; --ink-2: #51472f; --muted: #5e543d;
  --gold: #b9811f; --gold-2: #96630f; --gold-ink: #1e1405; --gold-text: #80560a; --star: #9a6a10;
  --teal: #0a5f78; --rose: #9e3716; --green: #0a5f78;
  --glass: rgba(255, 255, 255, .55); --glass-2: rgba(255, 255, 255, .75); --glass-hi: rgba(255, 255, 255, .95);
  --line: #dccfb2; --line-2: #dccfb2;
  --shadow: 0 10px 28px -18px rgba(90, 60, 15, .28);
  --glow: 0 4px 14px -6px rgba(185, 129, 31, .35);
  --lattice-op: .04;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font: 400 18px/1.75 var(--sans); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
:lang(ar) body, body:lang(ar) { --serif: "Noto Kufi Arabic", serif; --sans: "Noto Kufi Arabic", system-ui, sans-serif; }
main { flex: 1; position: relative; z-index: 1; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold-text); }
button { font: inherit; color: inherit; }
svg { width: 1.1em; height: 1.1em; flex: none; }
h1, h2, h3, .hero-stats dd, .next-time, .think-num, .err-code, .stat strong, .q-pos, .answer-text { font-variant-numeric: lining-nums tabular-nums; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: .01em; }
/* One very long word (a riddle's "Supercalifragilisticexpialidocious") wraps instead of pushing the page sideways on phones. */
h1, h2, h3, p, li, dd, blockquote { overflow-wrap: break-word; }
.riddle-head h1, .stage-question, .answer-text { overflow-wrap: anywhere; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 8px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
[hidden] { display: none !important; }

/* ---------- sky ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky-glow {
  position: absolute; inset: -20% -10% auto; height: 120vh;
  background: radial-gradient(60% 40% at 50% 0%, rgba(244, 180, 80, .06), transparent 70%);
}
:root[data-theme="light"] .sky-glow { background: radial-gradient(60% 45% at 50% 0%, rgba(236, 190, 100, .20), transparent 70%); }
.sky-lattice {
  position: absolute; inset: 0; opacity: var(--lattice-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f4c76f' stroke-width='1'%3E%3Cpath d='M39 10h42l29 29v42l-29 29H39L10 81V39z'/%3E%3Cpath d='M60 0v10M60 110v10M0 60h10M110 60h10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  mask-image: radial-gradient(80% 60% at 50% 10%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 10%, #000 20%, transparent 75%);
}
.sky-dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- buttons, badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold { background: var(--gold); color: var(--gold-ink); box-shadow: var(--glow); }
.btn-gold:hover { color: var(--gold-ink); filter: brightness(1.05); }
:root[data-theme="light"] .btn-gold { border-color: rgba(120, 80, 10, .35); }
.btn-glass { background: var(--glass-2); border-color: var(--line-2); backdrop-filter: blur(10px); }
.btn-glass:hover { border-color: var(--gold); color: var(--ink); background: var(--glass-hi); }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-quiet:hover { border-color: var(--line-2); color: var(--ink); }
.btn-danger { background: rgba(255, 110, 100, .12); border-color: rgba(255, 110, 100, .35); color: var(--rose); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.iconbtn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); cursor: pointer; color: var(--ink-2);
  transition: color .2s, border-color .2s, background .2s;
}
.iconbtn:hover { color: var(--gold-text); border-color: var(--line-2); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn[hidden] { display: none; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(10, 12, 22, .66); color: #f7eedc; border: 1px solid rgba(255, 228, 180, .18); backdrop-filter: blur(8px);
}
.badge svg { width: 13px; height: 13px; }
.badge-new { background: linear-gradient(180deg, #ffe0a0, #e8ac4e); color: #2a1a03; border: 0; }
.badge-solved { background: rgba(60, 170, 100, .9); color: #fff; border: 0; }

.diff { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.diff i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--line-2); margin-inline-end: 2px; }
.diff i.on { background: var(--star); }
.diff-5 i.on { background: var(--rose); }
.diff span { margin-inline-start: 4px; text-transform: uppercase; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-text); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px) saturate(140%); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.logo-mark { width: 36px; height: 36px; color: var(--ink); filter: drop-shadow(0 0 10px rgba(244, 199, 111, .35)); }
.brand-logo { display: block; height: 34px; width: auto; color: var(--ink); filter: drop-shadow(0 0 10px rgba(244, 199, 111, .22)); }
.brand-logo .brand-com { fill: var(--gold); }
.mainnav { display: none; }
.topbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.search { position: relative; display: none; align-items: center; }
.search svg { position: absolute; inset-inline-start: 13px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search input {
  width: 210px; height: 42px; padding-inline: 38px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--glass); color: var(--ink); font: inherit; font-size: 16px; transition: width .25s, border-color .2s;
}
.search input:focus { outline: none; border-color: var(--gold); width: 250px; }
.theme-toggle .if-light, :root[data-theme="light"] .theme-toggle .if-dark { display: none; }
:root[data-theme="light"] .theme-toggle .if-light { display: block; }
.menu-toggle .if-open, .menu-open .menu-toggle .if-closed { display: none; }
.menu-open .menu-toggle .if-open { display: block; }
.langs { position: relative; }
.langs summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.langs summary::-webkit-details-marker { display: none; }
.langs-menu { position: absolute; inset-inline-end: 0; top: 50px; min-width: 160px; padding: 6px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.langs-menu a { display: block; padding: 8px 12px; border-radius: 8px; }
.langs-menu a.is-active, .langs-menu a:hover { background: var(--glass-2); color: var(--gold-text); }

/* mobile menu */
@media (max-width: 999px) {
.menu-open .mainnav {
  display: flex; flex-direction: column; position: fixed; inset: 64px 0 auto 0; padding: 12px var(--gutter) 20px;
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
  animation: drop .22s ease;
}
.menu-open .search-menu { display: flex; margin: 6px 0 8px; }
.menu-open .search-menu input, .menu-open .search-menu input:focus { width: 100%; height: 48px; font-size: 16px; }
.menu-open .mainnav a { display: flex; align-items: center; gap: 12px; padding: 14px 6px; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 17px; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 640px) { .search { display: flex; } .mainnav .search-menu { display: none; } }
@media (min-width: 1000px) {
  .menu-toggle { display: none; }
  .mainnav { display: flex; gap: 2px; margin-inline-start: 18px; }
  .mainnav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
  .mainnav a svg { width: 16px; height: 16px; opacity: .8; }
  .mainnav a:hover { color: var(--ink); background: var(--glass); }
  .mainnav a.is-active { color: var(--gold-text); background: var(--glass-2); }
}

/* ---------- hero ---------- */
.hero { padding: 28px 0 10px; }
.hero-in { display: grid; gap: 28px; align-items: center; }
.hero-title { font-size: clamp(44px, 11vw, 92px); line-height: .95; margin: 14px 0 16px; letter-spacing: -.01em; }
.hero-title em { font-style: italic; color: var(--gold-text); text-shadow: 0 0 40px rgba(244, 190, 100, .35); }
.hero-lead { color: var(--ink-2); font-size: 17px; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-stats { display: flex; gap: 26px; margin: 28px 0 0; }
.hero-stats div { display: flex; flex-direction: column-reverse; }
.hero-stats dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.hero-stats dd { margin: 0; font-family: var(--serif); font-size: 36px; font-weight: 700; line-height: 1; }
.solved-stat dd { color: var(--gold-text); }

.hero-feature { position: relative; display: block; justify-self: center; width: min(100%, 360px); }
.hero-feature-frame {
  position: relative; aspect-ratio: 9 / 13; border-radius: 28px; overflow: hidden; background: var(--bg-3);
  border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 8px var(--glass), 0 0 90px -20px rgba(244, 190, 100, .45);
  transform: rotate(-1.5deg); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.hero-feature:hover .hero-feature-frame { transform: rotate(0) translateY(-4px); }
.hero-feature-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-feature-frame .badge { position: absolute; bottom: 16px; inset-inline-start: 16px; }
.hero-feature-text { display: grid; place-content: center; height: 100%; padding: 34px; background: radial-gradient(circle at 50% 30%, rgba(244, 190, 100, .18), transparent 60%); }
.hero-feature-text p { font-family: var(--serif); font-size: 26px; line-height: 1.3; }
.hero-feature-text .q { width: 40px; height: 40px; color: var(--gold-text); margin-bottom: 14px; }
.hero-feature-cap { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 18px; text-align: center; }
.hero-feature-cap strong { font-family: var(--serif); font-size: 24px; }
.hero-empty { display: grid; place-items: center; aspect-ratio: 9 / 13; border: 1px dashed var(--line-2); border-radius: 28px; color: var(--muted); }
.play-orb { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 999px; display: grid; place-items: center; background: rgba(10, 12, 22, .55); border: 1px solid rgba(255, 228, 180, .4); backdrop-filter: blur(6px); color: #ffe2a6; animation: breathe 2.6s ease-in-out infinite; }
.play-orb svg { width: 30px; height: 30px; margin-inline-start: 4px; }
@keyframes breathe { 50% { box-shadow: 0 0 0 14px rgba(244, 199, 111, .08), 0 0 40px rgba(244, 199, 111, .35); } }

@media (min-width: 900px) {
  .hero { padding: 56px 0 20px; }
  .hero-in { grid-template-columns: 1.15fr .85fr; gap: 48px; }
  .hero-feature { width: min(100%, 400px); }
}

.next-drop {
  display: flex; align-items: center; gap: 14px; width: fit-content; margin: 30px auto 0; padding: 10px 22px 10px 12px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
}
.next-drop .ring { width: 40px; height: 40px; }
.next-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.next-time { display: block; font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--gold-text); }
.ring circle { fill: none; stroke: var(--line-2); stroke-width: 4; }
.ring .ring-fill { stroke: var(--gold-text); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .9s linear; filter: drop-shadow(0 0 4px rgba(244, 199, 111, .6)); }

/* ---------- kinds + categories ---------- */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; }
.kind {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px;
  border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line);
  transition: transform .25s, border-color .25s, background .25s;
}
.kind::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--k, rgba(244, 199, 111, .25)), transparent 70%); }
.kind-image { --k: rgba(116, 220, 210, .25); } .kind-video { --k: rgba(255, 143, 134, .25); }
.kind:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--glass-2); color: var(--ink); }
.kind svg { width: 26px; height: 26px; color: var(--gold-text); margin-bottom: 6px; }
.kind-image svg { color: var(--teal); } .kind-video svg { color: var(--rose); }
.kind strong { font-family: var(--serif); font-size: 22px; }
.kind span { display: none; color: var(--muted); font-size: 14px; }
@media (min-width: 640px) { .kind { padding: 22px; } .kind span { display: block; } }

.block { margin-top: 44px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.block-head h2 { font-size: clamp(28px, 5vw, 40px); }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-text); font-weight: 600; font-size: 14px; }

.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cat { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.cat:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--ink); }
.cat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 8px; background: linear-gradient(160deg, rgba(244, 199, 111, .25), rgba(244, 199, 111, .05)); color: var(--gold-text); border: 1px solid rgba(244, 199, 111, .25); }
.cat-icon svg { width: 22px; height: 22px; }
.cat strong { font-family: var(--serif); font-size: 21px; }
.cat span { font-size: 13px; color: var(--muted); }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } }
.grid-ad { grid-column: 1 / -1; }
.grid-ad:not(:has(.ad)) { display: none; }
.card {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--glass); border: 1px solid var(--line); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow), 0 0 50px -25px rgba(244, 190, 100, .5); }
.card-link { position: absolute; inset: 0; z-index: 2; }
.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media .badge-type { position: absolute; top: 10px; inset-inline-start: 10px; }
.card-media .badge-solved { position: absolute; top: 10px; inset-inline-end: 10px; }
.card-quote {
  height: 100%; padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background: radial-gradient(120% 80% at 20% 0%, rgba(244, 190, 100, .16), transparent 60%), linear-gradient(160deg, var(--bg-3), var(--bg-2));
}
.card-quote .q { width: 28px; height: 28px; color: var(--gold-text); opacity: .8; }
.card-quote p { font-family: var(--serif); font-size: 19px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.card-cat { font-size: 12px; color: var(--muted); }
.card-title { font-size: 20px; line-height: 1.15; }
.card-q { color: var(--ink-2); font-size: 14px; }
.card.is-solved .card-title::after { content: " ✓"; color: var(--green); }
@media (max-width: 639px) { .card-meta .diff span, .card-cat { display: none; } .card-title { font-size: 17px; } .card-body { padding: 10px 12px 14px; } }

/* ---------- browse ---------- */
.page-head { padding-top: 34px; }
.page-head h1 { font-size: clamp(40px, 8vw, 68px); margin-top: 10px; }
.page-head .lead { color: var(--ink-2); font-size: 17px; margin-top: 8px; max-width: 40em; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 24px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 14px; color: var(--ink-2); }
.chip svg { width: 14px; height: 14px; }
.chip span { color: var(--muted); font-size: 12px; }
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.is-on span { color: inherit; opacity: .6; }
.sort { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: 14px; color: var(--muted); }
select, input, textarea { font: inherit; color: var(--ink); }
.sort select { height: 38px; padding: 0 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line);  font-size: 16px; }
.cat-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 16px; scrollbar-width: none; }
.cat-strip a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-2); border: 1px dashed var(--line-2); }
.cat-strip a span { color: var(--muted); font-size: 12px; }
.cat-strip a.is-on { border-style: solid; border-color: var(--gold); color: var(--gold-text); }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty svg { width: 42px; height: 42px; color: var(--gold-text); margin: 0 auto 12px; }
.empty h2 { color: var(--ink); font-size: 28px; margin-bottom: 10px; }
.empty a { color: var(--gold-text); }
.empty-page { padding: 100px 20px; }
.err-code { font-family: var(--serif); font-size: 120px; font-weight: 700; line-height: 1; color: var(--gold-text); text-shadow: 0 0 60px rgba(244, 190, 100, .45); }
.empty-page h1 { color: var(--ink); font-size: 34px; margin: 10px 0 24px; }

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.pager a, .pager .gap { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); font-variant-numeric: tabular-nums; }
.pager .gap { border: 0; background: none; color: var(--muted); }
.pager a.is-current { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.pager-step { display: inline-flex !important; gap: 6px; grid-auto-flow: column; }

/* ---------- riddle page ---------- */
.riddle-wrap { display: grid; gap: 28px; padding-top: 22px; }
@media (min-width: 1000px) { .riddle-wrap { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-top: 34px; } }
.crumbs { grid-column: 1 / -1; display: flex; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs a:hover { color: var(--gold-text); }
.riddle-head { text-align: center; }
.riddle-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 14px; color: var(--muted); font-size: 13px; }
.riddle-meta .badge { background: var(--glass-2); color: var(--ink-2); border-color: var(--line); }
.riddle-head h1 { font-size: clamp(36px, 7vw, 60px); margin: 14px 0 22px; text-wrap: balance; }

.stage { display: flex; justify-content: center; }
.stage-frame {
  position: relative; border-radius: 26px; overflow: hidden; background: #05070d; padding: 0; border: 1px solid var(--line-2);
  box-shadow: 0 0 0 8px var(--glass), 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 120px -40px rgba(244, 190, 100, .55);
}
.stage-video, .stage-image { width: min(100%, 460px); }
.stage-video { width: min(100%, 460px, 43.8vh); }
.stage-video video { width: 100%; max-height: 78vh; aspect-ratio: 9 / 16; object-fit: contain; background: #05070d; }
.stage-image { cursor: zoom-in; }
.stage-image img { width: 100%; max-height: 80vh; object-fit: contain; }
.stage-text {
  width: 100%; max-width: 760px; padding: 44px 26px 40px; text-align: center;
  background: radial-gradient(90% 70% at 50% 0%, rgba(244, 190, 100, .16), transparent 65%), linear-gradient(170deg, var(--bg-3), var(--bg-2));
}
:root[data-theme="light"] .stage-frame { background: var(--glass-hi); }
.stage-text .q { width: 44px; height: 44px; color: var(--gold-text); margin: 0 auto 18px; filter: drop-shadow(0 0 10px rgba(244, 199, 111, .5)); }
.stage-question { font-family: var(--serif); font-size: clamp(25px, 4.4vw, 36px); line-height: 1.32; white-space: pre-line; text-wrap: pretty; }
.question { text-align: center; font-family: var(--serif); font-size: clamp(22px, 4vw, 30px); line-height: 1.3; margin: 26px auto 0; max-width: 30em; }

.think { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 28px auto 0; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); position: relative; }
.think .ring { width: 54px; height: 54px; flex: none; }
.think-num { position: absolute; inset-inline-start: 14px; width: 54px; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.think-copy { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.think-copy strong { font-weight: 600; }
.think-copy span { font-size: 14px; color: var(--muted); }
.think.is-done { border-color: rgba(244, 199, 111, .45); box-shadow: 0 0 40px -18px rgba(244, 199, 111, .8); }
.think.is-done .think-num { color: var(--gold-text); }

.guess { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin: 16px auto 0; }
.guess input {
  flex: 1 1 200px; min-width: 0; height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--glass-2); font-size: 17px; transition: border-color .2s, box-shadow .2s;
}
.guess input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(244, 199, 111, .15); }
.guess .btn { height: 52px; min-width: 110px; }
.guess-msg { flex-basis: 100%; text-align: center; min-height: 1.6em; font-weight: 600; }
.guess-msg.ok { color: var(--green); } .guess-msg.no { color: var(--rose); }
.guess.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

.riddle-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn-reveal.is-ready { border-color: var(--gold); color: var(--gold-text); box-shadow: 0 0 30px -10px rgba(244, 199, 111, .8); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-2px); } }
.hint { display: flex; gap: 10px; align-items: flex-start; max-width: 520px; margin: 16px auto 0; padding: 14px 16px; border-radius: 14px; background: rgba(116, 220, 210, .08); border: 1px solid rgba(116, 220, 210, .25); color: var(--ink-2); animation: drop .3s ease; }
.hint svg { color: var(--teal); margin-top: 3px; }

.answer {
  position: relative; overflow: hidden; margin: 26px auto 0; max-width: 680px; padding: 30px 22px; text-align: center; border-radius: 24px;
  background: radial-gradient(80% 90% at 50% 0%, rgba(244, 190, 100, .25), transparent 70%), var(--glass);
  border: 1px solid rgba(244, 199, 111, .45); box-shadow: 0 0 80px -30px rgba(244, 190, 100, .8);
  animation: reveal .7s cubic-bezier(.2, .9, .2, 1.2);
}
@keyframes reveal { from { opacity: 0; transform: scale(.92) translateY(10px); filter: blur(6px); } }
/* Hide answer: a clear, thumb-sized button that stays in reach while a tall answer (with its video) scrolls */
.answer { overflow: clip; scroll-margin-top: 84px; }
.answer-bar { position: sticky; top: 76px; z-index: 3; display: flex; justify-content: flex-end; margin: -16px -8px 12px; pointer-events: none; }
.btn-hide {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); color: var(--ink);
  font: 600 14px var(--sans); cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s;
}
.btn-hide svg { width: 18px; height: 18px; flex: none; }
.btn-hide:hover { border-color: var(--gold); color: var(--gold-text); }
.btn-hide:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-hint-btn].is-on { border-color: var(--teal); }
.sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.answer-label { position: relative; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.answer-text { position: relative; font-family: var(--serif); font-size: clamp(40px, 9vw, 68px); font-weight: 700; line-height: 1.05; margin: 6px 0 10px; color: var(--gold-text); text-shadow: 0 0 40px rgba(244, 190, 100, .55); letter-spacing: .03em; }
.answer-why { position: relative; color: var(--ink-2); font-size: 17px; max-width: 34em; margin: 0 auto; }
.answer-media { position: relative; margin: 22px auto 0; width: min(100%, 380px); border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); }
.answer-media video { width: 100%; aspect-ratio: 9 / 16; background: #05070d; }

.share { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.share > span { margin-inline-end: 6px; }
@media (max-width: 480px) { .share > span { flex-basis: 100%; text-align: center; margin: 0 0 4px; } }
.share-pill { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 14px; font-weight: 600; color: var(--ink-2); }

.riddle-side { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1000px) { .riddle-side { position: sticky; top: 88px; align-self: start; } }
.stepper { display: grid; gap: 8px; }
.stepper a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); transition: border-color .2s; }
.stepper a:hover { border-color: var(--gold); color: var(--ink); }
.stepper span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.stepper strong { font-family: var(--serif); font-size: 20px; line-height: 1.15; }
.stepper-random { background: linear-gradient(160deg, rgba(244, 199, 111, .14), transparent) !important; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); background: var(--glass); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgba(4, 5, 10, .9); backdrop-filter: blur(6px); }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 14px; }
.lightbox .iconbtn { position: fixed; top: 14px; inset-inline-end: 14px; }

/* ---------- ads ---------- */
.ad { margin: 36px auto 0; max-width: calc(var(--wrap) + var(--gutter) * 2); padding-inline: var(--gutter); text-align: center; }
.riddle-side .ad { margin: 0; padding: 0; }
.ad-label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ad-placeholder span { display: grid; place-items: center; min-height: 100px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.riddle-side .ad-placeholder span { min-height: 250px; }

/* ---------- prose + footer ---------- */
.prose { max-width: 760px; padding-top: 40px; }
.prose h1 { font-size: clamp(40px, 8vw, 64px); margin: 12px 0 22px; }
.prose p { color: var(--ink-2); font-size: 18px; margin-bottom: 16px; }
.prose h2 { font-size: clamp(24px, 4vw, 30px); margin: 34px 0 12px; }
.prose ul { margin: 0 0 18px; padding-inline-start: 1.3em; }
.prose li { color: var(--ink-2); font-size: 18px; margin-bottom: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.terms-date { font-size: 14px !important; color: var(--muted) !important; }

.footer { position: relative; z-index: 1; margin-top: 80px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.footer-in { display: grid; gap: 30px; padding-top: 40px; padding-bottom: 26px; }
.footer-brand p { color: var(--muted); max-width: 26em; margin-top: 12px; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.footer-nav h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.footer-nav a { display: block; padding: 4px 0; color: var(--ink-2); }
.footer-base { padding-bottom: 30px; font-size: 13px; color: var(--muted); }
/* Privacy and Terms on every page, in small print (on the Roll this line is all of the footer). */
.footer-legal { font-size: 11px; }
.footer-legal a { display: inline-block; padding: 10px 8px; margin: -10px 0 -10px 4px; color: var(--muted); } /* small print, finger-sized tap area */
.footer-legal a:hover { color: var(--ink-2); }
/* Social icons: computers only. Phones and tablets (the tab-bar layout) don't show them, to keep the page clean. */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); transition: color .15s, border-color .15s, transform .15s; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--gold, #e3bd72); border-color: currentColor; transform: translateY(-1px); }
.footer-social svg { width: 18px; height: 18px; }
@media (max-width: 999px) { .footer-social { display: none; } }
@media (min-width: 800px) { .footer-in { grid-template-columns: 1.4fr 1fr; } }

.toast { position: fixed; bottom: 20px; left: 50%; z-index: 90; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; transition: .3s; }
.toast { width: max-content; max-width: min(92vw, 460px); text-align: center; line-height: 1.4; border-radius: 18px; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

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

/* ---------- Play section entry points (header pill, hero button, kind tile, home band) ---------- */
.new-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; background: var(--gold); color: var(--gold-ink); font: 800 10px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.mainnav a.nav-play { color: var(--gold-text); }
@media (min-width: 1000px) {
  .mainnav a.nav-play { border: 1px solid rgba(244, 199, 111, .45); background: rgba(244, 199, 111, .08); box-shadow: 0 0 18px -6px rgba(244, 199, 111, .6); }
  .mainnav a.nav-play svg { opacity: 1; }
  .play-pill { display: none !important; }
}
.play-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; background: linear-gradient(180deg, #ffe0a0, var(--gold) 45%, var(--gold-2)); color: #2a1a03; font: 700 14px var(--sans); box-shadow: var(--glow); }
.play-pill:hover { color: #2a1a03; }
.play-pill svg { width: 16px; height: 16px; }
.btn-play { border: 1px solid var(--gold); color: var(--gold-text); background: rgba(244, 199, 111, .08); }
.btn-play:hover { color: var(--ink); background: rgba(244, 199, 111, .16); box-shadow: var(--glow); }
:root[data-theme="light"] .btn-play { color: var(--gold-2); }

.kinds { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .kinds { grid-template-columns: repeat(4, 1fr); } }
.kind-play { --k: rgba(244, 199, 111, .45); border-color: rgba(244, 199, 111, .55); background: linear-gradient(160deg, rgba(244, 199, 111, .14), var(--glass)); box-shadow: 0 0 30px -12px rgba(244, 199, 111, .7); }
.kind-play strong { color: var(--gold-text); }
.kind-play .new-tag { position: absolute; top: 12px; inset-inline-end: 12px; margin: 0; }

.play-band { position: relative; overflow: hidden; display: grid; gap: 22px; margin-top: 18px; padding: clamp(20px, 4vw, 36px); border-radius: 26px; border: 1px solid rgba(244, 199, 111, .5);
  background: radial-gradient(90% 120% at 0% 0%, rgba(244, 199, 111, .2), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(116, 220, 210, .12), transparent 60%), var(--bg-2);
  box-shadow: 0 0 0 1px rgba(244, 199, 111, .08), 0 20px 60px -25px rgba(244, 180, 80, .55); }
.play-band-copy h2 { font-size: clamp(32px, 6vw, 52px); margin: 6px 0 8px; text-wrap: balance; }
.play-band-copy p { color: var(--ink-2); max-width: 52ch; margin: 0; }
.play-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.play-band-progress { font-size: 14px; font-weight: 600; color: var(--gold-text); }
.play-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.play-picks a { display: grid; gap: 4px; height: 100%; padding: 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink); transition: transform .2s, border-color .2s, background .2s; }
.play-picks a:hover { transform: translateY(-2px); border-color: rgba(244, 199, 111, .6); background: var(--glass-2); color: var(--ink); }
.play-pick-art { display: grid; place-items: center; height: 54px; border-radius: 12px; background: radial-gradient(circle, rgba(244, 199, 111, .2), transparent 70%), var(--bg); border: 1px solid var(--line); }
.play-pick-art svg { width: 34px; height: 34px; fill: none; stroke: var(--gold-text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.play-pick-name { font: 700 17px/1.15 var(--serif); }
.play-pick-kind { font-size: 12px; color: var(--muted); }
@media (min-width: 900px) {
  .play-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
  .play-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stat-link { color: var(--gold-text); } .stat-link:hover { color: var(--ink); }

/* ---------- Friend Challenge entry points (Play hub banner, game page button); the challenge pages use challenge.css ---------- */
.pl-challenge { margin-top: 12px !important; }
.pl-challenge .btn svg { width: 16px; height: 16px; color: var(--gold-text); }
.pl-challenge-cta { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 14px 16px; border-radius: var(--radius); border: 1px solid rgba(244, 199, 111, .45); background: linear-gradient(120deg, rgba(244, 199, 111, .14), var(--glass) 60%); color: var(--ink); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.pl-challenge-cta:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--glow); }
.pl-challenge-art { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: var(--gold-ink); }
.pl-challenge-art svg { width: 26px; height: 26px; }
.pl-challenge-txt { display: grid; flex: 1; min-width: 0; }
.pl-challenge-txt b { font: 700 22px/1.15 var(--serif); }
.pl-challenge-txt small { color: var(--ink-2); font-size: 14px; }
.pl-challenge-go { width: 22px; height: 22px; color: var(--gold-text); }

/* small phones: the full-screen, theme and menu buttons must all fit next to the logo */
@media (max-width: 459px) {
  .topbar-in { gap: 8px; }
  .topbar-tools { gap: 6px; }
  .topbar-tools .iconbtn { width: 38px; height: 38px; }
  .play-pill { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .play-pill svg { width: 18px; height: 18px; }
}
@media (max-width: 359px) {
  .brand-logo { height: 28px; }
  .brand { gap: 6px; }
  .topbar-tools { gap: 4px; }
  .topbar-tools .iconbtn { width: 36px; height: 36px; }
  .play-pill { width: 36px; height: 36px; }
}

/* =====================================================================================================
   Two sides of the site. Riddles keep the "night observatory" look (gold, serif). Everything you PLAY
   uses the arcade look (violet→cyan, rounded Fredoka), wherever it appears: header, home, footer, /play.
   ===================================================================================================== */
:root {
  --arc-1: #8b5cf6; --arc-2: #3b82f6; --arc-3: #22d3ee; --arc-hot: #f472b6;
  --arc-ink: #fff; --arc-soft: rgba(139, 92, 246, .16); --arc-line: rgba(139, 160, 255, .45);
  --arc-grad: linear-gradient(120deg, var(--arc-1), var(--arc-2) 55%, var(--arc-3));
  --arc-glow: 0 0 0 1px rgba(139, 160, 255, .35), 0 14px 44px -12px rgba(99, 102, 241, .75);
  --play-font: "Fredoka", "Noto Kufi Arabic", var(--sans);
}
:root[data-theme="light"] { --arc-1: #7c3aed; --arc-2: #2563eb; --arc-3: #0891b2; --arc-soft: rgba(124, 58, 237, .1); --arc-line: rgba(79, 70, 229, .4); }

/* ---------- header: riddle links on the left, one big Play button on its own ---------- */
.nav-group-label { display: none; }
.mainnav a.nav-play { color: var(--arc-ink); }
.mainnav a.nav-play-menu {
  order: -1; justify-content: center; gap: 10px; margin: 6px 0 4px; padding: 14px; border: 0; border-radius: 16px;
  background: var(--arc-grad); color: #fff; font: 700 20px/1 var(--play-font); box-shadow: var(--arc-glow);
}
.mainnav a.nav-play-menu small { font: 500 13px var(--sans); opacity: .85; }
.mainnav a.nav-play-menu svg { width: 22px; height: 22px; }
@media (max-width: 999px) {
  .menu-open .nav-group-label { display: block; margin: 14px 6px 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
  .menu-open .mainnav a.nav-play-menu { display: flex; border-bottom: 0; }
}
.play-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 14px; margin-inline-start: auto;
  background: var(--arc-grad); color: #fff; font: 700 17px/1 var(--play-font); letter-spacing: .02em; box-shadow: var(--arc-glow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.play-pill + .topbar-tools { margin-inline-start: 0; }
.play-pill:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(160, 180, 255, .6), 0 16px 50px -10px rgba(99, 102, 241, .9); }
.play-pill svg { width: 19px; height: 19px; }
.play-pill.is-active { outline: 2px solid color-mix(in srgb, var(--arc-3) 70%, transparent); outline-offset: 2px; }
@media (min-width: 1000px) {
  .mainnav a.nav-play-menu, .mainnav .nav-group-label { display: none; }
  .play-pill { display: inline-flex !important; height: 46px; padding: 0 24px; font-size: 19px; margin-inline-start: 18px; }
  .play-pill::before { content: ""; width: 1px; height: 26px; margin-inline: -24px 22px; background: var(--line-2); transform: translateX(-14px); }
  .play-pill + .topbar-tools { margin-inline-start: auto; }
  .mainnav { margin-inline-start: 18px; }
}
@media (max-width: 459px) {
  .play-pill { width: auto; padding: 0 12px; font-size: 15px; gap: 6px; height: 38px; }
}
@media (max-width: 359px) { .play-pill { width: 38px; padding: 0; justify-content: center; font-size: 0; gap: 0; } }

/* ---------- home: two doors ---------- */
.doors { padding: 22px 0 8px; }
.doors-in { display: grid; gap: 16px; }
.door { position: relative; overflow: hidden; border-radius: 28px; }
.door-riddles {
  display: grid; gap: 22px; align-items: center; padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--line-2);
  background: radial-gradient(90% 80% at 0% 0%, rgba(244, 199, 111, .14), transparent 60%), color-mix(in srgb, var(--bg-2) 70%, transparent);
}
.door-riddles .hero-title { font-size: clamp(40px, 9vw, 74px); margin: 12px 0 12px; }
.door-riddles .hero-lead { font-size: 16px; margin: 0; }
.door-riddles .hero-actions { margin-top: 18px; }
.door-riddles .hero-stats { margin-top: 20px; }
.door-riddles .next-drop { margin: 18px 0 0; }
.door-riddles .hero-feature { width: min(100%, 230px); }
.door-riddles .hero-feature-frame { border-radius: 22px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), 0 0 0 6px var(--glass), 0 0 70px -24px rgba(244, 190, 100, .5); }
.door-riddles .hero-feature-cap strong { font-size: 20px; }
.door-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink-2); font-size: 14px; font-weight: 500; }
.chip svg { width: 15px; height: 15px; color: var(--gold-text); }
.chip-image svg { color: var(--teal); } .chip-video svg { color: var(--rose); }
.chip:hover { color: var(--ink); border-color: var(--gold); background: var(--glass-2); }

.door-play {
  display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 4vw, 38px); color: #fff; isolation: isolate;
  background: radial-gradient(70% 60% at 100% 0%, rgba(34, 211, 238, .45), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(244, 114, 182, .35), transparent 60%), linear-gradient(150deg, #2b1a6b, #1d2a7a 55%, #0e3b63);
  border: 1px solid rgba(160, 180, 255, .5); box-shadow: 0 30px 80px -34px rgba(99, 102, 241, .9);
  transition: transform .25s ease, box-shadow .25s ease;
}
.door-play::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(180deg, transparent, #000 40%, #000); }
.door-play:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 36px 90px -30px rgba(99, 102, 241, 1); }
.arc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #a5f3fc; }
.arc-eyebrow svg { width: 16px; height: 16px; }
.door-play-title { font: 700 clamp(64px, 16vw, 112px)/.9 var(--play-font); letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff 30%, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(99, 102, 241, .6)); }
.door-play-lead { max-width: 34ch; color: rgba(255, 255, 255, .86); font-size: 16px; }
.door-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 6px 0; }
.door-mosaic .tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px);
  animation: tile-bob 4s ease-in-out infinite; }
.door-mosaic .tile:nth-child(3n+2) { animation-delay: -1.3s; } .door-mosaic .tile:nth-child(3n) { animation-delay: -2.6s; }
.door-mosaic .tile:nth-child(2n) { background: rgba(34, 211, 238, .14); }
.door-mosaic svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tile-bob { 50% { transform: translateY(-4px); } }
.door-play-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.door-play-stats b { font: 700 24px/1 var(--play-font); color: #fff; margin-inline-end: 4px; }
.door-play-stats .play-band-progress { color: #a5f3fc; }
.btn-arcade { background: #fff; color: #3b1fa8; font-family: var(--play-font); font-weight: 700; letter-spacing: .02em; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.btn-arcade svg { width: 18px; height: 18px; }
.btn-xl { min-height: 56px; padding: 0 30px; font-size: 20px; align-self: flex-start; }
.door-play:hover .btn-arcade { background: #ecfeff; }

@media (min-width: 720px) {
  .door-riddles { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1000px) {
  .doors { padding: 40px 0 10px; }
  .doors-in { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .door-play { justify-content: space-between; }
  .door-riddles .hero-feature { width: 220px; }
}

/* ---------- home: the games strip, on an arcade band so it reads as its own place ---------- */
.arcade-zone { margin: 34px 0 6px; padding: 30px 0 34px; border-block: 1px solid var(--arc-line);
  background: radial-gradient(60% 120% at 10% 0%, var(--arc-soft), transparent 70%), radial-gradient(50% 100% at 100% 100%, rgba(34, 211, 238, .1), transparent 70%), color-mix(in srgb, var(--bg-2) 80%, transparent); }
.arc-title { font-family: var(--play-font) !important; font-weight: 700; background: var(--arc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.more-arc { color: var(--arc-3); } .more-arc:hover { color: var(--ink); }
.game-strip { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.game-strip li { scroll-snap-align: start; }
.game-tile { display: grid; gap: 6px; height: 100%; padding: 12px 12px 14px; border-radius: 20px; border: 1px solid var(--arc-line); background: var(--glass); color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.game-tile:hover { color: var(--ink); transform: translateY(-3px); border-color: var(--arc-3); box-shadow: var(--arc-glow); }
.game-tile-art { display: grid; place-items: center; height: 92px; border-radius: 14px; background: var(--arc-grad); }
.game-tile-art svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.game-tile-name { font: 600 18px/1.15 var(--play-font); }
.game-tile-kind { font-size: 12px; color: var(--muted); }
.game-tile-go { justify-self: start; margin-top: 4px; padding: 5px 14px; border-radius: 999px; background: var(--arc-soft); color: var(--arc-3); font: 700 13px var(--play-font); }
:root[data-theme="light"] .game-tile-go { color: var(--arc-1); }
.game-tile:hover .game-tile-go { background: var(--arc-grad); color: #fff; }
@media (min-width: 1000px) { .game-strip { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }

/* ---------- /play hub: the same arcade look ---------- */
.pl-hero .eyebrow { color: var(--arc-3); }
.pl-hero h1 { font-family: var(--play-font); font-weight: 700; background: var(--arc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-games h3 { color: var(--arc-3) !important; }
.footer-games a:hover { color: var(--arc-3); }
@media (min-width: 1000px) { .door-riddles .hero-title { font-size: clamp(48px, 4.6vw, 66px); } }
@media (max-width: 719px) {
  .door-riddles { gap: 14px; }
  .door-riddles .hero-stats { display: none; }
  .door-riddles .hero-feature { width: 190px; }
  .door-riddles .hero-lead { font-size: 15px; }
  .door-mosaic { max-width: 250px; gap: 8px; }
  .door-play-title { font-size: 72px; }
}
@media (min-width: 1000px) {
  .doors-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .door-riddles .hero-title { font-size: clamp(44px, 3.8vw, 56px); }
  .door-riddles .hero-feature { width: 200px; }
}

/* Admin → Games "Riddle video sound" Off: the site's own video bar (no sound button), see site.js. */
.sv { position: relative; display: block; line-height: 0; }
.sv video { display: block; cursor: pointer; }
.sv-bar {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 8px; padding: 18px 10px 8px; line-height: 1;
  background: linear-gradient(transparent, rgba(3, 4, 9, .9) 55%); color: #fff; transition: opacity .25s;
}
.sv.is-playing:not(.is-awake):not(:focus-within):not(:hover) .sv-bar { opacity: 0; }
@media (hover: none) { .sv.is-playing:not(.is-awake):not(:focus-within) .sv-bar { opacity: 0; } }
.sv-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(6, 8, 15, .72); color: #fff; cursor: pointer; padding: 0; }
.sv-btn svg { width: 20px; height: 20px; }
.sv-i-pause, .sv.is-playing .sv-i-play { display: none; }
.sv.is-playing .sv-i-pause { display: block; }
.sv-seek { flex: 1; min-width: 0; height: 28px; accent-color: var(--gold, #f4be64); background: transparent; cursor: pointer; }
.sv-time { flex: none; font: 600 12px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.sv:fullscreen, .sv:-webkit-full-screen { display: flex; align-items: center; justify-content: center; background: #000; width: 100%; height: 100%; }
.sv:fullscreen video, .sv:-webkit-full-screen video { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; }
/* Belt and braces: if a browser ever shows its own controls on a locked video, no sound controls (Chrome, Edge, Safari on Mac). */
[data-video-sound="off"] video::-webkit-media-controls-mute-button,
[data-video-sound="off"] video::-webkit-media-controls-volume-slider,
[data-video-sound="off"] video::-webkit-media-controls-volume-control-container,
[data-video-sound="off"] video::-webkit-media-controls-volume-slider-container { display: none !important; }
.sv-seek:focus:not(:focus-visible) { outline: none; }

/* =====================================================================================================
   v18 "calm edition": the same night observatory with the glare taken out. Quiet shadows instead of gold
   halos, 600 headings without text glow, pictures on a mat, and the phone header with Challenge friends.
   ===================================================================================================== */
.hero-title em, .err-code, .answer-text, .ch-countdown b, .ch-time { text-shadow: none; }
.answer-text, .stage-question { font-weight: 600; }
.hero-stats dd, .next-time, .think-num { font-weight: 600; }
.eyebrow, .next-label, .hero-stats dt, .answer-label, .footer-nav h3, .roll-meta, .pl-kicker, .ad-label { font-weight: 600; }
.logo-mark { filter: none; }
.ring .ring-fill { filter: none; }
.card:hover { box-shadow: var(--shadow); }
.think.is-done { border-color: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: none; }
.btn-reveal.is-ready { box-shadow: none; }
.guess input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.hero-feature-frame { box-shadow: var(--shadow); }
.door-riddles .hero-feature-frame { box-shadow: var(--shadow); }
.stage-text .q { filter: none; }
.answer { background: var(--bg-2); border-color: color-mix(in srgb, var(--gold) 35%, transparent); box-shadow: var(--shadow); }
.kind-play { box-shadow: none; }
.play-band { box-shadow: var(--shadow); }
.btn-play:hover { box-shadow: var(--glow); }
.badge-new { background: var(--gold); color: var(--gold-ink); }
.badge-solved { background: var(--green); color: var(--bg); }

/* Pictures on a mat: a thin gold rule around a soft panel, like a print in a frame. The picture keeps its size rules. */
.stage-frame.stage-image, .stage-frame.stage-video {
  padding: 10px; background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 16px; box-shadow: var(--shadow);
}
.stage-frame.stage-image img, .stage-frame.stage-video video { border-radius: 8px; }
:root[data-theme="light"] .stage-frame.stage-image, :root[data-theme="light"] .stage-frame.stage-video { background: var(--bg-2); }
.stage-frame.stage-text { box-shadow: var(--shadow); border-color: var(--line); }

/* The phone header (below 1000px): logo, full screen and Challenge friends. No theme or menu button, so the
   riddle picture keeps its full height. Without the theme button the phone follows the saved choice, or the
   phone's own light or dark setting (see the theme script in _Layout). */
.hdr-challenge { display: none; }
@media (max-width: 999px) {
  .theme-toggle, .menu-toggle { display: none !important; }
  .hdr-challenge {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: 600 14px/1 "Inter", var(--sans); letter-spacing: 0;
  }
  .hdr-challenge:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
  .hdr-challenge svg { width: 16px; height: 16px; color: var(--gold-text); }
  .hdr-challenge.is-active { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
}
@media (max-width: 359px) { .hdr-challenge { font-size: 13px; padding: 0 10px; gap: 5px; } }
/* the header must hold logo, full screen and the full "Challenge friends" label at 360px */
@media (max-width: 459px) {
  .topbar .wrap { padding-inline: 12px; }
  .topbar-in, .topbar-tools { gap: 6px; }
  .hdr-challenge { padding: 0 10px; gap: 5px; }
  .hdr-challenge svg { width: 15px; height: 15px; }
}
@media (max-width: 359px) { .hdr-challenge { font-size: 13px; padding: 0 8px; } }

/* Games hub: the Challenge friends row is one slim row (about 72px on a phone) with a crimson flag tile */
.pl-challenge-cta { gap: 12px; margin: 0; padding: 10px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); }
.pl-challenge-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.pl-challenge-art { width: 40px; height: 40px; border-radius: 12px; background: var(--crimson, #8a2234); border: 1px solid var(--crimson-line, #b99a63); color: var(--crimson-ink, #f6ead8); box-shadow: var(--glow); }
.pl-challenge-art svg { width: 22px; height: 22px; }
.pl-challenge-txt b { font: 600 18px/1.2 var(--play-font, var(--serif)); }
.pl-challenge-txt small { font-size: 13px; line-height: 1.3; }
.pl-challenge-go { width: 20px; height: 20px; }
@media (max-width: 999px) { .topbar-tools, .play-pill + .topbar-tools { margin-inline-start: auto; } }
/* 360 to 389px: the logo is drawn at 28px high (as v17 already does below 360px) so the full label fits */
@media (max-width: 389px) {
  .brand-logo { height: 28px; } .brand { gap: 6px; }
  .topbar-in, .topbar-tools { gap: 4px; } .topbar-tools .iconbtn { width: 36px; height: 36px; }
  .hdr-challenge { padding: 0 9px; letter-spacing: -.005em; }
}
/* very small phones (320px): everything a little tighter; the label stays, never icon only */
@media (max-width: 339px) {
  .topbar .wrap { padding-inline: 8px; }
  .brand-logo { height: 24px; }
  .topbar-tools .iconbtn { width: 34px; height: 34px; }
  .hdr-challenge { padding: 0 6px; height: 34px; }
}
/* v27 Google search build. A riddle picture may sit in a <picture> (WebP with the original as the fallback): the <picture> box
   takes no space of its own, so the <img> inside sizes and places exactly as it did on its own. */
picture { display: contents; }
/* "Read the puzzle" under a riddle video: a small tap, closed until opened */
.puzzle-text { width: min(100%, 460px); margin: 14px auto 0; text-align: center; color: var(--ink-2); }
.puzzle-text summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; list-style: none; cursor: pointer; color: var(--muted); font: 600 14px var(--sans); }
.puzzle-text summary::-webkit-details-marker { display: none; }
.puzzle-text summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.puzzle-text[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.puzzle-text summary:hover, .puzzle-text summary:focus-visible { color: var(--gold-text); }
.puzzle-text summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.puzzle-text p { margin: 4px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); text-align: start; font-size: 16px; line-height: 1.55; white-space: pre-line; }
/* "Full explanation on the blog": one line inside the answer box, after Reveal */
.answer-blog { position: relative; margin: 16px 0 0; font-size: 15px; }
.answer-blog a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.roll-answer .answer-blog { margin: 6px 0 0; font-size: 13px; }

/* v35: "How to solve it" inside the answer on the riddle page (after Reveal) */
.page-riddle .answer-walk { position: relative; max-width: 34em; margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--line); text-align: start; color: var(--ink-2); }
.page-riddle .answer-walk h2 { margin: 0 0 8px; font: 700 15px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); }
.page-riddle .answer-walk p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.page-riddle .answer-walk-link a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
/* v35: blog guide links in a category intro; the padding makes each link a finger-sized target without moving the text */
.lead-links a, .page-riddle .answer-walk-link a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; }

/* v37: under the answer on the riddle page: the XP chips (answer box On), then Next riddle and Play a game like this */
.riddle-xp { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.riddle-xp[hidden] { display: none; }
.answer-doors { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px auto 0; max-width: 420px; }
.answer-doors .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.answer-doors .btn svg { width: 18px; height: 18px; flex: none; }

/* v39: the Blog link in the footer shows on computers only; on phones and tablets the footer stays exactly as it was */
.footer-nav a.footer-blog { display: none; }
@media (min-width: 1000px) { .footer-nav a.footer-blog { display: block; } }