/* sg-ux-quick (2026-10-06) — scene player / chapters UX fixes. Global, loaded from App.razor. */

/* «Далее» loading state (set instantly by js/sg-ux.js) */
#root_frame .scene-next-btn[data-sg-busy="1"] {
    cursor: progress;
    filter: saturate(0.85) brightness(0.95);
}
#root_frame .scene-next-btn[data-sg-busy="1"]::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border: 2.5px solid rgba(255, 255, 255, 0.95);
    border-right-color: transparent;
    border-radius: 50%;
    animation: sg-ux-spin 0.7s linear infinite;
}
@keyframes sg-ux-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #root_frame .scene-next-btn[data-sg-busy="1"]::after { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* Captions for ○ / ⚙ below 1280px (icons alone were unclear on phones) */
.scene-hud-short { display: none; }
@media (max-width: 1279px) {
    #root_frame .scene-topbar .scene-tool-hide,
    #root_frame .scene-topbar .scene-tool-settings {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 1px !important;
        width: auto !important;
        min-width: 44px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        line-height: 1 !important;
    }
    #root_frame .scene-topbar .scene-tool-hide > span[aria-hidden="true"],
    #root_frame .scene-topbar .scene-tool-settings > span[aria-hidden="true"] {
        font-size: 15px;
        line-height: 1;
    }
    #root_frame .scene-topbar .scene-hud-short {
        display: block;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0;
        white-space: nowrap;
    }
}
@media (max-width: 359px) {
    #root_frame .scene-topbar .scene-hud-short { font-size: 9px; }
}

/* Cookie banner never covers onboarding / chapter finale / guest lock card: it waits until they are closed */
body:has([data-sg-blocking-overlay]) .sg-cookie-banner {
    display: none !important;
}

/* Chapter list (/watch): completion state */
.sg-page .chapter-card { position: relative; }
.sg-page .chapter-card .chapter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin: 0 0 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.4;
}
.sg-page .chapter-card .chapter-badge.is-done { background: #e7f6ec; color: #17663a; }
.sg-page .chapter-card .chapter-badge.is-next { background: #fff0ec; color: #b4232d; }
.sg-page .chapter-card.is-done .chapter-image img { filter: saturate(0.85); }
.sg-page .chapter-card.is-next {
    outline: 3px solid var(--coral, #f84953);
    outline-offset: 3px;
    border-radius: 18px;
}
.sg-page .chapter-card.is-done .chapter-action .button.primary {
    background: white;
    color: var(--ink, #1d1d1f);
    border: 1px solid #e6e1d9;
}

/* Chapter finale (CompleteSceneModal) */
.complete-scene-modal-card { max-height: calc(var(--app-viewport-height, 100dvh) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.sg-finale-sticker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px auto 0;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: linear-gradient(110deg, #fff4d6, #ffe1ea);
    color: #5a2a00;
    font-weight: 800;
    font-size: 0.95rem;
    width: fit-content;
    max-width: 100%;
}
.sg-finale-sticker .sg-finale-sticker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #ffd86f 60%, #ffbf3c);
    box-shadow: 0 6px 16px rgba(255, 191, 60, 0.45);
    font-size: 24px;
    animation: sg-ux-pop 0.5s ease-out;
}
@keyframes sg-ux-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.sg-finale-checklist {
    list-style: none;
    margin: 12px auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 520px;
}
.sg-finale-checklist li { margin: 0; }
.sg-finale-checklist .sg-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #e6e1d9;
    background: #fff;
    color: #1d1d1f;
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.2;
}
.sg-finale-checklist .sg-check.is-done { background: #e7f6ec; border-color: #bfe6cc; color: #17663a; }
.sg-finale-checklist button.sg-check { cursor: pointer; }
.sg-finale-checklist button.sg-check:hover { border-color: #f84953; }
.sg-finale-checklist .sg-check-mark { font-size: 1rem; }
.complete-scene-modal-stage {
    position: relative;
    width: 100%;
    height: clamp(150px, 30vh, 300px);
    overflow: hidden;
}
.complete-scene-modal-stage > img.complete-scene-modal-town { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.complete-scene-modal-stage .complete-scene-modal-hero-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.complete-scene-modal-stage .complete-scene-modal-hero-wrap img { height: 100%; width: auto; }
.complete-scene-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
    background: #fff;
}
@media (max-height: 700px) {
    .complete-scene-modal-stage { height: clamp(110px, 22vh, 200px); }
}

/* Guest lock card «Попроси взрослого» (non-web games) */
.sg-lock-card {
    width: min(360px, calc(100vw - 32px));
    border-radius: 24px;
    background: #fff;
    color: #1d1d1f;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.sg-lock-card h2 { margin: 6px 0 8px; font-size: 1.5rem; font-weight: 900; }
.sg-lock-card p { margin: 0 0 16px; font-size: 1rem; line-height: 1.5; }
.sg-lock-card .sg-lock-emoji { font-size: 44px; line-height: 1; }
.sg-lock-card button {
    min-height: 48px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #f84953;
    color: #fff;
    font-weight: 800;
}

/* «Такой главы нет» (404 /watch/{id}) */
.watch-player-notfound {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: #fff;
    background: radial-gradient(circle at 50% 20%, rgba(248, 73, 83, 0.25), transparent 50%), #0a0618;
}
.watch-player-notfound .sg-404-emoji { font-size: 64px; line-height: 1; }
.watch-player-notfound h1 { margin: 0; font-size: 2rem; font-weight: 900; }
.watch-player-notfound p { margin: 0; max-width: 420px; font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.watch-player-notfound a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 26px;
    border-radius: 999px;
    background: linear-gradient(110deg, #f84953, #ff9b73);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

/* ===== ux-fix-1358 ===================================================================================== */

/* Item 5: compact cookie banner on phones (was ~200 px tall at 390 px and covered the games panel on /watch/N and
   the chapter-2 card on /watch). sg-ux.js publishes the real height as --sg-cookie-h / html.sg-cookie-visible. */
@media (max-width: 639px) {
    .sg-cookie-banner {
        left: 8px !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .sg-cookie-banner > .min-w-0 { flex: 1 1 auto; }
    .sg-cookie-banner > .min-w-0 > div:first-child { display: none !important; } /* «🍪 МЫ ИСПОЛЬЗУЕМ COOKIE» title */
    .sg-cookie-banner > .min-w-0 > p {
        margin-top: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
    .sg-cookie-banner > button {
        padding: 10px 16px !important;
        min-height: 44px;
    }
}
/* In the player the long legal sentence is shortened further (links stay). */
@media (max-width: 639px) {
    body:has(#root_frame) .sg-cookie-banner > .min-w-0 > p { font-size: 11px !important; }
}

/* Reserve space for the banner while it is visible, so the end of the page can be scrolled clear of it. The player
   is a fixed full-viewport surface: lift its bottom controls instead of padding the body. */
html.sg-cookie-visible body:not(:has(#root_frame)) {
    padding-bottom: var(--sg-cookie-h, 0px);
}
@media (max-width: 639px) {
    html.sg-cookie-visible #root_frame .scene-side-nav {
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--sg-cookie-h, 0px)) !important;
    }
    html.sg-cookie-visible #root_frame .scene-offer {
        bottom: calc(92px + env(safe-area-inset-bottom) + var(--sg-cookie-h, 0px)) !important;
    }
    html.sg-cookie-visible #root_frame #scene_subtitles {
        bottom: calc(104px + env(safe-area-inset-bottom) + var(--sg-cookie-h, 0px)) !important;
    }
    html.sg-cookie-visible #root_frame .scene-fs-btn {
        bottom: calc(84px + env(safe-area-inset-bottom) + var(--sg-cookie-h, 0px)) !important;
    }
}

/* Item 2: before the Blazor circuit is connected the prerendered «Далее» cannot react; show it as "waking up"
   instead of silently ignoring taps. */
#root_frame:not([data-sg-interactive="1"]) .scene-next-btn {
    opacity: 0.6;
    cursor: progress;
}

/* Item 11: map «Дальше: Глава N →» bar — above the cookie banner, and hidden while the highlighted next node itself
   is on screen (sg-map.js toggles .is-next-visible), so it never sits on top of the cards it points to. */
@media (max-width: 799px) {
    .sg-map .sg-map-sticky-wrap {
        bottom: calc(12px + env(safe-area-inset-bottom) + var(--sg-cookie-h, 0px)) !important;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .sg-map.is-next-visible .sg-map-sticky-wrap {
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
    }
}

/* ux-fix-1358 item 10: the guest lock overlay uses Tailwind z-[96] / backdrop-blur-[2px], which are NOT in the prebuilt
   output.css, so the overlay had z-index:auto and the active frame (z-30) sat on top of the card: «Продолжить историю
   без игры» could not be tapped. Plain-CSS equivalent (no Tailwind rebuild needed). */
[data-sg-blocking-overlay="guest-lock"] {
    z-index: 96;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}