/* Kinokritiker PLAY
   Editorial skin: the game keeps its interaction model but follows the
   light, red-accented visual system of the main Kinokritiker experience. */

.play-page {
    --play-surface: var(--cc-surface);
    --play-subtle: var(--cc-bg-2);
    --play-line: var(--cc-line);
    --play-text: var(--cc-ink);
    --play-copy: var(--cc-ink-2);
    --play-muted: #5b6573;
    --play-accent: var(--cc-red);
    --play-accent-hover: var(--cc-red-2);
    background: var(--cc-bg);
}

.play-page .play-shell {
    min-height: 72vh;
    padding: 54px 0 84px;
    background: var(--cc-bg);
    color: var(--play-text);
}
.play-page .play-shell h1,
.play-page .play-shell h2,
.play-page .play-shell h3 { color: var(--play-text); }
.play-page .play-stage { max-width: 1040px !important; }
.play-page .play-stage__head { align-items: center; margin-bottom: 32px; }
.play-page .play-stage__head h1,
.play-page .play-result__hero h1 {
    font-size: clamp(2.45rem, 5.4vw, 4.8rem);
    line-height: .96;
    letter-spacing: -.055em;
}
.play-page .play-stage__head h1::after,
.play-page .play-result__hero h1::after,
.play-page .play-clubs__hero h1::after,
.play-page .play-club__hero h1::after,
.play-page .play-club-invite h1::after,
.play-page .play-arena__hero h1::after,
.play-page .play-duel-result__hero h1::after,
.play-page .play-duel-invite h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin-top: 16px;
    border-radius: 2px;
    background: var(--play-accent);
}
.play-page .play-stage__head p,
.play-page .play-result__hero p,
.play-page .play-arena__hero p,
.play-page .play-duel-result__hero p,
.play-page .play-clubs__hero p,
.play-page .play-club__hero p,
.play-page .play-club-invite > p { color: var(--play-copy); }
.play-page .play-eyebrow { color: var(--play-accent); }

.play-page .play-day {
    border-color: var(--play-line);
    border-radius: var(--cc-radius);
    background: var(--play-surface);
    box-shadow: 0 8px 24px rgba(20,24,33,.06);
}
.play-page .play-day span { color: var(--play-accent); }
.play-page .play-day strong { color: var(--play-text); }
.play-page .play-progress__meta { color: var(--play-muted); }
.play-page .play-progress__track { overflow: hidden; background: #d6dbe1; }
.play-page .play-progress__track span {
    position: relative;
    overflow: hidden;
    background: var(--play-accent);
    transition: width .55s cubic-bezier(.2,.75,.25,1);
}
.play-page .play-progress__track span::after,
.play-page .play-center-status__meter i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
    transform: translateX(-120%);
    animation: playProgressShine 1.8s ease-out .18s 1;
}

.play-page .play-feedback,
.play-page .play-notice {
    border-color: var(--play-line);
    background: var(--play-surface);
    color: var(--play-copy);
    box-shadow: 0 6px 18px rgba(20,24,33,.05);
}
.play-page .play-feedback strong { color: var(--play-text); }
.play-page .play-feedback p { color: var(--play-copy); }
.play-page .play-feedback[data-play-feedback] { animation: playFeedbackIn .34s cubic-bezier(.2,.75,.25,1) both; }
.play-page .play-feedback.is-correct { border-left-color: #23824d; background: #edf8f1; }
.play-page .play-feedback.is-wrong,
.play-page .play-notice.is-error { border-left-color: var(--play-accent); background: #fff0f1; }
.play-page .play-feedback.is-signal { border-left-color: var(--cc-steel); background: #eef3f8; }

.play-page .play-card,
.play-page .play-gate,
.play-page .play-result__dna,
.play-page .play-result__recommendations,
.play-page .play-result__pending,
.play-page .play-share-card,
.play-page .play-season-card,
.play-page .play-season-resolution,
.play-page .play-clubs__list,
.play-page .play-clubs__create,
.play-page .play-club-ranking,
.play-page .play-club__members,
.play-page .play-club__controls,
.play-page .play-club-share,
.play-page .play-club-invite,
.play-page .play-arena-dashboard,
.play-page .play-arena__rules article,
.play-page .play-arena__launch,
.play-page .play-result__challenge,
.play-page .play-duel-invite,
.play-page .play-duel-wait,
.play-page .play-versus article,
.play-page .play-compatibility,
.play-page .play-duel-review__item,
.play-page .play-duel-scoreboard,
.play-page .cc-play-profile,
.play-page .cc-arena-profile {
    border-color: var(--play-line);
    background: var(--play-surface);
    color: var(--play-text);
    box-shadow: var(--cc-shadow);
}
.play-page .play-card,
.play-page .play-gate,
.play-page .play-result__dna,
.play-page .play-result__recommendations,
.play-page .play-result__pending,
.play-page .play-share-card,
.play-page .play-season-card,
.play-page .play-season-resolution,
.play-page .play-arena-dashboard,
.play-page .play-arena__rules article,
.play-page .play-arena__launch,
.play-page .play-result__challenge,
.play-page .play-duel-invite,
.play-page .play-duel-wait,
.play-page .play-versus article,
.play-page .play-compatibility { border-radius: var(--cc-radius); }

.play-page .play-card { padding: clamp(24px, 4.5vw, 46px); }
.play-page .play-card__meta { margin-bottom: 24px; color: var(--play-muted); }
.play-page .play-card__image { background: var(--play-subtle); }
.play-page .play-card__hint { color: var(--play-copy); }
.play-page .play-option {
    min-height: 68px;
    border-color: #cfd5dc;
    border-radius: 11px;
    background: var(--play-subtle);
    color: var(--play-text);
}
.play-page .play-option:hover,
.play-page .play-option:focus-visible {
    border-color: var(--play-accent);
    background: #fff0f1;
    color: var(--play-text);
    box-shadow: 0 0 0 3px rgba(196,30,38,.1);
}
.play-page .play-option > span { background: #cfd5dd; color: var(--cc-steel); }
.play-page .play-option:hover > span,
.play-page .play-option:focus-visible > span { background: var(--play-accent); color: #fff; }
.play-page .play-option.is-pressed {
    border-color: var(--play-accent);
    background: #ffe5e7;
    transform: scale(.985);
}
.play-page .play-option.is-pressed > span { background: var(--play-accent); color: #fff; }
.play-page .play-options[aria-busy="true"] .play-option { pointer-events: none; }
.play-page .play-options[aria-busy="true"] .play-option:not(.is-pressed) { opacity: .62; }
.play-page .play-feedback:focus { outline: 3px solid rgba(196,30,38,.24); outline-offset: 3px; }

.play-page .play-gate__visual { background: linear-gradient(145deg, var(--play-accent), #8e151c); }
.play-page .play-gate__content h2 { color: var(--play-text); }
.play-page .play-gate__content p { color: var(--play-copy); }
.play-page .play-gate__content ul { color: var(--play-text); }
.play-page .play-gate__content li::before { color: var(--play-accent); }
.play-page .play-gate__content > small { color: var(--play-muted); }
.play-page .play-gate__actions .btn--ghost,
.play-page .play-result__actions .btn--ghost,
.play-page .play-arena__actions .btn--ghost,
.play-page .play-arena__launch .btn--ghost,
.play-page .play-arena__hero p + .btn,
.play-page .play-clubs__hero .btn--ghost,
.play-page .play-club-invite__actions .btn--ghost,
.play-page .play-duel-wait > .btn--ghost,
.play-page .play-duel-invite > .btn--ghost {
    color: var(--play-text);
    border-color: var(--play-line);
    background: var(--play-surface);
}
.play-page .play-gate__actions .btn--ghost:hover,
.play-page .play-result__actions .btn--ghost:hover,
.play-page .play-arena__actions .btn--ghost:hover,
.play-page .play-arena__launch .btn--ghost:hover,
.play-page .play-arena__hero p + .btn:hover {
    color: var(--play-text);
    border-color: #c9cfd6;
    background: var(--play-subtle);
}

.play-page .play-result-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
    gap: clamp(20px, 4vw, 44px);
    align-items: stretch;
    margin-bottom: 24px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(196,30,38,.16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 10% 8%, rgba(196,30,38,.12), transparent 34%),
        linear-gradient(135deg, #fff, #f6f8fb);
    box-shadow: 0 28px 80px rgba(9,16,28,.1);
}
.play-page .play-result-hero__copy p { max-width: 680px; color: var(--play-copy); line-height: 1.62; }
.play-page .play-result-hero__score {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(145deg, var(--play-accent), #8e151c);
    color: #fff;
    box-shadow: 0 18px 46px rgba(196,30,38,.2);
}
.play-page .play-result-hero__score span { font: 900 clamp(3rem, 8vw, 5rem)/.9 var(--cc-mono); letter-spacing: -.08em; color: #fff; }
.play-page .play-result-hero__score strong { color: #fff; font-size: 1.1rem; }
.play-page .play-result-hero__score small { color: rgba(255,255,255,.82); line-height: 1.45; }
.play-page .play-result-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.play-page .play-result__stats article {
    border-color: var(--play-line);
    border-radius: var(--cc-radius);
    background: var(--play-surface);
    box-shadow: 0 8px 24px rgba(20,24,33,.06);
}
.play-page .play-result__stats span { color: var(--play-text); }
.play-page .play-result__stats strong { color: var(--play-muted); }
.play-page .play-result-next {
    margin: 28px 0;
    padding: clamp(22px, 3.5vw, 32px);
    border: 1px solid var(--play-line);
    border-radius: var(--cc-radius);
    background: rgba(255,255,255,.82);
    box-shadow: var(--cc-shadow);
}
.play-page .play-result-next__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.play-page .play-result-next__card {
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--play-line);
    border-radius: 22px;
    background: var(--play-subtle);
    color: var(--play-text);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.play-page .play-result-next__card:hover { transform: translateY(-2px); border-color: rgba(196,30,38,.36); background: #fff0f1; }
.play-page article.play-result-next__card:hover { transform: none; border-color: var(--play-line); background: var(--play-subtle); }
.play-page .play-result-next__card span { color: var(--play-accent); font: 900 .72rem var(--cc-mono); letter-spacing: .08em; text-transform: uppercase; }
.play-page .play-result-next__card strong { display: block; margin-top: 10px; color: var(--play-text); }
.play-page .play-result-next__card p { margin: 8px 0 0; color: var(--play-copy); font-size: .9rem; line-height: 1.45; }
.play-page .play-result-next__card.is-muted { opacity: .68; }
.play-page #daily-duel { scroll-margin-top: 120px; }
.play-page .play-share-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
    padding: clamp(22px, 4vw, 34px);
}
.play-page .play-share-card__mark {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: #fff0f1;
    color: var(--play-accent);
    font: 900 1.4rem var(--cc-mono);
}
.play-page .play-share-card__copy h2 { margin: 4px 0 7px; }
.play-page .play-share-card__copy p { margin: 0; color: var(--play-copy); line-height: 1.55; }
.play-page .play-share-card__copy strong { color: var(--play-text); }
.play-page .play-share-card__action { display: grid; justify-items: end; gap: 7px; }
.play-page .play-share-card__action .cc-btn { min-height: 48px; }
.play-page .play-share-card__action > a { color: var(--play-accent); font-weight: 700; }
.play-page .play-share-card__action p { min-height: 1.2em; margin: 0; color: var(--play-muted); font-size: .75rem; }
.play-page .play-section-head h2 { color: var(--play-text); }
.play-page .play-dna-chips span {
    border-color: #cfd5dc;
    background: var(--play-subtle);
    color: var(--play-text);
}
.play-page .play-result__dna > p,
.play-page .play-result__pending p { color: var(--play-copy); }
.play-page .play-recommendation {
    min-height: 235px;
    border-color: var(--play-line);
    background: var(--play-subtle);
    color: var(--play-text) !important;
}
.play-page .play-recommendation:hover {
    border-color: var(--play-accent);
    background: #fff;
    box-shadow: 0 8px 24px rgba(20,24,33,.08);
}
.play-page .play-recommendation__score { color: var(--play-accent); }
.play-page .play-recommendation h3 { color: var(--play-text); }
.play-page .play-recommendation p { color: var(--play-copy); }

.play-page .play-season-card__head h2,
.play-page .play-season-resolution__head h2,
.play-page .play-season-resolution__next h3,
.play-page .play-season-card__components strong,
.play-page .play-season-card__foot div strong,
.play-page .play-season-resolution__facts strong { color: var(--play-text); }
.play-page .play-season-card__head p,
.play-page .play-season-resolution__head p,
.play-page .play-season-card__components p,
.play-page .play-season-resolution__facts small,
.play-page .play-season-resolution__next p,
.play-page .play-season-resolution__action span { color: var(--play-copy); }
.play-page .play-season-card__total { border-color: rgba(196,30,38,.28); background: #fff0f1; }
.play-page .play-season-card__total strong { color: var(--play-text); }
.play-page .play-season-card__total span,
.play-page .play-season-card__components small,
.play-page .play-season-card__label { color: var(--play-accent); }
.play-page .play-season-card__components article,
.play-page .play-season-resolution__facts > div,
.play-page .play-season-resolution__next,
.play-page .play-season-resolution__action {
    border-color: var(--play-line);
    background: var(--play-subtle);
}
.play-page .play-season-card__foot { border-top-color: var(--play-line); }
.play-page .play-season-card__foot div span,
.play-page .play-season-card__foot p,
.play-page .play-season-resolution__facts dt,
.play-page .play-season-resolution__status time { color: var(--play-muted); }
.play-page .play-season-resolution__status { border-color: #b8dec6; background: #edf8f1; }
.play-page .play-season-resolution__status strong { color: #176b3a; }
.play-page .play-season-resolution__next { border-left-color: var(--play-accent); }
.play-page .play-season-resolution__action,
.play-page .play-season-resolution__action strong { color: var(--play-text); }
.play-page .play-season-resolution__action:hover {
    border-color: var(--play-accent);
    color: var(--play-text);
    background: #fff0f1;
}

.play-page .play-clubs,
.play-page .play-club,
.play-page .play-club-invite { color: var(--play-text); }
.play-page .play-clubs__hero h1,
.play-page .play-club__hero h1,
.play-page .play-club-invite h1 { color: var(--play-text); }
.play-page .play-club-list__item,
.play-page .play-club-ranking__list li,
.play-page .play-club-members article {
    border-color: var(--play-line);
    background: var(--play-subtle);
    color: var(--play-text);
}
.play-page .play-club-list__item:hover { border-color: var(--play-accent); background: #fff0f1; }
.play-page .play-club-list__item strong,
.play-page .play-club-ranking__person span { color: var(--play-text); }
.play-page .play-club-list__item small,
.play-page .play-club-ranking .play-section-head p,
.play-page .play-club-ranking__heading small,
.play-page .play-club-ranking__empty,
.play-page .play-club-members small { color: var(--play-muted); }
.play-page .play-club-list__item em,
.play-page .play-club__status { color: #176b3a; background: #e2f3e8; }
.play-page .play-club-list__item em.is-closed,
.play-page .play-club__status.is-closed { color: var(--play-copy); background: var(--play-subtle); }
.play-page .play-club-share { border-color: rgba(196,30,38,.3); background: #fff7f7; }
.play-page .play-club-share__row input,
.play-page .play-invite-share input { border-color: var(--play-line); background: #fff; color: var(--play-text); }
.play-page .play-club__back { color: var(--play-text) !important; background: var(--play-subtle); }
.play-page .play-club__back:hover { background: #d6dbe1; }
.play-page .play-club-ranking__heading > span { color: #176b3a; background: #e2f3e8; }
.play-page .play-club-ranking__list li::marker { color: var(--play-accent); }
.play-page .play-club-ranking__list dl div,
.play-page .play-club__danger-form label { color: var(--play-copy); }
.play-page .play-club-ranking__list dd { color: var(--play-text); }
.play-page .play-club-ranking__archive details { border-top-color: var(--play-line); }
.play-page .play-club-ranking__archive summary::after { color: var(--play-accent); }
.play-page .play-club-ranking__archive summary small { color: var(--play-muted); }
.play-page .play-club-members__avatar { background: var(--play-accent); }
.play-page .play-club__controls .btn.is-danger { color: #fff; border-color: var(--play-accent); background: var(--play-accent); }
.play-page .play-club__controls .btn.is-danger:hover { background: var(--play-accent-hover); }
.play-page .play-club-invite__decline { color: var(--play-copy); }
.play-page .play-club-share noscript p,
.play-page .play-club-invite noscript p { color: var(--play-accent); }

.play-page .play-arena__hero h1,
.play-page .play-duel-result__hero h1 { color: var(--play-text); }
.play-page .play-arena__reel {
    border-color: rgba(196,30,38,.28);
    background: radial-gradient(circle, #fff0f1 0 58%, transparent 59%), var(--play-surface);
    box-shadow: 0 14px 36px rgba(20,24,33,.08);
}
.play-page .play-arena__reel span { color: var(--play-text); }
.play-page .play-arena__reel small { color: var(--play-accent); }
.play-page .play-arena__rules article { min-height: 210px; }
.play-page .play-arena__rules article > span { color: var(--play-accent); }
.play-page .play-arena__rules p,
.play-page .play-arena__launch p,
.play-page .play-result__challenge p,
.play-page .cc-arena-profile > p { color: var(--play-copy); }
.play-page .play-arena__launch,
.play-page .play-result__challenge { background: #fff7f7; }
.play-page .play-arena__fineprint { color: var(--play-muted); }
.play-page .play-section-head--split > a { color: var(--play-copy); }
.play-page .play-arena-stats div,
.play-page .cc-play-profile__stats div {
    border-color: var(--play-line);
    background: var(--play-subtle);
}
.play-page .play-arena-stats strong,
.play-page .cc-play-profile__stats strong { color: var(--play-text); }
.play-page .play-arena-stats span,
.play-page .cc-play-profile__stats span { color: var(--play-muted); }
.play-page .play-arena-feed .play-section-head h3 { color: var(--play-text); }
.play-page .play-arena-feed__item {
    border-color: var(--play-line);
    background: var(--play-subtle);
    color: var(--play-text);
}
.play-page .play-arena-feed__item:hover { border-color: var(--play-accent); }
.play-page .play-arena-feed__item.is-expired {
    opacity: 1;
    border-color: var(--play-line);
    background: #eef0f2;
}
.play-page .play-arena-feed__item strong { color: var(--play-text); }
.play-page .play-arena-feed__item small,
.play-page .play-arena-feed__item time { color: var(--play-muted); }
.play-page .play-arena-feed__icon { background: #fff0f1; color: var(--play-accent); }
.play-page .play-arena-feed__result { color: var(--play-accent); }
.play-page .cc-play-profile h2,
.play-page .cc-arena-profile h2 { color: var(--play-text); }
.play-page .cc-play-profile__traits span { background: var(--play-subtle); color: var(--play-text); }
.play-page .cc-play-profile > p { color: var(--play-copy); }

.play-page .play-duel__arena-link { color: var(--play-copy); }
.play-page .play-duel-scoreboard__live { background: #fff0f1; color: var(--play-accent); }
.play-page .play-duel-scoreboard div strong { color: var(--play-text); }
.play-page .play-duel-scoreboard div small { color: var(--play-muted); }
.play-page .play-duel-scoreboard b { color: var(--play-accent); }
.play-page .play-duel-invite__mark { border-color: rgba(196,30,38,.32); background: #fff0f1; }
.play-page .play-duel-invite__mark span { color: var(--play-accent); }
.play-page .play-duel-invite > p,
.play-page .play-duel-wait > p { color: var(--play-copy); }
.play-page .play-duel-invite ul { color: var(--play-text); }
.play-page .play-duel-invite li::before { color: var(--play-accent); }
.play-page .play-duel-invite__hint,
.play-page .play-invite-share small { color: var(--play-muted); }
.play-page .play-duel-wait__icon { background: #fff0f1; color: var(--play-accent); }
.play-page .play-invite-share label { color: var(--play-copy); }
.play-page .play-versus article.is-viewer { border-color: var(--play-accent); background: #fff0f1; }
.play-page .play-versus article strong { color: var(--play-text); }
.play-page .play-versus article span,
.play-page .play-versus article small,
.play-page .play-versus > div small { color: var(--play-muted); }
.play-page .play-versus > div span { color: var(--play-accent); }
.play-page .play-compatibility__score { border-color: #d5dce5; border-top-color: var(--cc-steel); }
.play-page .play-compatibility__score span { color: var(--play-text); }
.play-page .play-compatibility__score small,
.play-page .play-contrast-list span { color: var(--play-muted); }
.play-page .play-compatibility__copy > p,
.play-page .play-duel-review__body { color: var(--play-copy); }
.play-page .play-contrast-list li { border-bottom-color: var(--play-line); }
.play-page .play-duel-review__item { box-shadow: none; }
.play-page .play-duel-review__item summary > span,
.play-page .play-duel-review__item summary > small { color: var(--play-muted); }
.play-page .play-duel-review__choices p { background: var(--play-subtle); }
.play-page .play-duel-review__choices strong { color: var(--play-text); }
.play-page .play-duel-review__body a { color: var(--play-accent); }
.play-page .play-duel-review__choices .is-correct { color: #23824d; }
.play-page .play-duel-review__choices .is-wrong { color: var(--play-accent); }

@media (max-width: 760px) {
    .play-page .play-shell { padding-top: 32px; padding-bottom: 60px; }
    .play-page .play-stage__head h1,
    .play-page .play-result__hero h1 { font-size: clamp(2.3rem, 11vw, 3.6rem); }
    .play-page .play-result-hero { grid-template-columns: 1fr; padding: 22px; border-radius: 24px; }
    .play-page .play-result-hero__score { min-height: 160px; }
    .play-page .play-result-stats,
    .play-page .play-result-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .play-page .play-share-card { grid-template-columns: 1fr; align-items: start; }
    .play-page .play-share-card__action { width: 100%; justify-items: start; }
    .play-page .play-share-card__action .cc-btn { width: 100%; }
}

@media (max-width: 480px) {
    .play-page .play-card,
    .play-page .play-gate,
    .play-page .play-result__dna,
    .play-page .play-result__recommendations,
    .play-page .play-result__pending,
    .play-page .play-season-card,
    .play-page .play-season-resolution,
    .play-page .play-clubs__list,
    .play-page .play-clubs__create,
    .play-page .play-club-ranking,
    .play-page .play-club__members,
    .play-page .play-club__controls,
    .play-page .play-club-share,
    .play-page .play-club-invite,
    .play-page .play-arena-dashboard,
    .play-page .play-arena__rules article,
    .play-page .play-arena__launch,
    .play-page .play-result__challenge,
    .play-page .play-duel-invite,
    .play-page .play-duel-wait,
    .play-page .play-versus article,
    .play-page .play-compatibility { border-radius: 12px; }
    .play-page .play-day { width: 100%; }
    .play-page .play-result-stats,
    .play-page .play-result-next__grid { grid-template-columns: 1fr; }
    .play-page .play-result-next__card { min-height: auto; }
    .play-page .play-option { min-height: 62px; }
}

/* Fehlerjagd — eigenständiges PLAY-Modul ohne Film-DNA-Kopplung */
.play-page .mistake-game__stage { max-width: 920px !important; }
.play-page .mistake-game__head { align-items: center; }
.play-page .mistake-game__card { margin-top: 24px; }
.play-page .mistake-game__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.play-page .mistake-game__verdict { font-weight: 800; color: var(--play-text); }
.play-page .play-feedback a { display: inline-flex; min-height: 44px; align-items: center; color: var(--play-accent); font-weight: 750; }
.play-page .mistake-game__back { display: flex; justify-content: space-between; gap: 18px; margin-top: 28px; }
.play-page .mistake-game__back a { min-height: 44px; display: inline-flex; align-items: center; color: var(--play-accent); font-weight: 700; }
.play-page .mistake-game-entry {
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
    margin: 32px 0; padding: 28px; border: 1px solid var(--play-line);
    border-left: 4px solid var(--play-accent); border-radius: var(--cc-radius);
    background: var(--play-surface); box-shadow: var(--cc-shadow);
}
.play-page .mistake-game-entry h2 { margin: 6px 0 8px; font-size: clamp(1.45rem, 3vw, 2.2rem); }
.play-page .mistake-game-entry p { margin: 0; max-width: 620px; color: var(--play-copy); line-height: 1.6; }
.play-page .mistake-game-entry .cc-btn { flex: 0 0 auto; }
.play-page .mistake-game .cc-btn--red,
.play-page .mistake-game-entry .cc-btn--red { color: #fff !important; }
.play-page .mistake-game__save { margin: 30px 0; }

@media (max-width: 680px) {
    .play-page .mistake-game__options { grid-template-columns: 1fr; }
    .play-page .mistake-game__back, .play-page .mistake-game-entry { align-items: stretch; flex-direction: column; }
    .play-page .mistake-game-entry .cc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .play-page .play-progress__track span,
    .play-page .play-option,
    .play-page .play-center-card__icon,
    .play-page .play-hub__icon,
    .play-page .play-more-panel > summary::after { transition: none; }
    .play-page .play-option.is-pressed,
    .play-page .play-center-card:hover .play-center-card__icon,
    .play-page .play-center-card:focus-visible .play-center-card__icon,
    .play-page .play-hub__card:hover .play-hub__icon,
    .play-page .play-hub__card:focus-visible .play-hub__icon { transform: none; }
    .play-page .play-feedback[data-play-feedback],
    .play-page .play-more-panel[open] > :not(summary),
    .play-page .play-progress__track span::after,
    .play-page .play-center-status__meter i::after { animation: none; }
}


/* ---- PLAY Center / Daily Film Quiz ----------------------------------- */
.play-page .play-center-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: clamp(20px, 4vw, 44px);
    align-items: stretch;
    margin-bottom: 28px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(196,30,38,.16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 8% 10%, rgba(196,30,38,.12), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,248,251,.9));
    box-shadow: 0 28px 80px rgba(9,16,28,.1);
}
.play-page .play-center-hero__copy { min-width: 0; }
.play-page .play-center-hero__copy p { max-width: 660px; margin-bottom: 0; color: var(--play-copy); line-height: 1.62; }
.play-page .play-center-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.play-page .play-center-hero__actions .cc-btn,
.play-page .play-center-hero__actions .btn { min-height: 48px; }
.play-page .play-center-status {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--play-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(9,16,28,.08);
}
.play-page .play-center-status span,
.play-page .play-center-card span { color: var(--play-accent); font: 900 .74rem var(--cc-mono); letter-spacing: .08em; text-transform: uppercase; }
.play-page .play-center-status strong { color: var(--play-text); font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.04em; }
.play-page .play-center-status small { color: var(--play-muted); }
.play-page .play-center-status__meter { height: 8px; overflow: hidden; border-radius: 999px; background: #d6dbe1; }
.play-page .play-center-status__meter i { position: relative; display: block; height: 100%; overflow: hidden; border-radius: inherit; background: var(--play-accent); }
.play-page .play-center-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}
.play-page .play-center-card {
    position: relative;
    min-height: 172px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--play-line);
    border-radius: 24px;
    background: rgba(255,255,255,.86);
    color: var(--play-text);
    text-decoration: none;
    box-shadow: 0 14px 36px rgba(9,16,28,.07);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.play-page .play-center-card__icon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    color: var(--play-accent);
    transition: transform .2s ease, color .2s ease;
}
.play-page .play-center-card:hover .play-center-card__icon,
.play-page .play-center-card:focus-visible .play-center-card__icon { transform: translateY(-2px) scale(1.04); color: var(--play-accent-hover); }
.play-page .play-center-card:hover { transform: translateY(-2px); border-color: rgba(196,30,38,.36); box-shadow: 0 18px 46px rgba(9,16,28,.1); }
.play-page article.play-center-card:hover { transform: none; border-color: var(--play-line); box-shadow: 0 14px 36px rgba(9,16,28,.07); }
.play-page .play-center-card strong { display: block; margin-top: 10px; color: var(--play-text); font-size: 1.04rem; letter-spacing: -.025em; }
.play-page .play-center-card__status {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 8px;
    padding: 4px 8px;
    border: 1px solid rgba(196,30,38,.18);
    border-radius: 999px;
    background: rgba(196,30,38,.07);
    color: var(--play-accent);
    font: 900 .6rem var(--cc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: top;
}
.play-page .play-center-card.is-muted .play-center-card__status {
    border-color: rgba(100,116,139,.18);
    background: rgba(100,116,139,.08);
    color: var(--play-muted);
}
.play-page .play-center-card p { margin: 8px 0 28px; color: var(--play-copy); font-size: .9rem; line-height: 1.45; }
.play-page .play-center-card em {
    position: absolute;
    right: 16px;
    bottom: 14px;
    color: var(--play-accent);
    font: 900 .95rem var(--cc-mono);
    font-style: normal;
}
.play-page .play-center-card.is-muted { opacity: .7; background: var(--play-subtle); }
.play-page #daily-cut { scroll-margin-top: 120px; }

/* Light-theme contrast closure: override legacy dark PLAY resume styles from cine.css. */
.play-page .play-resume-card {
    border-color: rgba(196,30,38,.22);
    background:
        radial-gradient(circle at 8% 10%, rgba(196,30,38,.10), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,245,246,.96));
    box-shadow: 0 18px 50px rgba(9,16,28,.09);
}
.play-page .play-resume-card h2 { color: var(--play-text); }
.play-page .play-resume-card p { color: var(--play-copy); }
.play-page .play-resume-card__context div {
    border-color: rgba(20,24,33,.10);
    background: rgba(255,255,255,.88);
}
.play-page .play-resume-card__context dt { color: var(--play-muted); }
.play-page .play-resume-card__context dd { color: var(--play-text); }
.play-page .play-resume-card__meter { background: rgba(20,24,33,.10); }
.play-page .play-progress__meta { color: var(--play-muted); }
.play-page .play-progress__meta strong { color: var(--play-text); }

.play-page .play-more-panel {
    margin: 26px 0 24px;
    padding: 14px;
    border: 1px solid var(--play-line);
    border-radius: 22px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 14px 36px rgba(9,16,28,.06);
}
.play-page .play-more-panel > summary {
    position: relative;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--play-text);
    font: 900 .72rem var(--cc-mono);
    letter-spacing: .08em;
    list-style: none;
    text-transform: uppercase;
}
.play-page .play-more-panel > summary::-webkit-details-marker { display: none; }
.play-page .play-more-panel > summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(196,30,38,.08);
    color: var(--play-accent);
    font-size: 1rem;
    transition: transform .2s ease, background .2s ease;
}
.play-page .play-more-panel[open] > summary { margin-bottom: 16px; }
.play-page .play-more-panel[open] > summary::after { content: "–"; transform: rotate(180deg); background: rgba(196,30,38,.13); }
.play-page .play-more-panel[open] > :not(summary) { animation: playPanelReveal .24s ease-out both; }

/* ---- PLAY Hub / Daily Film Quiz -------------------------------------- */
.play-page .play-hub {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: -10px 0 26px;
}
.play-page .play-hub__card {
    min-height: 128px;
    padding: 18px;
    border: 1px solid var(--play-line);
    border-radius: 24px;
    background: rgba(255,255,255,.74);
    color: var(--play-text);
    text-decoration: none;
    box-shadow: 0 18px 44px rgba(9,16,28,.08);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.play-page .play-hub__card:hover {
    transform: translateY(-2px);
    border-color: rgba(196,30,38,.38);
    box-shadow: 0 22px 60px rgba(9,16,28,.12);
}
.play-page .play-hub__card.is-active {
    background: linear-gradient(135deg, #fff, #fff0f1);
    border-color: rgba(196,30,38,.36);
}
.play-page .play-hub__icon {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 0 12px;
    color: var(--play-accent);
    transition: transform .2s ease, color .2s ease;
}
.play-page .play-hub__card:hover .play-hub__icon,
.play-page .play-hub__card:focus-visible .play-hub__icon { transform: translateY(-2px) scale(1.04); color: var(--play-accent-hover); }

@keyframes playFeedbackIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes playPanelReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes playProgressShine {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}
.play-page .play-hub__card span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--play-subtle);
    color: var(--play-accent);
    font: 900 .78rem var(--cc-mono);
}
.play-page .play-hub__status {
    float: right;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid rgba(196,30,38,.18);
    border-radius: 999px;
    background: rgba(196,30,38,.07);
    color: var(--play-accent);
    font: 900 .6rem var(--cc-mono);
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.play-page .play-hub__card.is-muted .play-hub__status {
    border-color: rgba(100,116,139,.18);
    background: rgba(100,116,139,.08);
    color: var(--play-muted);
}
.play-page .play-hub__card strong,
.play-page .play-hub__card small { display: block; }
.play-page .play-hub__card strong { font-size: 1rem; letter-spacing: -.02em; }
.play-page .play-hub__card small { margin-top: 6px; color: var(--play-muted); line-height: 1.35; }
.play-page .play-hub__card.is-muted { opacity: .72; }
.play-page article.play-hub__card:hover { transform: none; border-color: var(--play-line); box-shadow: 0 18px 44px rgba(9,16,28,.08); }

@media (max-width: 900px) {
    .play-page .play-center-hero { grid-template-columns: 1fr; }
    .play-page .play-center-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .play-page .play-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .play-page .play-center-hero { padding: 20px; border-radius: 24px; }
    .play-page .play-center-hero__actions { flex-direction: column; }
    .play-page .play-center-hero__actions .cc-btn,
    .play-page .play-center-hero__actions .btn { width: 100%; justify-content: center; }
    .play-page .play-center-grid,
    .play-page .play-hub { grid-template-columns: 1fr; }
    .play-page .play-center-card,
    .play-page .play-hub__card { min-height: auto; }
}


/* ---- Soundtrack Quiz -------------------------------------------------- */
.play-page .soundtrack-quiz__card {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(18px, 4vw, 32px);
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid var(--play-line);
    border-radius: 32px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 24px 70px rgba(9,16,28,.12);
}
.play-page .soundtrack-quiz__listen,
.play-page .soundtrack-quiz__question { min-width: 0; }
.play-page .soundtrack-quiz__listen h2,
.play-page .soundtrack-quiz__question h2 { margin: 6px 0 10px; color: var(--play-text); }
.play-page .soundtrack-quiz__listen p { color: var(--play-copy); line-height: 1.55; }
.play-page .soundtrack-quiz__listen iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 22px;
    background: #10131a;
    box-shadow: 0 18px 50px rgba(9,16,28,.16);
}
.play-page .soundtrack-quiz__fallback {
    padding: 18px;
    border-radius: 18px;
    background: var(--play-subtle);
}
.play-page .soundtrack-quiz__feedback {
    margin-top: 18px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(34, 139, 84, .25);
    background: #f3fff8;
    color: var(--play-copy);
}
.play-page .soundtrack-quiz__feedback strong { color: var(--play-text); }
.play-page .soundtrack-quiz__feedback p { margin: 8px 0 10px; line-height: 1.55; }
.play-page .soundtrack-quiz__feedback a { color: var(--play-accent); font-weight: 800; }
.play-page .play-option.is-correct { border-color: rgba(34,139,84,.5); background: #f3fff8; }
.play-page .play-option.is-picked-wrong { border-color: rgba(196,30,38,.42); background: #fff0f1; }
.play-page .play-option.is-picked-correct { box-shadow: 0 0 0 3px rgba(34,139,84,.16); }

/* Legacy dark PLAY contrast closure: keep every auxiliary daily/soundtrack
   panel on the light editorial theme after cine.css dark defaults. */
.play-page .play-today-status,
.play-page .play-retention-card,
.play-page .play-mission-board,
.play-page .soundtrack-play-context,
.play-page .mistake-play-context,
.play-page .soundtrack-quiz__next-mission {
    border-color: rgba(196,30,38,.20);
    background:
        radial-gradient(circle at 8% 8%, rgba(196,30,38,.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,248,.94));
    color: var(--play-text);
    box-shadow: 0 14px 38px rgba(9,16,28,.07);
}
.play-page .play-today-status__head h2,
.play-page .play-retention-card h2,
.play-page .play-mission-board .play-section-head h2,
.play-page .soundtrack-play-context h2,
.play-page .mistake-play-context h2,
.play-page .soundtrack-quiz__next-mission h3 { color: var(--play-text); }
.play-page .play-retention-card p,
.play-page .play-mission-card p,
.play-page .soundtrack-play-context p,
.play-page .mistake-play-context p { color: var(--play-copy); }
.play-page .play-retention-card small,
.play-page .play-mission-board .play-section-head p,
.play-page .soundtrack-quiz__share-status { color: var(--play-muted); }
.play-page .play-today-status__item,
.play-page .play-retention-card__stat,
.play-page .play-mission-card,
.play-page .soundtrack-play-context__links a,
.play-page .mistake-play-context__links a,
.play-page .soundtrack-quiz__next-mission a,
.play-page .soundtrack-quiz__next-mission button {
    border-color: rgba(20,24,33,.10);
    background: rgba(255,255,255,.88);
    color: var(--play-text) !important;
    box-shadow: 0 8px 24px rgba(9,16,28,.045);
}
.play-page .play-today-status__item:hover,
.play-page .play-mission-card:hover,
.play-page .soundtrack-play-context__links a:hover,
.play-page .mistake-play-context__links a:hover,
.play-page .soundtrack-quiz__next-mission a:hover,
.play-page .soundtrack-quiz__next-mission button:hover {
    border-color: rgba(196,30,38,.32);
    background: #fff0f1;
}
.play-page .play-today-status__item span,
.play-page .play-retention-card__stat span,
.play-page .play-mission-card span,
.play-page .soundtrack-play-context__links span,
.play-page .mistake-play-context__links span,
.play-page .soundtrack-quiz__next-mission small { color: var(--play-muted); }
.play-page .play-today-status__item strong,
.play-page .play-retention-card__stat strong,
.play-page .play-mission-card strong,
.play-page .soundtrack-play-context__links strong,
.play-page .mistake-play-context__links strong,
.play-page .soundtrack-quiz__next-mission strong { color: var(--play-text); }
.play-page .play-mission-card em { color: var(--play-accent); }
.play-page .play-mission-card.is-muted,
.play-page .play-today-status__item.is-muted { opacity: .74; }
.play-page .play-retention-card .btn--ghost,
.play-page .soundtrack-quiz__result-actions .btn--ghost {
    color: var(--play-text);
    border-color: var(--play-line);
    background: var(--play-surface);
}
.play-page .play-retention-card .btn--ghost:hover,
.play-page .soundtrack-quiz__result-actions .btn--ghost:hover {
    color: var(--play-text);
    border-color: rgba(196,30,38,.32);
    background: #fff0f1;
}

/* Mobile visual correction: the retention card must read like a crisp editorial
   white card, not a washed-out glass panel. Keep contrast explicit. */
.play-page .play-retention-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(196,30,38,.22) !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(9,16,28,.08) !important;
}
.play-page .play-retention-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, var(--play-accent), rgba(196,30,38,.22));
    pointer-events: none;
    z-index: 0;
}
.play-page .play-retention-card > * { position: relative; z-index: 1; }
.play-page .play-retention-card h2 { color: var(--play-text) !important; }
.play-page .play-retention-card p { color: var(--play-copy) !important; }
.play-page .play-retention-card small { color: var(--play-muted) !important; }
.play-page .play-retention-card__stat {
    border-color: rgba(196,30,38,.18) !important;
    background: #fff7f7 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}
.play-page .play-retention-card__stat strong { color: var(--play-text) !important; }
.play-page .play-retention-card__stat span { color: var(--play-muted) !important; }
.play-page .play-retention-card .btn--ghost {
    color: #fff !important;
    border-color: var(--play-accent) !important;
    background: var(--play-accent) !important;
    box-shadow: 0 12px 28px rgba(196,30,38,.18);
}
.play-page .play-retention-card .btn--ghost:hover,
.play-page .play-retention-card .btn--ghost:focus-visible {
    color: #fff !important;
    border-color: var(--play-accent-hover) !important;
    background: var(--play-accent-hover) !important;
}

@media (max-width: 820px) {
    .play-page .soundtrack-quiz__card { grid-template-columns: 1fr; }
}