/* 7arif retro kit for the mini-games: the same look as the main grid (web/style.css), one stylesheet for all ten games.
Link it BEFORE the game's own game.css:
Rules (docs/design/panel_rules.md): panel colour = question family, label band always ink, red = wrong only,
lime = correct only, yellow = highlights (sticker, tags, tape). No emoji. Lalezar display + Cairo UI. Hard shadows, no blur.
Outlined type only at 24 px or more. Every tap target >= 44 px. Eastern Arabic numerals in Arabic (kit.js digits()). */
@font-face { font-family: "Lalezar"; src: url("../../fonts/Lalezar-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../../fonts/Cairo[wght].ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
:root {
--navy: #1E2A6B; --navy-deep: #0D1238;
--paper: #EFE6D2; --paper-2: #E6DAC0; --paper-clip: #FBF7EC;
--ink: #1A1A1A; --ink-soft: #6B5D43; --ink-meta: #4a3f2c;
--red: #D7262E; --red-ink: #AE1C23; /* red TYPE on paper: #D7262E is only 4.0:1 there, this is 5.5:1 */ --yellow: #F4D21F; --lime: #7BC43A; --cyan: #3BB3E5; --blue: #2A4DA0; --gold: #E0B43A;
--font-display: "Lalezar", "Cairo", sans-serif;
--font-ui: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
--shadow-hard: 3px 3px 0 var(--ink); --shadow-navy: 0 6px 0 var(--navy-deep);
--tap: 44px; --maxw: 520px;
--tex-halftone: radial-gradient(rgba(0,0,0,.24) 1.1px, transparent 1.4px);
--il: env(safe-area-inset-left, 0px); --ir: env(safe-area-inset-right, 0px);
--it: env(safe-area-inset-top, 0px); --ib: env(safe-area-inset-bottom, 0px);
/* panel families (retro.js FAM): background + icon colour */
--fam-team: #1E2A6B;
--fam-honours: repeating-conic-gradient(from -90deg at 50% 92%, #D7262E 0 9deg, #BF1E26 9deg 18deg);
--fam-where: #3BB3E5;
--fam-profile: repeating-linear-gradient(90deg, #2c7a3f 0 12.5%, #35894b 12.5% 25%);
--fam-numbers: #F4D21F;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root { --navy: #18225a; --navy-deep: #080b26; --paper: #E3D8C0; --paper-2: #D6C8AA; --paper-clip: #EEE7D6;
--ink-soft: #55482F; /* AA on the darker paper-2 */ } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--navy); overflow-x: hidden; font-synthesis: none; }
body { margin: 0; color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.45; min-height: 100svh;
background: var(--navy) url("../../assets/retro/backdrop-tall.webp") center top / 100% auto repeat-y; }
@media (min-width: 600px) { body { background: linear-gradient(rgba(30,42,107,.5), rgba(30,42,107,.5)), var(--navy-deep) url("../../assets/retro/backdrop-wide.webp") center / cover fixed; } }
button, input { font: inherit; color: inherit; }
button, [role="button"] { touch-action: manipulation; cursor: pointer; }
svg { width: 1em; height: 1em; flex: 0 0 auto; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
html[lang="ar"] body * { letter-spacing: normal !important; }
/* ---- page frame ---- */
.r-poster { max-width: var(--maxw); margin: 0 auto; min-height: 100svh; padding: 0 max(10px, var(--ir)) calc(28px + var(--ib)) max(10px, var(--il)); background: rgba(30,42,107,.9); }
@media (min-width: 1024px) { .r-poster { --maxw: 980px; background: transparent; } .r-spread { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px; align-items: start; } }
/* ---- top bar (one for all ten games): back | masthead | help + language ----
Markup (every game):
Back rule: the back button sits at the inline-start edge and its chevron points out of the page toward that edge
(Arabic/RTL: right edge, pointing right; English/LTR: left edge, pointing left). One drawn chevron, mirrored by dir.
Size rule: masthead 34-46 px (English 30-42 px), always red with a paper outline. When it does not fit between the two
sides, kit.js (fitTopbar) adds .is-wrap: the masthead moves to its own row under the buttons (and shrinks only if it
still overflows there). */
.r-topbar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 8px; min-height: 76px; padding-top: var(--it); }
.r-topbar__side { display: flex; gap: 8px; align-items: center; }
.r-topbar__side:last-child { justify-content: flex-end; }
.r-round { position: relative; width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid var(--paper); background: transparent; color: var(--paper);
display: inline-grid; place-items: center; padding: 0; font-size: 20px; text-decoration: none; flex: 0 0 auto; transition: transform 80ms; }
.r-round:active { transform: scale(.94); background: rgba(239,230,210,.12); }
@media (hover: hover) { .r-round:hover { background: rgba(239,230,210,.12); } }
.r-round.pill { width: auto; min-width: var(--tap); padding: 0 12px; border-radius: 22px; font: 800 14px/1 var(--font-ui); }
.r-round.q { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.q-mark::before { content: "\061F"; display: block; padding-top: 5px; }
html[lang="en"] .q-mark::before { content: "?"; padding-top: 3px; }
.r-back-ico { display: block; width: 22px; height: 22px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4.5l7.5 7.5-7.5 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4.5l7.5 7.5-7.5 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
html[dir="ltr"] .r-back-ico { transform: scaleX(-1); }
.r-masthead { margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 400; line-height: 1; font-size: clamp(34px, 10.4vw, 46px); color: var(--red);
-webkit-text-stroke: 6px var(--paper); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--navy-deep); transform: rotate(-3deg); white-space: nowrap; text-align: center; padding: 6px 2px 0; }
html[lang="en"] .r-masthead { font-size: clamp(30px, 9vw, 42px); -webkit-text-stroke-width: 5px; }
.r-masthead small { display: block; font: 800 12px/1.4 var(--font-ui); color: var(--paper); -webkit-text-stroke: 0; text-shadow: none; transform: rotate(3deg); margin-top: 6px; }
.r-topbar.is-wrap { grid-template-columns: 1fr 1fr; grid-template-areas: "s e" "m m"; row-gap: 2px; min-height: 0; padding-top: calc(10px + var(--it)); padding-bottom: 12px; }
.r-topbar.is-wrap > .r-topbar__side:first-child { grid-area: s; }
.r-topbar.is-wrap > .r-topbar__side:last-child { grid-area: e; }
.r-topbar.is-wrap > .r-masthead { grid-area: m; }
@media (min-width: 1024px) { .r-topbar { min-height: 100px; } .r-masthead, html[lang="en"] .r-masthead { font-size: 54px; -webkit-text-stroke-width: 7px; } }
/* ---- cover card (paper with cyan rule) ---- */
.r-cover { position: relative; background: var(--paper); border-radius: 4px; padding: 8px; box-shadow: var(--shadow-navy); }
.r-cover__rule { border: 2px solid var(--cyan); border-radius: 2px; padding: 10px 10px 14px; }
.r-issue { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 6px 0; margin-bottom: 12px; }
.r-issue__title { font-family: var(--font-display); font-size: 24px; line-height: 1.1; padding-top: 3px; }
.r-issue__meta { font-size: 12px; font-weight: 700; color: var(--ink-meta); }
.r-modetag { display: inline-block; font: 800 11px/1.5 var(--font-ui); color: var(--red-ink); border: 2px solid currentColor; padding: 0 6px; transform: rotate(-4deg); white-space: nowrap; }
.r-modetag.eu { color: var(--blue); }
.r-kicker { font: 800 12px/1.3 var(--font-ui); color: var(--red-ink); margin: 0 0 2px; }
.r-h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0 0 8px; }
/* ---- buttons: print style, hard offset shadow ---- */
.r-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 2px;
background: var(--red); color: #fff; font: 800 17px/1.2 var(--font-ui); box-shadow: var(--shadow-hard); text-decoration: none; transition: translate 60ms; }
.r-btn:active, .r-btn.is-pressed { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.r-btn.paper { background: var(--paper-clip); color: var(--ink); }
.r-btn.blue { background: var(--blue); color: #fff; }
.r-btn.yellow { background: var(--yellow); color: var(--ink); }
.r-btn:disabled { opacity: .45; cursor: default; translate: none; box-shadow: var(--shadow-hard); }
.r-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
/* ---- sticker (attempts, timer, score): yellow disc, rotated ---- */
.r-sticker { display: inline-grid; place-items: center; width: 84px; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); box-shadow: var(--shadow-hard);
transform: rotate(-8deg); text-align: center; line-height: 1; }
.r-sticker b { font-family: var(--font-display); font-weight: 400; font-size: 34px; padding-top: 4px; display: block; }
.r-sticker small { font-size: 11px; font-weight: 800; display: block; }
.r-tag { display: inline-block; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 12px; line-height: 1.5; padding: 0 6px; border-radius: 2px; }
/* ---- feedback: correct = taped clipping with lime frame + tick seal; wrong = red hatched card + red stamp ---- */
.r-clip { position: relative; background: var(--paper-clip); outline: 3px solid var(--lime); outline-offset: -7px; box-shadow: 2px 3px 0 rgba(26,26,26,.55); padding: 10px 12px; }
.r-clip::before { content: ""; position: absolute; top: -6px; left: 50%; width: 38%; height: 12px; transform: translateX(-50%) rotate(-6deg); background: rgba(244,210,31,.78); }
.r-clip::after { content: ""; position: absolute; top: -10px; inset-inline-end: -10px; width: 30px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23141821' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E") center / 70% no-repeat; }
.r-bad { position: relative; border: 2px solid var(--red); background-color: #F7D4CF; background-image: repeating-linear-gradient(-45deg, rgba(215,38,46,.09) 0 6px, transparent 6px 13px); padding: 10px 12px; }
.r-bad .r-name, .r-bad > s { color: var(--red-ink); text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 800; }
.r-stamp { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 26px; line-height: 1.3; color: var(--paper-clip); background: var(--red);
border: 3px double var(--paper-clip); outline: 3px solid var(--red); padding: 1px 10px 0; transform: rotate(-10deg); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.r-stamp::before { content: "\063A\0644\0637"; padding-top: .12em; }
html[lang="en"] .r-stamp::before { content: "WRONG"; font-size: .8em; padding-top: .15em; }
.r-stamp.ok { background: var(--lime); color: var(--ink); outline-color: var(--lime); border-color: var(--ink); }
.r-stamp.ok::before { content: "\0635\062D"; }
html[lang="en"] .r-stamp.ok::before { content: "RIGHT"; }
/* the marks' motion (.r-fresh = a mark that just landed, .r-shake = the wrong element only) follows the feel tokens in the
"feel" block at the end of this file: clipping 250 ms + tape 150 ms + tick seal at 300 ms; stamp 200 ms + 3 px shake */
.r-fresh.r-stamp, .r-fresh .r-stamp { animation: fx-stamp var(--t-stamp) ease-out both; }
.r-fresh.r-clip { animation: fx-clip var(--t-clip) var(--ease-pop) both; }
.r-fresh.r-clip::before { animation: fx-tape var(--t-tape) var(--t-tape-at) ease-out both; }
.r-fresh.r-clip::after { animation: fx-seal var(--t-seal) var(--t-seal-at) var(--ease-pop) both; }
.r-shake { animation: fx-shake var(--t-shake) 2; }
/* ---- category panel: family colour + halftone, icon, ink label band ---- */
.r-panel { position: relative; display: flex; flex-direction: column; border: 2px solid var(--ink); overflow: hidden; background: var(--fam-team); min-height: 96px; container-type: inline-size; }
.r-panel::before { content: ""; position: absolute; inset: 0; background-image: var(--tex-halftone); background-size: 5px 5px; pointer-events: none; }
.r-panel[data-family="honours"] { background: var(--fam-honours); }
.r-panel[data-family="where"] { background: var(--fam-where); }
.r-panel[data-family="profile"] { background: var(--fam-profile); }
.r-panel[data-family="numbers"] { background: var(--fam-numbers); }
.r-panel__art { position: relative; flex: 1 1 auto; display: grid; place-items: center; padding: 8% 10% 4%; min-height: 0; }
.r-panel__art img { width: auto; height: 100%; max-height: 64cqi; max-width: 80%; object-fit: contain; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.45)); }
.r-panel__ico { width: 62cqi; max-width: 80%; aspect-ratio: 1; background: var(--fill, var(--paper-clip)); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.r-band { position: relative; background: var(--ink); color: var(--paper-clip); font: 800 clamp(11px, 11cqi, 15px)/1.2 var(--font-ui); padding: 5px 6px 6px; text-align: center; }
/* ---- bottom sheet (paper, torn top edge) ---- */
.r-sheet-back { position: fixed; inset: 0; background: rgba(8,11,38,.62); z-index: 40; }
.r-sheet { position: fixed; z-index: 41; inset-inline: 0; bottom: 0; max-height: 88svh; overflow: auto; background: var(--paper); padding: 22px max(16px, var(--ir)) calc(16px + var(--ib)) max(16px, var(--il));
clip-path: polygon(0 9px, 4% 4px, 8% 8px, 12% 2px, 17% 7px, 21% 3px, 26% 9px, 30% 4px, 35% 7px, 39% 1px, 44% 6px, 48% 3px, 53% 9px, 57% 4px, 62% 7px, 66% 2px, 71% 8px, 75% 3px, 80% 7px, 84% 1px, 89% 6px, 93% 3px, 97% 8px, 100% 4px, 100% 100%, 0 100%); }
/* ---- search: input + suggestion rows (kit.js HareefRetro.search) ---- */
.r-search { width: 100%; min-height: 52px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper-clip); color: var(--ink); font: 700 17px var(--font-ui);
box-shadow: 3px 3px 0 var(--red); }
.r-search:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.r-sugg { list-style: none; margin: 12px 0 0; padding: 0; border-top: 3px solid var(--ink); }
.r-sugg li { min-height: 56px; padding: 7px 4px; border-bottom: 1.5px solid var(--ink); cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
.r-sugg li:active, .r-sugg li[aria-selected="true"] { background: var(--paper-2); }
.r-sugg b { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.25; padding-top: 2px; }
.r-sugg small { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- result: the back page ---- */
.r-result { background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-hard); padding: 16px; margin-top: 16px; text-align: center; }
.r-result__big { font-family: var(--font-display); font-size: 56px; line-height: 1; padding-top: 6px; }
.r-share { white-space: pre-wrap; background: var(--paper-clip); border: 1.5px dashed var(--ink); padding: 10px; font: 700 14px/1.6 var(--font-ui); text-align: start; unicode-bidi: plaintext; margin: 12px 0 0; }
/* ---- generic paper card / list row ---- */
.r-card { background: var(--paper-clip); border: 2px solid var(--ink); box-shadow: var(--shadow-hard); padding: 10px 12px; }
.r-rows { display: grid; gap: 8px; }
.r-num { font-family: var(--font-display); font-weight: 400; }
.r-sugg:empty { display: none; }
/* ---- clipping options: .seal-start puts the tick seal on the inline-start corner; .tape-narrow is the short tape
for small clippings (chips, slots); .r-clip.sm = small clipping (smaller seal and tape) ---- */
.r-clip.seal-start::after { inset-inline-end: auto; inset-inline-start: -10px; }
.r-clip.sm { outline-width: 2px; outline-offset: -5px; }
.r-clip.sm::after { width: 18px; top: -8px; inset-inline-end: -8px; border-width: 1.5px; box-shadow: 1px 1px 0 var(--ink); }
.r-clip.sm.seal-start::after { inset-inline-end: auto; inset-inline-start: -8px; }
.r-clip.sm::before { width: 40%; height: 8px; top: -4px; }
.r-clip.tape-narrow::before { width: 22%; min-width: 22px; height: 8px; top: -5px; }
/* ---- the sheet is a centred dialog on desktop (torn top kept, hard shadow) ---- */
@media (min-width: 700px) {
.r-sheet { top: 50%; bottom: auto; inset-inline: 0; margin-inline: auto; width: min(560px, calc(100vw - 48px)); max-height: min(86svh, 760px); transform: translateY(-50%);
padding: 26px 22px 20px; filter: drop-shadow(6px 6px 0 var(--navy-deep)); }
}
/* ---- display headline: the outlined result score ("7/10", "4 of 4"). Yellow = neutral or partial,
.is-win lime (correct), .is-lose red (wrong): the feedback colours keep their meaning. ---- */
.r-score { display: inline-block; font-family: var(--font-display); font-weight: 400; font-size: 68px; line-height: 1; padding-top: 8px; margin: 4px 0 10px;
color: var(--yellow); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg);
direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.r-score.is-win { color: var(--lime); }
.r-score.is-lose { color: var(--red); }
.r-score.sm { font-size: 52px; -webkit-text-stroke-width: 5px; text-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 359px) { .r-score { font-size: 56px; } }
/* ---- panel icon on file:// (CSS masks are CORS fetches there): the pre-painted icon, re-tinted to the family colour ---- */
.r-panel__art img.r-tint { filter: brightness(0) drop-shadow(2px 2px 0 rgba(0,0,0,.25)); }
.r-panel__art img.r-tint.paper { filter: brightness(0) invert(.96) sepia(.12) drop-shadow(2px 2px 0 rgba(0,0,0,.45)); }
.r-panel__art img.r-tint.gold { filter: brightness(0) invert(.82) sepia(1) saturate(6) hue-rotate(2deg) drop-shadow(2px 2px 0 rgba(0,0,0,.45)); }
.r-panel__art img.r-tint { height: auto; width: 62cqi; max-width: 80%; }
/* ---- issue strip: previous / next issue. Markup: ...
. "Previous" sits at the inline-start edge and points to it, "next" at the end. ---- */
.r-inav { width: var(--tap); height: var(--tap); flex: 0 0 auto; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); padding: 0; }
.r-inav:disabled { opacity: .25; cursor: default; }
.r-inav:not(:disabled):active { transform: scale(.92); }
@media (hover: hover) { .r-inav:not(:disabled):hover { color: var(--red-ink); } }
.r-chev { display: block; width: 22px; height: 22px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4.5l7.5 7.5-7.5 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4.5l7.5 7.5-7.5 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
html[dir="ltr"] .r-inav.prev .r-chev, html[dir="rtl"] .r-inav.next .r-chev { transform: scaleX(-1); }
/* ---- list separator: a middle dot next to Eastern Arabic digits reads as a zero, so Arabic uses a bar (kit.js sep()) ---- */
.r-sep::before { content: "\00a0\00B7\00a0"; }
html[lang="ar"] .r-sep::before { content: "\00a0|\00a0"; }
.r-sep:last-child, .r-sep:has(+ :empty) { display: none; }
/* result headline colour follows the round: lime = won / perfect, red = lost, yellow = partial (the container classes
every game already sets on its result box) */
:is(.perfect, .won, .win) .r-score { color: var(--lime); }
:is(.lost, .lose) .r-score { color: var(--red); }
@media (min-width: 1024px) { .r-score { font-size: 84px; -webkit-text-stroke-width: 7px; } }
/* ---- game poster (hub cards, main page newsstand): the game's glyph as a big rubber stamp on a halftone panel in its
panel family colour (games/icons.js HAREEF_POSTER). Icon colour per family as on the grid: paper on navy / green,
gold on the red sunburst, ink on cyan / yellow. ---- */
.g-poster { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid #1A1A1A;
background: #1E2A6B; color: #FBF7EC; container-type: inline-size; }
.g-poster::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.24) 1.1px, transparent 1.4px); background-size: 5px 5px; pointer-events: none; }
.g-poster[data-family="honours"] { background: repeating-conic-gradient(from -90deg at 50% 92%, #D7262E 0 9deg, #BF1E26 9deg 18deg); color: #F4D21F; }
.g-poster[data-family="where"] { background: #3BB3E5; color: #141821; }
.g-poster[data-family="profile"] { background: repeating-linear-gradient(90deg, #2c7a3f 0 12.5%, #35894b 12.5% 25%); color: #FBF7EC; }
.g-poster[data-family="numbers"] { background: #F4D21F; color: #141821; }
.g-poster__stamp { position: relative; display: grid; place-items: center; height: 76%; aspect-ratio: 1; border-radius: 50%;
border: max(3px, 2.2cqi) solid currentColor; outline: max(1.5px, 1cqi) solid currentColor; outline-offset: max(3px, 2cqi);
transform: rotate(-8deg); filter: drop-shadow(3px 3px 0 rgba(0,0,0,.4)); }
.g-poster__stamp svg { width: 62%; height: 62%; stroke-width: 2.3; }
/* ---- one help-sheet title for every game (each page's sheet heading is #helpTitle) ---- */
.r-sheet #helpTitle { font: 400 30px/1.2 var(--font-display); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; text-align: start; margin: 4px 0 8px; padding-top: 4px; }
html[lang="en"] .r-sheet #helpTitle { font-size: 28px; }
/* ---- the verdict line under the result headline ("Brilliant", "Spot on!"): display type in ink, no outline ---- */
.r-verdict { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--ink); padding-top: 4px; margin: 0 0 6px; }
/* =====================================================================================================================
FEEL (Foundation B, games/retro/feel.js): motion tokens, pressed state, correct / wrong marks, high contrast, settings rows.
Global rules 2-7 (docs/research/mobile_game_design_research.md section 4): pressed within 100 ms, marks done in 400 ms,
only transform (incl. the translate / scale / rotate properties) and opacity animate, no blur, the wrong element shakes
(never the page), reduced motion = an opacity fade of 150 ms or less. The individual translate / scale properties are
used so a mark composes with an element's own rotate() tilt instead of replacing it.
===================================================================================================================== */
:root {
--t-press: 60ms; /* pressed state transition (starts on pointerdown) */
--t-clip: 250ms; --t-tape-at: 100ms; --t-tape: 150ms; /* correct: clipping, then tape */
--t-seal-at: 300ms; --t-seal: 100ms; /* correct: tick seal lands at 300 ms, done at 400 ms */
--t-stamp: 200ms; --t-shake: 100ms; /* wrong: stamp, then two 100 ms shake cycles of the element */
--t-reduced: 150ms; /* reduced motion: opacity only */
--ease-pop: cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes fx-clip { from { scale: 1.08; opacity: .55; } to { scale: 1; opacity: 1; } }
@keyframes fx-tape { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }
@keyframes fx-seal { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes fx-stamp { 0% { scale: 1.6; opacity: 0; } 70% { scale: .95; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes fx-shake { 0%, 100% { translate: 0 0; } 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
@keyframes fx-fade { from { opacity: .35; } to { opacity: 1; } }
/* HareefFeel.mark(el, ok): .fx-ok on the clipping (tape = ::before, seal = ::after on .r-clip, or child .fx-tape / .fx-seal),
.fx-bad on the wrong element (stamp = .r-stamp / .fx-stamp inside it, or the element itself when it is the stamp) */
.fx-ok { animation: fx-clip var(--t-clip) var(--ease-pop) both; }
.r-clip.fx-ok::before, .fx-ok .fx-tape { animation: fx-tape var(--t-tape) var(--t-tape-at) ease-out both; }
.r-clip.fx-ok::after, .fx-ok .fx-seal { animation: fx-seal var(--t-seal) var(--t-seal-at) var(--ease-pop) both; }
.fx-bad { animation: fx-shake var(--t-shake) var(--t-stamp) 2; }
.fx-bad .r-stamp, .fx-bad .fx-stamp, .r-stamp.fx-bad { animation: fx-stamp var(--t-stamp) ease-out both; }
.r-stamp.fx-bad { animation: fx-stamp var(--t-stamp) ease-out both, fx-shake var(--t-shake) var(--t-stamp) 2; }
@media (prefers-reduced-motion: reduce) {
.fx-ok, .fx-bad, .r-fresh, .r-fresh .r-stamp, .r-shake, .fx-bad .r-stamp, .fx-bad .fx-stamp { animation: fx-fade var(--t-reduced) ease-out both !important; }
.r-clip.fx-ok::before, .r-clip.fx-ok::after, .fx-ok .fx-tape, .fx-ok .fx-seal, .r-fresh.r-clip::before, .r-fresh.r-clip::after { animation: none !important; }
}
/* pressed state: feel.js puts .is-pressed on the control at pointerdown (CSS :active can lag on touch); 2 px into the hard
shadow. The translate property composes with a control's own rotate / scale. */
:is(button, a[href], [role="button"], [role="option"], summary, label, .r-sugg li).is-pressed:not(:disabled) { translate: 2px 2px; }
.r-round.is-pressed { background: rgba(239,230,210,.12); }
.r-sugg li.is-pressed { background: var(--paper-2); }
button, a[href], [role="button"], [role="option"], summary, label, input, select { touch-action: manipulation; }
button, a[href], [role="button"], summary { transition-property: translate, transform, opacity; transition-duration: var(--t-press); }
@media (prefers-reduced-motion: reduce) { :is(button, a[href], [role="button"], [role="option"], summary, label).is-pressed:not(:disabled) { translate: none; opacity: .8; } }
/* high contrast ("ألوان واضحة", mode.js data-contrast): Okabe-Ito, correct green -> blue #0072B2, highlight yellow ->
orange #E69F00, red stays. Every coloured state also carries a word or an icon (tick seal, WRONG stamp, hatch). */
html[data-contrast="high"] { --lime: #0072B2; --yellow: #E69F00; --gold: #E69F00; }
html[data-contrast="high"] .r-clip::after { box-shadow: 2px 2px 0 var(--ink), 0 0 0 2px var(--paper-clip); }
/* settings rows added to every help sheet (feel.js mountSettings): label + switch, 52 px tall */
.fx-settings { margin: 14px 0 4px; border: 2px solid var(--ink); background: var(--paper-clip); box-shadow: var(--shadow-hard); text-align: start; }
.fx-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 12px; cursor: pointer; color: var(--ink); }
.fx-setting[hidden] { display: none; }
.fx-setting + .fx-setting { border-top: 1px solid var(--ink); }
.fx-setting__txt { display: flex; flex-direction: column; min-width: 0; }
.fx-setting__txt b { font: 800 16px/1.4 var(--font-ui); }
.fx-setting__txt small { font: 700 13px/1.4 var(--font-ui); color: var(--ink-soft); }
.fx-toggle { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 52px; height: 30px; margin: 0; border: 2px solid var(--ink); background: var(--paper-2); position: relative; cursor: pointer; }
.fx-toggle::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 18px; height: 18px; background: var(--ink); transition: translate var(--t-press); }
.fx-toggle:checked { background: var(--lime); }
.fx-toggle:checked::after { translate: 22px 0; }
html[dir="rtl"] .fx-toggle:checked::after { translate: -22px 0; }
.fx-toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* ---- TIMER (games/retro/timer.js): number + bar; the remaining part is anchored at the inline end and shrinks toward it
(scaleX on the fill, transform only); digits never mirror; "!" + red in the last seconds (not colour alone) ---- */
.tm { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tm-num { flex: 0 0 auto; min-width: 3.2em; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; padding-top: 4px; direction: ltr; unicode-bidi: isolate; text-align: center; color: var(--paper-clip); }
.tm.is-warn .tm-num { color: var(--red); -webkit-text-stroke: 4px var(--paper-clip); paint-order: stroke fill; }
.tm.is-warn .tm-num::after { content: "!"; }
.tm-bar { position: relative; flex: 1 1 auto; height: 14px; border: 2px solid var(--ink); background: var(--paper-2); overflow: hidden; }
.tm-bar i { position: absolute; inset: 0; background: var(--yellow); transform-origin: right center; transition: transform 250ms linear; }
html[dir="rtl"] .tm-bar i { transform-origin: left center; }
.tm.is-warn .tm-bar i { background: var(--red); }
.tm-tag { font: 800 14px/1.4 var(--font-ui); color: var(--paper-clip); border: 2px solid currentColor; padding: 0 8px; }
.tm-soft .tm-num { font-size: 24px; min-width: 2.4em; }
.tm-soft .tm-bar { height: 10px; }
.tm-card { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(13, 18, 56, .86); }
.tm-card__box { display: grid; justify-items: center; gap: 14px; min-width: min(320px, 100%); padding: 22px 20px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); text-align: center; }
.tm-card__big { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1.1; padding-top: 8px; color: var(--red); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.tm-card__big.is-pop { animation: fx-stamp 300ms ease-out both; }
.tm-card__num { font-family: var(--font-display); font-size: 34px; direction: ltr; unicode-bidi: isolate; }
.tm-card__go { min-width: 180px; }
@media (prefers-reduced-motion: reduce) { .tm-bar i { transition: none; } .tm-card__big.is-pop { animation: fx-fade var(--t-reduced) both; } }
/* ---- rule 12: Lalezar only at 24 px or more (smaller display type is Cairo 800 / 900) ---- */
.r-sugg b { font-family: var(--font-ui); font-weight: 800; font-size: 18px; line-height: 1.3; padding-top: 0; }
html[lang="en"] .r-stamp { font-family: var(--font-ui); font-weight: 900; }
/* reduced motion: controls never slide when pressed (rule 6), only an opacity change of 150 ms or less */
@media (prefers-reduced-motion: reduce) {
button, a[href], [role="button"], [role="option"], summary, label, .r-btn, .r-round, .r-inav { transition: opacity 100ms !important; }
.r-btn:active, .r-btn.is-pressed, .r-round:active, .r-inav:not(:disabled):active { translate: none !important; transform: none !important; opacity: .8; }
}
/* =====================================================================================================================
COMPACT PHONES (owner, 2026-11-11, from phone playtests: "make everything a bit smaller ... so you can ALWAYS see the
question while you're playing"). The same retro look with less air: top bar, masthead, issue strip, stickers, cards,
buttons and gaps. Minimums kept: tap targets 44 px (8 px apart), Arabic body 16 px, Lalezar only at 24 px or more.
Desktop (the two-page spread) keeps the roomy sizes above.
===================================================================================================================== */
@media (max-width: 1023px) {
.r-poster { padding-bottom: calc(16px + var(--ib)); }
.r-topbar { min-height: 58px; gap: 6px; }
.r-masthead { font-size: clamp(28px, 8.6vw, 38px); -webkit-text-stroke-width: 5px; text-shadow: 3px 3px 0 var(--navy-deep); padding-top: 4px; }
html[lang="en"] .r-masthead { font-size: clamp(26px, 7.6vw, 34px); -webkit-text-stroke-width: 4px; }
.r-topbar.is-wrap { padding-top: calc(6px + var(--it)); padding-bottom: 8px; row-gap: 0; }
.r-cover { padding: 6px; box-shadow: 0 4px 0 var(--navy-deep); }
.r-cover__rule { padding: 6px 8px 10px; }
.r-issue { padding: 2px 0; margin-bottom: 8px; }
.r-issue__title { padding-top: 2px; }
.r-h2 { margin-bottom: 6px; }
.r-sticker { width: 68px; border-width: 2.5px; }
.r-sticker b { font-size: 28px; padding-top: 3px; }
.r-btn { min-height: 46px; padding: 0 14px; font-size: 16px; }
.r-btns { margin-top: 10px; }
.r-search { min-height: 48px; }
.r-panel { min-height: 84px; }
.r-sugg { margin-top: 8px; }
.r-sugg li { min-height: 50px; padding: 5px 4px; }
.r-result { padding: 12px; margin-top: 12px; }
.r-clip, .r-bad, .r-card { padding: 8px 10px; }
.r-stamp { font-size: 24px; }
}
/* ---- the pinned question (kit.js HareefRetro.pinQuestion): when the game's question has scrolled out of view during
play, a compact copy rides at the top of the screen so the question is ALWAYS visible. Paper strip, ink rule, the
question in Cairo 800 16 px (never truncated: it wraps), an optional row of clues (crests, chips) under it. Tapping it
scrolls back to the full question. Slides in with transform + opacity only. ---- */
.r-qpin { position: fixed; z-index: 22; top: 0; inset-inline: 0; margin-inline: auto; max-width: var(--maxw); display: grid; gap: 3px;
padding: calc(6px + var(--it)) max(12px, var(--ir)) 7px max(12px, var(--il)); background: var(--paper-clip); color: var(--ink);
border-bottom: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(13, 18, 56, .55); text-align: start; cursor: pointer;
translate: 0 -110%; opacity: 0; pointer-events: none; transition: translate 140ms ease-out, opacity 120ms; }
.r-qpin.is-on { translate: 0 0; opacity: 1; pointer-events: auto; }
.r-qpin__k { font: 800 13px/1.35 var(--font-ui); color: var(--red-ink); }
.r-qpin__q { font: 800 16px/1.6 var(--font-ui); overflow-wrap: anywhere; }
.r-qpin__q .r-num { font-family: var(--font-ui); font-weight: 900; }
.r-qpin__x { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 800 14px/1.3 var(--font-ui); color: var(--ink-meta); }
.r-qpin__x img, .r-qpin__x .crest { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.r-qpin__chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); white-space: nowrap; }
.r-qpin__chip.ok { background: var(--lime); }
.r-qpin__sep { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .r-qpin, .r-qpin.is-on { translate: 0 0; transition: opacity var(--t-reduced); } }
/* under a sheet (search, help) the pin steps aside: the sheet carries the question itself */
html.sheet-open .r-qpin, html.ss-open .r-qpin { opacity: 0; pointer-events: none; }