/* Riddle10 Roll: one riddle per screen, vertical snap feed. */
body.page-roll { height: 100dvh; overflow: hidden; }
/* v29: the page itself can never scroll. Before, the body's overflow went to the window, which could still be scrolled
   by the phone to show the answer field above the keyboard; when the keyboard closed, the Roll stayed pushed up under
   the header with an empty band at the bottom, and nobody could scroll it back. Now the body clips its own content,
   so there is nothing to scroll (roll.js also puts the page back when the keyboard closes). */
html:has(> body.page-roll) { height: 100%; overflow: hidden; }
/* The Roll fills the screen, so its footer is only one thin small-print line (Privacy, Terms) under the feed. */
body.page-roll { --legal-h: 22px; }
body.page-roll .footer { margin-top: 0; border-top: 0; background: none; }
body.page-roll .footer-in { display: none; }
body.page-roll .footer-base { height: var(--legal-h); padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; opacity: .75; }
body.page-roll .footer-legal { font-size: 10px; }
body.page-roll .sky { position: fixed; }
.roll { --hdr: 64px; height: calc(100dvh - var(--hdr) - var(--tab-h) - var(--legal-h, 0px)); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.roll::-webkit-scrollbar { display: none; }
.roll-slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 10px 12px; }
.roll-card { width: 100%; max-width: 1000px; height: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.roll-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #06080f; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; }
.roll-stage video, .roll-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.roll-quote { padding: 22px; text-align: center; font: 600 clamp(22px, 5.5vw, 40px)/1.3 var(--serif); color: var(--ink); max-height: 100%; overflow: auto; }
.roll-sound { position: absolute; inset: auto 10px 10px auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(6, 8, 15, .7); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.roll-sound svg, .roll-act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.roll-solved { position: absolute; inset: 10px 10px auto auto; padding: 4px 12px; border-radius: 999px; background: var(--green); color: #07210f; font: 700 12px var(--sans); display: block; }
.roll-info { flex: none; max-height: 46%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.roll-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.roll-title { font: 600 clamp(20px, 4vw, 28px)/1.2 var(--serif); margin: 0; }
.roll-q { margin: 0; color: var(--ink-2); font-size: 15px; }
.roll-guess { display: flex; gap: 8px; }
.roll-guess input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .25); color: var(--ink); font: 500 16px var(--sans); }
.roll-guess input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.roll-guess button { height: 46px; padding: 0 20px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #ffe0a0, var(--gold) 45%, var(--gold-2)); color: var(--gold-ink); font: 700 15px var(--sans); cursor: pointer; }
.roll-guess.shake { animation: roll-shake .4s; }
@keyframes roll-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.roll-msg { min-height: 1.2em; font-size: 14px; }
.roll-msg.ok { color: var(--green); } .roll-msg.no { color: var(--rose); }
.roll-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.roll-actions button, .roll-act { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.roll-actions button:hover { border-color: var(--gold); }
.roll-hint { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(244, 199, 111, .1); color: var(--ink-2); font-size: 14px; }
.roll-answer { padding: 10px 12px; border-radius: 12px; background: rgba(127, 224, 160, .08); border: 1px solid rgba(127, 224, 160, .3); }
.roll-answer[hidden], .roll-hint[hidden] { display: none; }
.roll-answer .answer-bar { position: sticky; top: -12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -10px -12px 4px; padding: 6px 6px 6px 12px; border-radius: 12px 12px 0 0; background: color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter: blur(8px); pointer-events: auto; }
.roll-answer .btn-hide { min-height: 44px; padding: 0 14px; font-size: 13px; }
.roll-answer .answer-text { font: 700 20px var(--serif); }
.roll-answer video, .roll-answer img { max-width: 100%; border-radius: 10px; margin-top: 8px; }
.roll-arrows { display: none; }
.roll-cue { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--legal-h, 0px) + 12px); transform: translateX(-50%); z-index: 40; padding: 8px 16px; border-radius: 999px; background: rgba(6, 8, 15, .8); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; pointer-events: none; animation: roll-bob 1.6s ease-in-out infinite; }
@keyframes roll-bob { 50% { transform: translate(-50%, -6px); } }
.roll-final { text-align: center; }
.roll-end { display: grid; gap: 14px; justify-items: center; max-width: 420px; }
.roll-end > svg { width: 56px; height: 56px; fill: none; stroke: var(--gold-text); stroke-width: 1.4; }
.roll-end h2 { font: 600 30px/1.2 var(--serif); margin: 0; }
.roll-end p { color: var(--ink-2); margin: 0; }
.roll-end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.roll-sentinel { height: 1px; }
@media (min-width: 900px) {
  .roll-card { flex-direction: row; align-items: stretch; gap: 18px; justify-content: center; }
  .roll-stage { flex: none; aspect-ratio: 9 / 16; height: 100%; max-width: 46%; }
  .roll-info { flex: 1; max-height: none; align-self: center; max-height: 100%; padding: 22px; gap: 12px; }
  .roll-answer .answer-bar { top: -22px; }
}
@media (min-width: 1100px) {
  .roll-arrows { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: 10px; }
  .roll-arrows button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
  .roll-arrows svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
.roll-peek { position: fixed; z-index: 45; top: 74px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, #8a2234, #5e1220); border: 1px solid rgba(227, 189, 114, .65); color: #f6ead8; font: 700 13px "Inter", sans-serif; box-shadow: 0 8px 24px -10px rgba(138, 34, 52, .9); }
.roll-peek svg { width: 16px; height: 16px; fill: none; stroke: #e3bd72; stroke-width: 1.7; }
.roll-peek:hover { color: #fff; filter: brightness(1.12); }
.roll-gamesdoor { background: radial-gradient(80% 60% at 50% 40%, #3d0a12, #0d0204); }
.roll-door { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 22px; border: 1.5px solid #e3bd72; border-radius: 10px; box-shadow: 0 0 0 5px #160307, 0 0 0 6.5px rgba(227, 189, 114, .5); background: linear-gradient(160deg, #2a060b, #1a0408); color: #f6ead8; max-width: 380px; max-height: 96%; }
.roll-door:hover { color: #f6ead8; }
.roll-door .vault-art { width: min(200px, 48vw); }
.roll-door .door-play-title { font-size: clamp(48px, 12vw, 72px); }
.roll-door .arc-eyebrow { color: #e3bd72; letter-spacing: .24em; text-transform: uppercase; font: 600 12px "Inter", sans-serif; }
.roll-door .door-play-lead { color: #d8c3ac; font-size: 15px; }
@media (max-width: 999px) {
  .roll-peek { display: none; }
  .roll-cue { bottom: auto; top: 76px; background: rgba(6, 8, 15, .88); }
  @keyframes roll-bob { 50% { transform: translate(-50%, 6px); } }
}

/* v18 calm edition: flat gold button, quiet surfaces, the picture on a mat (no padding, so it keeps its full height),
   and on computers the Challenge friends link as a plain pill with a gold flag and a small arrow. */
.roll-stage { border-color: color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 16px; box-shadow: var(--shadow); }
.roll-info { background: var(--bg-2); backdrop-filter: none; box-shadow: var(--shadow); line-height: 1.6; } /* keeps the picture above at least as tall as v17 */
.roll-guess input { background: var(--bg); border-color: var(--ink-2); }
.roll-guess button { background: var(--gold); color: var(--gold-ink); box-shadow: var(--glow); }
:root[data-theme="light"] .roll-guess button { border: 1px solid rgba(120, 80, 10, .35); }
.roll-actions button, .roll-act { background: transparent; }
.roll-hint { background: var(--bg-3); }
.roll-answer { background: var(--bg-2); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.roll-solved { color: var(--bg); }
.roll-cue { background: color-mix(in srgb, var(--bg-2) 90%, transparent); border-color: var(--line); color: var(--ink); }
.roll-peek {
  height: 38px; padding: 0 14px; gap: 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--ink); font: 600 14px "Inter", sans-serif; box-shadow: var(--shadow);
}
.roll-peek svg { width: 16px; height: 16px; stroke: currentColor; color: var(--gold-text); }
.roll-peek .roll-peek-go { width: 14px; height: 14px; color: var(--ink-2); }
.roll-peek:hover { color: var(--ink); filter: none; border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
@media (max-width: 999px) { .roll-cue { background: color-mix(in srgb, var(--bg-2) 92%, transparent); } }
/* light theme: a text riddle sits on the parchment panel (dark ink on the near-black picture box could not be read) */
:root[data-theme="light"] .roll-stage:has(.roll-quote) { background: var(--bg-2); }

/* ---------- v37 ---------- */
/* Phones and tablets: no scroll hint (the riddle keeps the room) */
@media (max-width: 999px) { .roll-cue { display: none; } }
.roll-slide { position: relative; }

/* The doors after an answer (answer box On): XP chips, then Next riddle and Play a game like this, above the answer video */
.roll-xp { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.roll-xp[hidden] { display: none; }
.roll-doors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.roll-doors .btn { min-height: 44px; }
.roll-doors .btn svg { width: 18px; height: 18px; }
.roll-answer .roll-doors .btn-gold { flex: 1 1 100%; }
.roll-answer .roll-doors .btn-like { flex: 1 1 100%; white-space: normal; text-align: center; }
@media (min-width: 900px) { .roll-answer .roll-doors .btn { flex: 0 1 auto; } }

/* Answer box Off: the riddle fills the screen; one slim bar under it on phones */
.roll-big .roll-stage-answer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #06080f; }
.roll-big .roll-stage-answer[hidden] { display: none; }
.roll-big .roll-stage-answer video, .roll-big .roll-stage-answer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.roll-big .roll-aside {
  flex: none; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0;
}
.roll-big .roll-notes { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.roll-big .roll-notes:not(:has(> :not([hidden]))) { display: none; }
/* the picture or video already shows the question: the line stays for screen readers only, so the riddle keeps the room */
.roll-big .roll-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roll-big .roll-hint { margin: 4px 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--bg-3); color: var(--ink-2); font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.roll-big .roll-hint[hidden] { display: none; }
.roll-big .roll-hint svg { width: 16px; height: 16px; margin-top: 2px; color: var(--gold-text); }
.roll-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.roll-kind { flex: 1; min-width: 0; color: var(--muted); font: 600 11px/1.3 "Inter", var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roll-c {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; width: 44px; height: 44px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 600 15px "Inter", var(--sans);
}
.roll-c:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.roll-c svg { width: 20px; height: 20px; flex: none; }
.roll-c[hidden] { display: none; }
.roll-c > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roll-c.roll-c-reveal { width: auto; padding: 0 20px; background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.roll-c.roll-c-reveal > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.roll-c.is-on { border-color: var(--gold); color: var(--gold-text); }
.roll-c-wide, .roll-c-rule { display: none; }
.roll-ctl [data-hint-btn] { order: 1; } .roll-ctl .roll-c-reveal { order: 2; } .roll-ctl [data-share] { order: 3; }
.roll-big.is-revealed .roll-hint { display: none; }
.roll-big.is-revealed .roll-ctl { display: none; }
/* after Reveal: the answer in one line (tap it or Read for the whole answer), then Next riddle, A game like this and share */
.roll-short { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 0; }
.roll-short[hidden] { display: none; }
.roll-read { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 0 0 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: start; font: inherit; }
.roll-read .answer-label { flex: none; color: var(--muted); font: 600 10.5px "Inter", var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.roll-read-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.roll-read-text b { color: var(--gold-text); font: 700 20px var(--serif); margin-inline-end: 8px; vertical-align: -1px; }
.roll-read-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--gold); color: var(--gold-text); font: 700 14px "Inter", var(--sans); }
.roll-read-btn svg { width: 15px; height: 15px; }
.roll-read:hover .roll-read-btn { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.roll-short .roll-doors { margin: 0 0 2px; flex-wrap: nowrap; }
.roll-short .roll-doors .btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
.roll-short .roll-doors .btn-gold { flex: none; }
.roll-short .roll-doors .btn-like { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.roll-short .roll-doors .iconbtn { flex: none; width: 44px; height: 44px; margin-inline-start: auto; }
/* narrower phones (iPhone mini and SE, most Androids at 360, the smallest at 320): the three doors stay on one line and whole */
@media (max-width: 399px) { .roll-short .roll-doors { gap: 6px; } }
@media (max-width: 389px) { .roll-short .roll-doors .btn { padding: 0 11px; font-size: 13px; gap: 5px; } }
@media (max-width: 369px) { .roll-short .roll-doors .btn-like svg { display: none; } }
@media (max-width: 339px) {
  .roll-short .roll-doors .btn { padding: 0 9px; }
  .roll-short .roll-doors .btn-gold svg { display: none; }
}
/* the whole answer: a sheet over the riddle (phones), opened with Read */
.roll-sheet { display: none; }
.roll-big.is-reading .roll-sheet {
  display: block; position: absolute; inset: auto 0 0 0; z-index: 6; max-height: 82%; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 16px 16px; border-radius: 20px 20px 0 0; background: var(--bg-2); border-top: 1px solid var(--line); box-shadow: 0 -18px 40px -16px rgba(0, 0, 0, .6);
}
.roll-big.is-reading .roll-stage { opacity: .35; }
.roll-sheet .answer-bar { position: static; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; pointer-events: auto; }
.roll-sheet .answer-label { color: var(--muted); font: 600 11px "Inter", var(--sans); letter-spacing: .28em; text-transform: uppercase; }
.roll-sheet .btn-hide { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 14px "Inter", var(--sans); cursor: pointer; }
.roll-sheet .btn-hide svg { width: 16px; height: 16px; }
/* phones: Hide (the answer closes and Reveal comes back, as since v9) beside Close (only the sheet closes) */
.roll-sheet .roll-sheet-hide { order: 1; margin-inline-start: auto; }
.roll-sheet .roll-sheet-close { order: 2; }
.roll-sheet .answer-text { margin: 4px 0 8px; color: var(--gold-text); font: 700 34px/1.15 var(--serif); }
.roll-sheet .answer-why { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.55; }
.roll-sheet .roll-doors { flex-wrap: nowrap; margin-top: 14px; }
.roll-sheet .roll-doors .btn { flex: 1; min-width: 0; padding: 0 14px; }
.roll-sheet .roll-doors .iconbtn { flex: none; width: 44px; height: 44px; }
.roll-sheet .like-long { display: none; }
@media (max-width: 389px) { .roll-sheet .roll-doors .btn { padding: 0 10px; font-size: 14px; gap: 6px; } }
@media (max-width: 369px) { .roll-sheet .roll-doors .btn-like svg { display: none; } }
/* the smallest phones: Next riddle on its own line, then A game like this and share */
@media (max-width: 339px) { .roll-sheet .roll-doors { flex-wrap: wrap; } .roll-sheet .roll-doors .btn-gold { flex: 1 1 100%; } }
.roll-sheet .answer-blog { margin: 12px 0 0; font-size: 14px; }
:root[data-theme="light"] .roll-big .roll-stage-answer { background: var(--bg-2); }

/* Computers: the riddle in the exact middle of the page, a skinny bar beside it (Reveal, Hint, Share, Challenge link,
   Previous, Next), and after Reveal a slim answer card in the free space on the right; the picture does not move */
@media (min-width: 900px) {
  .roll-big .roll-card { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; max-width: none; align-items: stretch; }
  .roll-big .roll-stage { grid-column: 2; max-width: none; height: 100%; }
  .roll-big .roll-aside {
    grid-column: 3; display: grid; grid-template-columns: 64px minmax(0, 340px); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 16px; row-gap: 12px;
    align-content: start; padding: 0; border: 0; background: none; box-shadow: none; height: 100%; min-height: 0;
  }
  .roll-big .roll-ctl {
    grid-column: 1; grid-row: 1 / span 3; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 4px;
    border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow);
  }
  .roll-big.is-revealed .roll-ctl { display: flex; }
  .roll-big .roll-kind { display: none; }
  .roll-ctl [data-hint-btn], .roll-ctl .roll-c-reveal, .roll-ctl [data-share] { order: 0; }
  .roll-big.is-revealed .roll-hint:not([hidden]) { display: flex; }
  .roll-big .roll-c, .roll-big .roll-c.roll-c-reveal {
    flex-direction: column; gap: 4px; width: 56px; height: auto; min-height: 52px; padding: 7px 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  }
  .roll-big .roll-c:hover { background: var(--glass-2); }
  .roll-big .roll-c.roll-c-reveal { background: var(--gold); color: var(--gold-ink); }
  .roll-big .roll-c.roll-c-hide { background: transparent; color: var(--ink); }
  .roll-big .roll-c > span, .roll-big .roll-c.roll-c-reveal > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font: 600 11px/1.2 "Inter", var(--sans); text-align: center; }
  .roll-big .roll-c[hidden] { display: none; }
  .roll-big .roll-c-wide { display: inline-flex; }
  .roll-big .roll-c-rule { display: block; width: 36px; height: 1px; margin: 6px auto; background: var(--line); }
  .roll-big .roll-notes { grid-column: 2; grid-row: 1; }
  .roll-big .roll-hint { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); }
  .roll-big .roll-hint[hidden], .roll-big .roll-short { display: none; }
  .roll-big.is-revealed .roll-sheet {
    display: block; grid-column: 2; grid-row: 2; position: static; max-height: 100%; min-height: 0; overflow-y: auto;
    padding: 14px 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow);
  }
  .roll-big.is-reading .roll-stage { opacity: 1; }
  .roll-big.is-revealed .roll-sheet { display: flex; flex-direction: column; }
  .roll-sheet .answer-blog { order: 1; }
  .roll-sheet .roll-sheet-close, .roll-sheet .roll-sheet-share { display: none; }
  .roll-sheet .roll-sheet-hide { display: inline-flex; }
  .roll-sheet .answer-text { font-size: 30px; }
  .roll-sheet .answer-why { font-size: 15px; }
  .roll-sheet .roll-doors { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .roll-sheet .roll-doors .btn { flex: none; width: 100%; }
  .roll-sheet .like-long { display: inline; } .roll-sheet .like-short { display: none; }
  body.roll-mode-big .roll-arrows, body.roll-mode-big .roll-peek { display: none !important; }
}

/* the games card after the third riddle: Start here, three more, all the games */
.roll-gamesdoor { background: none; }
.roll-games {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; padding: 22px 18px;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--bg); box-shadow: var(--shadow);
}
.roll-games-eyebrow { margin: 0; color: var(--gold-text); font: 700 12px "Inter", var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.roll-games-title { margin: 0; font: 600 34px/1.1 var(--serif); }
.roll-games-lead { margin: 0; color: var(--ink-2); font-size: 15px; }
.roll-games-or { margin: 4px 0 0; color: var(--muted); font: 700 11px "Inter", var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.roll-games-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.roll-games-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gold-text); font: 700 15px "Inter", var(--sans); align-self: flex-start; }
.roll-games-all svg { width: 16px; height: 16px; }
/* phones: the whole card on one screen, without scrolling inside it; shorter screens get a tighter card */
@media (max-height: 860px) and (max-width: 899px) { .roll-games { gap: 10px; padding: 16px; } .roll-games-title { font-size: 30px; } }
@media (max-height: 799px) and (max-width: 899px), (max-height: 860px) and (max-width: 379px) {
  .roll-games { gap: 8px; padding: 14px; }
  .roll-games .gt { gap: 4px; padding: 8px 6px; }
  .roll-games .gt-mark .pl-mark { width: 32px; height: 32px; }
  .roll-games-title { font-size: 26px; }
  .roll-games-lead, .roll-games .sh-blurb { display: none; }
  .roll-games .sh { gap: 10px; padding: 12px; }
  .roll-games .sh-name { font-size: 22px; }
  .roll-games .sh-mark .pl-mark { width: 48px; height: 48px; }
  .roll-games .sh-meta { font-size: 13px; }
  .roll-games .sh-go { min-height: 46px; font-size: 15px; }
}
@media (max-height: 679px) and (max-width: 899px) {
  .roll-games-eyebrow, .roll-games .sh-rand { display: none; }
  .roll-games-title { font-size: 24px; }
}

/* v39: video riddles play once and end on the still with the whole riddle. The poster (that same still) covers the stop,
   so an older video that fades out also ends on its riddle; the answer video stays on top of it. */
.roll-stage .roll-endstill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; background: #06080f; }
.roll-stage .roll-endstill[hidden] { display: none; }
.roll-big .roll-stage-answer { z-index: 2; }
/* phones: Replay sits in the bar under the video, in place of the small "VIDEO · HARD" label, so nothing leaves the bar */
@media (max-width: 899px) {
  .roll-ctl:has([data-replay]:not([hidden])) .roll-kind { display: none; }
  .roll-ctl:has([data-replay]:not([hidden])) { justify-content: flex-end; }
}
/* computers: the side panel's buttons spread from top to bottom, the arrows have no words, and on a short window
   (roll.js fitCtl) the buttons shrink to fill the panel first, then the words get smaller only if they would be cut */
@media (min-width: 900px) {
  .roll-big .roll-ctl { justify-content: space-evenly; }
  .roll-big .roll-ctl [data-prev] > span, .roll-big .roll-ctl [data-next] > span { display: none; }
  .roll-big .roll-ctl.ctl-fit1 .roll-c { flex: 0 1 auto; min-height: 0; }
  .roll-big .roll-ctl.ctl-fit2 .roll-c > span { font-size: 10px; }
  .roll-big .roll-ctl.ctl-fit2 .roll-c { gap: 2px; padding-top: 2px; padding-bottom: 2px; }
  .roll-big .roll-ctl.ctl-fit2 .roll-c svg { width: 18px; height: 18px; }
  .roll-big .roll-ctl.ctl-fit3 .roll-c > span { font-size: 9px; }
  .roll-big .roll-ctl.ctl-fit3 .roll-c-rule { margin: 2px auto; }
  .roll-big .roll-ctl.ctl-fit3 { gap: 2px; }
}