/* 7arif / حريف · retro Arab sports-magazine look (branch redesign/retro-magazine).
   Source of truth: inpo/harif-handover (01_CONCEPT, 02_DESIGN_SYSTEM, tokens.css: variable names kept) and the approved
   mockup reference/grid-screen.html at 390 px. Every daily round is an issue of a magazine: navy poster border, cream
   cover card with a cyan rule, red outlined masthead, blue diagonal sash for the other games, issue strip, yellow
   attempts sticker, category panels in kit colours with halftone and a label band, empty cells with a red ring "+" and a
   "No." serial, correct = taped newspaper clipping, wrong = red "غلط" rubber stamp, print buttons with hard offset
   shadows, the result as the back page. Wide screens get a two-page spread (cover + inside page), not a phone column.
   Owner rules on top of the handover: no emoji, rarity hidden (the clipping shows how many players fit), Egyptian
   Arabic copy, men's football only, every label in AR and EN, 44 px touch targets.

   Presentation hooks written by retro.js (it never touches game state): th.panel + --kit (kit background), .pa (logo,
   glyph or big numeral), data-band, [data-issue-title]/[data-issue-date], td.fx-ok / td.fx-bad (feel.js marks), th.corner.pop.
   Mechanics kept from the mobile sweep (docs/reports/mobile_layout.md): the 3x3 <table> is a 4-column CSS grid (rows
   display:contents), square cells via aspect-ratio (4:3 on landscape phones), env() safe areas, sheets follow the
   visual viewport via mobile.js (html.kb-open), body scroll lock via html.sheet-open, every tap target >= 44 px.
   Fonts (SIL OFL, web/fonts): Lalezar (display) + Cairo (UI, variable, Arabic + Latin subset). */

/* fonts: generated by scripts/make_fonts.py */
@font-face { font-family: "Cairo"; src: url("fonts/cairo.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00AB, U+00B7, U+00BB, U+00D7, U+060C, U+061B, U+061F, U+0621-063A, U+0640-0652, U+0660-066D, U+0670-0671, U+067E, U+0686, U+06A4, U+06A9, U+06CC, U+2013-2014, U+2019, U+201C-201D, U+2026; }
@font-face { font-family: "Cairo"; src: url("fonts/cairo-ext.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap;
  unicode-range: U+0010, U+00A1-00A6, U+00A8-00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00D6, U+00D8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+060D, U+0615, U+0653-0656, U+0658, U+066E-066F, U+0679, U+0688, U+0691, U+0698, U+06A1, U+06AF, U+06BA, U+06BE, U+06C1-06C3, U+06D2-06D4, U+06F0-06F9, U+2018, U+201A, U+201E, U+2020-2022, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB51, U+FB57-FB59, U+FB67-FB69, U+FB6B-FB6D, U+FB7B-FB7D, U+FB89, U+FB8B, U+FB8D, U+FB8F-FB91, U+FB93-FB95, U+FB9F, U+FBA7-FBA9, U+FBAB-FBAD, U+FBAF, U+FBB1-FBB9, U+FBBD-FBBE, U+FBE8-FBE9, U+FBFD-FBFF, U+FC43-FC44, U+FC64-FC65, U+FC67-FC6B, U+FC6D-FC71, U+FC73-FC77, U+FC79-FC7B, U+FC86-FC87, U+FC8A-FC8B, U+FC8D-FC8F, U+FC91-FC92, U+FC94, U+FC96, U+FCFB-FCFE, U+FD05-FD08, U+FD0D-FD10, U+FD17-FD1A, U+FD21-FD24, U+FD29-FD2C, U+FD3E-FD3F, U+FDF2, U+FE82, U+FE84, U+FE86, U+FE88, U+FE8A-FE8C, U+FE8E, U+FE90-FE92, U+FE94, U+FE96-FE98, U+FE9A-FE9C, U+FE9E-FEA0, U+FEA2-FEA4, U+FEA6-FEA8, U+FEAA, U+FEAC, U+FEAE, U+FEB0, U+FEB2-FEB4, U+FEB6-FEB8, U+FEBA-FEBC, U+FEBE-FEC0, U+FEC2-FEC4, U+FEC6-FEC8, U+FECA-FECC, U+FECE-FED0, U+FED2-FED4, U+FED6-FED8, U+FEDA-FEDC, U+FEDE-FEE0, U+FEE2-FEE4, U+FEE6-FEE8, U+FEEA-FEEC, U+FEEE, U+FEF0, U+FEF2-FEFC; }
@font-face { font-family: "Lalezar"; src: url("fonts/lalezar.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00AB, U+00B7, U+00BB, U+00D7, U+060C, U+061B, U+061F, U+0621-063A, U+0640-0652, U+0660-066D, U+0670-0671, U+067E, U+0686, U+06A4, U+06A9, U+06CC, U+2013-2014, U+2019, U+201C-201D, U+2026; }
@font-face { font-family: "Lalezar"; src: url("fonts/lalezar-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000, U+000D, U+00A1-00A6, U+00A8-00A9, U+00AC, U+00AE-00B1, U+00B4, U+00B6, U+00B8, U+00BF-00D6, U+00D8-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-012B, U+012E-0131, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-015B, U+015E-016B, U+016E-017E, U+0189, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01DE-01DF, U+01E6-01E7, U+01FE-01FF, U+0218-021B, U+0229-022B, U+0243-0244, U+024C, U+0268, U+0289, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0306-030C, U+0312, U+031B, U+0323, U+0326-0328, U+032D, U+0335-0338, U+0601, U+0603, U+060B, U+0615, U+0653-0656, U+0658, U+066E-066F, U+0672-0673, U+0679, U+0688, U+0691, U+0698, U+06A1, U+06AF, U+06BA, U+06BE, U+06C0-06C3, U+06D2-06D4, U+06D6, U+06F0-06F9, U+1E04-1E05, U+1E0C-1E0F, U+1E12-1E13, U+1E24-1E25, U+1E2E-1E2F, U+1E36-1E37, U+1E3C-1E3F, U+1E44-1E47, U+1E4A-1E4D, U+1E50-1E53, U+1E62-1E63, U+1E6C-1E71, U+1E80-1E85, U+1E92-1E93, U+1EA0-1EF9, U+2002-2003, U+2009, U+2018, U+201A, U+201E, U+2020-2022, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2202, U+2205, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC, U+FB01-FB02, U+FB51, U+FB57-FB59, U+FB67-FB69, U+FB6B-FB6D, U+FB7B-FB7D, U+FB89, U+FB8B, U+FB8D, U+FB8F-FB91, U+FB93-FB95, U+FB9F, U+FBA5, U+FBA7-FBA9, U+FBAB-FBAD, U+FBAF, U+FBB1-FBB9, U+FBBD-FBBE, U+FBF9-FBFA, U+FBFD-FBFF, U+FC02-FC04, U+FC08-FC0A, U+FC0E-FC10, U+FC12-FC14, U+FC1F, U+FC21, U+FC25, U+FC31-FC32, U+FC35-FC36, U+FC3D-FC3E, U+FC42-FC44, U+FC4E-FC50, U+FC58, U+FC64-FC6E, U+FC70-FC7C, U+FC7E, U+FC83-FC84, U+FC86-FC87, U+FC8A-FC8F, U+FC91-FC94, U+FC9A-FC9B, U+FC9F-FCA0, U+FCA4-FCA6, U+FCB0, U+FCB3, U+FCB7, U+FCCC, U+FCD5-FCD6, U+FCDD-FCEA, U+FCEE-FCF1, U+FCFB-FCFF, U+FD03, U+FD05-FD08, U+FD0C-FD10, U+FD17-FD1A, U+FD1F-FD20, U+FD22-FD24, U+FD28-FD2C, U+FD30-FD32, U+FD3E-FD3F, U+FDF2, U+FDFA, U+FDFC, U+FE82, U+FE84, U+FE86, U+FE88, U+FE8A-FE8C, U+FE8E, U+FE90-FE92, U+FE94, U+FE96-FE98, U+FE9A-FE9C, U+FE9E-FEA0, U+FEA2-FEA4, U+FEA6-FEA8, U+FEAA, U+FEAC, U+FEAE, U+FEB0, U+FEB2-FEB4, U+FEB6-FEB8, U+FEBA-FEBC, U+FEBE-FEC0, U+FEC2-FEC4, U+FEC6-FEC8, U+FECA-FECC, U+FECE-FED0, U+FED2-FED4, U+FED6-FED8, U+FEDA-FEDC, U+FEDE-FEE0, U+FEE2-FEE4, U+FEE6-FEE8, U+FEEA-FEEC, U+FEEE, U+FEF0, U+FEF2-FEFC; }
/* /fonts */
/* the board keeps its square while the day's grid pack loads (grid/split_bundle.py), so nothing below it jumps (CLS) */
#grid:empty { display: block; width: 100%; aspect-ratio: 1; }

:root {
  /* color (tokens.css) */
  --navy: #1E2A6B; --navy-deep: #0D1238;
  --paper: #EFE6D2; --paper-2: #E6DAC0; --paper-clip: #FBF7EC;
  --ink: #1A1A1A; --ink-soft: #6B5D43; --ink-meta: #4a3f2c;
  --red: #D7262E; --red-kit: #C8202A; --yellow: #F4D21F; --lime: #7BC43A; --cyan: #3BB3E5; --blue: #2A4DA0;
  /* type */
  --font-display: "Lalezar", "Cairo", sans-serif;
  --font-ui: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
  /* shape */
  --shadow-hard: 3px 3px 0 var(--ink); --shadow-hard-navy: 3px 3px 0 var(--navy-deep);
  --radius-print: 2px; --tap: 44px;
  /* textures: code fallbacks now; the Higgsfield paper texture replaces --tex-paper when it exists */
  --tex-halftone: radial-gradient(rgba(0,0,0,.24) 1.1px, transparent 1.4px);
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --maxw: 480px;
  --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);
  /* pwa.js reads these for its footer links and toast */
  --muted: #EFE6D2; --blue-text: #1A1A1A; --white: #EFE6D2; --blue-line: #1A1A1A; --blue-tint: #E6DAC0;
  color-scheme: dark;
}
/* the poster is navy either way; at night the paper is dimmed a touch so it does not glare */
@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; overscroll-behavior-y: none; font-synthesis: none; }
body { margin: 0; color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.45; min-height: 100vh; min-height: 100svh; overflow-wrap: break-word;
       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, label, summary, [role="button"] { touch-action: manipulation; }
button { cursor: pointer; }
svg { width: 1em; height: 1em; flex: 0 0 auto; }
img { max-width: 100%; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[lang="en"] .t-ar, html:not([lang="en"]) .t-en { display: none; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
html.sheet-open, html.sheet-open body { overflow: hidden; overscroll-behavior: none; }
/* Arabic is a joined script: tracking pulls the letters apart. Spacing is for Latin only. */
html[lang="ar"] body * { letter-spacing: normal !important; }

.poster { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; min-height: 100svh; padding-bottom: calc(28px + var(--ib)); overflow: hidden;
          background: rgba(30, 42, 107, .9); }
@media (prefers-color-scheme: dark) { .poster { background: rgba(24, 34, 90, .9); } }
main { padding: 0 max(10px, var(--ir)) 0 max(10px, var(--il)); }

/* =====================================================================================================
   top bar + masthead
   ===================================================================================================== */
.topbar { padding: var(--it) max(14px, var(--ir)) 0 max(14px, var(--il)); }
.topbar-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.topbar-side { display: flex; gap: 8px; }
.btn-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; transition: transform 80ms, scale 80ms; flex: 0 0 auto; }
.btn-round:active { transform: scale(.94); background: rgba(239,230,210,.12); }
.btn-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; }
.btn-round.pill { width: auto; min-width: var(--tap); padding: 0 12px; border-radius: 22px; font: 800 14px/1 var(--font-ui); }
.badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; background: var(--yellow); color: var(--ink);
         font: 800 11px/16px var(--font-ui); text-align: center; border: 1.5px solid var(--ink); }
.badge:empty { display: none; }
.masthead { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1; font-size: clamp(42px, 13vw, 50px); color: var(--red);
            -webkit-text-stroke: 7px var(--paper); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--navy-deep); transform: rotate(-3deg); padding-top: 6px; white-space: nowrap; }
.masthead .wm-en { font-size: .8em; }

/* =====================================================================================================
   cover card
   ===================================================================================================== */
.cover { position: relative; background: var(--paper); border-radius: 4px; padding: 8px; box-shadow: 0 6px 0 var(--navy-deep); }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply; opacity: .22;
                background-image: var(--tex-grain); background-size: 220px; }
.cover__rule { border: 2px solid var(--cyan); border-radius: var(--radius-print); padding: 10px 8px 12px; position: relative; overflow: hidden; }

/* Sash: the promo link, bleeding past the cover edges */
.sash { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap); margin: -2px -30px 12px; padding: 8px 40px;
        background: var(--blue); color: #fff; text-decoration: none; transform: rotate(-2.5deg); box-shadow: 0 3px 0 var(--ink); }
html[dir="ltr"] .sash { transform: rotate(2.5deg); }
.sash:active { filter: brightness(1.12); }
.promo-stack { display: none; }
.promo-text { display: flex; flex-direction: column; min-width: 0; }
.sash__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--yellow); }
html[lang="en"] .sash__title { font-size: 19px; }
.promo-text small { font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-chev { font-size: 22px; flex: 0 0 auto; }
html[dir="ltr"] .promo-chev { transform: scaleX(-1); }

/* IssueStrip */
.issue-strip { display: flex; align-items: center; justify-content: space-between; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 6px 0; margin-bottom: 10px; }
.round-title { text-align: center; min-width: 0; flex: 1 1 auto; }
.round-head { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.issue-title { font-family: var(--font-display); font-size: 26px; line-height: 1.1; padding-top: 3px; }
.round-meta { font-size: 12px; font-weight: 700; color: var(--ink-meta); display: flex; justify-content: center; flex-wrap: wrap; gap: 0 5px; line-height: 1.5; }
/* mode tag as a small rubber stamp: red = Egyptian, blue = European */
.modetag { display: inline-block; font: 800 11px/1.5 var(--font-ui); color: #AE1C23; /* red type on paper: AA */ border: 2px solid currentColor; padding: 0 6px; transform: rotate(-4deg); white-space: nowrap; }
.modetag.eu { color: var(--blue); }
.modetag:empty { display: none; }
.roundnav { width: var(--tap); height: var(--tap); border: 0; background: transparent; padding: 0; color: var(--ink); display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
.roundnav:disabled { opacity: .3; cursor: default; }
.roundnav:not(:disabled):active { transform: scale(.9); }
/* RTL: "previous" sits on the right and points right (back towards the start) */
.roundnav.prev svg { transform: scaleX(-1); }
html[dir="ltr"] .roundnav.prev svg { transform: none; }
html[dir="ltr"] .roundnav.next svg { transform: scaleX(-1); }

/* =====================================================================================================
   the board
   ===================================================================================================== */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.grid tr, .grid tbody, .grid thead { display: contents; }
.grid th, .grid td { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; font-weight: 400; text-align: center; container-type: inline-size; }

/* StickerBadge: attempts left */
.grid th.corner { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.grid th.corner::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(96%, 120px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-8deg);
                          border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); box-shadow: var(--shadow-hard); }
.grid th.corner b, .grid th.corner small { position: relative; transform: rotate(-8deg); }
.grid th.corner b { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 46cqi, 54px); line-height: .9; padding-top: 4px; }
.grid th.corner small { font-size: clamp(10px, 14cqi, 15px); font-weight: 800; line-height: 1.2; }
.grid th.corner.pop b { animation: pop .25s ease-out; }
.grid th.corner.done::before { background: var(--paper-2); }

/* CategoryPanel: kit background + halftone, art (logo / glyph / big numeral), label band at the bottom */
.grid th:not(.corner) { --kit: var(--paper-2); display: flex; flex-direction: column; border: 2px solid var(--ink); overflow: hidden; background: var(--kit); }
.grid th:not(.corner)::before { content: ""; position: absolute; inset: 0; background-image: var(--tex-halftone); background-size: 5px 5px; pointer-events: none; }
.grid th img:not(.pa-logo):not(.pa-pic) { display: none; }      /* app.js's Egyptian crest: the retro grid shows kit colours instead */
.grid th .pa { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 4%; padding: 0 7%; overflow: hidden; font-style: normal; }
.grid th .pa > * { margin: 7% 0 5%; }
.pa-roundel { height: 100%; max-height: 64cqi; aspect-ratio: 1; min-height: 0; max-width: 100%; border-radius: 50%; background: var(--paper-clip); border: 2px solid var(--ink);
              box-shadow: 2px 2px 0 var(--ink); display: grid; place-items: center; padding: 12%; overflow: hidden; }
.pa.two .pa-roundel { max-height: 46cqi; }
.pa-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
/* generic icon: the shape is a mask (assets/icons/<name>.png or the code stand-in), the paint is the category's own
   colours (--fill: kit stripes, flag scarf, gold) under a halftone; the rim and the hard shadow are stacked
   drop-shadows on the wrapper, so they follow the shape. Paper rim on blue backdrops, ink rim on the others. */
.pa-ico { position: relative; display: block; height: 100%; max-height: 66cqi; aspect-ratio: 1; min-height: 0; max-width: 100%; --rim: var(--ink);
          filter: drop-shadow(1.6px 0 0 var(--rim)) drop-shadow(-1.6px 0 0 var(--rim)) drop-shadow(0 1.6px 0 var(--rim)) drop-shadow(0 -1.6px 0 var(--rim)) drop-shadow(2.5px 2.5px 0 var(--ink)); }
.pa-ico::before { content: ""; position: absolute; inset: 0; background: var(--tex-halftone) 0 0 / 5px 5px, var(--fill, #FBF7EC);
                  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.grid th[data-rim="paper"] .pa-ico { --rim: var(--paper-clip); }
.pa.two .pa-ico { max-height: 50cqi; }
/* a finished per-category icon (assets/icons/manifest.json): pre-coloured, so only the hard print shadow is added */
.pa-pic { display: block; height: 100%; max-height: 70cqi; max-width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(2.5px 2.5px 0 var(--ink)); }
/* the band's type is set on the th itself (the span inherits it), so a probe placed in the th measures the same font */
.board { container-type: inline-size; }   /* th font sizes below are in board units: a cell is about 23.5cqi wide */
.grid th:not(.corner) { font-family: var(--font-display); font-size: clamp(11px, 3.5cqi, 18px); line-height: 1.2; }
/* Lalezar is wide: labels over 20 characters switch to Cairo 800, which fits about twice the text per line */
.grid th.long, .grid th.xlong, html[lang="en"] .grid th:not(.corner) { font-family: var(--font-ui); font-weight: 800; line-height: 1.15; }
.grid th.long { font-size: clamp(10.5px, 3.05cqi, 16px); }
.grid th.xlong { font-size: clamp(10px, 2.8cqi, 15px); }
.grid th:not(.corner) > span { position: relative; flex: 0 0 auto; padding: 2px 2px max(4px, .4em); background: var(--ink); color: #fff; font: inherit; hyphens: auto; }
.grid th[data-band="yellow"] > span { background: var(--yellow); color: var(--ink); }

/* EmptyCell */
.grid td { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; background: var(--paper-2); border: 2px dashed rgba(26,26,26,.35); }
.grid td .plus { width: clamp(28px, 42cqi, 54px); aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--red); color: var(--red); font-family: var(--font-display);
                 font-size: clamp(22px, 32cqi, 40px); line-height: 1; display: grid; place-items: center; padding-top: .16em; transition: transform 120ms; }
.grid td .count { position: absolute; bottom: 3px; inset-inline-end: 5px; direction: ltr; unicode-bidi: isolate; font-size: clamp(9px, 12cqi, 13px); font-weight: 700; color: var(--ink-soft); line-height: 1.2; }
.grid td .count::before { content: "No. "; }
.grid td:not(.ok):not(.bad):not(.revealed):active .plus { transform: scale(.88) rotate(-10deg); background: rgba(215,38,46,.1); }
/* ClippingCell: correct */
.grid td.ok { background: var(--paper-clip); border: 0; box-shadow: 2px 3px 0 rgba(26,26,26,.55); padding: 6px 4px; transform: rotate(var(--tilt, 2.5deg)); cursor: default; }
.grid tr:nth-child(odd) td.ok { --tilt: -2deg; }
.grid tr td:nth-child(3).ok { --tilt: 1.5deg; }
.grid td.ok::before { content: ""; position: absolute; top: -6px; left: 50%; width: 42%; height: 12px; transform: translateX(-50%) rotate(-6deg); background: rgba(244,210,31,.78); }
.grid td.ok .mark { display: none; }
/* correct reads as correct: lime frame inside the clipping + a lime "approved" seal with a drawn tick in the corner */
.grid td.ok { outline: 3px solid var(--lime, #7BC43A); outline-offset: -7px; }
.grid td.ok::after { content: ""; position: absolute; top: -9px; inset-inline-end: -9px; width: clamp(24px, 32cqi, 36px); aspect-ratio: 1; border-radius: 50%; z-index: 2;
  background: var(--lime, #7BC43A) 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; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.grid td.ok .name { font-family: var(--font-display); font-size: clamp(14px, 21cqi, 26px); line-height: 1.12; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.grid td.ok .sub { margin-top: 4px; font-size: clamp(9.5px, 11.5cqi, 13px); font-weight: 800; line-height: 1.35; color: var(--ink); background: var(--yellow); padding: 1px 5px; border-radius: var(--radius-print); max-width: 100%; }
/* StampMark: wrong */
.grid td.bad { overflow: hidden; cursor: default; border: 2px solid var(--red); background-color: #F7D4CF;
  background-image: repeating-linear-gradient(-45deg, rgba(215,38,46,.09) 0 6px, transparent 6px 13px); }
.grid td.bad .plus, .grid td.bad .serial { display: none; }
.grid td.bad .mark { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-display); font-size: clamp(17px, 25cqi, 34px); line-height: 1.3; margin-bottom: 12px;
                     color: var(--paper-clip); background: var(--red); border: 3px double var(--paper-clip); outline: 3px solid var(--red); padding: 1px 10px 0;
                     transform: rotate(-12deg); box-shadow: 3px 3px 0 var(--ink); max-width: 100%; white-space: nowrap; }
.grid td.bad .mark::before { content: "غلط"; padding-top: .12em; }   /* غلط */
html[lang="en"] .grid td.bad .mark::before { content: "WRONG"; font-size: .78em; padding-top: .15em; letter-spacing: .02em; }
.grid td.bad .mark svg { width: .6em; height: .6em; stroke-width: 4; }
.grid td.bad .name { position: absolute; bottom: 3px; inset-inline: 4px; font-size: clamp(10px, 11.5cqi, 13px); font-weight: 800; color: var(--red); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                     text-decoration: line-through; text-decoration-thickness: 2px; }
/* after the round: the top answer, set small */
.grid td.revealed { padding: 6px 4px 14px; }
.grid td.revealed .name { font-size: clamp(11px, 15cqi, 17px); font-weight: 700; color: var(--ink-soft); line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.grid td.revealed .sub { position: absolute; bottom: 3px; inset-inline-end: 5px; direction: ltr; unicode-bidi: isolate; font-size: clamp(10px, 11.5cqi, 13px); font-weight: 700; color: var(--red); }

/* motion: the marks follow the feel tokens (FEEL block at the end of this file, games/retro/feel.js); the sticker pops */
@keyframes clip-drop { from { transform: translateY(-12px) rotate(0); opacity: 0; } to { transform: translateY(0) rotate(var(--tilt, 2.5deg)); opacity: 1; } }
@keyframes pop { 0% { transform: rotate(-8deg) scale(1.18); } 100% { transform: rotate(-8deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================================================
   print buttons
   ===================================================================================================== */
.under-board { display: flex; gap: 8px; margin: 18px 0 0; }
.under-board > * { flex: 1 1 0; }
.btn-print { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 16px 0; font-family: var(--font-display); font-size: 20px; line-height: 1.1;
             text-decoration: none; border: 2px solid var(--ink); border-radius: 0; box-shadow: var(--shadow-hard-navy); background: var(--red); color: #fff; transition: transform 80ms, translate 80ms; }
.btn-print svg { font-size: 19px; margin-top: -4px; }
.btn-print--paper { background: var(--paper); color: var(--ink); }
.btn-print:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--navy-deep); }
.btn-print:disabled { opacity: .45; cursor: default; }
html[lang="en"] .btn-print { font-family: var(--font-ui); font-weight: 800; font-size: 17px; padding-top: 0; }
html[lang="en"] .btn-print svg { margin-top: 0; }

/* =====================================================================================================
   result: the back page
   ===================================================================================================== */
.result { margin-top: 22px; }
.result .cover { animation: clip-drop 260ms cubic-bezier(.3,1.4,.5,1); --tilt: 0deg; }
.result-head { text-align: center; padding: 4px 0 2px; }
.result-kicker { display: inline-block; font-size: 12px; font-weight: 800; background: var(--ink); color: #fff; padding: 1px 10px; }
.headline { font-family: var(--font-display); font-weight: 400; line-height: 1.05; color: var(--lime); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.headline--yellow { color: var(--yellow); }
.result-score { font-size: 76px; margin-top: 6px; direction: ltr; unicode-bidi: isolate; }
.result:not(.perfect) .result-score { color: var(--yellow); }
.result-label { font-family: var(--font-display); font-size: 26px; line-height: 1.2; margin-top: 2px; }
.statrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 2px 18px; }
.stat { text-align: center; border: 3px solid var(--red); color: var(--red); padding: 4px 2px 2px; transform: rotate(-3deg); background: rgba(251,247,236,.5); }
.stat:nth-child(2) { transform: rotate(2deg); border-color: var(--blue); color: var(--blue); }
.stat:nth-child(3) { transform: rotate(-1deg); }
.stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; padding-top: 3px; }
.stat span { font-size: 11px; font-weight: 800; }
.statrow.compact { margin: 4px 2px 14px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tryother { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 18px -30px 0; padding: 8px 48px; background: var(--blue); color: #fff; text-decoration: none;
            transform: rotate(-2deg); box-shadow: 0 3px 0 var(--ink); }
html[dir="ltr"] .tryother { transform: rotate(2deg); }
.tryother .more-icon { display: none; }
.tryother b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--yellow); }
.tryother small { display: block; font-size: 12px; font-weight: 700; }
.share-out { position: relative; margin: 20px 0 0; background: var(--paper-clip); padding: 12px; white-space: pre-wrap; font: 700 14px/1.6 var(--font-ui); unicode-bidi: plaintext; text-align: start;
             overflow-x: auto; box-shadow: 2px 3px 0 rgba(26,26,26,.55); transform: rotate(-1deg); }
.share-out.flash { background: #fff6c2; }

/* =====================================================================================================
   more games: the newsstand (each game a small magazine cover; no icons, the cover is the picture)
   ===================================================================================================== */
.more { margin-top: 30px; counter-reset: game; }
.more-kicker { display: inline-block; font-size: 12px; font-weight: 800; background: var(--yellow); color: var(--ink); padding: 1px 10px; transform: rotate(-2deg); margin-bottom: 6px; }
.more-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.more-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--yellow); }
.more-all { color: var(--paper); font-weight: 800; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: flex-end; }
.more-sub { margin: 0 0 12px; color: var(--paper); opacity: .85; font-size: 13px; font-weight: 600; }
.more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.more-list li { counter-increment: game; }
.more-card { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; background: var(--paper); padding: 6px 6px 10px; color: var(--ink); text-decoration: none; box-shadow: 0 5px 0 var(--navy-deep); }
.more-card::before { content: ""; display: block; aspect-ratio: 16 / 9; border: 2px solid var(--cyan); margin-bottom: 2px;
                     background: var(--tex-halftone) 0 0 / 5px 5px, var(--kit, linear-gradient(160deg, #3BB3E5, #1E2A6B)); }
.more-card::after { content: counter(game, arabic-indic); position: absolute; top: 12px; inset-inline-start: 12px; width: 34px; height: 34px; border-radius: 50%;
                    background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: grid; place-items: center;
                    font-family: var(--font-display); font-size: 19px; padding-top: 4px; transform: rotate(-8deg); }
html[lang="en"] .more-card::after { content: counter(game); padding-top: 3px; }
.more-list li:nth-child(4n+1) .more-card { --kit: radial-gradient(circle at 30% 25%, #e0383f, #a3141c 70%); }
.more-list li:nth-child(4n+2) .more-card { --kit: repeating-conic-gradient(from -90deg at 50% 100%, #F4D21F 0 9deg, #E0B43A 9deg 18deg); }
.more-list li:nth-child(4n+3) .more-card { --kit: repeating-linear-gradient(90deg, #2c7a3f 0 12.5%, #35894b 12.5% 25%); }
.more-card:active { transform: translate(1px, 2px); box-shadow: 0 2px 0 var(--navy-deep); }
/* today's page finished (games/retro/progress.js): the lime tick seal of the contents page and the games switcher */
.more-tick { position: absolute; z-index: 2; top: -8px; inset-inline-end: -8px; width: 32px; 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; }
.more-card.is-done .more-go { background: var(--paper-clip); color: var(--ink); }
.more-icon { display: none; }
.more-name { font-family: var(--font-display); font-size: 23px; line-height: 1.15; color: var(--red); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); padding: 2px 2px 0; }
.more-list li:nth-child(4n+2) .more-name { color: var(--yellow); }
.more-list li:nth-child(4n+3) .more-name { color: var(--lime); }
.more-list li:nth-child(4n+4) .more-name { color: var(--cyan); }
.more-desc { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--ink-meta); flex: 1 1 auto; padding: 0 2px; }
.more-go { align-self: flex-start; margin: 4px 2px 0; font-family: var(--font-display); font-size: 16px; padding: 3px 12px 0; background: var(--red); color: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
html[lang="en"] .more-go { font-family: var(--font-ui); font-weight: 800; font-size: 13px; padding-top: 1px; }

/* =====================================================================================================
   reveal: clipping strips
   ===================================================================================================== */
.reveal h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--yellow); margin: 28px 0 10px; }
.reveal details { background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--navy-deep); margin-bottom: 8px; }
.reveal summary { cursor: pointer; padding: 10px 12px; padding-inline-end: 38px; min-height: var(--tap); font-weight: 800; font-size: 14px; list-style: none; position: relative; }
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::after { content: "+"; position: absolute; inset-inline-end: 8px; top: 9px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--red); color: var(--red);
                         font-family: var(--font-display); font-size: 18px; line-height: 26px; text-align: center; }
.reveal details[open] summary::after { content: "\2212"; }
.reveal summary > span[class^="mark-"] { display: inline-grid; place-items: center; width: 19px; height: 19px; vertical-align: -4px; margin-inline-end: 6px; font-size: 11px; border: 2px solid currentColor; }
.reveal summary > span[class^="mark-"] svg { stroke-width: 4; }
.reveal .mark-ok { color: var(--blue); } .reveal .mark-bad { color: var(--red); } .reveal .mark-none { color: var(--ink-soft); }
.reveal .meta { color: var(--ink-soft); font-weight: 700; font-size: 12px; }
.reveal ol { margin: 0; padding: 0 12px 10px; padding-inline-start: 30px; }
.reveal li { padding: 7px 2px; border-top: 1px solid var(--ink); font-size: 14px; }
.reveal li.mine { background: rgba(244,210,31,.45); }
.reveal li .career { color: var(--ink-soft); font-size: 12px; font-weight: 600; }

/* =====================================================================================================
   sheets: paper with a torn top edge
   ===================================================================================================== */
.sheet { position: fixed; inset: 0; background: rgba(13, 18, 56, .62); display: flex; align-items: flex-end; justify-content: center; z-index: 30; animation: fade .18s ease-out; }
.sheet-box { position: relative; background: var(--paper); color: var(--ink); width: min(var(--maxw), 100%); max-height: 90%; display: flex; flex-direction: column; overflow: hidden; outline: none;
             padding: 22px max(16px, var(--ir)) calc(16px + var(--ib)) max(16px, var(--il)); animation: sheet-in .26s cubic-bezier(.2,.8,.2,1);
             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%); }
.sheet-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .2; background: var(--tex-grain); background-size: 220px; }
@keyframes sheet-in { from { transform: translateY(40px); } to { transform: none; } }
.sheet-kicker { font-size: 12px; font-weight: 800; color: var(--red); flex: 0 0 auto; }
.sheet-title { font-weight: 800; margin: 0 0 10px; font-size: 16px; line-height: 1.35; flex: 0 0 auto; }
.sheet-title.big { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.15; }
.sheet-box > .btn-print { flex: 0 0 auto; width: 100%; margin-top: 12px; position: relative; z-index: 1; }
.sheet-scroll { position: relative; z-index: 1; overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; padding: 4px 4px 6px; margin: -4px -4px 0; }
#helpTitle { text-align: center; font-size: 40px; margin-top: 4px; }
.archive-list { position: relative; z-index: 1; list-style: none; padding: 0; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
html.kb-open .sheet-box { max-height: 100%; animation: none; }
html.kb-open .sheet-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kb-open .archive-list { max-height: none; }
.archive-list { margin: 0; max-height: 60vh; max-height: 60dvh; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; padding: 4px; }
.archive-list li { height: 64px; background: var(--paper-clip); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.archive-list li .num { font-family: var(--font-display); font-size: 22px; line-height: 1.1; padding-top: 3px; }
.archive-list li .res { font-size: 11px; font-weight: 800; color: var(--red); direction: ltr; }
.archive-list li.done { background: var(--paper-2); }
.archive-list li.perfect { background: var(--yellow); }
.archive-list li.current { outline: 3px solid var(--cyan); outline-offset: 2px; }
.tagline { margin: 4px 0 14px; color: var(--ink-meta); font-size: 14px; font-weight: 700; text-align: center; }
.howto { list-style: none; counter-reset: s; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.howto li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; font-size: 15px; font-weight: 700; }
.howto li::before { content: counter(s, arabic-indic); width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
                    display: grid; place-items: center; font-family: var(--font-display); font-size: 20px; padding-top: 4px; transform: rotate(-6deg); }
html[lang="en"] .howto li::before { content: counter(s); }
.hint { display: none; }
.settings { border: 2px solid var(--ink); margin: 16px 0 18px; background: var(--paper-clip); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 12px; width: 100%; background: transparent; border: 0; font-weight: 800; font-size: 15px; text-align: start; cursor: pointer; }
.setting + .setting { border-top: 1px solid var(--ink); }
.mode-setting { cursor: default; }
.setting-btn { color: var(--red); }
.setting-btn:disabled { color: var(--ink-soft); opacity: .6; cursor: default; }
.seg { display: inline-flex; border: 2px solid var(--ink); padding: 2px; gap: 2px; flex: 0 0 auto; background: var(--paper); }
.seg-btn { min-width: 64px; min-height: var(--tap); padding: 0 12px; border: 0; background: transparent; color: var(--ink); font-weight: 800; font-size: 14px; }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper-clip); }
.toggle { -webkit-appearance: none; appearance: none; width: 52px; height: 28px; border: 2px solid var(--ink); background: var(--paper-2); position: relative; flex: 0 0 auto; margin: 0; cursor: pointer; }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; background: var(--ink); transition: translate .15s; }
.toggle:checked { background: var(--lime); }
.toggle:checked::after { translate: 24px 0; }
html[dir="rtl"] .toggle:checked::after { translate: -24px 0; }
.about h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.about-body { color: var(--ink-meta); font-size: 13.5px; font-weight: 600; }
.about-body .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.about-body .kpi { text-align: center; min-width: 0; border: 2px solid var(--ink); background: var(--paper-clip); padding: 6px 2px; }
.about-body .kpi b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--red); padding-top: 2px; }
.about-body .kpi span { font-size: 11px; font-weight: 800; }
.about-body p { margin: 6px 0; }
.fineprint { color: var(--ink-soft); font-size: 11px; font-weight: 700; margin: 14px 0 4px; }
footer { max-width: var(--maxw); margin: 0 auto; padding: 0 12px calc(16px + var(--ib)); }
footer:empty { display: none; }
footer .pwa-footer a { border-radius: 0; border-width: 2px; box-shadow: var(--shadow-hard-navy); font-weight: 800; }

/* =====================================================================================================
   Welcome screen: the front door. Two poster panels, full height, side by side on wide screens, stacked on phones.
   Each panel is one <button>: masthead title on the paper, the art, one short line, a print-button cue.
   ===================================================================================================== */
.chooser { display: none; }
html.choosing .chooser { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--navy) url("assets/retro/backdrop-tall.webp") center top / min(100%, 1080px) auto repeat;   /* a 43 KB tile, not a 213 KB poster */
  padding: var(--it) max(14px, var(--ir)) calc(14px + var(--ib)) max(14px, var(--il)); }
html.choosing .poster, html.choosing footer { visibility: hidden; }
html.choosing, html.choosing body { overflow: hidden; }
.chooser-top { width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(var(--tap), 1fr) auto minmax(var(--tap), 1fr); align-items: center; height: 72px; flex: 0 0 auto; }
.chooser-wm { grid-column: 2; justify-self: center; }
.chooser-top .pill { grid-column: 3; justify-self: end; }
.chooser-head { text-align: center; flex: 0 0 auto; padding: 2px 0 10px; }
.chooser-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 7.4vw, 46px); line-height: 1.15; padding-top: .12em;
                 color: var(--yellow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--navy-deep); }
.chooser-sub { margin: 2px 0 0; color: var(--paper); font-size: 13px; font-weight: 700; opacity: .9; }
.chooser-choices { flex: 1 1 auto; width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-rows: repeat(2, minmax(250px, 1fr)); gap: 16px; padding: 6px 4px 8px; min-height: 0; }
.choice { --hue: var(--red); position: relative; display: flex; min-width: 0; min-height: 0; padding: 7px; border: 0; border-radius: 4px; background: var(--paper); color: var(--ink); text-align: center;
          box-shadow: 0 6px 0 var(--navy-deep); transition: transform 90ms; }
.choice--eu { --hue: var(--blue); }
.choice::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply; opacity: .2; background: var(--tex-grain); background-size: 220px; }
.choice:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--navy-deep); }
.choice:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.choice-rule { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border: 2px solid var(--cyan); overflow: hidden; }
.choice-art { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--hue); }
.choice-svg, .choice-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.choice-photo { object-fit: cover; opacity: 0; transition: opacity .3s; }
.choice.has-photo .choice-photo { opacity: 1; }
.choice-text { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 4px; }
/* title: masthead lettering on paper (red Egyptian, blue European), ink outline + hard shadow */
.choice-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 9vw, 64px); line-height: 1.05; padding-top: .1em; color: var(--hue); white-space: nowrap;
                -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); }
html[lang="en"] .choice-title { font-size: clamp(26px, 7.6vw, 54px); }
.choice-sub { font-size: clamp(12px, 3.4vw, 16px); font-weight: 800; color: var(--ink-meta); line-height: 1.35; }
.choice-go { align-self: center; margin: 4px 0 10px; min-height: 40px; display: inline-flex; align-items: center; padding: 3px 18px 0; background: var(--hue); color: #fff;
             border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--font-display); font-size: 19px; line-height: 1; }
.choice-go::before { content: "\064A\0644\0627\0020\0646\0644\0639\0628"; }   /* يلا نلعب */
html[lang="en"] .choice-go { font-family: var(--font-ui); font-weight: 800; font-size: 15px; padding-top: 0; }
html[lang="en"] .choice-go::before { content: "Let's play"; }
@media (hover: hover) and (pointer: fine) {
  .choice:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--navy-deep); }
  .choice:hover .choice-go { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
}
/* short phones: the line and the cue go, the panels keep their size */
@media (max-height: 700px) and (max-width: 759px) {
  .chooser-top { height: 62px; }
  .chooser-sub { display: none; }
  .choice-go { display: none; }
  .choice-text { padding-bottom: 8px; }
}
/* wide: the two posters side by side, full height */
@media (min-width: 760px) {
  .chooser-choices { grid-template-rows: minmax(420px, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); padding: 10px 8px 18px; }
  .choice { padding: 10px; box-shadow: 0 8px 0 var(--navy-deep); }
  .choice-text { padding: 14px 16px 6px; gap: 6px; }
  .choice-title { font-size: clamp(40px, 4.6vw, 76px); }
  html[lang="en"] .choice-title { font-size: clamp(34px, 4vw, 64px); }
  .choice-go { margin-bottom: 16px; min-height: 48px; font-size: 22px; padding-inline: 26px; }
  .chooser-head { padding-bottom: 14px; }
  .chooser-top { height: 84px; }
  .chooser-wm { font-size: 60px; }
  .chooser-sub { font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .chooser-choices { grid-template-rows: minmax(230px, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chooser-head { padding-bottom: 4px; }
  .chooser-sub, .choice-go { display: none; }
  .choice-title { font-size: 30px; }
}

/* =====================================================================================================
   responsive
   ===================================================================================================== */
@media (hover: hover) and (pointer: fine) {
  .grid td:not(.ok):not(.bad):not(.revealed):hover .plus { background: rgba(215,38,46,.1); transform: rotate(-8deg); }
  .setting:hover { background: rgba(244,210,31,.4); }
  .btn-round:hover { background: rgba(239,230,210,.12); }
  .btn-print:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--navy-deep); }
  .more-card:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--navy-deep); }
}
@media (max-width: 345px) {
  .topbar { padding-inline: 8px; }
  .topbar-side { gap: 4px; }
  .masthead { font-size: 38px; -webkit-text-stroke-width: 6px; }
  main { padding-inline: 6px; }
  .cover { padding: 5px; }
  .cover__rule { padding: 8px 5px 10px; }
  .grid { gap: 4px; }
  .grid th.long { font-size: 9.5px; } .grid th.xlong { font-size: 9px; }
  .sash { padding: 6px 34px; }
  .sash__title { font-size: 18px; }
  .result-score { font-size: 64px; }
  .result-actions { grid-template-columns: 1fr; }
  .archive-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .more-list { gap: 12px 8px; }
  .more-name { font-size: 21px; }
}
/* landscape phones: shorter cells so the board fits */
@media (orientation: landscape) and (max-height: 520px) {
  .topbar-inner { height: 58px; }
  .masthead { font-size: 36px; }
  main { max-width: 460px; margin: 0 auto; }
  .grid td { aspect-ratio: 4 / 3; }
  .sheet { align-items: center; }
  .sheet-box { max-height: 96%; padding-top: 14px; }
}
@media (min-width: 600px) {
  .sheet { align-items: center; }
  .sheet-box { max-height: 86%; padding-bottom: 18px; }
}
/* tablets: a wider single column */
@media (min-width: 600px) and (max-width: 1023px) {
  :root { --maxw: 600px; }
}

/* Desktop: the page becomes a magazine spread. The cover (this round) is the big page; the inside page beside it
   carries the back page (result) when the round is over, and the newsstand. The reveal runs under the cover. */
@media (min-width: 1024px) {
  :root { --cw: min(calc(100vw - 500px), max(520px, calc((100vh - 345px) * .98)), 760px); }
  .poster { max-width: none; background: transparent; overflow: visible; }
  .topbar { padding-top: calc(10px + var(--it)); }
  .topbar-inner { max-width: calc(var(--cw) + 460px); margin: 0 auto; height: 84px; }
  .topbar .masthead { font-size: 62px; }
  main.spread { display: grid; grid-template-columns: var(--cw) minmax(340px, 400px); grid-template-rows: auto auto 1fr; column-gap: clamp(36px, 4vw, 60px);
                justify-content: center; align-items: start; padding: 6px 32px 56px; }
  .cover--issue { grid-column: 1; grid-row: 1; padding: 10px; box-shadow: 0 8px 0 var(--navy-deep); }
  .cover--issue > .cover__rule { padding: 14px 14px 16px; }
  .under-board { grid-column: 1; grid-row: 2; margin-top: 22px; }
  .under-board .btn-print { min-height: 54px; font-size: 22px; }
  .side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 16px; }
  .reveal { grid-column: 1; grid-row: 3; }
  .grid { gap: 10px; }
  .sash { margin-bottom: 16px; min-height: 56px; }
  .sash__title { font-size: 26px; }
  .promo-text small { font-size: 14px; }
  .issue-title { font-size: 32px; }
  .round-meta { font-size: 14px; }
  .issue-strip { margin-bottom: 14px; }
  .result { margin: 0 0 26px; }
  .result-score { font-size: 84px; }
  /* the inside page: paper, ink rules, the newsstand as a contents page */
  .more { margin: 0; background: var(--paper-2); padding: 18px 18px 20px; box-shadow: 0 8px 0 var(--navy-deep); transform: rotate(.6deg); position: relative; }
  html[dir="ltr"] .more { transform: rotate(-.6deg); }
  .more::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .2; background: var(--tex-grain); background-size: 220px; }
  .more-head { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 4px 0; margin-bottom: 6px; }
  .more-head h2 { color: var(--ink); font-size: 30px; }
  .more-all { color: var(--ink); }
  .more-sub { color: var(--ink-meta); opacity: 1; }
  .more-list { gap: 14px 12px; }
  .more-card { box-shadow: 3px 3px 0 var(--ink); border: 2px solid var(--ink); background: var(--paper-clip); }
  .more-card::before { aspect-ratio: 2 / 1; }
  .more-name { font-size: 21px; }
  .more-desc { font-size: 11.5px; }
  .more-card:active { box-shadow: 1px 1px 0 var(--ink); }
  .sheet-box { --maxw: 520px; }
  footer { max-width: calc(var(--cw) + 460px); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .more-card:hover { box-shadow: 4px 5px 0 var(--ink); }
}

/* =====================================================================================================
   preferences
   ===================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --ink-soft: #3e3424; --ink-meta: #2a2318; }
  .grid td { border-style: solid; border-color: var(--ink); }
}
@media (forced-colors: active) {
  .grid td, .grid th, .btn-print, .btn-round, .roundnav, .sheet-box, .stat, .archive-list li, .choice { border: 1px solid CanvasText; }
  .grid td.ok, .btn-print { forced-color-adjust: none; }
  .grid td.ok { background: Highlight; color: HighlightText; }
}


/* =====================================================================================================
   How to play: a magazine guide page (owner: the old sheet was "ugly"). Phone: one clean column. Desktop: a
   two-page spread, the guide on one page, settings + the data fact box on the other. Each step shows a small
   picture of what the player will actually see (empty cell, clipping with tick, the guesses sticker).
   ===================================================================================================== */
#help .sheet-box { --maxw: 560px; }
.help-kicker { margin: 0; text-align: center; font: 800 12px/1.4 var(--font-ui); color: var(--red); }
#helpTitle.help-title { color: var(--red); -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--ink); font-size: 44px; margin: 2px 0 2px; }
#help .tagline { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); }
.howto { gap: 10px; }
.howto li { grid-template-columns: 40px 1fr 64px; background: var(--paper-clip); border: 2px solid var(--ink); box-shadow: var(--shadow-hard); padding: 10px 10px; min-height: 84px; line-height: 1.45; }
.howto li::before { background: var(--yellow); color: var(--ink); }
.howto li::after { content: ""; width: 56px; height: 56px; justify-self: end; }
/* 1: an empty cell with the red ring "+" */
.howto li:nth-child(1)::after { border: 2px dashed var(--ink-soft); background: radial-gradient(circle, transparent 13px, var(--red) 13.5px 16px, transparent 16.5px),
  linear-gradient(var(--red), var(--red)) center / 12px 3px no-repeat, linear-gradient(var(--red), var(--red)) center / 3px 12px no-repeat, var(--paper-2); }
/* 2: a taped clipping with the lime tick seal */
.howto li:nth-child(2)::after { outline: 3px solid var(--lime); outline-offset: -6px; transform: rotate(3deg); box-shadow: 2px 2px 0 rgba(26,26,26,.5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%237BC43A' stroke='%23141821' stroke-width='1.6'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23141821' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 30px no-repeat, var(--paper); }
/* 3: the yellow guesses sticker */
.howto li:nth-child(3)::after { content: "\0669"; width: 50px; height: 50px; border-radius: 50%; background: var(--yellow); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-8deg);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 30px; padding-top: 5px; }
html[lang="en"] .howto li:nth-child(3)::after { content: "9"; }
.help-h { margin: 18px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.help-h::after { content: ""; flex: 1 1 auto; border-top: 3px solid var(--ink); margin-top: -4px; }
#help .settings { margin: 0 0 4px; box-shadow: var(--shadow-hard); }
#help .about { margin-top: 6px; }
#help .about-body .kpis { gap: 0; border: 2px solid var(--ink); background: var(--ink); box-shadow: var(--shadow-hard); margin: 0 0 12px; }
#help .about-body .kpi { border: 0; background: var(--yellow); }
#help .about-body .kpi + .kpi { border-inline-start: 2px solid var(--ink); }
#help .about-body .kpi b { color: var(--ink); font-size: 26px; }
#help .about-body p { line-height: 1.6; }
#help .fineprint { border-top: 1px solid var(--ink-soft); padding-top: 8px; }
@media (min-width: 900px) {
  #help .sheet-box { --maxw: 980px; padding: 30px 30px 22px; }
  .help-spread { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; }
  .help-main { padding-inline-end: 26px; }
  .help-side { padding-inline-start: 26px; border-inline-start: 3px double var(--ink); }
  .help-side > .help-h:first-child { margin-top: 0; }
  #helpTitle.help-title { font-size: 56px; }
  #help .sheet-box > .btn-print { width: auto; min-width: 280px; align-self: center; }
}

/* welcome screen: the big language switch (Arabic first; owner rule). Each label is in its own language. */
.lang-switch { display: inline-flex; margin: 14px auto 4px; border: 3px solid var(--ink); background: var(--paper-clip); box-shadow: 4px 4px 0 var(--navy-deep); padding: 4px; gap: 4px; }
.lang-opt { min-width: 128px; min-height: 52px; padding: 0 18px; border: 0; background: transparent; color: var(--ink); font: 800 20px/1 var(--font-ui); cursor: pointer; }
.lang-opt[lang="ar"] { font-family: var(--font-display); font-weight: 400; font-size: 24px; padding-top: 4px; }
.lang-opt[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.lang-opt:active { transform: translate(1px, 1px); }
.chooser-head { text-align: center; }
@media (max-width: 380px) { .lang-opt { min-width: 104px; } }
#chooserLang[hidden] { display: none !important; }

/* list separator: a middle dot next to Eastern Arabic digits reads as a zero, so Arabic uses a bar (app.js SEP()) */
.r-sep::before { content: "\00a0\00B7\00a0"; }
html[lang="ar"] .r-sep::before { content: "\00a0|\00a0"; }
.r-sep:has(+ :empty) { display: none; }

/* ---- 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; }

/* newsstand covers carry the game poster (above) instead of a plain colour block; names in ink (lime / cyan are feedback
   and family colours, not type colours) */
.more-card::before { content: none; display: none; }
.more-card .g-poster { margin-bottom: 4px; }
.more-list li .more-card .more-name { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }

/* =====================================================================================================================
   FEEL (Foundation B; games/retro/feel.js, the same tokens as games/retro/kit.css): pressed state within 100 ms, the marks
   in 400 ms (clipping 250 ms scale 1.08 -> 1, tape 150 ms, tick seal at 300 ms; stamp 200 ms + a 3 px two-cycle shake of
   THAT cell), only transform / opacity, reduced motion = opacity <= 150 ms. High contrast via html[data-contrast="high"].
   ===================================================================================================================== */
:root { --t-press: 60ms; --t-clip: 250ms; --t-tape-at: 100ms; --t-tape: 150ms; --t-seal-at: 300ms; --t-seal: 100ms; --t-stamp: 200ms; --t-shake: 100ms;
        --t-reduced: 150ms; --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; } }
.grid td.ok.fx-ok, .grid td.ok.fresh { animation: fx-clip var(--t-clip) var(--ease-pop) both; }
.grid td.ok.fx-ok::before, .grid td.ok.fresh::before { animation: fx-tape var(--t-tape) var(--t-tape-at) ease-out both; }
.grid td.ok.fx-ok::after, .grid td.ok.fresh::after { animation: fx-seal var(--t-seal) var(--t-seal-at) var(--ease-pop) both; }
.grid td.bad.fx-bad, .grid td.bad.fresh { animation: fx-shake var(--t-shake) var(--t-stamp) 2; }
.grid td.bad.fx-bad .mark, .grid td.bad.fresh .mark { animation: fx-stamp var(--t-stamp) ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .grid td.fx-ok, .grid td.fx-bad, .grid td.fresh { animation: fx-fade var(--t-reduced) ease-out both !important; }
}

/* pressed: feel.js sets .is-pressed on pointerdown; 2 px into the hard shadow (translate composes with rotate / scale) */
.btn-print.is-pressed { translate: 2px 2px; box-shadow: 1px 1px 0 var(--navy-deep); }
.btn-print:active { transform: none; translate: 2px 2px; }
.btn-round.is-pressed { scale: .94; background: rgba(239,230,210,.12); }
.roundnav.is-pressed:not(:disabled) { scale: .9; }
.grid td.is-pressed:not(.ok):not(.bad):not(.revealed) .plus { transform: scale(.88) rotate(-10deg); background: rgba(215,38,46,.1); }
.grid td.revealed.is-pressed, .grid td.ok.is-pressed, .grid td.bad.is-pressed { translate: 1px 1px; }
.more-card.is-pressed { translate: 1px 2px; box-shadow: 0 2px 0 var(--navy-deep); }
.sash.is-pressed, .tryother.is-pressed, .choice.is-pressed { translate: 0 2px; }
.more-all.is-pressed, .reveal summary.is-pressed, .archive-list li.is-pressed, .setting.is-pressed, .seg-btn.is-pressed, .lang-opt.is-pressed { translate: 1px 1px; }
.btn-print, .btn-round, .roundnav, .more-card, .sash, .tryother, .seg-btn, .lang-opt, .setting { transition-property: translate, scale, transform; transition-duration: var(--t-press); }
a[href], summary, .archive-list li, .grid td[role="button"], .toggle { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  .is-pressed { translate: none !important; scale: none !important; opacity: .8; }
}

/* high contrast ("ألوان واضحة", mode.js): Okabe-Ito blue for correct, orange for highlights, red stays. The states keep
   their words and icons (tick seal, "غلط" stamp, hatch), so colour is never the only signal (rule 10). */
html[data-contrast="high"] { --lime: #0072B2; --yellow: #E69F00; }
html[data-contrast="high"] .grid td.ok::after { box-shadow: 2px 2px 0 var(--ink), 0 0 0 2px var(--paper-clip); }
html[data-contrast="high"] .grid td.ok .sub { background: var(--yellow); }

/* help: the worked example (one cell solved) */
.help-example { margin: 4px 0 10px; padding: 10px 10px 12px; border: 2px dashed var(--ink); background: var(--paper-2); }
.hx-k { margin: 0 0 6px; font: 800 13px/1.4 var(--font-ui); color: #AE1C23; }
.hx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hx-panel { display: inline-block; padding: 4px 8px; background: var(--ink); color: var(--paper-clip); font: 800 14px/1.4 var(--font-ui); border: 2px solid var(--ink); }
.hx-panel.hx-honours { background: #BF1E26; border-color: var(--ink); color: #fff; }
.hx-op { font: 900 18px/1 var(--font-ui); color: var(--ink); }
.hx-clip { position: relative; padding: 4px 12px; background: var(--paper-clip); outline: 2px solid var(--lime); outline-offset: -5px; box-shadow: 2px 2px 0 rgba(26,26,26,.55);
           font: 800 16px/1.5 var(--font-ui); color: var(--ink); }

/* =====================================================================================================================
   FOUNDATION A (games/retro/end.js + end.css): the back page and the full reveal on the board.
   A missed cell shows its best-known answer, greyed, and "N لاعب ينفع" as a yellow tag (rule C9: fair loss endings).
   ===================================================================================================================== */
.grid td.revealed { padding: 6px 4px; gap: 4px; }
.grid td.revealed .sub { position: static; direction: inherit; unicode-bidi: normal; background: var(--yellow); color: var(--ink); padding: 0 4px;
                         font-size: clamp(9px, 10.5cqi, 12px); font-weight: 800; line-height: 1.45; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .cover--back > .cover__rule { padding: 12px 12px 16px; }
@media (min-width: 1024px) { .result .cover--back > .cover__rule { padding: 16px 16px 18px; } }

/* =====================================================================================================================
   RULES (Foundation B, tests/rules/audit.py): rule 1 (8 px between adjacent targets), rule 12 (Lalezar only at 24 px or
   more; Arabic body text 16 px / 1.6). Display type that has to stay smaller is set in Cairo 800 instead of Lalezar.
   ===================================================================================================================== */
.grid { gap: 8px; }
@media (max-width: 345px) { .grid { gap: 8px; } }
/* Lalezar >= 24 px */
.sash__title, html[lang="en"] .sash__title { font-size: 24px; }
@media (max-width: 345px) { .sash__title { font-size: 24px; } }
.btn-print { font-size: 24px; }
html[lang="en"] .btn-print { font-size: 17px; }
.btn-print svg { font-size: 20px; }
.tryother b { font-size: 24px; }
.more-name { font-size: 24px; }
@media (max-width: 345px) { .more-name { font-size: 24px; } }
@media (min-width: 1024px) { .more-name { font-size: 24px; } .under-board .btn-print { font-size: 24px; } html[lang="en"] .under-board .btn-print { font-size: 18px; } }
.more-go { font-family: var(--font-ui); font-weight: 800; font-size: 14px; padding-top: 1px; }
.archive-list li .num { font-size: 24px; }
.about h2 { font-size: 24px; }
.about-body .kpi b { font-size: 24px; }
.howto li::before { font-size: 24px; }
.reveal summary::after { font-family: var(--font-ui); font-weight: 900; line-height: 22px; }
.choice-go { font-size: 24px; }
@media (min-width: 760px) { .choice-go { font-size: 24px; } }
/* the board: panel labels and clipping names are too small for Lalezar, so they are Cairo 800 */
.grid th:not(.corner) { font-family: var(--font-ui); font-weight: 800; line-height: 1.15; }
.grid td.ok .name { font-family: var(--font-ui); font-weight: 800; font-size: clamp(12px, 15cqi, 18px); line-height: 1.25; }
.grid td .plus { font-size: clamp(24px, 32cqi, 40px); }
.grid td.bad .mark { font-size: clamp(24px, 25cqi, 34px); padding: 1px 6px 0; }
/* Arabic body text: 16 px / 1.6 */
.more-sub, .tagline, .about-body, .about-body p, .fineprint, .howto li, .reveal li, .reveal li .career { font-size: 16px; line-height: 1.6; }
.reveal li .career { font-weight: 600; }
html[lang="en"] .fineprint, html[lang="en"] .more-sub { font-size: 14px; line-height: 1.5; }
.fineprint small { font-size: inherit; }
.help-kicker { color: #AE1C23; }   /* red type on paper: AA */
.seg { gap: 8px; }
@media (max-width: 1023px) { .grid { gap: 10px; } }
/* the newsstand numbers follow the issue page numbers (main grid = page 1, so Mashwar is page 2 ... Ashra Ala Ashra 11) */
.more { counter-reset: game 1; }
/* crest library (assets/clubs-icons.js): a pair of clubs shows both crests side by side */
.pa.two .pa-pic { max-height: 50cqi; max-width: 46%; }
/* the worked example: both panels on the first line, "<- like Zidane" under them */
.hx-row { display: grid; grid-template-columns: max-content max-content max-content; justify-content: start; align-items: center; gap: 8px 6px; }
.hx-arrow { justify-self: end; }
.hx-clip { grid-column: 2 / span 2; justify-self: start; }
@media (max-width: 359px) { .hx-panel { font-size: 13px; padding: 3px 6px; } }
/* English "WRONG" stamp: the word is set small to fit the cell, so it is Cairo 900 (Lalezar only at 24 px or more) */
html[lang="en"] .grid td.bad .mark { font-family: var(--font-ui); font-weight: 900; }

/* the search sheet's title on the main grid: "row × column" in short form, each with its category panel art on the
   panel's own kit colour (app.js sheetTitleHtml copies the header's .pa), wraps instead of cutting (owner 2026-11-11) */
#modalTitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.3; }
.ss-cat { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ss-cat b { font: 800 16px/1.3 var(--font-ui); }
.ss-cat__ico { position: relative; flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--ink);
               background: var(--kit, var(--paper-2)); container-type: inline-size; }
.ss-cat__ico::before { content: ""; position: absolute; inset: 0; background-image: var(--tex-halftone); background-size: 5px 5px; pointer-events: none; }
.ss-cat__ico .pa { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 3px; font-style: normal; }
.ss-cat__ico .pa-ico { max-height: 80cqi; }
.ss-cat__ico .pa.two .pa-ico, .ss-cat__ico .pa.two .pa-pic, .ss-cat__ico .pa.two .pa-roundel { max-height: 50cqi; }
.ss-cat__ico .pa-pic { max-height: 86cqi; filter: drop-shadow(1.5px 1.5px 0 var(--ink)); }
.ss-cat__ico .pa-roundel { max-height: 80cqi; padding: 8%; border-width: 1.5px; box-shadow: none; }
.ss-cat__ico[data-rim="paper"] .pa-ico { --rim: var(--paper-clip); }
.ss-x { font: 800 18px/1 var(--font-ui); color: var(--red); }

/* =====================================================================================================================
   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"). Same look, less air: top bar, masthead, the sash, the issue strip, the board gaps and
   the buttons under it, so the whole board + "how to play / give up" sit on one screen. Minimums kept: 44 px targets 8 px
   apart, Lalezar 24 px or more. Desktop (the spread) is unchanged.
   ===================================================================================================================== */
@media (max-width: 1023px) {
  .topbar-inner { height: 60px; }
  .masthead { font-size: clamp(34px, 10.4vw, 42px); -webkit-text-stroke-width: 6px; text-shadow: 3px 3px 0 var(--navy-deep); padding-top: 4px; }
  .cover { padding: 6px; box-shadow: 0 4px 0 var(--navy-deep); }
  .cover__rule { padding: 6px 6px 8px; }
  .sash { margin-bottom: 8px; padding-block: 5px; }
  .issue-strip { padding: 3px 0; margin-bottom: 8px; }
  .under-board { margin-top: 12px; }
  .under-board .btn-print { min-height: 46px; }
  .poster { padding-bottom: calc(18px + var(--ib)); }
}

/* Versus entry on the home page (owner 2026-11-11: Versus is part of the game) */
.more-versus { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 10px 14px; min-height: 44px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--shadow-hard); text-decoration: none; }
.more-versus b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.3; }
.more-versus small { font-weight: 700; font-size: 14px; }