/* =====================================================================================================================
   جَلسة — the shell and its shared pieces (v5.17 design system). Loaded right after app.css, before legacy.css
   (tools/legacy-css.mjs reads this file too, so color-mix() here gets its plain fallback for old TVs).

   One idea per surface: the night majlis — deep ink, saffron lamp-light, the sadu weave — and every game a lit window
   into its own world (the tiles, public/js/tileart.js). The shell keeps to ink + saffron; colour comes from the games.

   Scope: the shared components below sit under `:where(body:not([data-game|='baloot']))` — zero specificity, so every
   game's own rules still win, and the frozen Baloot score tracker (body[data-game="baloot"]) keeps its look untouched.
   ===================================================================================================================== */

/* ---------- 1. tokens ------------------------------------------------------------------------------------------------ */
:root {
  /* type — display: Alexandria, text: IBM Plex Sans Arabic */
  --fs-brand: 44px; --fs-h1: 23px; --fs-h2: 20px; --fs-h3: 17px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12.5px;
  /* space — a 4px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  /* radii — chips and pills are round; buttons and fields 16; cards and tiles 22; sheets 28 */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
  /* motion — press, state, enter, sheet; a spring for things that arrive, a quick ease-in for things that leave */
  --t-1: 120ms; --t-2: 180ms; --t-3: 240ms; --t-4: 360ms;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.55, 0, .8, .25); --spring: cubic-bezier(.3, 1.35, .5, 1);
  /* elevation — a lit top edge, then a soft drop */
  --hair: rgba(255, 255, 255, .06);
  --e-1: inset 0 1px 0 var(--hair), 0 1px 2px rgba(0, 0, 0, .25);
  --e-2: inset 0 1px 0 var(--hair), 0 12px 28px -14px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .2);
  --e-3: 0 30px 70px -24px rgba(0, 0, 0, .8), 0 8px 20px rgba(0, 0, 0, .3);
  --scrim: rgba(6, 4, 14, .66);
  --tile-sh: 0 14px 30px -16px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .18); --tile-sh-hi: 0 26px 44px -18px rgba(0, 0, 0, .85), 0 4px 10px rgba(0, 0, 0, .22);
  --ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A69DBF' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5'/%3E%3C/svg%3E");
}
:root[data-theme="light"] {
  --hair: rgba(255, 255, 255, .9);
  --e-1: inset 0 1px 0 var(--hair), 0 1px 2px rgba(40, 30, 60, .08);
  --e-2: inset 0 1px 0 var(--hair), 0 14px 30px -16px rgba(40, 30, 60, .35), 0 2px 6px rgba(40, 30, 60, .06);
  --e-3: 0 30px 70px -24px rgba(40, 30, 60, .45), 0 8px 20px rgba(40, 30, 60, .1);
  --scrim: rgba(28, 22, 51, .42);
  --tile-sh: 0 14px 28px -16px rgba(40, 30, 60, .55), 0 2px 6px rgba(40, 30, 60, .12); --tile-sh-hi: 0 26px 44px -18px rgba(40, 30, 60, .6), 0 4px 10px rgba(40, 30, 60, .14);
  --ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625B78' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --hair: rgba(255, 255, 255, .9);
    --e-1: inset 0 1px 0 var(--hair), 0 1px 2px rgba(40, 30, 60, .08);
    --e-2: inset 0 1px 0 var(--hair), 0 14px 30px -16px rgba(40, 30, 60, .35), 0 2px 6px rgba(40, 30, 60, .06);
    --e-3: 0 30px 70px -24px rgba(40, 30, 60, .45), 0 8px 20px rgba(40, 30, 60, .1);
    --scrim: rgba(28, 22, 51, .42);
    --tile-sh: 0 14px 28px -16px rgba(40, 30, 60, .55), 0 2px 6px rgba(40, 30, 60, .12); --tile-sh-hi: 0 26px 44px -18px rgba(40, 30, 60, .6), 0 4px 10px rgba(40, 30, 60, .14);
    --ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625B78' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5'/%3E%3C/svg%3E");
  }
}
/* tokens that follow a game world's colours are worked out on body, where the worlds set theirs */
body {
  --surface-2: color-mix(in srgb, var(--surface) 55%, var(--raised));
  --ring: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--gold);
  --ok: var(--green-hi); --warn: var(--gold); --bad: var(--red); --info: var(--sky);
}
@media (min-width: 1200px) { :root { --fs-brand: 58px; --fs-h1: 28px; --fs-h2: 26px; --fs-h3: 21px; } }

/* ---------- 2. the page: ink, and the lamp's glow on a layer of its own (no fixed backgrounds, no blur — TVs) -------- */
body:not([data-game]), body[data-game=""] { background: var(--bg); background-attachment: scroll; }
body:not([data-game])::before, body[data-game=""]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 42% at 50% -6%, var(--glow), transparent 70%), var(--haze, none);
}
:root { --haze: radial-gradient(40% 30% at 92% 4%, rgba(255, 107, 87, .07), transparent 70%), radial-gradient(40% 30% at 6% 10%, rgba(63, 185, 139, .05), transparent 70%); }
:root[data-theme="light"] { --haze: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --haze: none; } }
:where(body:not([data-game|='baloot'])) :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@keyframes jsIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes jsFade { from { opacity: 0; } }
#app > .scr { animation: jsIn var(--t-3) var(--ease); }

/* ---------- 3. the shared components ------------------------------------------------------------------------------- */
/* top bar */
:where(body:not([data-game|='baloot'])) .top { min-height: 52px; gap: 12px; }
:where(body:not([data-game|='baloot'])) .top-t h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.005em; }
/* a title too long for one line wraps (a narrow phone, larger text, three buttons beside it) instead of «حروف ال…»;
   on the narrowest screens the bar's buttons give it a little more room */
:where(body:not([data-game|='baloot'])) .top-t h1 { white-space: normal; line-height: 1.2; }
@media (max-width: 340px) { :where(body:not([data-game|='baloot'])) .top { gap: 8px; } :where(body:not([data-game|='baloot'])) .top .icon-btn { width: 40px; height: 40px; } :where(body:not([data-game|='baloot'])) .top-a { gap: 4px; }
  :where(body:not([data-game|='baloot'])) .top-t h1 { font-size: 20px; } }
@media (max-width: 300px) { :where(body:not([data-game|='baloot'])) .top .icon-btn { width: 36px; height: 36px; border-radius: 12px; } }
:where(body:not([data-game|='baloot'])) .top-t p { font-size: 13px; margin-top: 1px; }
:where(body:not([data-game|='baloot'])) .icon-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--e-1); transition: transform var(--t-1) var(--ease), background-color var(--t-2), border-color var(--t-2); }
:where(body:not([data-game|='baloot'])) .icon-btn.sm { width: 36px; height: 36px; border-radius: 11px; }
:where(body:not([data-game|='baloot'])) .icon-btn:active { transform: scale(.92); }
@media (hover: hover) { :where(body:not([data-game|='baloot'])) .icon-btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--gold) 40%, var(--line-2)); } }
[dir="rtl"] .ic-chev, [dir="rtl"] .ic-skip { transform: scaleX(-1); }

/* buttons — one system; each game world dresses it through tokens, so the same box never recurs from game to game.
   ┌ THE TOKENS a world sets once, on body[data-game="<id>"] in its own g-<id>.css (or on any panel, for that panel only):
   │   action buttons (.btn and .btn.gold, any size):
   │     --btn-face    the fill: a colour or a gradient (felt, ivory, enamel, brass, a spectrum…)
   │     --btn-ink     the label; must read at 4.5:1 on the face
   │     --btn-rim     the 1px edge
   │     --btn-depth   the bottom edge the button stands on (a darker shade of the face; drawn inside the box, so no jump)
   │     --btn-glow    the light or shadow it throws on the table (a colour; transparent for none)
   │   quiet buttons (.btn.ghost — «رجوع»، «إلغاء»، the second choice):
   │     --btn-quiet-face · --btn-quiet-ink · --btn-quiet-rim · --btn-quiet-depth · --btn-quiet-glow
   │   shape, for all of them: --btn-radius · --btn-font
   └ Set face and ink together (and depth with them). Unset tokens fall back to the shell's own buttons:
       .btn.gold   the primary — saffron lamp-light, the one call a screen makes
       .btn        the secondary — majlis green, «ادخل»، «ابدأ»، «أضف»
       .btn.ghost  the quiet one — the surface with a rim
       .btn.danger stays red in every world; .btn.quiet is text on nothing
   e.g. body[data-game="domino"] { --btn-face: linear-gradient(#FBF6EA, #E9DDC2); --btn-ink: #1E1A14; --btn-rim: #A8946A;
                                   --btn-depth: #8C7650; --btn-glow: rgba(0, 0, 0, .45); }
   A game that draws its own buttons with its own class (wave's spectrum, kilma's card stock, tahadi's board, .bl-call) keeps
   them: these rules are :where()-scoped, so any game rule wins. Labels wrap between words, never inside one; in a .row a
   button never shrinks below its longest word and the row wraps instead of squeezing; an icon or a chip inside a button
   drops to its own line when the label needs the room. */
:root { --drop: rgba(0, 0, 0, .55); }
:root[data-theme="light"] { --drop: rgba(40, 30, 60, .28); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --drop: rgba(40, 30, 60, .28); } }
/* each kind resolves the world's tokens into its own (private) values … */
:where(body:not([data-game|='baloot'])) .btn {
  --_f: var(--btn-face, linear-gradient(180deg, #1C855D, #146747)); --_i: var(--btn-ink, #F2FFF8);
  --_r: var(--btn-rim, rgba(0, 0, 0, .24)); --_d: var(--btn-depth, rgba(0, 0, 0, .26)); --_g: var(--btn-glow, var(--drop));
  --_s: rgba(255, 255, 255, .2); --_l: 3px;
}
:where(body:not([data-game|='baloot'])) .btn.gold {
  --_f: var(--btn-face, linear-gradient(180deg, #FFD774 0%, #F5B941 55%, #E9A22E 100%)); --_i: var(--btn-ink, #2A1600);
  --_r: var(--btn-rim, rgba(122, 66, 0, .5)); --_d: var(--btn-depth, rgba(150, 78, 0, .42)); --_g: var(--btn-glow, rgba(244, 170, 50, .42));
  --_s: rgba(255, 251, 236, .75);
}
:where(body:not([data-game|='baloot'])) .btn.ghost {
  --_f: var(--btn-quiet-face, linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, var(--surface)), var(--surface)));
  --_i: var(--btn-quiet-ink, var(--text)); --_r: var(--btn-quiet-rim, var(--line-2));
  --_d: var(--btn-quiet-depth, color-mix(in srgb, var(--text) 9%, transparent)); --_g: var(--btn-quiet-glow, transparent); --_s: var(--hair);
}
:where(body:not([data-game|='baloot'])) .btn.danger {
  --_f: linear-gradient(180deg, #C84A37, #A93826); --_i: #FFF6F2; --_r: rgba(60, 0, 0, .35); --_d: rgba(70, 8, 0, .34); --_g: var(--drop); --_s: rgba(255, 255, 255, .18);
}
:where(body:not([data-game|='baloot'])) .btn.ghost.danger { --_f: transparent; --_i: var(--red); --_r: color-mix(in srgb, var(--red) 45%, transparent); --_d: transparent; --_g: transparent; --_s: transparent; }
:where(body:not([data-game|='baloot'])) .btn.sm { --_l: 2px; }
:where(body:not([data-game|='baloot'])) .btn.lg { --_l: 4px; }
/* … and one rule paints them all (the second selector lifts it over app.css's own .btn.gold/.ghost/.danger colours) */
:where(body:not([data-game|='baloot'])) .btn, :where(body:not([data-game|='baloot'])) :is(.btn.gold, .btn.ghost, .btn.danger) {
  background: var(--_f); color: var(--_i); border: 1px solid var(--_r);
  box-shadow: inset 0 1px 0 var(--_s), inset 0 calc(-1 * var(--_l)) 0 var(--_d), 0 9px 20px -11px var(--_g);
}
:where(body:not([data-game|='baloot'])) .btn {
  flex-wrap: wrap; align-content: center; column-gap: 9px; row-gap: 3px; min-width: 0; max-width: 100%; padding-block: 7px 10px;
  white-space: normal; text-align: center; line-height: 1.25; overflow-wrap: break-word; text-wrap: balance;
  border-radius: var(--btn-radius, var(--r-md)); font-family: var(--btn-font, var(--font-b));
  transition: transform var(--t-1) var(--ease), filter var(--t-2), box-shadow var(--t-1) var(--ease);
}
/* in a row, a button keeps at least its longest word (the row wraps instead); in a grid cell it takes the cell */
:where(body:not([data-game|='baloot'])) :where(.row) > .btn { min-width: auto; }
:where(body:not([data-game|='baloot'])) .btn.sm { border-radius: calc(var(--btn-radius, var(--r-md)) - 4px); padding-block: 5px 7px; }
:where(body:not([data-game|='baloot'])) .btn.lg { border-radius: calc(var(--btn-radius, var(--r-md)) + 2px); padding-block: 9px 13px; letter-spacing: -.005em; }
:where(body:not([data-game|='baloot'])) .btn.lg, :where(body:not([data-game|='baloot'])) .btn.gold { font-family: var(--btn-font, var(--font-d)); font-weight: 800; }
/* pressed: the face sinks onto its edge */
:where(body:not([data-game|='baloot'])) .btn:active { --_l: 1px; transform: translateY(2px); filter: brightness(1.04); }
@media (hover: hover) {
  :where(body:not([data-game|='baloot'])) .btn:hover { filter: brightness(1.07); }
  :where(body:not([data-game|='baloot'])) .btn.ghost:hover { --_r: color-mix(in srgb, var(--gold) 45%, var(--line-2)); filter: brightness(1.1); }
  :where(body:not([data-game|='baloot'])) .btn.quiet:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); filter: none; }
}
:where(body:not([data-game|='baloot'])) .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
:where(body:not([data-game|='baloot'])) .btn:disabled { --_g: transparent; filter: saturate(.5); }
:where(body:not([data-game|='baloot'])) .btn.quiet { background: transparent; color: var(--btn-quiet-ink, var(--gold-ink)); border-color: transparent; box-shadow: none; }
:where(body:not([data-game|='baloot'])) .btn .ic { width: 20px; height: 20px; flex: none; }
:where(body:not([data-game|='baloot'])) .btn.sm .ic { width: 17px; height: 17px; }
/* a chip or pill inside a button (a suit, a count) sits on the button's own ink, never over the label */
:where(body:not([data-game|='baloot'])) .btn :is(.pill, .chip) { min-height: 0; padding: 2px 9px; border: 0; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; box-shadow: none; font-size: .82em; }
/* rows of buttons, pills or chips wrap onto a second line instead of squeezing (a game's own nowrap still wins; a browser
   without :has() gets the same rows marked .rw by compat.js, app.css) */
:where(body:not([data-game|='baloot'])) :where(.row:has(> .btn ~ .btn, > .pill ~ .pill, > .chip ~ .chip)) { flex-wrap: wrap; }
:where(body:not([data-game|='baloot'])) .link-btn { border-radius: 10px; text-underline-offset: 4px; }
@media (hover: hover) { :where(body:not([data-game|='baloot'])) .link-btn:hover { text-decoration: underline; } }

/* chips and pills: the one you picked carries the gold ring, like every choice in Jalsah. Their words wrap between words
   when there's no room (a pill keeps its one line whenever it fits, as before, and only wraps when it's wider than its box) */
:where(body:not([data-game|='baloot'])) .chip { max-width: 100%; min-width: 0; padding-block: 5px; white-space: normal; text-align: center; line-height: 1.25; overflow-wrap: break-word; text-wrap: balance; box-shadow: var(--e-1); transition: background-color var(--t-2), border-color var(--t-2), color var(--t-2), transform var(--t-1) var(--ease); }
:where(body:not([data-game|='baloot'])) .chip.on { background: color-mix(in srgb, var(--cc, var(--gold)) 18%, var(--surface)); border-color: var(--cc, var(--gold)); box-shadow: inset 0 0 0 1px var(--cc, var(--gold)); }
@media (hover: hover) { :where(body:not([data-game|='baloot'])) .chip:not(.on):hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line-2)); } }
:where(body:not([data-game|='baloot'])) .chip .ic { width: 17px; height: 17px; flex: none; }
:where(body:not([data-game|='baloot'])) .pill { flex-shrink: 0; max-width: 100%; padding-block: 3px; white-space: normal; text-align: center; line-height: 1.3; overflow-wrap: break-word; text-wrap: balance; font-family: var(--font-d); font-weight: 800; letter-spacing: .01em; }

/* segmented control */
:where(body:not([data-game|='baloot'])) .seg { border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 45%, var(--surface)); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16); }
:where(body:not([data-game|='baloot'])) .seg-b { min-width: 0; padding-block: 6px; border-radius: 12px; white-space: normal; text-align: center; line-height: 1.25; overflow-wrap: break-word; text-wrap: balance; transition: background-color var(--t-2), color var(--t-2), box-shadow var(--t-2); }
:where(body:not([data-game|='baloot'])) .seg-b.on { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 12px -4px rgba(0, 0, 0, .35); }
@media (hover: hover) { :where(body:not([data-game|='baloot'])) .seg-b:not(.on):hover { color: var(--text); } }

/* stepper, toggle, fields */
:where(body:not([data-game|='baloot'])) .stepper { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 2px; box-shadow: var(--e-1); }
:where(body:not([data-game|='baloot'])) .st-b { transition: background-color var(--t-1); }
@media (hover: hover) { :where(body:not([data-game|='baloot'])) .st-b:hover { background: var(--raised); } }
:where(body:not([data-game|='baloot'])) .st-b:active { background: var(--line-2); }
:where(body:not([data-game|='baloot'])) .tgl { border-radius: var(--r-md); transition: background-color var(--t-2); }
:where(body:not([data-game|='baloot'])) .tgl-k { width: 50px; height: 30px; background: color-mix(in srgb, var(--text) 18%, transparent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); transition: background-color var(--t-2) var(--ease); }
:where(body:not([data-game|='baloot'])) .tgl-k::after { width: 24px; height: 24px; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: inset-inline-start var(--t-3) var(--spring); }
:where(body:not([data-game|='baloot'])) .tgl.on .tgl-k { background: var(--green); }
:where(body:not([data-game|='baloot'])) .tgl.on .tgl-k::after { inset-inline-start: 23px; background: #FFFFFF; }
:where(body:not([data-game|='baloot'])) .field { border-radius: 14px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); transition: border-color var(--t-2), box-shadow var(--t-2); }
:where(body:not([data-game|='baloot'])) .field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }
.field.home-search, .field.pk-search { background-image: var(--ic-search); background-repeat: no-repeat; background-size: 20px; background-position: right 15px center; padding-inline-start: 46px; }
[dir="ltr"] .field.home-search, [dir="ltr"] .field.pk-search { background-position: left 15px center; }
.field[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* cards, avatars, the sadu strip */
:where(body:not([data-game|='baloot'])) .card { border-radius: var(--r-lg); box-shadow: var(--e-1); }
:where(body:not([data-game|='baloot'])) .sec-t { font: 800 var(--fs-h3)/1.3 var(--font-d); }
:where(body:not([data-game|='baloot'])) .nchip { box-shadow: var(--e-1); }

/* sheets: up from the bottom with a little spring on a phone; a centred dialog on a laptop or TV */
:where(body:not([data-game|='baloot'])) .backdrop { background: var(--scrim); z-index: 41; animation: jsFade var(--t-3) var(--ease); }
:where(body:not([data-game|='baloot'])) .sheet {
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 6px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 64px 0 var(--surface), var(--e-3); animation: jsSheetUp var(--t-4) linear;
}
@keyframes jsSheetUp { 0% { transform: translateY(100%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 70% { transform: translateY(-6px); animation-timing-function: ease-in-out; } 100% { transform: none; } }
:where(body:not([data-game|='baloot'])) .sheet.out { opacity: 1; transform: translateY(105%); transition: transform 200ms var(--ease-in); }
:where(body:not([data-game|='baloot'])) .backdrop.out { opacity: 0; transition: opacity 200ms; }
:where(body:not([data-game|='baloot'])) .grab { width: 44px; height: 5px; border-radius: 3px; margin: 6px auto 14px; background: color-mix(in srgb, var(--text) 22%, transparent);
  position: relative; touch-action: none; cursor: grab; }
:where(body:not([data-game|='baloot'])) .grab::before { content: ""; position: absolute; inset: -16px -48px; }   /* a finger-sized grip round the bar (ui.js sheet: drag it down to close) */
:where(body:not([data-game|='baloot'])) .sheet-t { font: 800 22px/1.3 var(--font-d); }
:where(body:not([data-game|='baloot'])) .sheet-msg { font: 700 18px/1.5 var(--font-d); padding: 8px 4px 4px; }
@media (min-width: 900px) and (min-height: 480px) {
  :where(body:not([data-game|='baloot'])) .sheet {
    inset: 50% auto auto 50%; margin: 0; width: min(580px, calc(100vw - 48px)); max-width: none; max-height: min(88vh, 860px);
    border-radius: var(--r-xl); border-bottom: 1px solid var(--line-2); padding: 10px 26px 26px; box-shadow: var(--e-3);
    transform: translate(-50%, -50%); animation: jsDialogIn var(--t-3) var(--ease);
  }
  :where(body:not([data-game|='baloot'])) .sheet.out { opacity: 0; transform: translate(-50%, -48%) scale(.98); transition: opacity 180ms, transform 180ms var(--ease-in); }
  :where(body:not([data-game|='baloot'])) .grab { visibility: hidden; margin-bottom: 6px; }
}
@keyframes jsDialogIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }

/* «لفّ الجوال»: a phone held sideways on a game that can't be played that way (sideways.js) — over the game, in its own world's
   colours (every world sets these tokens), the phone turning upright beside the words, and a way to carry on anyway */
.sw-veil { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 16px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); background: var(--bg); color: var(--text); }
.sw-veil[hidden] { display: none; }
.sw-art { width: 104px; height: 104px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: var(--surface); border: 1.5px solid var(--line-2); }
.sw-art svg { width: 68px; height: 68px; }
.sw-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 32ch; min-width: 0; }
.sw-txt b { font: 900 30px/1.25 var(--font-d); }
.sw-txt p { margin: 0; font: 700 16px/1.55 var(--font-d); color: var(--dim); }
.sw-txt .sw-keep { margin-top: 10px; min-height: 44px; }
.sw-ph { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .sw-veil { animation: jsFade var(--t-3) var(--ease); } .sw-ph { animation: swTurn 2.6s var(--ease) infinite; } }
@keyframes swTurn { 0%, 25% { transform: rotate(-90deg); } 55%, 100% { transform: none; } }

/* toasts: an inverted pill with a saffron diamond */
:where(body:not([data-game|='baloot'])) .toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; font-size: 15px; line-height: 1.4;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .2); animation: jsToast var(--t-4) var(--spring);
}
:where(body:not([data-game|='baloot'])) .toast::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
:where(body:not([data-game|='baloot'])) .toast.out { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease-in); }
@keyframes jsToast { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* the tab bar: solid (no blur for TVs); a floating dock on a wide screen */
.tabbar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--line-2); box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .5); padding-top: 5px; }
.tab { position: relative; gap: 3px; padding: 6px 0 5px; font: 700 12px/1.2 var(--font-d); transition: color var(--t-2); }
.tab .ic { position: relative; z-index: 1; width: 24px; height: 24px; }
.tab::before { content: ""; position: absolute; top: 3px; left: 50%; width: 58px; height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 16%, transparent); transform: translateX(-50%) scaleX(.4); opacity: 0; transition: transform var(--t-3) var(--spring), opacity var(--t-2); }
.tab.on::before { opacity: 1; transform: translateX(-50%); }
.tab.on { color: var(--text); }
.tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 14px; }
@media (min-width: 900px) {
  body.has-tabs { --tabs: 86px; }
  .tabbar { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); gap: 6px; padding: 6px; border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--e-3); }
  .tab { flex: none; width: auto; max-width: none; flex-direction: row; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 14.5px; }
  .tab::before { top: 0; bottom: 0; left: 0; right: 0; width: auto; height: auto; transform: scaleX(.6); }
  .tab.on::before { transform: none; }
  .tab .ic { width: 22px; height: 22px; }
}
@media (min-width: 900px) and (hover: hover) { .tab:not(.on):hover { color: var(--text); } }

/* empty, offline and crash screens: a drawn emblem, the words, the way back */
:where(body:not([data-game|='baloot'])) .center-scr h2 { font: 800 24px/1.3 var(--font-d); }
:where(body:not([data-game|='baloot'])) .center-scr > p.muted { max-width: 34ch; line-height: 1.7; }
.empty-art { width: 132px; height: 132px; flex: none; margin-bottom: 4px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; }
.empty-art::after { content: ""; position: absolute; inset: 14px; background: var(--art) center / contain no-repeat; }
.empty-art[data-k="missing"] { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='15' r='9.5' fill='%23F4B73E'/%3E%3Ccircle cx='14.2' cy='31.5' r='9.5' fill='%23FF6B57'/%3E%3Ccircle cx='33.8' cy='31.5' r='8.7' fill='none' stroke='%233FB98B' stroke-width='1.6' stroke-dasharray='3 2.6'/%3E%3C/svg%3E"); }
.empty-art[data-k="offline"] { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23F4B73E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 20a23 23 0 0 1 32 0M13.5 26.5a15 15 0 0 1 21 0M19 33a7 7 0 0 1 10 0'/%3E%3Ccircle cx='24' cy='38.5' r='1.6' fill='%23F4B73E'/%3E%3Cpath d='M9 9l30 30' stroke='%23FF6B57'/%3E%3C/svg%3E"); }
.empty-art[data-k="crash"] { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 40c6-3 16-4 24-2s12 1 14-1' fill='none' stroke='%239C6A3A' stroke-width='2.4' stroke-linecap='round' opacity='.7'/%3E%3Cellipse cx='31' cy='39' rx='11' ry='2.6' fill='%235A2E14'/%3E%3Cg transform='rotate(-68 20 28)'%3E%3Cpath d='M9 20h22l-3 13a4 4 0 0 1-4 3h-8a4 4 0 0 1-4-3z' fill='%23FBF3E4'/%3E%3Cpath d='M10.3 25.5h19.4' stroke='%23E1B563' stroke-width='1.6'/%3E%3Cellipse cx='20' cy='20' rx='11' ry='2.4' fill='%23E1B563'/%3E%3C/g%3E%3C/svg%3E"); }
/* the loading placeholder: the jalsah mark, breathing */
.lazy-wait > .dia.pulse {
  width: 60px; height: 60px; border-radius: 0; transform: none; box-shadow: none; animation: jsBreathe 1.3s ease-in-out infinite;
  background: radial-gradient(circle at 50% 54%, var(--bg) 0 5.6px, transparent 6.2px), radial-gradient(circle at 50% 31%, #F4B73E 0 11.5px, transparent 12px), radial-gradient(circle at 29.6% 65.6%, #FF6B57 0 11.5px, transparent 12px), radial-gradient(circle at 70.4% 65.6%, #3FB98B 0 11.5px, transparent 12px);
}
@keyframes jsBreathe { 50% { transform: scale(.9); opacity: .7; } }

/* ---------- 4. home: the mark, find a game, the join bar, the puzzles of the day, the shelves ---------------------- */
.scr.home { gap: 16px; padding-top: 10px; }
.home-body { display: flex; flex-direction: column; gap: 16px; }
.home-main, .home-side { display: contents; }
.home-body .home-find { order: 1; } .home-body .home-filters { order: 2; } .home-body .results { order: 3; } .home-side > * { order: 4; } .home-body .home-rest { order: 5; }
.home-top { align-items: center; padding-top: 2px; }
.home-top .brand-row { gap: 12px; }
.home-top .logo { width: 54px; height: 54px; filter: drop-shadow(0 8px 18px rgba(244, 183, 62, .3)); }
.home-top .brand { font: 900 var(--fs-brand)/1 var(--font-d); letter-spacing: -.012em; }
.home-top .tagline { font: 600 15px/1.35 var(--font-b); color: var(--dim); margin-top: 5px; }
.home-top .icon-btn { width: 48px; height: 48px; border-radius: 16px; }
.home-top .icon-btn .ic { width: 23px; height: 23px; }
.icon-btn.has-news::after { inset-block-start: 8px; inset-inline-end: 8px; width: 10px; height: 10px; }
/* a narrow phone, or larger text (the page zooms: 130% on a 360px Android is 277px): the mark, the name and the two
   buttons get smaller so the row still fits; if it ever can't, the buttons drop under the name instead of off the screen */
.home-top { flex-wrap: wrap; column-gap: 8px; } .home-top .brand-row { flex: 1 1 0; }   /* (it wraps only when the name itself can't fit, not for a long tagline) */
@media (max-width: 359px) {
  .home-top .brand-row { gap: 8px; } .home-top .logo { width: 40px; height: 40px; }
  .home-top .brand { font-size: clamp(26px, calc(30vw - 58px), 44px); } .home-top .tagline { font-size: 13.5px; margin-top: 3px; }
  .home-acts { gap: 6px; } .home-top .icon-btn { width: 42px; height: 42px; border-radius: 14px; } .home-top .icon-btn .ic { width: 21px; height: 21px; }
}

/* the search and «وش نلعب؟» share a line; on a narrow screen the button drops under the search, full width */
.home-find { gap: 10px; flex-wrap: wrap; }
.home-search { flex: 100 1 9em; min-height: 52px; border-radius: var(--r-md); } [dir="ltr"] .home-search { flex-basis: 11.5em; }   /* room for «دوّر لعبة…» / “Find a game…” (Safari keeps a little for its ×) */
.helper-btn { flex: 1 0 auto; min-height: 52px; border-radius: var(--r-md); padding-inline: 14px 18px; font: 800 16px var(--font-d); }
.helper-btn .ic { width: 20px; height: 20px; }
.home-filters { gap: 8px; margin-top: -4px; }
.home-filters .chips { gap: 7px; }
.home-filters .chip { min-height: 38px; padding: 0 15px; font-weight: 700; }
.f-lbl { font: 800 12.5px var(--font-d); color: var(--dim); min-width: 50px; }
[dir="rtl"] .home-filters .chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 30px); mask-image: linear-gradient(to right, transparent, #000 30px); }
[dir="ltr"] .home-filters .chips { -webkit-mask-image: linear-gradient(to left, transparent, #000 30px); mask-image: linear-gradient(to left, transparent, #000 30px); }

/* the join bar: one line — have a code? type it, go. The code field always keeps room for all four digits: when the
   line is too short for the question, the field and «ادخل» (a narrow phone, larger text, English) drop to a line of their own */
.joinbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px; padding-inline-start: 16px; border-radius: 20px; }
.joinbox .lbl { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; font: 800 14px/1.3 var(--font-d); color: var(--text); }
[dir="ltr"] .joinbox .lbl { text-wrap: balance; }
.joinbox .lbl .ic { width: 24px; height: 24px; flex: none; color: var(--gold-ink); }
.joinbox .row { flex: 1 1 10.6em; min-width: 0; margin: 0; gap: 8px; }
.joinbox .code-in { min-width: 4.2em; }
.joinbox .btn { min-height: 48px; padding-inline: 18px; }
.code-in { min-height: 48px; border-radius: 14px; font-size: 21px; letter-spacing: .26em; background: color-mix(in srgb, var(--bg) 70%, var(--surface)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); transition: border-color var(--t-2), box-shadow var(--t-2); }
.code-in:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }

/* the puzzles of the day: two small cards that show how today went, side by side while both fit, else one under the other */
.dailies { display: flex; flex-wrap: wrap; gap: 10px; } .dailies > .daily { flex: 1 1 0; }
.daily { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 100px; padding: 13px 14px; border-radius: 20px; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 26px -14px rgba(0, 0, 0, .7); transition: transform var(--t-2) var(--ease); }
.daily .game-txt { gap: 4px; }
.daily .game-txt b { font: 800 16px/1.25 var(--font-d); }
.daily .game-meta { font-size: 12.5px; line-height: 1.45; }
.daily-tiles { gap: 4px; }
.daily-tiles i { width: 17px; height: 17px; border-radius: 4.5px; }
.daily-tiles.lk i { width: 26px; height: 12px; border-radius: 3px; }
.daily-tiles i.p { background: #9B7FD8; } .daily-tiles i.b { background: #4F8FD8; }
.daily-tiles.lk i.y { background: #E4B83A; } .daily-tiles.lk i.g { background: #5FB883; }
.daily-streak { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 3px; font: 900 15px var(--font-d); color: #FFB347; }
.daily-streak .ic { width: 16px; height: 16px; fill: #FF8A3D; stroke: #FFB347; stroke-width: 1.4; }
.daily:active { transform: scale(.97); }
@media (hover: hover) { .daily:hover { transform: translateY(-2px); } }

/* what you were playing */
.recent { display: flex; align-items: center; gap: 10px; margin-inline: -16px; padding-inline-start: 16px; }
.recent .sec-t { flex: none; margin: 0; font: 800 12.5px var(--font-d); color: var(--dim); max-width: 4.6em; line-height: 1.3; }
.recent .chips { flex: 1; min-width: 0; margin: 0; padding: 2px 16px 4px 16px; padding-inline-start: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.recent .chips::-webkit-scrollbar { display: none; }
.recent .chip { flex: none; }
.recent .chip::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cc, var(--gold)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, var(--gold)) 22%, transparent); }

/* the shelves: a title with its mark, the row of tiles, «عرض الكل» at the title's end */
.shelf { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 12px; }
.shelf:not(.results) > .shelf-h { display: contents; }
.shelf:not(.results) > .shelf-h > h2 { grid-column: 1 / -1; grid-row: 1; }
.shelf:not(.results) > .shelf-h > p { grid-column: 1; grid-row: 2; align-self: center; margin-top: -6px; }
.shelf > .shelf-row { grid-column: 1 / -1; grid-row: 3; }
.shelf > .shelf-more { grid-column: 2; grid-row: 2; align-self: center; margin-top: -6px; min-height: 34px; padding: 0 14px; border-radius: 999px; font: 800 13px var(--font-d); color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 12%, transparent); text-decoration: none; white-space: nowrap; }
.shelf > .shelf-more:active { transform: scale(.96); }
.shelf-h h2 { display: flex; align-items: center; gap: 10px; font: 800 var(--fs-h2)/1.2 var(--font-d); }
.shelf-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold-ink); }
.shelf-ic .ic { width: 18px; height: 18px; }
.shelf-h p { font-size: 13px; color: var(--dim); padding-inline-start: 42px; }
.results.shelf > .shelf-h { flex-direction: row; align-items: center; justify-content: space-between; grid-column: 1 / -1; }
.results.shelf > .shelf-row { grid-row: 2; }
.results .shelf-h .link-btn { align-self: center; }
.shelf-row { gap: 12px; }

/* ---------- 5. the game tile: its drawn scene in its world's colours, who can play, its name — one family, many worlds */
.gt {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; overflow: hidden; isolation: isolate;
  border: 0; border-radius: var(--r-lg); text-align: start; color: #FBF3E4; background: var(--g2);
  box-shadow: var(--tile-sh);
  transition: transform var(--t-3) var(--ease), box-shadow var(--t-3) var(--ease);
}
.gt::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12); pointer-events: none; z-index: 2; }
.gt-art { position: relative; display: block; aspect-ratio: 16 / 10; background-color: var(--g1); background-size: cover; background-position: center; transition: transform .5s var(--ease); }
@supports not (aspect-ratio: 1) { .gt-art { height: 0; padding-bottom: 62.5%; } }
.gt-art.plain { display: grid; place-items: center; color: var(--ga); background: radial-gradient(70% 80% at 70% 15%, color-mix(in srgb, var(--ga) 32%, transparent), transparent 70%), linear-gradient(160deg, var(--g1), var(--g2)); }
.gt-art.plain .gi { width: 40%; height: 64%; stroke-width: 1.5; }
.gt-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 13px 13px; background: var(--g2); }
.gt-body::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 26px; background: linear-gradient(to top, var(--g2), transparent); pointer-events: none; }
.gt-name { margin: 0; font: 800 var(--fs-h3)/1.25 var(--font-d); color: inherit; }
.gt-sub { font-size: 12.5px; line-height: 1.45; opacity: .8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gt-ppl { position: absolute; z-index: 3; inset-block-start: 9px; inset-inline-start: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 8px; border-radius: 999px; font: 800 12px/1.3 var(--font-d); color: #FFF7EA; background: rgba(8, 6, 16, .58); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.gt-ppl .ic { width: 13px; height: 13px; }
/* an English screen: a game whose words are still only Arabic says so on its tile, in the players pill's own look, over the
   foot of the scene just above the name (the top corners belong to the players and the star) */
.gt-lang { position: absolute; z-index: 3; inset-block-end: calc(100% + 4px); inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 800 12px/1.3 var(--font-d); color: #FFF7EA; background: rgba(8, 6, 16, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); white-space: nowrap; }
.gt-lang .ic { width: 13px; height: 13px; }
.pk-lang { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-weight: 800; color: var(--gold-ink); }   /* the same in «All games» */
.pk-lang .ic { width: 13px; height: 13px; }
.gt-star { position: absolute; z-index: 3; inset-block-start: 8px; inset-inline-start: auto; inset-inline-end: 9px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-size: 0; color: #3A2A00; background: #FFD76A; text-shadow: none; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--spring); }
.gt-star .ic { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1; }
.gt.fav .gt-star { opacity: 1; transform: none; }
.gt.light { color: #2B2A28; }
.gt.light .gt-body { background: #FFFCF4; }
.gt.light .gt-body::before { background: linear-gradient(to top, #FFFCF4, transparent); }
.gt.light .gt-star { color: #3A2A00; }
.gt.light::after { box-shadow: inset 0 0 0 1px rgba(43, 42, 40, .12); }
.gt:active { transform: scale(.97); transition-duration: var(--t-1); }
.gt:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* two tiles under one name say what they need over the name («كل واحد بجواله» / «شاشة وحدة»), in the world's accent */
.gt-how { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: flex-start; gap: 5px; margin-bottom: 1px; font: 800 12px/1.35 var(--font-d); color: var(--ga); }
.gt-how .ic { flex: none; width: 14px; height: 14px; margin-top: 1px; }
@media (hover: hover) {
  .gt:hover { transform: translateY(-4px); box-shadow: var(--tile-sh-hi); }
  .gt:hover .gt-art { transform: scale(1.05); }
}
.gt-new .gt-art { background-color: var(--g2); }
.gt-new .gt-body { background: var(--g2); }
/* the first paint of the session: the tiles settle in, one after another */
@media (prefers-reduced-motion: no-preference) {
  .home.intro .shelf-row > .gt { animation: jsSettle .55s var(--ease) both; }
  .home.intro .shelf-row > .gt:nth-child(2) { animation-delay: 45ms; } .home.intro .shelf-row > .gt:nth-child(3) { animation-delay: 90ms; }
  .home.intro .shelf-row > .gt:nth-child(4) { animation-delay: 135ms; } .home.intro .shelf-row > .gt:nth-child(5) { animation-delay: 180ms; }
  .home.intro .shelf-row > .gt:nth-child(6) { animation-delay: 225ms; } .home.intro .shelf-row > .gt:nth-child(n+7) { animation-delay: 270ms; }
  .home.intro .gt .gt-art { animation: jsArt .9s var(--ease) both; }
}
@keyframes jsSettle { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes jsArt { from { transform: scale(1.12); } }

/* the night card: a sky with its moon */
.night-card {
  position: relative; overflow: hidden; gap: 14px; padding: 18px; border: 0; border-radius: var(--r-lg); color: #F1EEFF;
  background: radial-gradient(1.2px 1.2px at 22% 30%, rgba(255, 255, 255, .8), transparent), radial-gradient(1px 1px at 64% 22%, rgba(255, 255, 255, .6), transparent), radial-gradient(1.4px 1.4px at 82% 70%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 44% 78%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(60% 120% at 100% 0%, rgba(244, 210, 122, .16), transparent 70%), linear-gradient(135deg, #2B2462, #120E2A);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 30px -16px rgba(0, 0, 0, .75); transition: transform var(--t-2) var(--ease);
}
.night-card .game-txt b { font: 800 18px var(--font-d); }
.night-card .game-meta { color: rgba(241, 238, 255, .78); font-size: 13.5px; }
.night-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #6B4D0A; background: radial-gradient(circle at 35% 30%, #FFF6D8, #F2CE72); box-shadow: 0 0 0 6px rgba(244, 210, 122, .12), 0 0 34px rgba(244, 210, 122, .38); }
.night-ic .ic { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.night-card .go { margin-inline-start: auto; width: 22px; height: 22px; color: rgba(241, 238, 255, .7); flex: none; }
.night-card:active { transform: scale(.98); }
.home-rest > .link-btn, .home-rest > .fb-link { align-self: center; }
.welcome li { display: flex; align-items: flex-start; gap: 12px; }
.wl-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.wl-ic .ic { width: 20px; height: 20px; }
/* the first-open guide (and «كيف نلعب؟»): the three ways to play as cards that jump to their shelf, then a friend's code */
.wl { gap: 12px; }
/* the first open's language switch, at the top: each language in its own script */
.wl-lang { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: -6px; }
.wl-lang > .ic { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
.wl-lang .seg { flex: none; }
.wl-lang .seg-b { min-width: 86px; padding: 0 12px; }
.wl-lead { margin: -4px 0 0; font: 700 15px/1.5 var(--font-b); color: var(--dim); }
.wl-ways { display: grid; gap: 10px; }
.wl-way { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--raised); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform var(--t-2) var(--ease), border-color var(--t-2); }
.wl-way:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line-2)); }
.wl-way:active { transform: scale(.985); }
.wl-way .wl-ic { width: 44px; height: 44px; border-radius: 14px; }
.wl-way .wl-ic .ic { width: 24px; height: 24px; }
.wl-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wl-tx b { font: 800 17px/1.3 var(--font-d); color: var(--text); }
.wl-tx span { font: 500 14px/1.6 var(--font-b); color: color-mix(in srgb, var(--text) 82%, transparent); overflow-wrap: anywhere; }
.wl-tx .wl-eg { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.wl-join { display: grid; gap: 8px; padding: 12px 14px; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.wl-join .lbl { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 15px/1.35 var(--font-d); color: var(--text); }
.wl-join .lbl .ic { width: 22px; height: 22px; flex: none; color: var(--gold-ink); }
.wl-join { grid-template-columns: minmax(0, 1fr); }
.wl-join .row { display: flex; gap: 8px; min-width: 0; }
.wl-join .code-in { flex: 1; min-width: 0; }
.wl-join .row .btn { width: auto; flex: none; padding-inline: 20px; }
.wl-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font: 600 13px/1.4 var(--font-b); color: var(--dim); text-align: center; }
.wl-note .ic { width: 15px; height: 15px; flex: none; }
.home-acts { display: flex; align-items: center; gap: 8px; }

/* home on a laptop or a TV: the shelves take the main column, the join bar, today's puzzles and what you were playing
   ride in a side column that stays in view; one or two rows of tiles a shelf until «عرض الكل» */
@media (min-width: 700px) {
  [dir] .home-filters .chips { -webkit-mask-image: none; mask-image: none; }
  .scr.home { padding-top: 22px; }
}
@media (min-width: 900px) {
  body[data-scr~="home"] #app { max-width: min(94vw, 1240px); }
  .home-find { max-width: none; width: auto; }
  .home-filters { flex-direction: row; flex-wrap: wrap; column-gap: 22px; row-gap: 8px; margin: 0; }
  .home-filters .chips { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .scr.home .home-rest { display: flex; }
  .shelf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .shelf:not(.all) .shelf-row > :nth-child(n+5) { display: none; }
  .home-rest > .night-card { max-width: 760px; align-self: center; width: 100%; }
  .joinbox .lbl { max-width: none; }
}
@media (min-width: 1100px) {
  .home-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); column-gap: 26px; align-items: start; }
  .home-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .home-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(18px + env(safe-area-inset-top, 0px)); }
  .home-body.no-side { grid-template-columns: minmax(0, 1fr); }
  .home-side .joinbox { padding: 14px; gap: 10px; } .home-side .joinbox .row { flex-basis: 100%; }
  .home-side .recent { flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
  .home-side .recent .sec-t { max-width: none; font-size: 14px; }
  .home-side .recent .chips { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .shelf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shelf:not(.all) .shelf-row > :nth-child(n+5) { display: flex; }
  .shelf:not(.all) .shelf-row > :nth-child(n+7) { display: none; }
}
@media (min-width: 1240px) {
  .shelf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .shelf:not(.all) .shelf-row > :nth-child(n+7) { display: flex; }
  .shelf:not(.all) .shelf-row > :nth-child(n+9) { display: none; }
  .gt-sub { font-size: 13.5px; }
  .gt-body { padding: 11px 14px 14px; }
  .gt-ppl { font-size: 13px; padding: 4px 10px 4px 9px; }
  .gt-ppl .ic { width: 14px; height: 14px; }
  .shelf-h p { font-size: 15px; padding-inline-start: 46px; }
  .shelf-ic { width: 36px; height: 36px; border-radius: 11px; } .shelf-ic .ic { width: 20px; height: 20px; }
  .shelf > .shelf-more { font-size: 14.5px; min-height: 40px; padding: 0 18px; }
  .home-top .tagline { font-size: 18px; }
  .home-top .logo { width: 64px; height: 64px; }
  .home-filters .chip { min-height: 42px; font-size: 15.5px; }
  .f-lbl { font-size: 14px; }
  .daily .game-txt b { font-size: 17px; } .daily .game-meta { font-size: 13.5px; }
  .joinbox .lbl { font-size: 15.5px; }
}
@media (min-width: 1600px) {
  body[data-scr~="home"] #app { max-width: min(94vw, 1640px); }
  .home-body { grid-template-columns: minmax(0, 1fr) 380px; }
  .shelf-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .shelf:not(.all) .shelf-row > :nth-child(n+9) { display: flex; }
  .shelf:not(.all) .shelf-row > :nth-child(n+11) { display: none; }
}

/* ---------- 6. the settings sheet: grouped rows, a mark per row, the value and a chevron at the end --------------- */
.settings { gap: 16px; }
.set-group { display: flex; flex-direction: column; gap: 8px; }
.set-gt { margin: 2px 6px 0; font: 800 13px var(--font-d); color: var(--dim); }
.set-box { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--e-1); }
.set-box > * + * { border-top: 1px solid var(--line); }
.set-row, .set-box > .tgl, .set-field { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: start; background: transparent; border: 0; border-radius: 0; color: var(--text); font: inherit; }
.set-box > * + .tgl, .set-box > * + .set-row, .set-box > * + .set-field { border-top: 1px solid var(--line); }
.set-row { cursor: pointer; transition: background-color var(--t-1); }
.set-row:active { background: color-mix(in srgb, var(--text) 7%, transparent); }
@media (hover: hover) { .set-row:hover, .set-box > .tgl:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } }
.set-row:focus-visible, .set-box > .tgl:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 14px; }
.set-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 15%, transparent); }
.set-ic .ic { width: 19px; height: 19px; }
.set-l { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.35; }
.set-box > .tgl .tgl-l { font-size: 15px; font-weight: 700; line-height: 1.35; }
.set-v { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px var(--font-d); color: var(--gold-ink); }
.set-go { width: 18px; height: 18px; flex: none; color: var(--dim); }
/* big text: a row's label keeps room for two of its words (never one word a line: «اسمك / في / الألعاب»; English's widest
   pair is "Give through"), and its value with its arrow, one piece (.set-end), goes under it at the row's end when the two
   don't fit side by side (a phone at normal size keeps them beside it, a long name aside). The value still stops at 42% of
   the row and shortens with «…» (the contact rows: their own, below; the app's reminder row keeps its time box beside it) */
.set-row:not(.ct-row):not(.nt-row) { flex-wrap: wrap; row-gap: 2px; } .set-row:not(.ct-row):not(.nt-row) > .set-l { flex: 1 1 5em; } [dir="ltr"] .set-row:not(.ct-row):not(.nt-row) > .set-l { flex-basis: 6.2em; }
.set-end { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: calc(42% + 30px); margin-inline-start: auto; } .set-end > .set-v { max-width: none; }
.set-field { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 12px 14px; }
.set-fl { display: flex; align-items: center; gap: 12px; }
.set-note { padding: 12px 14px 12px; font-size: 13px; line-height: 1.7; color: var(--dim); }
.set-row.has-news::after { inset-block-start: 50%; inset-inline-end: 44px; width: 10px; height: 10px; transform: translateY(-50%); box-shadow: 0 0 0 3px var(--raised); }
.set-wipe { align-self: stretch; }
.set-ver { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 13px var(--font-d); color: var(--dim); }
.set-mark { width: 22px; height: 22px; }
.set-ver span { font-variant-numeric: tabular-nums; }

/* ---------- 7. the other sheets: «وش الجديد؟», «وش نلعب؟», «أول ما أفتح جَلسة», the menus -------------------------- */
.news .sheet-t { display: flex; align-items: center; gap: 10px; }
.news .sheet-t .ic { width: 24px; height: 24px; color: var(--gold-ink); }
.news-v { gap: 10px; padding: 14px 16px 16px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); }
.news-v.now { border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--raised)); }
.news-v .pill { padding: 3px 12px; color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.news-v ul { list-style: none; padding: 0; gap: 10px; }
.news-v li { position: relative; padding-inline-start: 20px; font-size: 15px; line-height: 1.7; }
.news-v li::before { content: ""; position: absolute; inset-inline-start: 3px; top: .72em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--gold); transform: rotate(45deg); }
.helper-n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.helper .helper-n .chip { min-width: 0; min-height: 54px; justify-content: center; border-radius: 16px; font: 800 19px var(--font-d); }
.helper-how .btn { justify-content: flex-start; gap: 12px; min-height: 56px; padding-inline: 16px; font-weight: 700; text-align: start; }
.helper-how .btn .ic { width: 22px; height: 22px; }
.helper-how .btn.ghost .ic { color: var(--gold-ink); }
.helper-picks { gap: 10px; }
.helper .gt-sub { -webkit-line-clamp: 2; }
:where(body:not([data-game|='baloot'])) .btn.choice { min-height: 56px; border-radius: var(--r-md); box-shadow: var(--e-1); }
.st-pick { gap: 12px; }
.st-group { margin: 8px 2px 0; font: 800 13.5px var(--font-d); }
.st-grid { gap: 10px; }
.st-tile { padding: 0; gap: 0; overflow: hidden; min-height: 0; align-items: stretch; justify-content: flex-start; color: #FFF9EE; background: var(--g2); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 18px -10px rgba(0, 0, 0, .6); }
.st-art { display: block; aspect-ratio: 16 / 10; background-color: var(--g1); background-size: cover; background-position: center; }
@supports not (aspect-ratio: 1) { .st-art { height: 0; padding-bottom: 62.5%; } }
.st-art.plain { display: grid; place-items: center; color: var(--ga); background: linear-gradient(160deg, var(--g1), var(--g2)); }
.st-art.plain .gi { width: 40%; height: 60%; }
.st-tile b { padding: 7px 9px 9px; font: 800 13px/1.3 var(--font-d); }
.st-tile.light { color: #1C1633; background: #FFFCF4; }
.st-grid.one .st-tile { flex-direction: row; align-items: center; min-height: 64px; }
.st-grid.one .st-art { width: 104px; aspect-ratio: auto; align-self: stretch; }
.st-grid.one .st-tile b { font-size: 16px; padding: 10px 14px; }
.st-tile.on { box-shadow: 0 0 0 3px var(--gold), 0 10px 24px -8px rgba(0, 0, 0, .5); }
.st-on { inset-block-start: 7px; inset-inline-end: 7px; width: 26px; height: 26px; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.st-on .ic { width: 16px; height: 16px; stroke-width: 3; }
@media (hover: hover) { .st-tile:hover { transform: translateY(-2px); } }

/* ---------- 8. «كل الألعاب»: each game's scene as a thumbnail, its line, how it plays -------------------------------- */
.picker .games { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.picker .game { padding: 8px; padding-inline-end: 10px; border-radius: 20px; box-shadow: var(--e-1); transition: border-color var(--t-2), transform var(--t-2) var(--ease); }
.picker .game-main { gap: 14px; padding: 2px; border-radius: 14px; }
.picker .game-main:active { background: transparent; }
.picker .game:active { transform: scale(.985); }
@media (hover: hover) { .picker .game:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--line-2)); } }
.game-ic.art { width: 76px; height: 76px; flex: none; border-radius: 16px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 14px -8px rgba(0, 0, 0, .6); }
.game-ic.art.plain { display: grid; place-items: center; color: var(--ga); background: linear-gradient(160deg, var(--g1), var(--g2)); }
.game-ic.art.plain .gi { width: 44%; height: 44%; }
.picker .game-txt { gap: 3px; }
.picker .game-txt b { font: 800 18px/1.25 var(--font-d); }
.picker .game-meta { font-size: 12.5px; }
.picker .game.new { padding: 8px; padding-inline-end: 12px; display: flex; align-items: center; gap: 14px; border-style: dashed; background: transparent; box-shadow: none; }
.pk-link, .scr.picker > .btn.ghost.sm { align-self: center; }
@media (min-width: 700px) { body[data-scr~="picker"] #app { max-width: 1060px; } .picker .games { grid-template-columns: repeat(2, minmax(0, 1fr)); } .picker .games > p { grid-column: 1 / -1; } }
@media (min-width: 1150px) { body[data-scr~="picker"] #app { max-width: 1320px; } .picker .games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .game-ic.art { width: 88px; height: 88px; } }

/* ---------- 9. «سوّوا لعبتكم»: pick a shape (each with its own scene), then its settings ----------------------------- */
.create .shapes { gap: 12px; }
.shape { padding: 0; gap: 0; overflow: hidden; min-height: 0; border-radius: 20px; box-shadow: var(--e-1); transition: transform var(--t-2) var(--ease), border-color var(--t-2); }
.shape-art { display: block; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
@supports not (aspect-ratio: 1) { .shape-art { height: 0; padding-bottom: 56%; } }
.shape-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.shape b { font: 800 18px/1.25 var(--font-d); }
.shape .muted.sm { font-size: 13px; line-height: 1.5; }
.shapes > .shape:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.shapes > .shape:last-child:nth-child(odd) .shape-art { width: 46%; flex: none; aspect-ratio: auto; min-height: 110px; }
@media (hover: hover) { .shape:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); } }
.shape:active { transform: scale(.97); }
.shape-tag { gap: 12px; }
.shape-tag .game-ic.art { width: 48px; height: 48px; border-radius: 13px; }
.shape-tag b { font: 800 18px var(--font-d); }
.create .fld { gap: 8px; }
.create .fld > .lbl { font: 800 13px var(--font-d); }
:where(body:not([data-game|='baloot'])) .sticky-cta { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line-2); box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .5); border-radius: 22px; }
.issues li { border-radius: 14px; }
/* three to a row on a wide screen, and a short last row sits in the middle instead of leaving a hole at the end */
@media (min-width: 900px) { .create .shapes { display: flex; flex-wrap: wrap; justify-content: center; } .create .shapes > .shape { flex: 0 1 calc((100% - 24px) / 3); } .shapes > .shape:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; } .shapes > .shape:last-child:nth-child(odd) .shape-art { width: 100%; aspect-ratio: 16 / 9; min-height: 0; } body[data-scr~="create"] #app { max-width: 880px; } }

/* ---------- 10. the stats: your record as a scoreboard ------------------------------------------------------------- */
.stats .top-t p { display: flex; align-items: center; gap: 6px; }
.stats .lock { display: inline-grid; place-items: center; color: var(--gold-ink); }
.stats .lock .ic { width: 14px; height: 14px; }
.stats .card { padding: 18px; }
.stats .lbl { font: 800 12.5px var(--font-d); color: var(--dim); display: flex; align-items: center; gap: 7px; }
.stats .lbl .ic { width: 16px; height: 16px; color: var(--gold-ink); }
.stat-hero { position: relative; overflow: hidden; align-items: center; background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--green-hi) 14%, transparent), transparent 60%), var(--surface); }
.stat-hero .big { margin: 2px 0 4px; font: 900 clamp(64px, 20vw, 96px)/.95 var(--font-d); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.last8 .l8 { gap: 6px; }
.l8 i { border-radius: 4px; transform: rotate(45deg) scale(.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.h2h { font-size: 28px; align-items: baseline; }
.split { height: 12px; gap: 4px; }
.split i { border-radius: 999px; }
.stat-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.stat-grid > .card { flex: 1 1 150px; gap: 8px; }
.stat-grid .mid, .stat-grid .star { font-size: 30px; }
.stats .lb li, .night .lb li { min-height: 52px; padding: 8px 10px; border-radius: 16px; background: var(--raised); box-shadow: var(--e-1); }
.stats .lb .rk, .night .lb .rk { width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-d); }
.stats .lb li:nth-child(1) .rk, .night .lb li:nth-child(1) .rk { background: #E9B85C; color: #2A1C00; }
.stats .lb li:nth-child(2) .rk, .night .lb li:nth-child(2) .rk { background: #C7CCD6; color: #1F2430; }
.stats .lb li:nth-child(3) .rk, .night .lb li:nth-child(3) .rk { background: #C98A5A; color: #2A1406; }
.stats .lb li.lead, .night .lb li.lead { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--raised)); }
.stats .hist li, .night .hist li { padding: 10px 6px; font-size: 14.5px; }
.stats .hist .q { min-width: 66px; font-size: 13px; }
@media (min-width: 900px) {
  body[data-scr~="stats"] #app { max-width: 1080px; }
  .scr.stats { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .scr.stats > .top, .scr.stats > .center-scr { grid-column: 1 / -1; }
  .scr.stats > .stat-hero, .scr.stats > .card:not(.stack), .scr.stats > .stat-grid { grid-column: 1; }
  .scr.stats > .card.stack { grid-column: 2; grid-row: 2 / span 3; }
}

/* ---------- 11. list rows (question packs, tonight's picks) ------------------------------------------------------- */
:where(body:not([data-game|='baloot'])) .pk-row { min-height: 60px; border-radius: 18px; box-shadow: var(--e-1); transition: border-color var(--t-2), background-color var(--t-2); }
:where(body:not([data-game|='baloot'])) .pk-row b { font-family: var(--font-d); font-weight: 800; }
.nt-art { width: 40px; height: 40px; flex: none; border-radius: 11px; background-color: var(--raised); background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hist .nt-art { width: 30px; height: 30px; border-radius: 9px; }
button.pk-row.on { background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
/* a pack's mark on a tile in its category's own colour (the same tile the buzzer's pack picker draws), wherever it shows */
.pk-row > .pk-ic { --hue: var(--gold); display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; font: 800 18px/1 var(--font-d); text-align: center;
  color: color-mix(in srgb, var(--hue) 72%, var(--text)); background: color-mix(in srgb, var(--hue) 20%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 34%, transparent); }
.pk-row > .pk-ic svg { width: 22px; height: 22px; }
/* the ready packs: «انسخ لحزمكم وعدّل» is a quiet line in the lamp's colour, not a box repeated down the list */
.scr.packs .pk-row > .btn.ghost.sm { --_f: transparent; --_i: var(--gold-ink); --_r: color-mix(in srgb, var(--gold) 38%, transparent); --_d: transparent; --_s: transparent; flex: none; max-width: 46%; padding-inline: 11px; font-size: 13px; }
@media (hover: hover) { .scr.packs .pk-row > .btn.ghost.sm:hover { --_f: color-mix(in srgb, var(--gold) 12%, transparent); } }
@media (min-width: 900px) {
  body[data-scr~="packs"] #app { max-width: 980px; }
  .scr.packs > .rg > .stack:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- 12. tonight's plan -------------------------------------------------------------------------------------- */
.night .top-t h1 { display: flex; align-items: center; gap: 10px; }
.night .top-t h1 .ic { width: 24px; height: 24px; color: var(--gold-ink); fill: currentColor; stroke: none; }
.night .hist li { gap: 12px; padding: 10px 6px; }
.night .hist .q { width: 30px; height: 30px; min-width: 30px; display: grid; place-items: center; border-radius: 50%; font: 800 13px var(--font-d); background: var(--raised); color: var(--dim); }
.night .hist li.cur .q { background: var(--gold); color: #1B1405; }
.night .hist li.done .q { background: color-mix(in srgb, var(--green-hi) 22%, transparent); color: var(--green-hi); }
.night .hist li.done .q .ic { width: 16px; height: 16px; stroke-width: 3; }
.night .star { font-size: 24px; }
.night .star .ic { width: 28px; height: 28px; color: var(--gold-ink); }
.night-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 8px 8px; }
.night-moon { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #FFF6D8, #F2CE72 60%, #D9A441); box-shadow: 0 0 0 14px rgba(244, 210, 122, .08), 0 0 60px rgba(244, 210, 122, .35); position: relative; }
.night-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 68% 40%, rgba(0, 0, 0, .08) 0 7px, transparent 8px), radial-gradient(circle at 40% 66%, rgba(0, 0, 0, .07) 0 5px, transparent 6px); }
.night .card > .row { flex-wrap: wrap; }
.night .card > .row > .btn.grow { flex-basis: 100%; min-height: 54px; font-family: var(--font-d); font-weight: 800; }
.night .card > .row > .btn.ghost { flex: 1; }
@media (min-width: 900px) { body[data-scr~="night"] #app { max-width: 760px; } }

/* ---------- 13. turns: whose turn, big; the lives as hearts ------------------------------------------------------- */
.turns .turn-now { padding: 18px 16px; gap: 12px; border-radius: 24px; background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%), var(--surface); box-shadow: var(--e-2); }
.turns .turn-name { font-size: clamp(38px, 11vw, 56px); letter-spacing: -.01em; }
.hearts { display: inline-flex; align-items: center; gap: 2px; color: var(--red); letter-spacing: 0; }
.hearts .ic { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.turn-now > .hearts .ic { width: 22px; height: 22px; }
.turns .tn-clock { font-size: 40px; letter-spacing: .01em; }
.turns .turn-now .cd { height: 10px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.turns .turn-now .cd i { background: linear-gradient(90deg, var(--teal), var(--gold)); }
.turns .turn-now.low .cd i { background: var(--red); }
/* the tools: one toolbar of equal keys, each its mark over its word (never some side by side and some stacked) */
.turns .tn-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.turns .tn-tools .btn { flex-direction: column; flex-wrap: nowrap; gap: 3px; min-height: 56px; padding: 6px 4px 9px; font-size: 12.5px; line-height: 1.2; white-space: normal; }
.turns .tn-tools .btn .ic { width: 19px; height: 19px; }
.turns .turn-head .ic { width: 15px; height: 15px; vertical-align: -2px; color: var(--gold); }
.turns .prow { border-radius: 18px; box-shadow: var(--e-1); transition: border-color var(--t-2), box-shadow var(--t-2), opacity var(--t-2); }
.turns .prow.cur { box-shadow: 0 0 0 1px var(--gold), 0 10px 24px -14px color-mix(in srgb, var(--gold) 60%, transparent); }
.turns .prow-main { gap: 10px; min-height: 56px; }
.turns .prow .icon-btn.sm { font: 800 18px var(--font-d); }
@media (min-width: 900px) {
  body[data-scr~="turns"] #app { max-width: 720px; }
  /* a TV across the room: the clock, the tools and the lives read from the sofa */
  .turns .tn-clock { font-size: 54px; }
  .turns .turn-now > .muted.sm { font-size: 17px; }
  .turn-now > .hearts .ic { width: 28px; height: 28px; }
  .turns .tn-tools .btn { min-height: 66px; font-size: 15.5px; }
  .turns .tn-tools .btn .ic { width: 23px; height: 23px; }
  .turns .prow .pname { font-size: 18px; }
}

/* ---------- 14. motion off: nothing moves but the essentials -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #app > .scr, .gt, .gt-art, .sheet, .toast, .backdrop, .lazy-wait > .dia.pulse { animation: none !important; transition: none !important; }
}

/* ---------- 15. worlds in my care: the turns arena's own buttons (the token system in use) --------------------------- */
/* the turns arena (dark in both themes): lit teal keys on a dark-teal table */
body[data-game="turns"] {
  --btn-face: linear-gradient(180deg, #3FD8C8, #1FA497); --btn-ink: #03211E; --btn-rim: #0E6F66; --btn-depth: #117A70; --btn-glow: rgba(46, 196, 182, .4);
  --btn-quiet-face: linear-gradient(180deg, #12292C, #0C2023); --btn-quiet-ink: #E8FBFA; --btn-quiet-rim: rgba(46, 196, 182, .34); --btn-quiet-depth: rgba(0, 0, 0, .34);
  --btn-radius: 14px;
}

/* ---------- sideways rows on a computer (public/js/hscroll.js): arrows at the ends of a chip bar, mouse devices only ---- */
.hs-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hs-row { scroll-behavior: auto; }
  .hs-row.hs-drag { cursor: grabbing; user-select: none; }
  .hs-row.hs-drag * { pointer-events: none; }
  .hs-arrow { display: grid; place-items: center; position: sticky; z-index: 3; flex: none; align-self: center; width: 34px; height: 34px; padding: 0;
    border-radius: 50%; border: 1px solid var(--line-2); background: var(--raised); color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity var(--t-2) var(--ease), transform var(--t-1) var(--ease); }
  .hs-arrow.start { inset-inline-start: 0; margin-inline-end: -40px; }
  .hs-arrow.end { inset-inline-end: 0; margin-inline-start: -40px; }
  /* the chevron points the way the row moves: in RTL the start is on the right */
  .hs-arrow.start svg { transform: scaleX(-1); }
  [dir="ltr"] .hs-arrow.start svg { transform: none; }
  [dir="ltr"] .hs-arrow.end svg { transform: scaleX(-1); }
  .hs-row.hs-more-start > .hs-arrow.start, .hs-row.hs-more-end > .hs-arrow.end { opacity: 1; pointer-events: auto; }
  .hs-arrow:hover { transform: scale(1.08); }
  .hs-arrow:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) { .hs-arrow { transition: none; } }

/* ---------- «تفرّح محتاج»: the quiet Ehsan card (give.js). Right after a game this phone ran, at most once every 3 days;
   its ✕ hides it for 30 days. A fixed rose that reads in both themes (white on #C2334F is 5.4:1) --------------------- */
.give { --give: #C2334F; --give-ic: #E0506C; position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px; padding-inline-end: 48px; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--give-ic) 30%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--give-ic) 12%, var(--raised)), var(--raised) 72%); box-shadow: var(--e-1); animation: give-in var(--t-4) var(--ease) both; }
.give.out { opacity: 0; transform: translateY(6px) scale(.98); transition: opacity var(--t-3), transform var(--t-3); }
@keyframes give-in { from { opacity: 0; transform: translateY(8px); } }
.give-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--give-ic); background: color-mix(in srgb, var(--give-ic) 16%, transparent); }
.give-ic .ic { width: 24px; height: 24px; fill: currentColor; }
.give-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.give-tx b { font: 800 17px/1.35 var(--font-d); color: var(--text); }
.give-tx p { margin: 0; font: 500 14.5px/1.6 var(--font-b); color: color-mix(in srgb, var(--text) 82%, transparent); overflow-wrap: anywhere; }
.give-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--give); color: #fff;
  font: 800 14.5px var(--font-d); text-decoration: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--give) 30%, transparent); transition: transform var(--t-2) var(--ease); }
.give-go:active { transform: scale(.97); }
.give-go:focus-visible, .give-x:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.give-go .ic { width: 17px; height: 17px; fill: currentColor; }
.give-url { font: 700 12.5px var(--font-b); opacity: .85; }
.give-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: var(--dim); cursor: pointer; }
@media (hover: hover) { .give-x:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } }
.give-x .ic { width: 16px; height: 16px; }
a.set-row { text-decoration: none; }
.give-row .set-ic { color: #E0506C; background: color-mix(in srgb, #E0506C 15%, transparent); }
.give-row .set-ic .ic { fill: currentColor; }

/* «تواصل معنا» (contact.js): the settings rows show the whole number and address; two quiet links under the suggestion box.
   The label's one word is never under the value: the value takes the room beside it (on a row under 262px, an iPhone SE's,
   the word may reach 6px into the gap, as it always did), or goes under it at the row's end, arrow and all, when less than
   150px is left for the two (big text; "WhatsApp" on an iPhone SE) */
.ct-row { flex-wrap: wrap; row-gap: 2px; } .ct-row > .set-l { flex: none; margin-inline-end: min(0px, max(-6px, calc(100% - 262px))); }
.ct-row > .set-end { flex: 1 1 150px; max-width: calc(62% + 30px); justify-content: flex-end; }
.ct-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; margin: 0; font: 600 13.5px/1.4 var(--font-b); color: var(--dim); }
.ct-line a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px; border-radius: 10px; color: var(--gold-ink); font-weight: 800; text-decoration: none; }
.ct-line a:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.ct-line .ic { width: 17px; height: 17px; }