/* The shop (/ in Arabic, /en/ in English), laid out as a shop front (the user, 2026-10-25: "make it look like a typical
   shopify homepage"), standalone: it links to nothing else on the site and has no site menu (2026-10-26). An
   announcement bar that runs like a news ticker, a header with the logo, links, colour mode and language, a banner, the
   games as product cards (labels, edition picker), a page per game laid out as a product page (a gallery beside the
   details), a row of reasons and a footer. Square buttons as Shopify's Dawn theme has them. Both languages share this
   file, written in logical properties (inline/start/end) so the Arabic page mirrors itself.
   Colours (issue games-kiosk#63, 2026-10-29): one brand palette on every page, placeholders for now: brand red #A32023
   (buttons, links, accents), off-white #FCFCFC (the page), white (cards, surfaces), black #000 (text, dark
   mode). Light and dark modes: the system's, or the header's switch (data-theme on <html>, kept in localStorage). Each
   game keeps its own colour as an accent only (--accent on its section). The pictures and the banner sit on off-white
   (--media) in light mode, their own backdrop; in dark mode they sit on navy (#63's review, 2026-10-30: "dark blue
   instead of white"), the pictures drawn with no backdrop of their own (boxes: a -dark twin). All of it maps onto a Shopify theme's settings and sections. */
:root {
  --brand: #a32023;
  --white: #fcfcfc;
  --black: #000;
  --bg: var(--white);           /* the page: off-white. Not #63's sand #F5DDBA: the user, 2026-10-29, "dont use it at all in
                                   the website design" (it suits Afish only) */
  --surface: #fff;              /* cards, header, panels: white on the off-white, set apart by a hairline */
  --ink: #000;
  --muted: rgba(0, 0, 0, .68);
  --line: rgba(0, 0, 0, .12);
  --soft: rgba(0, 0, 0, .05);
  --link: var(--brand);
  --on-brand: var(--white);
  --media: #fcfcfc;             /* the pictures' panels: off-white (the user, 2026-10-29), the light boxes' own backdrop,
                                   so they sit on it with no edge; navy in dark mode (#63's review) */
  --bulb: #ffd36b;
  --accent: var(--brand);
  --body: "Alexandria", system-ui, sans-serif;
  --display: "Lalezar", "Alexandria", system-ui, sans-serif;
  --page: 1200px;
  --gutter: clamp(16px, 4vw, 50px);
  color-scheme: light;
}
/* dark: black page, near-black surfaces, light text; the brand red lifted where it's text, so it stays readable */
:root[data-theme="dark"] {
  --bg: var(--black); --surface: #151212; --ink: var(--white); --muted: rgba(252, 252, 252, .7); --line: rgba(252, 252, 252, .14);
  --soft: rgba(252, 252, 252, .07); --link: #f08a8c; --media: #141b2d; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--black); --surface: #151212; --ink: var(--white); --muted: rgba(252, 252, 252, .7); --line: rgba(252, 252, 252, .14);
    --soft: rgba(252, 252, 252, .07); --link: #f08a8c; --media: #141b2d; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); transition: background-color .2s, color .2s; font: 400 15px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
/* Arabic headings in Lalezar, as the games' own pages have them */
:lang(ar) :is(h1, h2) { font-family: var(--display); font-weight: 400; letter-spacing: 0; line-height: 1.35; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons, as Dawn's: square, solid or outlined */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 30px;
  font: 500 15px/1 var(--body); letter-spacing: .04em; text-decoration: none; cursor: pointer; border: 0;
  background: var(--brand); color: var(--on-brand); box-shadow: inset 0 0 0 1px var(--brand); transition: box-shadow .15s;
}
:lang(ar) .btn { letter-spacing: 0; font-size: 16px; }
.btn:hover { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 1px var(--brand); }
.btn:disabled { cursor: not-allowed; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #fff; }
.btn.light:hover { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #fff; }
.btn.light.ghost { background: transparent; color: #fff; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 3px; }
.link { text-underline-offset: .3em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eyebrow { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; color: var(--link); font-weight: 500; }
:lang(ar) .eyebrow { font-size: 15px; letter-spacing: 0; }

/* announcement bar: the messages run across it like a news ticker (the list is in the page twice, so the loop has no
   seam), right to left in English and left to right in Arabic, so each message comes in from where its reading starts.
   It stops while pointed at or focused, with its pause button, and for anyone who asks for less motion. */
.announce { position: relative; background: var(--brand); color: var(--white); font-size: 13px; letter-spacing: .04em; overflow: hidden; }
:lang(ar) .announce { letter-spacing: 0; font-size: 14px; }
.announce .ticker { overflow: hidden; margin-inline-end: 44px; }
.announce ul { list-style: none; margin: 0; padding: 0; display: flex; }
.announce .track { width: max-content; animation: ticker 38s linear infinite; }
.announce .set ul { padding-inline-end: 0; }
.announce .set li { display: block; line-height: 40px; white-space: nowrap; padding-inline: 28px; }
.announce .set li::after { content: "✦"; margin-inline-start: 56px; opacity: .55; font-size: 10px; }
.announce a { text-underline-offset: .25em; color: var(--white); font-weight: 600; }
.announce:hover .track, .announce:focus-within .track, .announce .track.paused { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
:root[dir="rtl"] .announce .track, [dir="rtl"] .announce .track { animation-name: ticker-rtl; }
@keyframes ticker-rtl { to { transform: translateX(50%); } }
.announce .pause { position: absolute; inset-block: 0; inset-inline-end: 0; width: 44px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--brand); color: rgba(252, 252, 252, .8); box-shadow: -8px 0 12px var(--brand); }
:lang(ar) .announce .pause { box-shadow: 8px 0 12px var(--brand); }
.announce .pause:hover, .announce .pause[aria-pressed="true"] { color: var(--white); }
.announce .pause svg { width: 16px; height: 16px; }

/* header */
header.site { position: sticky; top: 0; z-index: 900; background: var(--surface); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
header.site.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }
header.site .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { width: 38px; height: 38px; }
.logo b { font: 400 26px/1 var(--display); letter-spacing: .01em; padding-top: 4px; white-space: nowrap; }
.mainnav { display: flex; gap: 22px; justify-content: center; }
.mainnav a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 6px 0; white-space: nowrap; }
:lang(ar) .mainnav a { font-size: 15px; }
.mainnav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .4em; }
.tools { display: flex; align-items: center; gap: 4px; }
/* the colour mode switch: a moon in light mode, a sun in dark */
.theme { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.theme:hover { color: var(--ink); background: var(--soft); }
.theme svg { width: 20px; height: 20px; }
.theme .sun, .theme[aria-pressed="true"] .moon { display: none; }
.theme[aria-pressed="true"] .sun { display: inline; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; text-decoration: none; color: var(--muted); padding: 8px 10px; border-radius: 40px; }
.lang:hover { color: var(--ink); background: var(--soft); }
.lang svg { width: 18px; height: 18px; }

/* the banner: words on the start side, both boxes on the renders' own (off-white) backdrop */
.hero { --hero-bg: var(--media); --hero-ink: #000; --hero-muted: rgba(0, 0, 0, .68); --hero-eyebrow: var(--brand);
  background: var(--hero-bg); overflow: hidden; color: var(--hero-ink); }
.hero .eyebrow { color: var(--hero-eyebrow); }
.hero picture.for-dark { display: none; }
/* dark mode: a dark banner (the user, 2026-10-29: the off-white one was too white), its own pictures (the boxes cut out
   of the renders, on the same dark), light words */
:root[data-theme="dark"] .hero { --hero-bg: #151212; --hero-ink: var(--white); --hero-muted: rgba(252, 252, 252, .7); --hero-eyebrow: var(--link); }
:root[data-theme="dark"] .hero picture.for-dark { display: block; }
:root[data-theme="dark"] .hero picture.for-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { --hero-bg: #151212; --hero-ink: var(--white); --hero-muted: rgba(252, 252, 252, .7); --hero-eyebrow: var(--link); }
  :root:not([data-theme="light"]) .hero picture.for-dark { display: block; }
  :root:not([data-theme="light"]) .hero picture.for-light { display: none; }
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); align-items: center; gap: 10px; min-height: clamp(460px, 42vw, 620px); }
.hero .box { padding: 40px 0; }
.hero h1 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 18px; }
:lang(ar) .hero h1 { font-size: clamp(40px, 4.8vw, 66px); }
.hero p { margin: 0 0 30px; font-size: 17px; color: var(--hero-muted); max-width: 470px; }
.hero picture img { width: 116%; max-width: none; height: auto; margin-inline-end: -16%; }   /* out past the outer edge, away from the words */

/* sections */
section.block { padding: clamp(48px, 7vw, 90px) 0; }
section.block.tint { background: var(--surface); }
.head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.head h2 { font-size: clamp(26px, 3vw, 36px); }
:lang(ar) .head h2 { font-size: clamp(32px, 3.6vw, 44px); }
.head p { margin: 6px 0 0; color: var(--muted); }

/* the edition picker, as a shop's variant buttons */
.editions { border: 0; margin: 0; padding: 0; min-width: 0; }
.editions legend { padding: 0; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
:lang(ar) .editions legend { font-size: 14px; }
.editions div { display: flex; gap: 8px; flex-wrap: wrap; }
.editions label { position: relative; cursor: pointer; }
.editions input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.editions span {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 120px; padding: 8px 18px; border-radius: 12px; line-height: 1.3;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background .15s, color .15s, border-color .15s;
}
.editions b { font-size: 15px; font-weight: 700; }
.editions b:lang(ar) { font: 400 18px/1.25 var(--display); }
.editions small { font-size: 12px; opacity: .7; }
.editions label:hover span { border-color: var(--ink); }
.editions input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* a bundle's Custom pick (the user, 2026-10-30): a row per game, its language as two small buttons */
.parts { border: 0; margin: 14px 0 0; padding: 14px 0 0; min-width: 0; border-top: 1px solid var(--line); }
.parts legend { float: left; width: 100%; padding: 0; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
:lang(ar) .parts legend { font-size: 14px; }
.parts .part { clear: both; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 4px 0; }
.parts .part > span { font-weight: 500; }
.parts label { position: relative; cursor: pointer; }
.parts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.parts label span { display: inline-block; min-width: 84px; text-align: center; padding: 6px 12px; border-radius: 10px; font-size: 13px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background .15s, color .15s, border-color .15s; }
.parts label:hover span { border-color: var(--ink); }
.parts input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.parts input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 3px; }
.game .parts input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--white); }
.product .parts { margin-bottom: 20px; margin-top: -6px; }

/* the product cards: two, side by side */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
.product { display: flex; flex-direction: column; background: var(--surface); padding-bottom: 20px; box-shadow: 0 0 0 1px var(--line); }
.product .info { padding-inline: 20px; }
.product .media { position: relative; display: block; aspect-ratio: 10 / 7; overflow: hidden; background: var(--media); }
.product .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .6s ease; }
.product .media img.cards { opacity: 0; }
.product:hover .media img.cards { opacity: 1; }
.product:hover .media img { transform: scale(1.03); }
/* labels (Shopify: product tags): on the card's picture, and under a game's title */
.labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.product .labels { position: absolute; inset-inline-start: 14px; bottom: 14px; z-index: 1; }
.label { font: 500 12px/1 var(--body); padding: 7px 11px; border-radius: 40px; background: #fcfcfc; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
:lang(ar) .label { font-size: 12.5px; }
.label.mixed { background: #000; color: var(--white); box-shadow: none; }
/* a coming game's ribbon (#63's review: "a sign or badge, so users can easily spot upcoming games"): a brand-red sash
   across the picture's top corner, on its product card and its page's main picture (Shopify: the coming-soon tag's badge) */
.ribbon { position: absolute; z-index: 2; top: 30px; inset-inline-end: -52px; width: 210px; transform: rotate(45deg); pointer-events: none;
  background: var(--brand); color: var(--white); text-align: center; font: 700 13px/34px var(--body); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .2); }
[dir="rtl"] .ribbon { transform: rotate(-45deg); letter-spacing: 0; font: 400 19px/36px var(--display); }
.gallery .main .ribbon { top: 38px; inset-inline-end: -58px; width: 250px; font-size: 15px; line-height: 40px; }
[dir="rtl"] .gallery .main .ribbon { font-size: 22px; line-height: 42px; }
/* the home page's filters (Shopify: a collection's tag filters), as the edition picker's buttons */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; }
.filters button { font: 500 14px/1 var(--body); padding: 10px 16px; border-radius: 40px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
:lang(ar) .filters button { font-size: 15px; }
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.filters-empty { margin: 0; padding: 40px 0; text-align: center; color: var(--muted); }
.game .labels { margin: -4px 0 18px; }
.game .label { box-shadow: 0 0 0 1px var(--line); }
.product .info { padding-top: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product h3 { font-size: 20px; }
:lang(ar) .product h3 { font: 400 26px/1.3 var(--display); }
.product h3 a { text-decoration: none; }
.product h3 a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.product .alt { font: 400 15px var(--body); color: var(--muted); margin-inline-start: 6px; unicode-bidi: isolate; }
.product .kind { color: var(--muted); }
.product .price { font-size: 16px; font-weight: 500; margin: 2px 0 16px; }
.product .editions { margin-bottom: 20px; }
.product .buy { margin-top: auto; display: flex; align-items: center; gap: 22px; }
.product .buy .link { font-size: 14px; }
.btn.order { min-width: 180px; }   /* Order does nothing yet: the shop is a preview */
.game .btn.order { margin-bottom: 30px; }
.game .btn.soon { margin-bottom: 10px; }
.soon-note { margin: 0 0 30px; font-size: 14px; color: var(--muted); }
/* a game sold in a bundle too: the bundle's picture and a link to it, under Order (Shopify: a recommendation block) */
.bundle-offer { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; margin: 0 0 30px; padding: 14px;
  background: var(--soft); border-inline-start: 3px solid var(--accent); }
.bundle-offer .pic { display: block; aspect-ratio: 10 / 7; background: var(--media); }
.bundle-offer .pic img { width: 100%; height: 100%; object-fit: cover; }
.bundle-offer b { display: block; margin-bottom: 2px; }
.bundle-offer p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.label.bundle { background: #000; color: var(--white); box-shadow: none; }

/* a game's section, as a product page: the gallery, then the details */
.game { padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 7vw, 90px); }
/* a game's page: the trail back to the shop, over the game */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 18px; font-size: 13.5px; color: var(--muted); }
:lang(ar) .crumbs { font-size: 14.5px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.crumbs [aria-current] { color: var(--ink); }
.game .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.gallery { position: sticky; top: 100px; }
.gallery .main { position: relative; aspect-ratio: 10 / 7; background: var(--media); overflow: hidden; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.gallery .main button {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: #000; font-size: 20px; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.gallery .prev { inset-inline-start: 12px; }
.gallery .next { inset-inline-end: 12px; }
.gallery .thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 10px; }
.gallery .thumbs button { padding: 0; border: 0; cursor: pointer; aspect-ratio: 10 / 7; overflow: hidden; background: var(--media); box-shadow: inset 0 0 0 1px transparent; opacity: .7; transition: opacity .15s; }
.gallery .thumbs button:hover { opacity: 1; }
.gallery .thumbs button[aria-current="true"] { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.game .text h1 { font-size: clamp(34px, 3.8vw, 50px); margin-bottom: 14px; }
:lang(ar) .game .text h1, .game .text h1:lang(ar) { font: 400 clamp(42px, 4.6vw, 62px)/1.3 var(--display); letter-spacing: 0; }
.game .text h1:lang(en) { font-family: var(--body); font-weight: 700; letter-spacing: -.01em; }
.game .lede { font-size: 17px; margin: 0 0 24px; }
.game .note { margin: 10px 0 26px; font-size: 14px; opacity: .8; min-height: 1.65em; }
.game .text h2 { font: 700 16px/1.2 var(--body); margin-bottom: 10px; }
.game ol { margin: 0 0 24px; padding-inline-start: 22px; display: grid; gap: 6px; }
.game ol li::marker { font-weight: 700; }
.specs { margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; border-block: 1px solid; border-color: inherit; }
.specs div { padding: 12px 0; padding-inline-end: 22px; margin-inline-end: 22px; border-inline-end: 1px solid; border-color: inherit; }
.specs div:last-child { border: 0; margin: 0; padding-inline-end: 0; }
.specs dt { font-size: 12px; opacity: .7; }
.specs dd { margin: 0; font-weight: 500; }

/* each game's colour, as an accent only (its eyebrow, list markers, picked options, a rule over its section), taken
   from the game's own art (the user, 2026-10-29): the main colours of its box or deck picture (k-means), one signature
   colour each, its lightness moved (hue kept) to read on the page: 4.5:1 on off-white in light mode, 7:1 on black in
   dark mode. Afish: the ticket's red (#7c2e2c). IYKYK: the cinema's night navy (#252b36). Under Production: the
   spotlights' amber (#cda173; its blues are the other games' navies). Kabeer el Hara: the box's indigo (#3b4367). */
.game { border-top: 4px solid var(--accent); }
.game .eyebrow, .game ol li::marker { color: var(--accent); }
.game .editions input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--white); }
.game .gallery .thumbs button[aria-current="true"] { outline-color: var(--accent); }
.game.afish { --accent: #7c2e2c; }
.game.iykyk { --accent: #252b36; }
.game.under-production { --accent: #996937; }
.game.kabeer-el-hara { --accent: #3b4367; }
.game.movie-bundle { --accent: var(--brand); }   /* the bundle: the brand's red, the shop's own */
:root[data-theme="dark"] .game.afish { --accent: #d2817f; }
:root[data-theme="dark"] .game.iykyk { --accent: #8896ae; }
:root[data-theme="dark"] .game.under-production { --accent: #cda173; }
:root[data-theme="dark"] .game.kabeer-el-hara { --accent: #8d96be; }
:root[data-theme="dark"] .game.movie-bundle { --accent: #f08a8c; }
:root[data-theme="dark"] .game .editions input:checked + span { color: #000; }
:root[data-theme="dark"] .game .parts input:checked + span { color: #000; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .game.afish { --accent: #d2817f; }
  :root:not([data-theme="light"]) .game.iykyk { --accent: #8896ae; }
  :root:not([data-theme="light"]) .game.under-production { --accent: #cda173; }
  :root:not([data-theme="light"]) .game.kabeer-el-hara { --accent: #8d96be; }
  :root:not([data-theme="light"]) .game.movie-bundle { --accent: #f08a8c; }
  :root:not([data-theme="light"]) .game .editions input:checked + span { color: #000; }
  :root:not([data-theme="light"]) .game .parts input:checked + span { color: #000; }
}
.game .editions input:checked + span :is(b, small) { color: inherit; }

/* reasons (multicolumn) */
.reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
.reason svg { width: 36px; height: 36px; color: var(--link); margin-bottom: 16px; }
.reason h3 { font-size: 17px; margin-bottom: 8px; }
.reason p { margin: 0; color: var(--muted); font-size: 14px; }
:lang(ar) .reason p { font-size: 15px; }

/* rich text */
.rich { text-align: center; max-width: 720px; margin: 0 auto; }
.rich h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; }
:lang(ar) .rich h2 { font-size: clamp(36px, 4vw, 52px); }
.rich p { color: var(--muted); margin: 0 auto 28px; max-width: 560px; }
.rich .actions { justify-content: center; }

/* footer */
footer.site { background: var(--black); color: rgba(252, 252, 252, .78); border-top: 1px solid var(--line); padding: 60px 0 30px; font-size: 14px; }
footer.site .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 36px 28px; }
/* contact details: a small label over each */
footer.site .contact ul { gap: 10px; }
footer.site .contact li span { display: block; font-size: 12px; color: rgba(255, 255, 255, .5); }
footer.site .contact bdi, footer.site .contact a { color: #fff; }
footer.site h3 { color: #fff; font-size: 15px; margin-bottom: 14px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
footer.site .about p { margin: 14px 0 18px; max-width: 320px; }
footer.site .logo b { color: #fff; }
footer.site .lang { color: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .25); }
footer.site .lang:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
footer.site .bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .55); }

@media (max-width: 989px) {
  .mainnav { display: none; }
  header.site .wrap { grid-template-columns: 1fr auto; gap: 8px; min-height: 64px; }
  header.site .tools { justify-self: end; }
  .game .wrap { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .reasons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 749px) {
  .announce { font-size: 12px; }
  :lang(ar) .announce { font-size: 13px; }
  .logo b { font-size: 22px; }
  .logo img { width: 32px; height: 32px; }
  header.site .lang span { display: none; }
  header.site .lang { padding: 8px; }
  /* the banner's words go under its picture, as Dawn does on a phone */
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .hero picture { order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .hero picture img { width: 100%; margin: 0; }
  .hero .box { padding: 10px 0 40px; }
  .hero p { font-size: 15.5px; }
  .grid { grid-template-columns: 1fr; gap: 40px; }
  .gallery .main button { display: none; }
  .specs { grid-template-columns: 1fr; }
  .specs div { border-inline-end: 0; margin: 0; padding: 8px 0; border-bottom: 1px solid; border-color: inherit; }
  .reasons { grid-template-columns: 1fr; gap: 28px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  footer.site .about { grid-column: 1 / -1; }
  .btn { width: 100%; }
  .product .buy { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product .media img { transition: none; }
  .announce .track { animation: none; }
  .announce .set[aria-hidden] { display: none; }
  .announce .ticker { overflow-x: auto; }
}

/* the movie challenge (koshkal3ab#9), on L'Affiche's and IYKYK's pages: the price box above Order (the price, a
   discount code, the price after it), the pop-up in the game's own look, and a floating button to open it again.
   L'Affiche's pop-up is its ticket: cream (#F5DDBA, Afish's own; the store never uses it) and its red; IYKYK's is
   the cinema at night: navy, the flipped title in red on a white sign, as on its cards. */
.price-box { margin: 0 0 18px; }
.price-box .prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.price-box .price-label { font-size: 13px; color: var(--muted); }
.price-box .now { font-size: 26px; font-weight: 700; }
.price-box .was { color: var(--muted); font-size: 17px; }
.price-box.discounted .now { color: var(--link); }
.price-box .off { font: 600 13px/1 var(--body); padding: 6px 9px; border-radius: 40px; background: var(--brand); color: var(--white); }
.price-box .code-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.price-box .code-form div { display: flex; gap: 8px; max-width: 360px; }
.price-box .code-form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: 500 15px var(--body); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.price-box .code-form .btn { min-height: 44px; padding: 0 18px; width: auto; }
.price-box .code-msg { margin: 6px 0 0; min-height: 1.4em; font-size: 13.5px; }
.code-msg.ok { color: var(--ink); } .code-msg.bad, .promo .bad { color: var(--link); }
.price-box .link, .promo .link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

.promo-fab { position: fixed; z-index: 950; bottom: 18px; inset-inline-end: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: 0; border-radius: 40px; cursor: pointer; background: var(--brand); color: var(--white);
  font: 600 14px/1 var(--body); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
:lang(ar) .promo-fab { font-size: 15px; }
.promo-fab:hover { transform: translateY(-1px); }

.promo { --p-bg: #fff; --p-ink: #000; --p-muted: rgba(0, 0, 0, .65); --p-line: rgba(0, 0, 0, .14);
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 24px 22px; border: 0;
  background: var(--p-bg); color: var(--p-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center; }
.promo::backdrop { background: rgba(0, 0, 0, .55); }
.promo.afish { --p-bg: #f5ddba; --p-ink: #3a1514; --p-muted: rgba(58, 21, 20, .72); --p-line: rgba(124, 46, 44, .3); --p-accent: #a32023;
  border-top: 6px solid #7c2e2c; background-image: radial-gradient(circle at 0 50%, transparent 9px, #f5ddba 10px), radial-gradient(circle at 100% 50%, transparent 9px, #f5ddba 10px);
  background-size: 51% 100%; background-position: left, right; background-repeat: no-repeat; }
.promo.iykyk { --p-bg: #1b2030; --p-ink: #fcfcfc; --p-muted: rgba(252, 252, 252, .72); --p-line: rgba(252, 252, 252, .2); --p-accent: #ffd36b;
  border-top: 6px solid #a32023; }
.promo .x { position: absolute; top: 10px; inset-inline-end: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none;
  color: var(--p-ink); font-size: 26px; line-height: 1; cursor: pointer; }
.promo .x:hover { background: rgba(127, 127, 127, .18); }
.promo .eyebrow { color: var(--p-accent); margin-bottom: 6px; }
.promo h2 { font-size: 24px; margin: 0 0 8px; color: var(--p-ink); }
:lang(ar) .promo h2 { font-size: 30px; }
.promo .intro { margin: 0 0 16px; color: var(--p-muted); font-size: 14.5px; }
.promo .poster { display: block; width: auto; height: min(300px, 40dvh); aspect-ratio: 2 / 3; margin: 0 auto 16px; image-rendering: pixelated;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); border: 4px solid #fff; }
.promo .clue { margin: 4px auto 18px; padding: 18px 16px; max-width: 340px; background: #fff; color: #c8102e; border: 3px solid #ffd36b;
  box-shadow: 0 0 0 4px #a32023, 0 0 22px rgba(255, 211, 107, .45); font: 400 28px/1.25 var(--display); }
.promo .clue:lang(en) { font: 800 24px/1.25 var(--body); }
.promo .guess { display: flex; gap: 8px; }
.promo .guess input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; font: 500 16px var(--body); border: 1px solid var(--p-line);
  background: #fff; color: #000; }
.promo .guess .btn { min-height: 46px; padding: 0 20px; width: auto; }
.promo .feedback { min-height: 1.5em; margin: 8px 0 4px; font-size: 14px; }
.promo.iykyk .bad, .promo.iykyk .feedback.bad { color: #ffb3b4; }
.promo .hints { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.promo .hints li { padding: 6px 10px; background: rgba(127, 127, 127, .14); }
.promo .hint-btn { font-size: 14px; color: var(--p-ink); }
.promo .hint-btn:disabled { opacity: .55; cursor: default; text-decoration: none; }
.promo .state { margin: 6px 0 16px; font-size: 16px; }
.promo .state b { color: var(--p-accent); }
.promo .spin { display: inline-block; width: 16px; height: 16px; margin-inline-end: 8px; vertical-align: -3px; border: 2px solid var(--p-line);
  border-top-color: var(--p-ink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.promo .code-box { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px;
  border: 2px dashed var(--p-accent); }
.promo .code-box span { font-size: 13px; color: var(--p-muted); }
.promo .code-box b { font-size: 22px; letter-spacing: .08em; }
.promo .note { margin: 10px 0 0; font-size: 12.5px; color: var(--p-muted); }
.promo .use, .promo .retry { width: 100%; }
.promo .again { display: block; margin: 12px auto 0; font-size: 14px; color: var(--p-ink); }
.promo input.shake { animation: shake .35s; border-color: var(--brand); }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .promo input.shake, .promo .spin { animation: none; } }
@media (max-width: 749px) {
  .promo { padding: 22px 16px 18px; }
  .promo-fab { bottom: 12px; inset-inline-end: 12px; }
  .promo .guess .btn, .price-box .code-form .btn { width: auto; }
}