/* Picture riddles (/riddles/). Hebrew text in Gveret Levin (subset with NO digits), digits fall through to Fredoka. */
@font-face { font-family: "RiddleDigits"; src: url("/assets/fonts/fredoka-digits.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0023, U+0025, U+002B, U+002F-003A; }
@font-face { font-family: "GveretLevin"; src: url("/assets/fonts/gveret-levin-nodigits.woff2") format("woff2"); font-display: swap; }
.rd { --hand: "RiddleDigits", "GveretLevin", "Heebo", system-ui, sans-serif; }
.rd main { max-width: 560px; padding: 0 16px 40px; }
.rd .hand { font-family: var(--hand); }
.rd .crumbs { margin: 6px 0 0; font-size: 15px; }
.rd .crumbs a { text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; min-height: 48px; }
/* the site header is sticky: anything we scroll to lands below it, not under it */
html:has(body.rd) { scroll-padding-top: 84px; }
.rd .done, .rd .nick, .rd .crumbs, .rd #warmup { scroll-margin-top: 84px; }
/* on phones the header is not sticky (chrome.css), so no room is needed for it */
@media (max-width: 760px) {
  html:has(body.rd) { scroll-padding-top: 64px; }
  .rd .done, .rd .nick, .rd .crumbs, .rd #warmup { scroll-margin-top: 64px; }
}
.rd h1 { font-family: var(--hand); font-weight: 400; color: var(--navy); font-size: clamp(34px, 9vw, 44px); line-height: 1.1; margin: 6px 0 2px; text-align: center; }
.rd .kicker { text-align: center; font-family: var(--hand); color: var(--burgundy); font-size: 21px; margin: 0; }
.rd .pic { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: auto 1 / 1; margin: 18px 0 18px; background: #fff;
  padding: 10px 10px 38px; border-radius: 3px; border: 1px solid rgba(13, 42, 76, .13); transform: rotate(-1.2deg); }
.rd .ask { display: grid; gap: 12px; }
/* Yohay, Oct 26: the hint is Nicole's picture on the answer row; "בדיקה" gets its own full-width row below */
.rd .ask__row { display: flex; gap: 8px; align-items: stretch; }
.rd .ask .b--go { width: 100%; }
.rd .ask .b--nicole { flex: none; width: 58px; min-height: 54px; padding: 0; border-radius: 16px; position: relative; background: #FFF8E6; }
.rd .ask .b--nicole[hidden] { display: none; }
.rd .ask .b--nicole img { width: 40px; height: auto; display: block; pointer-events: none; }
.rd .ask .b--nicole.is-reveal::after { content: "👀"; position: absolute; bottom: -6px; inset-inline-start: -6px; font-size: 18px; line-height: 1; }
.rd .ask .b--nicole:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 2px; }
.rd .ask input { flex: 1; min-width: 0; min-height: 54px; border: 3px solid var(--navy); border-radius: 16px; padding: 0 14px; font: 500 20px "Heebo", system-ui, sans-serif;
  color: var(--navy); background: #fff; }
.rd .ask input:focus { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 4px rgba(204, 166, 103, .45); }
.rd .b { appearance: none; border: 0; cursor: pointer; font-family: var(--hand); font-size: 23px; min-height: 54px; border-radius: 16px; padding: 0 18px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .08s; }
.rd .b:active { transform: translateY(3px); }
.rd .b--go { background: var(--burgundy); color: var(--cream); box-shadow: 0 4px 0 #3a0f1f; }
.rd .b--hint { background: #fff; color: var(--navy); border: 2px solid var(--navy); box-shadow: 0 3px 0 var(--navy); font-size: 20px; min-height: 48px; }
.rd .b--share { background: var(--navy); color: var(--cream); box-shadow: 0 4px 0 #06172b; width: 100%; }
.rd .b--next { background: var(--gold); color: var(--navy); box-shadow: 0 4px 0 #9c7d45; width: 100%; }
.rd .msg { min-height: 26px; margin: 6px 2px 0; font-family: var(--hand); font-size: 21px; color: var(--burgundy); text-align: center; }
.rd .shake { animation: rd-shake .4s; }
@keyframes rd-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.rd .hints { margin-top: 6px; text-align: center; }
.rd .hints ol { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.rd .hints li { background: #fff; border-radius: 14px; padding: 10px 14px; font-family: var(--hand); font-size: 21px; color: var(--navy); border: 1px solid rgba(13, 42, 76, .13); }
.rd .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 8px; direction: rtl; }
.rd .tiles .w { display: flex; gap: 4px; }
.rd .tiles .tile { position: relative; appearance: none; padding: 0; margin: 0; width: 34px; height: 46px; border-radius: 7px; background: var(--cream); border: 2px solid var(--gold);
  display: grid; place-items: center; overflow: hidden; color: var(--burgundy); font-family: var(--hand); font-size: 26px; line-height: 1; cursor: pointer; touch-action: none; }
.rd .tiles .tile b { font-weight: 400; padding-bottom: 4px; }
.rd .tiles .tile canvas.scratch { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 5px; transition: opacity .3s ease; }
.rd .tiles .tile canvas.scratch.gone { opacity: 0; }
.rd .tiles .tile.locked { opacity: .45; cursor: default; }
.rd .tiles .tile.picked { border-color: var(--burgundy); background: #fff; }
.rd .tiles .tile:disabled { cursor: default; }
.rd .tiles .tile:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 2px; }
.rd .tilebox .tilehead { margin: 0; font-size: 20px; }
.rd .hintnote { margin: 10px 0 0; font-size: 17px; color: var(--muted); line-height: 1.3; }
.rd .pulse { animation: rd-pulse 1.2s 2; }
@keyframes rd-pulse { 50% { transform: scale(1.08); } }
.rd .done { position: relative; margin-top: 24px; background: #fff; border-radius: 3px; padding: 22px 16px 20px; text-align: center; border: 1px solid rgba(13, 42, 76, .13); }
.rd .done h2 { margin: 0; font-family: var(--hand); font-weight: 400; color: var(--burgundy); font-size: 30px; }
.rd .done .ans { font-family: var(--hand); color: var(--navy); font-size: 40px; line-height: 1.15; margin: 4px 0 10px; }
.rd .done .dec { background: var(--cream); border-radius: 14px; padding: 10px 12px; font-family: var(--hand); font-size: 22px; color: var(--navy); margin: 0 0 8px; }
.rd .done .scene { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.rd .done .row { display: grid; gap: 10px; }
/* optional reveal photo + short text (reveal.pic), shown only after a solve / give-up */
.rd .done .rpic { display: flex; gap: 12px; align-items: center; text-align: start; background: var(--cream); border-radius: 14px; padding: 10px; margin: 0 0 14px; border-inline-start: 4px solid var(--gold); }
.rd .done .rpic img { flex: 0 0 auto; width: 96px; height: 120px; object-fit: cover; border-radius: 10px; border: 2px solid var(--gold-soft); background: var(--gold-soft); }
.rd .done .rpic figcaption { display: grid; gap: 4px; min-width: 0; }
.rd .done .rpic__t { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.rd .done .rpic__s { font-size: 14px; color: var(--burgundy); line-height: 1.35; }
.rd .done .rpic__c { font-size: 11px; color: var(--muted); line-height: 1.4; }
.rd .done .rpic__c a { color: inherit; white-space: nowrap; unicode-bidi: isolate; }
.rd .cta { margin-top: 18px; display: flex; align-items: center; gap: 12px; background: var(--navy); color: var(--cream); border-radius: 20px; padding: 14px; text-align: start; }
.rd .cta img.g { width: 74px; height: auto; flex: none; }
.rd .cta p { margin: 0 0 6px; font-family: var(--hand); font-size: 23px; line-height: 1.15; }
.rd .cta .play img { height: 46px; width: auto; display: block; }
/* Globy Israel not on Play yet: the box says so and points to Globy World (functions/riddles/_middleware.js) */
.rd .cta[data-play="world"] p { font-size: 21px; }
.rd .cta .cta__soon { display: block; font-size: 16px; opacity: .85; margin-bottom: 3px; }
.rd .toast { position: fixed; inset-inline: 0; bottom: 22px; margin: auto; width: max-content; max-width: 90vw; background: var(--navy); color: var(--cream); padding: 10px 18px;
  border-radius: 999px; font-family: var(--hand); font-size: 20px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 30; }
.rd .toast.on { opacity: 1; }
.rd canvas.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; }
/* index */
.rd .lead { text-align: center; color: var(--muted); margin: 6px 0 16px; }
.rd .grid { list-style: none; padding: 10px 2px 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
/* Photo-wall look: every riddle is a Polaroid print taped up, slightly crooked. */
.rd .grid a { display: block; background: #fff; border-radius: 3px; padding: 8px 8px 4px; text-decoration: none; color: var(--navy); position: relative;
  border: 1px solid rgba(13, 42, 76, .13); transform: rotate(var(--tilt, -1.6deg)); transition: transform .15s ease; min-height: 48px; }
.rd .grid li:nth-child(4n+2) a { --tilt: 1.4deg; }
.rd .grid li:nth-child(4n+3) a { --tilt: .9deg; }
.rd .grid li:nth-child(4n) a { --tilt: -1deg; }
.rd .grid a:hover, .rd .grid a:focus-visible { transform: rotate(0) translateY(-2px); }
.rd .grid a:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }
.rd .grid a::before, .rd .done::before, .rd .soon::before { content: ""; position: absolute; z-index: 2; top: -10px; left: 50%; width: 66px; height: 20px;
  transform: translateX(-50%) rotate(-4deg); background: rgba(204, 166, 103, .62);
  clip-path: polygon(3% 0, 97% 0, 100% 22%, 96% 48%, 100% 74%, 97% 100%, 3% 100%, 0 76%, 4% 50%, 0 24%); }
.rd .grid li:nth-child(even) a::before { transform: translateX(-50%) rotate(5deg); width: 58px; }
.rd .grid img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 1px; display: block; background: var(--gold-soft); }
.rd .grid .t { font-family: var(--hand); font-size: 22px; margin: 6px 2px 0; min-height: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 6px; line-height: 1.2; }
.rd .grid .chip { font-size: 14px; color: var(--burgundy); }
.rd .badge { position: absolute; top: 16px; inset-inline-end: 14px; border-radius: 999px; padding: 2px 10px; font-family: var(--hand); font-size: 17px; background: var(--cream); color: var(--navy);
  border: 2px solid #fff; transform: rotate(6deg); }
.rd .badge.s { background: #1f7a4a; color: #fff; }
.rd .badge.r { background: var(--gold); color: var(--navy); }
.rd .count { text-align: center; font-family: var(--hand); font-size: 21px; color: var(--burgundy); margin: 0 0 12px; }
@media (min-width: 720px) { .rd main { max-width: 640px; } .rd .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .rd .shake, .rd .pulse { animation: none; } .rd .grid a { transition: none; } }

/* daily game */
.rd .crumbs { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rd .rules { text-align: center; color: var(--navy); margin: 0 0 12px; font-size: 16px; }
.rd .rules a { font-weight: 700; white-space: nowrap; }
.rd .today { text-align: center; margin: 0 0 14px; }
.rd .today .b { width: 100%; }
.rd .badge.n { background: var(--burgundy); color: var(--cream); }
.rd .grid a.locked { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; box-sizing: border-box; color: var(--muted); }
.rd .grid a.reserved .lockpic { background: radial-gradient(120% 90% at 30% 20%, #7a2a49 0%, var(--burgundy) 60%, #3f0f22 100%); }
.rd .grid a.reserved .t { font-size: 19px; }
/* a print that has not developed yet */
.rd .grid .lockpic { display: grid; place-items: center; height: 84px; border-radius: 1px; font-size: 26px;
  background: radial-gradient(120% 90% at 30% 20%, #2c4d74 0%, #16355b 45%, var(--navy) 100%); }
.rd .soon { position: relative; text-align: center; background: #fff; border-radius: 3px; padding: 26px 16px 22px; margin: 18px 0 16px; border: 1px solid rgba(13, 42, 76, .13); transform: rotate(-.8deg); }
.rd .soon .lockpic { font-size: 56px; display: block; }
.rd .soon h1 { font-size: clamp(28px, 7.5vw, 38px); }
.rd .soon p { color: var(--navy); margin: 8px 0 0; }
.rd .row2 { display: grid; gap: 10px; }
.rd .b--more { background: #fff; color: var(--navy); border: 2px solid var(--navy); box-shadow: 0 3px 0 var(--navy); width: 100%; font-size: 21px; min-height: 50px; }
.rd .b[disabled] { opacity: .55; cursor: default; }
.rd .pts { margin: 6px 0 10px; }
.rd .ptsbig { font-family: var(--hand); font-size: 30px; color: #1f7a4a; margin: 0; }
.rd .ptsrow { color: var(--navy); font-size: 15px; margin: 2px 0 0; }
.rd .nick { background: var(--cream); border: 2px solid var(--gold); border-radius: 18px; padding: 14px 12px; margin: 0 0 14px; text-align: center; }
.rd .nick h3 { font-family: var(--hand); font-weight: 400; color: var(--navy); font-size: 25px; margin: 0 0 10px; }
.rd .nick p { margin: 0 0 8px; color: var(--navy); }
.rd .nick .msg { font-size: 18px; min-height: 22px; }
.rd .nick .b--go { font-size: 21px; padding: 0 14px; }
.rd .codebig { font: 800 34px/1.1 "Heebo", system-ui, sans-serif; letter-spacing: 6px; color: var(--burgundy) !important; background: #fff; border-radius: 12px; padding: 10px; margin: 6px 0 10px !important; user-select: all; }
.rd .linkish { appearance: none; background: none; border: 0; color: var(--burgundy); text-decoration: underline; font: 500 16px "Heebo", system-ui, sans-serif; min-height: 48px; padding: 0 8px; cursor: pointer; }
.rd .okline { text-align: center; font-family: var(--hand); font-size: 21px; color: var(--navy); margin: 8px 0; }
.rd .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #fff; border-radius: 16px; padding: 5px; margin: 14px 0 12px; border: 1px solid rgba(13, 42, 76, .13); }
.rd .tabs button { appearance: none; border: 0; border-radius: 12px; min-height: 48px; font-family: var(--hand); font-size: 22px; background: transparent; color: var(--navy); cursor: pointer; }
.rd .tabs button[aria-selected="true"] { background: var(--navy); color: var(--cream); }
.rd ol.board { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rd .board li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 8px 12px; min-height: 52px; border: 1px solid rgba(13, 42, 76, .13); color: var(--navy); }
.rd .board li.me { outline: 3px solid var(--gold); background: var(--cream); }
.rd .board li.empty { display: block; text-align: center; color: var(--muted); font-family: var(--hand); font-size: 20px; }
.rd .weeknote { text-align: center; color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.rd .weeknote[hidden] { display: none; }
.rd .board .rk { font: 800 20px "Heebo", system-ui, sans-serif; text-align: center; }
.rd .board .nm { font-family: var(--hand); font-size: 23px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd .board .st { text-align: end; line-height: 1.15; }
.rd .board .st b { display: block; font: 800 20px "Heebo", system-ui, sans-serif; color: var(--burgundy); }
.rd .board .st small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.rd .mine { margin-top: 18px; }
.rd .mine h2 { font-family: var(--hand); font-weight: 400; color: var(--burgundy); font-size: 26px; margin: 0 0 8px; text-align: center; }
.rd .how { margin-top: 20px; background: #fff; border-radius: 16px; padding: 4px 14px; border: 1px solid rgba(13, 42, 76, .13); color: var(--navy); }
.rd .how summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.rd .how ul { margin: 0 0 12px; padding-inline-start: 18px; font-size: 15px; }
.rd .warm { margin: 4px 0 26px; text-align: center; }
.rd h2.comp { font-family: var(--hand); font-weight: 400; color: var(--burgundy); font-size: 30px; margin: 0 0 6px; text-align: center; }
.rd .warm > p { color: var(--navy); margin: 0 0 8px; line-height: 1.5; }
.rd .warm .tag { display: inline-block; font-family: var(--hand); font-size: 20px; line-height: 1; color: var(--navy); background: rgba(204, 166, 103, .62); padding: 5px 12px 6px;
  transform: rotate(-3deg); margin-inline-end: 4px; vertical-align: 1px; clip-path: polygon(3% 0, 97% 0, 100% 25%, 96% 50%, 100% 75%, 97% 100%, 3% 100%, 0 75%, 4% 50%, 0 25%); }
.rd .warm .grid .t { justify-content: center; color: var(--burgundy); }
.rd .nick .msg { margin: 4px 0 0; min-height: 0; }
.rd .nick .msg:empty { display: none; }

/* "our apps" strip: bottom of every riddles page, above the footer; never sticky, never over the riddle */
.rd .appstrip { max-width: 560px; margin: 6px auto 0; padding: 14px 16px 4px; border-top: 1px dashed rgba(13, 42, 76, .28); box-sizing: border-box; }
.rd .appstrip__t { margin: 0 0 6px; font-family: var(--hand); font-size: 20px; color: var(--muted); text-align: center; }
.rd .appstrip ul { list-style: none; margin: 0; padding: 2px 2px 12px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rd .appstrip li { flex: none; scroll-snap-align: start; }
.rd .appstrip a { display: flex; align-items: center; gap: 7px; min-height: 48px; box-sizing: border-box; padding: 4px 12px 4px 10px; background: #fff; border: 1px solid rgba(13, 42, 76, .14);
  border-radius: 999px; text-decoration: none; color: var(--navy); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.rd .appstrip a:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 2px; }
.rd .appstrip img.i { height: 30px; width: auto; }
.rd .appstrip img.gp { height: 22px; width: auto; }
.rd .appstrip .appsoon { font-size: 12px; font-weight: 700; background: var(--gold-soft); color: var(--burgundy); border-radius: 999px; padding: 2px 8px; }
.rd .appstrip .appalt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rd .appstrip .appalt__w { font-size: 12px; font-weight: 600; color: var(--navy); white-space: nowrap; }

.rd .sharebox { margin: 16px 0 4px; }
.rd .sharefb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rd .b--wa { background: #1f7a4d; color: #fff; box-shadow: 0 4px 0 #11532f; }
.rd .b--copy { background: #fff; color: var(--navy); border: 2px solid var(--navy); box-shadow: 0 3px 0 var(--navy); }
.rd .spoiler { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); text-align: center; }

/* ---- one screen at a time (Yohay, Oct 24): 1 explanation, 2 warm-up (skippable), then one riddle per page ---- */
.rd [data-screen] { display: none; }
html:not([data-scr]) .rd [data-screen], html[data-scr="intro"] .rd #intro, html[data-scr="warmup"] .rd #warmup, html[data-scr="all"] .rd #all { display: block; }
html[data-scr="wait"] .rd .scrlinks { visibility: hidden; }
html[data-scr="intro"] .rd .scrlinks a[href$="#intro"], html[data-scr="warmup"] .rd .scrlinks a[href$="#warmup"], html[data-scr="all"] .rd .scrlinks a[href$="#all"] { display: none; }
.rd .scr { padding-top: 10px; }
.rd .intro { text-align: center; }
.rd .intro__g { width: 96px; height: auto; display: block; margin: 8px auto 0; }
.rd .intro__l { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 10px; text-align: start; }
.rd .intro__l li { background: #fff; border: 1px solid rgba(13, 42, 76, .13); border-radius: 14px; padding: 10px 14px; font-family: var(--hand); font-size: 22px; line-height: 1.25; color: var(--navy);
  display: flex; gap: 10px; align-items: flex-start; }
.rd .intro__l li span { font-size: 22px; line-height: 1.25; flex: none; }
.rd .b--big { width: 100%; font-size: 27px; min-height: 60px; box-sizing: border-box; }
.rd .nextopen { text-align: center; font-family: var(--hand); font-size: 21px; color: var(--burgundy); margin: 0 0 14px; }
.rd #warmup .kicker { margin-top: 6px; }
.rd #warmup .grid { margin-bottom: 26px; }
.rd .skiprow { margin: 0; }
.rd .scrlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 26px 0 0; font-size: 15px; }
.rd .scrlinks a { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
/* prev / next between the open riddles: arrows + "חידה X מתוך Y" (+ swipe, in riddles.js) */
.rd .rnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; }
.rd .rnav__n { font-family: var(--hand); font-size: 22px; color: var(--navy); text-align: center; }
.rd .rnav__n b { font-family: "RiddleDigits", "Heebo", sans-serif; font-weight: 600; }
.rd .rnav__a { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 800 26px/1 "Heebo", system-ui, sans-serif; text-decoration: none;
  background: var(--navy); color: var(--cream); box-shadow: 0 3px 0 #06172b; }
.rd .rnav__a:active { transform: translateY(2px); }
.rd .rnav__a.off { background: transparent; color: rgba(13, 42, 76, .22); box-shadow: none; border: 2px solid rgba(13, 42, 76, .12); box-sizing: border-box; }
.rd .rnav__skip { margin: 4px 0 6px; }
.rd .rnav__skip .b { width: 100%; box-sizing: border-box; font-size: 21px; min-height: 48px; }
.rd .rnav__soon { text-align: center; margin: 0 0 6px; font-size: 15px; color: var(--muted); }
/* pan-y alone switched off the browser's pinch-zoom on the whole riddle (Yohay, Oct 27: "אין אפשרות להגדיל"); pinch-zoom stays on */
.rd main[data-riddle] { touch-action: pan-y pinch-zoom; }
@media (prefers-reduced-motion: no-preference) { .rd main[data-riddle].go-next { animation: rd-out-r .18s ease-in forwards; } .rd main[data-riddle].go-prev { animation: rd-out-l .18s ease-in forwards; } }
@keyframes rd-out-l { to { transform: translateX(-40px); opacity: 0; } }
@keyframes rd-out-r { to { transform: translateX(40px); opacity: 0; } }
.rd .b--fw { width: 100%; box-sizing: border-box; }

/* how to solve: the box on the warm-up pages + /riddles/howto/ (Yohay Oct 22 howto v3, Oct 25 "no explanation of the hints") */
.rd .howbox { background: #fff8e8; border: 1.5px solid rgba(204, 166, 103, .6); border-radius: 16px; padding: 12px 14px; margin: 14px 0 6px; color: var(--navy); }
.rd .howbox__t { margin: 0 0 4px; font-family: var(--hand); font-size: 24px; color: var(--burgundy); }
.rd .howbox ul { margin: 0; padding: 0 18px 0 0; font-size: 16px; line-height: 1.5; }
.rd .howbox li { margin: 3px 0; }
.rd .howbox__a { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--burgundy); min-height: 44px; line-height: 44px; }
.rd .intro__how { text-align: center; margin: 10px 0; font-weight: 700; }
.rd .intro__how a { color: var(--burgundy); display: inline-block; min-height: 44px; line-height: 44px; }
.rd .ht { max-width: 560px; margin: 0 auto; padding-bottom: 26px; }
.rd .ht-lead { font-size: 18px; line-height: 1.5; margin: 4px 0 6px; text-align: center; }
.rd .ht h2 { font-weight: 800; font-size: 20px; margin: 22px 2px 10px; display: flex; align-items: center; gap: 8px; color: var(--navy); }
.rd .ht-num { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-family: var(--hand); font-size: 18px; flex: none; }
.rd .ht-card { background: #fff; border-radius: 20px; padding: 14px; box-shadow: 0 3px 14px rgba(13, 42, 76, .08); margin: 10px 0; }
.rd .ht-kind { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.rd .ht-ic { width: 52px; height: 52px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: linear-gradient(160deg, #fff 0%, #f3e7cf 60%, #e2c88f 100%); box-shadow: 0 4px 0 #b8935a, 0 6px 12px rgba(13, 42, 76, .15), inset 0 2px 0 #fff; }
.rd .ht-kind b { font-size: 19px; display: block; }
.rd .ht-kind span { font-size: 15px; color: var(--muted); line-height: 1.4; display: block; }
.rd .ht-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rd .ht-chips em { font-style: normal; font-size: 13.5px; font-weight: 600; background: rgba(204, 166, 103, .2); border-radius: 999px; padding: 2px 10px; }
.rd .ht-note, .rd .ht-ex { font-size: 14.5px; color: var(--muted); margin: 6px 4px 0; }
.rd .ht-ex { text-align: center; margin-top: 2px; }
.rd .ht-spoil { font-size: 15px; margin: 0 4px 8px; }
.rd .ht-spoil a { color: var(--burgundy); font-weight: 700; }
.rd .ht-lbl { text-align: center; margin: 2px 0 8px; font-family: var(--hand); font-size: 30px; }
.rd .ht-pic { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1; }
.rd .ht-pic img { width: 100%; height: auto; display: block; }
.rd .ht-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rd .ht-steps { margin-top: 12px; }
.rd .ht-st { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1.5px dashed rgba(13, 42, 76, .1); font-size: 16.5px; }
.rd .ht-st:last-child { border: 0; }
.rd .ht-b { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--burgundy); color: var(--cream); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.rd .ht-xtra .ht-b { background: var(--gold); color: var(--navy); }
.rd .ht-what { flex: 1; }
.rd .ht-ar { color: var(--gold); font-weight: 800; }
.rd .ht-w { font-weight: 800; font-size: 19px; background: rgba(204, 166, 103, .2); border-radius: 10px; padding: 2px 10px; }
.rd .ht-why { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.rd .ht-sum { text-align: center; background: var(--navy); color: var(--cream); border-radius: 16px; padding: 12px; margin-top: 10px; }
.rd .ht-eq { font-size: 19px; font-weight: 700; }
.rd .ht-eq b { color: var(--gold); }
.rd .ht-ans { font-family: var(--hand); font-size: 38px; color: var(--gold); line-height: 1.1; margin-top: 2px; }
.rd .ht-sum small { display: block; font-size: 14px; opacity: .85; }
.rd .ht-xh { display: flex; align-items: center; gap: 8px; margin: 14px 2px 4px; font-weight: 800; font-size: 17px; color: var(--burgundy); }
.rd .ht-xh::before, .rd .ht-xh::after { content: ""; flex: 1; height: 1.5px; background: rgba(204, 166, 103, .55); }
.rd .ht-tip { display: flex; gap: 10px; align-items: flex-start; background: #fff8e8; border: 1.5px solid rgba(204, 166, 103, .55); border-radius: 16px; padding: 11px 13px; margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
.rd .ht-tw { display: flex; gap: 10px; }
.rd .ht-tw .ht-card { flex: 1; margin: 0; text-align: center; padding: 12px 8px; }
.rd .ht-t { font-size: 13.5px; font-weight: 700; color: var(--burgundy); }
.rd .ht-e { font-size: 18px; margin: 6px 0 2px; font-weight: 600; }
.rd .ht-em { font-size: 22px; }
.rd .ht-d { font-size: 14px; color: var(--muted); }
.rd .ht-hints p { margin: 4px 0; font-size: 16px; line-height: 1.45; }
.rd .ht-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd .ht-grid .ht-card { margin: 0; padding: 12px 10px; text-align: center; }
.rd .ht-k { display: inline-block; font-size: 12.5px; font-weight: 700; background: var(--navy); color: var(--cream); border-radius: 999px; padding: 1px 10px; }
.rd .ht-eq2 { white-space: nowrap; font-size: 15px; margin: 8px 0 4px; line-height: 1.5; }
.rd .ht-a { font-family: var(--hand); font-size: 26px; color: var(--burgundy); line-height: 1.1; }
.rd .ht-s { font-size: 12.5px; color: var(--muted); }
.rd .ht-go { margin: 16px 0 0; }
.rd .ht-go .b { display: flex; align-items: center; justify-content: center; width: 100%; }
.rd .howbox__s { margin: 0; font-size: 13.5px; color: var(--muted); }

/* hint on its way: Globy-style bouncing dots + a short line (riddles.js waiting()) */
.rd .hintwait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; font-size: 18px; color: var(--navy); font-weight: 600; animation: rd-fadein .2s ease-out; }
.rd .hintwait .dots { display: inline-flex; gap: 5px; }
.rd .hintwait .dots i { width: 9px; height: 9px; border-radius: 50%; background: #CCA667; animation: rd-dot 1s infinite ease-in-out; }
.rd .hintwait .dots i:nth-child(2) { animation-delay: .15s; background: var(--navy); }
.rd .hintwait .dots i:nth-child(3) { animation-delay: .3s; }
.rd .b--hint[aria-busy="true"], .rd .b--go[aria-busy="true"] { opacity: .6; cursor: progress; }
.rd .tile.wait b::after { content: '…'; animation: rd-blink 1s infinite; }
@keyframes rd-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-7px); opacity: 1; } }
@keyframes rd-blink { 50% { opacity: .2; } }
@keyframes rd-fadein { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rd .hintwait .dots i, .rd .tile.wait b::after, .rd .hintwait { animation: none; } }
/* "delete my game data" in the footer (assets/js/delete-me.js): its own line under the links, footer-link look, 44 px tap height */
.site-footer .foot-link .delme { display: block; margin: 0 auto !important; appearance: none; background: none; border: 0; padding: 12px 2px; color: var(--c-gold); font: inherit; font-weight: 700; cursor: pointer; }
.site-footer .foot-link .delme:hover, .site-footer .foot-link .delme:focus-visible { text-decoration: underline; }
.site-footer .foot-link .delme[aria-busy="true"] { opacity: .6; cursor: progress; }
.site-footer .delme-msg { display: block; color: var(--c-gold); font-weight: 500; }
.site-footer .delme-msg:empty { display: none; }

/* follow-us + calendar reminder card under a solved / revealed riddle (Oct 27) */
.rd .follow { margin: 18px 0 0; padding: 16px 14px 14px; background: var(--cream); border: 2px dashed var(--gold); border-radius: 16px; text-align: center; }
.rd .follow h3 { margin: 0; font-family: var(--hand); font-weight: 400; color: var(--navy); font-size: 23px; line-height: 1.2; }
.rd .follow__s { margin: 2px 0 8px; color: var(--muted); font-size: 15px; }
.rd .follow__cd, .rd .nextcd { margin: 0 0 10px; font-family: var(--hand); font-size: 18px; color: var(--burgundy); text-align: center; }
.rd .follow__soc { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rd .follow__soc a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; background: var(--navy); color: var(--cream);
  font-weight: 700; font-size: 16px; text-decoration: none; direction: ltr; box-shadow: 0 3px 0 #06172b; }
.rd .follow__soc a:focus-visible, .rd .follow__cal a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.rd .follow__soc .fl-ig { background: #8a2a5c; box-shadow: 0 3px 0 #5d1832; }
.rd .follow__soc .fl-yt { background: #b3261e; box-shadow: 0 3px 0 #7a1914; }
.rd .follow__cal { margin: 0; display: grid; gap: 6px; }
.rd .b--cal { background: var(--gold); color: var(--navy); box-shadow: 0 4px 0 #9c7d45; width: 100%; text-decoration: none; }
.rd .follow__g { color: var(--navy); font-size: 15px; }
@media (min-width: 560px) { .rd .follow__soc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* tap the drawing to enlarge (Yohay, Oct 27): the hint sits in the polaroid's bottom strip, so it adds no height;
   the viewer is riddles.js zoomPic() */
.rd main[data-riddle] .pic { cursor: zoom-in; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.rd main[data-riddle] .pic:focus-visible { outline: 3px solid var(--gold, #CCA667); outline-offset: 3px; }
.rd .pic-hint { position: relative; box-sizing: border-box; height: 26px; margin: -50px 0 24px; padding: 0; text-align: center; font-family: var(--hand); font-size: 19px; line-height: 26px;
  color: rgba(13, 42, 76, .55); transform: rotate(-1.2deg); pointer-events: none; white-space: nowrap; }
/* the hint text and the round 🔍 button both open the viewer (Yohay, Oct 27); the button is absolute, so the strip keeps its 26px
   and nothing below moves. It sits on the drawing's bottom-right corner, clear of the yoyo-studio.com/riddles watermark on the left (the drawing ends 6px above the strip). */
.rd .pic-hint__t { pointer-events: auto; cursor: zoom-in; padding: 6px 10px; -webkit-tap-highlight-color: transparent; }
.rd .pic-zoom { pointer-events: auto; position: absolute; right: 18px; bottom: calc(100% + 14px); width: 46px; height: 46px; margin: 0; padding: 0; border: 0;
  border-radius: 50%; display: grid; place-items: center; background: rgba(6, 16, 30, .58); color: #fff; cursor: zoom-in;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28); -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.rd .pic-zoom svg { display: block; width: 24px; height: 24px; }
.rd .pic-zoom:active { background: rgba(6, 16, 30, .78); transform: scale(.94); }
.rd .pic-zoom:focus-visible { outline: 3px solid var(--gold, #CCA667); outline-offset: 2px; }
html.zv-open, html.zv-open body { overflow: hidden; }
.zv { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(6, 16, 30, .97); touch-action: none; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.zv.on { display: grid; animation: zv-in .15s ease-out; }
@keyframes zv-in { from { opacity: 0; } }
.zv__img { display: block; width: auto; height: auto; max-width: 100vw; max-height: 100vh; max-height: 100dvh; background: #fff; transform-origin: 50% 50%; will-change: transform;
  cursor: zoom-in; -webkit-user-drag: none; -webkit-touch-callout: none; }
.zv.z .zv__img { cursor: grab; }
.zv__x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; font: 700 24px/1 "Heebo", system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.zv__x:focus-visible { outline: 3px solid #CCA667; outline-offset: 2px; }
.zv__tip { position: absolute; inset-inline: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; color: rgba(255, 255, 255, .72);
  font: 500 14px/1.3 "Heebo", system-ui, sans-serif; pointer-events: none; transition: opacity .2s; }
.zv.z .zv__tip { opacity: 0; }

/* "חידת היום לפני" (schedule.js TODAYBEFORE): ribbon on the card, badge + app line on the page */
.rd .grid a.tb .tbtag { position: absolute; bottom: 44px; inset-inline: 14px; border-radius: 999px; padding: 2px 6px; font-family: var(--hand); font-size: 15px; line-height: 1.3; text-align: center; background: var(--burgundy); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd .tbbadge { display: table; margin: 4px auto 8px; border-radius: 999px; padding: 3px 14px; font-family: var(--hand); font-size: 20px; background: var(--burgundy); color: var(--cream); }
.rd .tbline { margin: 16px 0 0; text-align: center; font-size: 17px; line-height: 1.5; }
.rd .tbline a { color: var(--burgundy); font-weight: 700; display: inline-block; padding: 10px 2px; }

/* חידת היום לפני riddles (45, 46): פישל'ה in the title badge instead of 📰, tap -> the app's Play page (Yohay WhatsApp 29.10 05:39) */
.rd .tbfish { display: inline-block; vertical-align: middle; margin-inline-end: 6px; -webkit-tap-highlight-color: transparent; }
.rd .tbfish img { display: block; width: 26px; height: auto; }

/* Make the entire Today Before badge one accessible tap target. */
.rd .tbbadge:has(.tbfull) { padding: 0; }
.rd .tbbadge .tbfull { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 3px 14px; border-radius: inherit; color: inherit; text-decoration: none; }
.rd .tbbadge .tbfull:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* bonus riddle (schedule.js BONUS): the same ribbon / badge in gold, a ⭐ locked card until it opens */
.rd .grid a.bn .tbtag, .rd .tbbadge.bnbadge { background: var(--gold); color: var(--navy); }
.rd .grid a.reserved.bn .lockpic { background: radial-gradient(120% 90% at 30% 20%, #e6cd98 0%, var(--gold) 60%, #8f6f38 100%); }

/* Globy Israel launch (Nov 3 2026): compact bar above the fold + "new" line in the box under the riddle */
.rd .glil { margin: 8px 0 10px; }
.rd .glil a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px 6px 8px; border-radius: 16px; background: var(--cream);
  border: 2px solid var(--gold); color: var(--navy); text-decoration: none; box-shadow: 0 3px 0 rgba(156, 125, 69, .55); }
.rd .glil a:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 2px; }
.rd .glil img { width: 40px; height: auto; flex: none; }
.rd .glil__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; text-align: start; }
.rd .glil__new { font-size: 13px; font-weight: 800; color: var(--burgundy); letter-spacing: .01em; }
.rd .glil__n { font-size: 15px; font-weight: 500; }
.rd .glil__n { white-space: nowrap; }
.rd .glil__n b { font-size: 17px; font-weight: 800; }
@media (max-width: 379px) { .rd .glil__d { display: none; } }
.rd .glil__go { flex: none; background: var(--burgundy); color: var(--cream); font-weight: 800; font-size: 15px; border-radius: 999px; padding: 8px 14px; }
.rd .intro .glil { margin-top: 0; }
.rd .cta .cta__new { display: inline-block; font-family: "Heebo", system-ui, sans-serif; font-size: 13px; font-weight: 800; background: var(--gold); color: var(--navy);
  border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.rd .cta[data-play="israel"] p { display: flex; flex-direction: column; align-items: flex-start; }