/* ══════════════════════════════════════════════════════════════════
   /play/: the hub for quizzes, games and the piano
   The headline on the left with the promise and the numbers beside it.
   Then the three doors as one pinned story: the door texts scroll past
   on the left while a single stage stays on the right, its colour
   washing from quizzes gold to games coral to piano lilac as each door
   arrives, and its screen changing with it (the answer screen rising,
   the games dealt out, the keyboard sliding in). Then an index of
   everything, headings staying put while the lists scroll past, and
   the note on leaderboards as the index's last row.
   ══════════════════════════════════════════════════════════════════ */

/* Screenshots of the quiz player and the piano come in each theme: show the one that matches */
.tv--snowy, .tv--midnight { display: none !important; }
:root[data-palette="snowy-owl"] .tv--night, :root[data-palette="midnight"] .tv--night { display: none !important; }
:root[data-palette="snowy-owl"] .tv--snowy, :root[data-palette="midnight"] .tv--midnight { display: block !important; }

/* ── Hero ────────────────────────────────────────────────────────── */
.pl-hero { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 6vw, 88px); }
.pl-hero-in { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) {
    .pl-hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
    .pl-hero .t-hero { font-size: clamp(48px, 5.5vw, 80px); }
    .pl-hero-side { padding-top: 34px; }   /* the eyebrow's height: the lead starts level with the headline */
    .pl-hero .t-hero em { white-space: nowrap; }
}
.pl-hero .t-hero em { display: block; font-style: normal; color: var(--fg-3); }
.pl-hero-side .t-lead { max-width: 26em; }
.js .pl-in { animation: pl-in 1s var(--ease-out) var(--d, 0s) both; }
@keyframes pl-in { from { opacity: 0; transform: translateY(24px); } }

.pl-stats { display: flex; gap: clamp(28px, 4vw, 52px); list-style: none; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.pl-stats li { display: grid; gap: 4px; }
.pl-stats b { font-size: clamp(32px, 3.4vw, 46px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.pl-stats span { font-size: 15px; color: var(--fg-3); }

/* ── The doors: one pinned story ─────────────────────────────────── */
.pl-story { --story-h: min(640px, 78vh); }
.pl-steps { list-style: none; padding-inline: 0; }
.pl-step { --sw: var(--tile-quiz); }
.pl-step--game { --sw: var(--tile-game); }
.pl-step--piano { --sw: var(--tile-piano); }
.pl-kind { display: flex; align-items: center; gap: 10px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; color: var(--fg-2); }
.pl-kind::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sw); }
.pl-step .t-1 { margin-top: 12px; max-width: 12em; font-size: clamp(34px, 4.2vw, 56px); text-wrap: balance; }
.pl-text { margin-top: 16px; max-width: 26em; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--fg-2); }
.pl-step .more { margin-top: 18px; font-size: 19px; }

@media (min-width: 900px) {
    .pl-story .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); }
    .pl-steps { padding-block: 12vh 22vh; }
    .pl-step { min-height: 72vh; }
}

/* The stage: one rounded panel whose colour follows the door you are reading */
.pl-stage {
    position: relative; height: var(--story-h); overflow: hidden;
    border-radius: var(--radius-lg); background: var(--tile-quiz);
    transition: background-color .9s var(--ease);
}
.pl-story[data-active="game"] .pl-stage { background: var(--tile-game); }
.pl-story[data-active="piano"] .pl-stage { background: var(--tile-piano); }
.pl-frames { position: absolute; inset: 0; }
.pl-frame { position: relative; width: 100%; height: 100%; }

.pl-shot {
    display: block; overflow: hidden; border-radius: 16px; background: #0B1A2B;
    box-shadow: 0 0 0 1px rgba(22,22,26,.08), 0 30px 60px -24px rgba(22,22,26,.5);
}
.pl-shot img { display: block; width: 100%; height: auto; }

/* Quizzes: the answer screen rises out of the bottom edge, running off the right */
.pl-shot--quiz {
    position: absolute; left: 7%; top: 50%; width: 96%;
    border-radius: 18px 0 0 18px;
    transform: translate3d(0, -32%, 0); transition: transform 1.1s var(--ease-out) .1s;
}
.pl-frame--quiz.is-on .pl-shot--quiz { transform: translate3d(0, -50%, 0); }

/* Games: three screens, stacked, then dealt out */
.pl-frame--game .pl-shot {
    position: absolute; left: 15%; top: 26%; width: 68%;
    transition: transform 1s var(--ease-out);
}
.pl-frame--game .pl-shot img { aspect-ratio: 16 / 10; object-fit: cover; }
.pl-deck-1 { z-index: 1; }
.pl-deck-2 { z-index: 2; }
.pl-deck-3 { z-index: 3; }
.pl-frame--game.is-on .pl-deck-1 { transform: translate3d(-18%, -38%, 0) rotate(-6deg); }
.pl-frame--game.is-on .pl-deck-2 { transform: translate3d(20%, -12%, 0) rotate(5deg); transition-delay: .08s; }
.pl-frame--game.is-on .pl-deck-3 { transform: translate3d(-4%, 40%, 0); transition-delay: .16s; }

/* Piano: the keyboard slides in from the right edge and runs off it */
.pl-shot--piano {
    position: absolute; top: 50%; left: 9%; width: 112%;
    border-radius: 16px 0 0 16px;
    transform: translate3d(34%, -50%, 0); transition: transform 1.1s var(--ease-out) .1s;
}
.pl-frame--piano.is-on .pl-shot--piano { transform: translate3d(0, -50%, 0); }

/* Phones: each door carries its own colour and screen */
.pl-inline { position: relative; display: block; overflow: hidden; margin-top: 24px; padding: 28px 0 0 24px; border-radius: 22px; background: var(--sw); }
.pl-inline-shot { display: block; overflow: hidden; border-radius: 14px 0 0 0; box-shadow: 0 20px 40px -20px rgba(22,22,26,.5); background: #0B1A2B; }
.pl-inline-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .pl-inline { display: none; } }
.pl-inline--quiz .pl-inline-shot { width: 104%; }
.pl-inline--game .pl-inline-shot { width: 108%; }
.pl-inline--piano .pl-inline-shot { width: 150%; }

/* ── The index ───────────────────────────────────────────────────── */
.pl-index-head { margin-bottom: clamp(48px, 6vw, 88px); }
.pl-index-head .t-display em { font-style: normal; color: var(--fg-3); }
.pl-area { display: grid; gap: 20px; padding-block: 36px clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
    .pl-area { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
    .pl-area-head { position: sticky; top: 28px; align-self: start; }
}
.pl-area-head { display: grid; justify-items: start; gap: 2px; }
.pl-area-head .more { padding-block: 10px; }
.pl-area-title {
    display: flex; align-items: center; gap: 14px;
    font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600;
}
.pl-area-title::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); }
.pl-area--quiz  { --sw: var(--tile-quiz); }
.pl-area--game  { --sw: var(--tile-game); }
.pl-area--piano { --sw: var(--tile-piano); }
.pl-area-note { padding-block: 10px; font-size: 17px; color: var(--fg-3); }

.pl-list { list-style: none; }
.pl-list li + li { border-top: 1px solid var(--line); }
.pl-list a {
    display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 4px 24px;
    padding: 18px 12px; margin-inline: -12px; border-radius: 16px; color: inherit;
    transition: background-color .25s var(--ease);
}
.pl-list a:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pl-list a:hover { background: var(--bg-2); } }
.pl-list a:focus-visible { outline-offset: -2px; }
.pl-thumb {
    display: block; width: 112px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px;
    background: var(--bg-3); box-shadow: 0 0 0 1px var(--line);
}
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pl-list a:hover .pl-thumb img { transform: scale(1.06); } }
.pl-item { display: grid; gap: 4px; min-width: 0; }
.pl-item b { justify-self: start; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.2; font-weight: 600; letter-spacing: -0.016em; color: var(--fg); }
.pl-item b[lang="ar"] { letter-spacing: 0; line-height: 1.4; }
.pl-item > span { font-size: 16px; line-height: 1.42; color: var(--fg-2); }
.pl-tag { font-size: 14px; color: var(--fg-3); white-space: nowrap; text-align: right; }
.pl-tag .st--new { color: var(--fg-2); }

.pl-area-body { display: grid; gap: 28px; min-width: 0; }
.pl-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
@media (min-width: 1100px) { .pl-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pl-modes > div { padding: 18px 0 8px; border-top: 1px solid var(--line); }
.pl-modes dt { font-size: 17px; font-weight: 600; color: var(--fg); }
.pl-modes dd { margin: 6px 0 0; font-size: 15px; line-height: 1.42; color: var(--fg-2); }

/* The note: the last row of the index, the button inline after it */
.pl-area--note { padding-bottom: 0; }
.pl-note { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; min-width: 0; }
.pl-note-text { flex: 1 1 30em; max-width: 40em; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; color: var(--fg-2); }
.pl-note-text strong { color: var(--fg); }
.pl-note .btn { flex: none; }

/* ── Phones ──────────────────────────────────────────────────────── */
@media (max-width: 899px) {
    .pl-doors { padding-bottom: 24px; }
    .pl-steps { gap: 72px; }
    .pl-area--note .pl-area-head { display: none; }
}
@media (max-width: 600px) {
    .pl-list a { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; padding-block: 16px; }
    .pl-thumb { width: 76px; grid-row: span 2; align-self: start; }
    .pl-tag { grid-column: 2; text-align: left; }
    .pl-modes { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .js .pl-in { animation: none; }
    .pl-stage, .pl-frame--game .pl-shot, .pl-shot--quiz, .pl-shot--piano { transition: none; }
}