/* Option B — streaming service. loop.tv bones, SACC skin. Landscape phone first (844×390). */

.screen { position: fixed; inset: 0; }
[hidden] { display: none !important; } /* ids below would otherwise out-rank the UA hidden rule */

/* Backdrop is the flat body colour (--bg #141414, Netflix's own). 4 Oct 2026: blurred blue/yellow blobs and the starfield removed;
   a navy→black gradient was tried the same day and dropped for this flat grey at the client's pick. */

/* ── Power ─────────────────────────────────────────── */
#power { display: grid; place-items: center; text-align: center; overflow: hidden; }
.power__center { position: relative; display: grid; justify-items: center; gap: 10px; }
/* The round yellow power button (the box's ON/OFF) with the one-colour Dojan head inside (#i-power). 5 Oct 2026: the
   head was tried as the whole button, a big yellow silhouette, and taken back at the client's request the same day. */
.power__knob { width: 84px; height: 84px; margin-top: 6px; animation: pulse 2.4s var(--ease) infinite; }
.power__knob svg { width: 38px; height: 38px; }
@keyframes pulse { 0%, 100% { box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25), 0 0 0 0 rgba(254,219,0,.45); } 60% { box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25), 0 0 0 22px rgba(254,219,0,0); } }
.power__hint { margin-top: 2px; color: var(--text); }
.power__lang { position: absolute; top: calc(12px + var(--safe-t)); inset-inline-end: calc(16px + var(--safe-r)); height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,0.08); }   /* EN / عربي, shared/i18n.js */

/* ── Intro: the opening sting, Netflix-style ────────── */
/* 5 Oct 2026, user's picks: wordmark + ribbons, ~3 s, first ON per page load only, a tap skips. SACC slams in (0.3 s),
   TV drops (0.6 s), TV rushes at the camera (1.6 s) and breaks into ribbons that clear to the billboard underneath.
   b.js adds the ribbons and removes the box at 3 s; sfx.js "intro" hits on the same beats, so move both together. */
#intro { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; overflow: hidden; background: var(--bg); animation: intro-bg 0.4s 2.2s linear both; }   /* under .rotate (50) */
.intro__mark { font-size: min(22vh, 12vw); line-height: 1; white-space: nowrap; animation: intro-push 1.3s 0.3s linear both; }
.intro__mark b, .intro__mark span { display: inline-block; font-weight: inherit; will-change: transform, opacity; }
.intro__mark b { animation: intro-slam 0.35s 0.3s cubic-bezier(.2, .9, .3, 1) both, intro-fade 0.3s 1.6s ease-in forwards; }
.intro__mark span {
  color: var(--yellow); margin-left: 0.12em; text-shadow: 0 0 0.25em rgba(254, 219, 0, 0.35);
  transform-origin: 28% 60%;   /* on the T's stem, so the rush flies into yellow, not the gap between the letters */
  animation: intro-drop 0.45s 0.6s cubic-bezier(.3, 1.5, .5, 1) both, intro-rush 0.7s 1.6s cubic-bezier(.6, 0, .9, .4) forwards;
}
#intro i {   /* one ribbon; b.js sets --x --w --c --dx --d */
  position: absolute; top: -10%; bottom: -10%; left: var(--x); width: var(--w); opacity: 0;
  color: var(--c); background: linear-gradient(transparent, currentColor 25%, currentColor 75%, transparent); box-shadow: 0 0 1vw currentColor;   /* glow: v1's hard bars read as a barcode */
  animation: intro-ribbon 0.9s var(--d) cubic-bezier(.5, 0, .6, 1) both;
}
@keyframes intro-bg { to { background-color: transparent; } }
@keyframes intro-push { to { transform: scale(1.06); } }
@keyframes intro-slam { from { opacity: 0; transform: scale(1.6); filter: blur(12px); } }
@keyframes intro-fade { to { opacity: 0; } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(-70%); } }
@keyframes intro-rush { 70% { opacity: 1; } to { opacity: 0; transform: scale(30); } }
/* skewed to the italic's slant, so the ribbons carry on from the T's stem the camera just flew into */
@keyframes intro-ribbon { 0% { opacity: 0; transform: skewX(-10deg) scaleY(0.3); } 25% { opacity: 1; transform: skewX(-10deg); } 100% { opacity: 0; transform: translateX(var(--dx)) skewX(-10deg) scaleX(4); } }

/* ── Home shell ─────────────────────────────────────── */
/* Arabic mirrors the layout (shared/i18n.js sets dir="rtl"): sides are logical (inset-inline-*, margin-inline-*), so one rule
   serves both directions. --safe-l / --safe-r stay inside them: the stand's frame is the same both sides. */
#home { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden; } /* minmax(0) stops wide content (the Create tab) from widening the column */

/* Top bar over the billboard picture: logo, text tabs (Netflix: active white, the rest dimmed), knobs on the right.
   5 Oct 2026: was a centred pill of tabs; text tabs came with layout B (the billboard) and fit four tabs on small phones. */
.top {
  position: relative; z-index: 2; height: calc(52px + var(--safe-t));
  padding: var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));
  display: flex; align-items: center; gap: 26px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 30px; height: auto; }
.brand .h { font-size: 20px; line-height: 1; }
.brand .h b { color: var(--yellow); font-weight: inherit; margin-left: 0.1em; }
.tabs { display: flex; gap: 20px; }
.tabs button { height: 36px; font-weight: 700; font-size: 15px; color: rgba(255,255,255,0.62); text-shadow: 0 1px 8px rgba(0,0,0,0.6); transition: color 0.2s; }
.tabs button.on { color: #fff; } /* active tab: white, not yellow (colour rule in tokens.css) */
@media (max-width: 760px) { .top { gap: 18px; } .tabs { gap: 14px; } .tabs button { font-size: 14px; } }
.top__right { margin-inline-start: auto; display: flex; gap: 8px; }
.icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); display: grid; place-items: center; }
.icon svg { width: 20px; height: 20px; fill: currentColor; }

.tab { position: relative; min-height: 0; }

/* ── Channels / Games: billboard (layout B of design/layouts/, chosen 5 Oct 2026; replaced the centred carousel).
   The focused item's picture fills the screen under the top bar, hero text and Play on the left, a thumbnail row
   along the bottom. The hero sits ABOVE the row (bottom-anchored), so a two-line title can never run into it. ── */
.bb { position: static; --th: clamp(60px, 20vh, 84px); }   /* static: its layers position against #home, so the picture runs under the top bar */
/* three layers: the poster, the muted preview clip fading in over it (b.js preview()), then the shading for the text.
   Poster and clip share the same crop, and the poster is the clip's frame zero, so the fade-in doesn't jump. */
.bb__bg { position: absolute; inset: 0; background: var(--poster) var(--pos, center 30%) / cover no-repeat #141414; }   /* --pos: channels.js pos */
.bb__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.bb__vid.on { opacity: 1; }
/* titled game covers (channels.js cover:true): no title/tagline of ours over their painted one, and only the top and
   bottom shading (for the tabs and the row), so the cover's own title isn't dimmed by the left-hand fade */
.bb.is-cover .bb__title, .bb.is-cover .bb__tag, .bb.is-cover .bb__hero .eyebrow { display: none; }   /* Play is enough; the cover says what it is */
.bb.is-cover .bb__shade { background: linear-gradient(0deg, #141414 0%, rgba(20,20,20,0.55) 26%, rgba(20,20,20,0) 46%), linear-gradient(180deg, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0) 20%); }
/* a cover placed below the bar (channels.js pos): fade its top edge into the bar instead of a hard line */
.bb.is-low .bb__shade { background: linear-gradient(0deg, #141414 0%, rgba(20,20,20,0.55) 26%, rgba(20,20,20,0) 46%), linear-gradient(180deg, #141414 calc(48px + var(--safe-t)), rgba(20,20,20,0) calc(80px + var(--safe-t))); }
.bb.play-right .bb__hero { left: auto; right: calc(20px + var(--safe-r)); width: auto; }   /* channels.js play: "right". Physical on purpose: the covers don't mirror in Arabic */
.thumb--cover b { display: none; } .thumb--cover::after { display: none; }
.bb__shade {
  position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(90deg, #141414 0%, rgba(20,20,20,0.86) 32%, rgba(20,20,20,0) 68%),
    linear-gradient(0deg, #141414 0%, rgba(20,20,20,0.6) 30%, rgba(20,20,20,0) 55%),
    linear-gradient(180deg, rgba(20,20,20,0.7) 0%, rgba(20,20,20,0) 24%);
}
[dir="rtl"] .bb__shade { transform: scaleX(-1); }   /* Arabic: the dark side follows the text to the right (the other layers are vertical) */
/* gradient-poster items (Corner Watch, Create, the games) have no photo: their art stands in on the right */
.bb__art { position: absolute; inset-inline-end: calc(6% + var(--safe-r)); top: 14%; bottom: 30%; width: 40%; display: grid; place-items: center; pointer-events: none; }
.bb__art .dojan { height: 100%; width: auto; }
.bb__art .art-sac { font-size: clamp(64px, 24vh, 110px); }
.bb__art .art-plus { font-size: clamp(100px, 34vh, 160px); }
.bb__hero { position: absolute; z-index: 1; inset-inline-start: calc(20px + var(--safe-l)); width: min(48%, 420px); bottom: calc(var(--th) + 44px + var(--safe-b)); }
.bb__hero .eyebrow { color: rgba(255,255,255,0.75); margin: 0 0 6px; }
.bb__title { font-size: clamp(30px, 11vh, 46px); margin: 0 0 6px; }
.bb__tag { margin: 0 0 14px; color: rgba(255,255,255,0.82); }
/* short screens (Safari's bar up, small phones): a two-line title ran up into the top bar, so drop the tagline */
@media (max-height: 360px) { .bb__tag { display: none; } .bb__title { font-size: clamp(28px, 10vh, 46px); margin-bottom: 12px; } }
.bb__hero .btn svg { width: 16px; height: 16px; fill: currentColor; }
.bb__row { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(10px + var(--safe-b)); }
.bb__row .eyebrow { margin: 0 0 4px; margin-inline-start: calc(20px + var(--safe-l)); color: #fff; }
.bb__thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 3px calc(20px + var(--safe-r)) 3px calc(20px + var(--safe-l)); scroll-padding: 0 calc(20px + var(--safe-l)); }
.bb__thumbs::-webkit-scrollbar { display: none; }
.thumb { position: relative; flex: 0 0 calc(var(--th) * 16 / 9); height: var(--th); border-radius: 8px; overflow: hidden; background: var(--poster) center / cover no-repeat #1a1a1a; opacity: 0.72; transition: opacity 0.2s; }
.thumb.focus { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 60%); }
.thumb__art { position: absolute; inset: 0; }
/* absolute so the % height resolves against the thumb (an <img> grid item falls back to its natural size) */
.thumb__art .dojan { position: absolute; left: 50%; top: 50%; height: 66%; width: auto; transform: translate(-50%, -58%); }
.thumb__art .art-sac, .thumb__art .art-plus { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); }
.thumb__art .art-sac { font-size: 20px; } .thumb__art .art-plus { font-size: 36px; }
.thumb b { position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 1; font-size: 12px; text-align: start; }

/* ── Event ───────────────────────────────────────────── */
/* Netflix title page (5 Oct 2026, replaced a stats grid + coloured pills the client found too busy).
   White/grey type; the only colour is the Book button and Dojan's own ears. Headline scales with height so the
   block fits a phone with Safari's bar up (844×340) without scrolling. */
.event {
  position: relative; height: 100%; overflow: hidden; display: grid; align-content: center;
  padding: 4px calc(20px + var(--safe-r)) calc(4px + var(--safe-b)) calc(20px + var(--safe-l));
}
.event__lead { position: relative; z-index: 1; max-width: 54%; }
.event__title { font-size: clamp(26px, 9vh, 38px); margin: 0 0 12px; max-width: 14ch; }
.event__when { margin: 0; font-size: 16px; font-weight: 600; }
.event__facts { margin: 4px 0 18px; font-size: 14px; color: var(--muted); }
.event__cta { display: flex; gap: 10px; }
/* the one piece of art: Dojan in a soft spotlight, cut off by the bottom edge like a hero still */
.event__art {
  position: absolute; inset-inline-end: calc(8px + var(--safe-r)); bottom: 0; width: 42%; height: 100%; pointer-events: none;
  display: grid; place-items: end center; background: radial-gradient(closest-side at 50% 64%, #353535, rgba(20,20,20,0));
}
.event__art .dojan { height: 94%; width: auto; transform: translateY(8%); }

/* ── Create ──────────────────────────────────────────── */
.create {
  height: 100%; padding: 6px calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(16px + var(--safe-l));
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px 12px; overflow-y: auto;
}
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.card__head { display: flex; align-items: center; gap: 12px; }
.card__head h3 { font-size: 22px; margin: 0; }
.card__head .eyebrow { margin: 0 0 2px; }
.card__body { margin: 0; color: var(--muted); font-size: 14px; }
.knob--sm { width: 34px; height: 34px; } .knob--sm svg { width: 14px; height: 14px; }
.field { display: flex; gap: 8px; }
.field input {
  flex: 1; min-width: 0; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: #0e0e0e; color: var(--text); font: inherit; outline: none;
}
.field input:focus { border-color: var(--yellow); }
.field__msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--text); }
.field__msg.err { color: #ff6b63; }
/* Create: the box's own moiré (client, 5 Oct 2026: "the one we have on the box itself"). The lid's olive TV screen with its
   red and yellow bezel, the interleaved head cut from the box PDF (shared/moire-head.svg: 4 frames of Dojan turning his
   head) and the sheet of lines over it at the box's pitch: 21.770 per 805.49 of the art's width = 2.7027cqw, bars 75 %
   (16.328 / 21.770). Each quarter-pitch the sheet slides shows the next frame. The sheet overhangs the art by exactly
   2 art-widths a side (74 whole pitches), so it covers the whole screen and stays in phase with the art. */
.card--moire { padding-bottom: 10px; }
.moire { position: relative; height: clamp(110px, 38vh, 170px); display: grid; place-items: center; border-radius: var(--r-sm); background: #5e6b3a; overflow: hidden; touch-action: none; cursor: grab; }
.moire::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 6px var(--yellow); }
.moire__art { position: relative; height: 90%; aspect-ratio: 805.49 / 740; container-type: inline-size; background: url(shared/moire-head.svg) center / 100% 100% no-repeat; }
.moire__lines { position: absolute; top: -50%; bottom: -50%; left: -200%; right: -200%; pointer-events: none; background: linear-gradient(90deg, #1d1d1c 75%, transparent 75%) 0 0 / 2.7027cqw 100% repeat-x; }
.stickers { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.stickers::-webkit-scrollbar { display: none; }
.stickers img { height: 58px; width: auto; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); transform: rotate(var(--tilt, -3deg)); }
.stickers img:nth-child(even) { --tilt: 3deg; }

/* Player styles live in ../shared/tokens.css (.player) — mounted by SACC.mountPlayer. */