/* =============================================================
   DengiQuest - lightweight stylesheet (static build, no framework CSS)
   Goal: < 14 KB, zero always-on animations, no background drift.
   ============================================================= */

/* ===== Single-page screen visibility =====
   Only the screen with `is-active` is shown. All
   screens pre-rendered in the DOM, transitions are pure CSS class
   toggles. Zero network round-trips between states. */
.screen { display: none; }
.screen.is-active { display: block; }
[hidden] { display: none !important; }

/* ===== Custom modal ===== */
.q-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 20, 0.76);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow-y: auto;
    animation: qmFade 0.12s linear;
}
@keyframes qmFade { from { opacity: 0; } to { opacity: 1; } }
.q-modal-dialog {
    width: 100%;
    max-width: 360px;
    margin: auto;
}
.q-modal .q-modal-content {
    background:
        radial-gradient(circle at 90% 0%, rgba(68, 215, 195, 0.13), transparent 12rem),
        linear-gradient(180deg, #102f43, #092532);
    border: 1px solid rgba(255, 204, 38, 0.32);
    color: #fff;
    border-radius: 24px;
    text-align: center;
    padding: 22px 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.q-modal .q-modal-content h4 {
    color: var(--gold);
    font-weight: 900;
    margin-top: 4px;
}
.q-modal .q-modal-content.win  h4 { color: var(--win); }
.q-modal .q-modal-content.loss h4 { color: var(--loss); }

.milestone-reward-modal .milestone-kicker {
    margin: 0 0 5px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}
.milestone-reward-modal .milestone-copy {
    margin: 6px 0 12px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.milestone-rewards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 14px;
}
.milestone-rewards span {
    min-width: 0;
    padding: 10px 6px;
    border: 1px solid rgba(255, 215, 0, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
}
.milestone-rewards b {
    display: block;
    color: var(--gold);
    font-size: 20px;
}

:root {
    --bg-top:        #071827;
    --bg-bottom:     #0b3540;
    --bg-card:       rgba(6, 29, 43, 0.84);
    --bg-elev:       rgba(255, 255, 255, 0.07);

    --gold:          #FFCC26;
    --gold-deep:     #F97316;
    --gold-glow:     rgba(255, 204, 38, 0.42);

    --win:           #00E676;
    --loss:          #FF1744;
    --urgent:        #FF1744;
    --hot-pink:      #FF4081;
    --cyan:          #44D7C3;
    --coin-1:        #FFCC26;
    --coin-2:        #F97316;

    --text:          #ffffff;
    --text-muted:    #B3C8D8;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button,
input,
textarea,
select {
    font: inherit;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

/* Defensive media constraint — keeps oversized creatives/images from
   forcing horizontal overflow inside the column. */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* Desktop side-margin treatment.
   Narrow phone-aspect column centered on a dark surface. */
.mp-body {
    background:
        radial-gradient(circle at 15% 8%, rgba(68, 215, 195, 0.12), transparent 28rem),
        radial-gradient(circle at 85% 92%, rgba(255, 204, 38, 0.1), transparent 26rem),
        linear-gradient(180deg, #030b14 0%, #071722 52%, #10142a 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

/* The phone column. Mobile-first responsive: fills width up to 400px on
   narrow phones (full bleed), caps at 400px and centers on wider devices.
   Full width on phones, capped at 400px and centered on wider viewports. */
.mp-app {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    min-height: 100vh;
    /* Reserve bottom space for mobile browser chrome and floating controls. */
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
    position: relative;
    background:
        radial-gradient(circle at 90% 4%, rgba(255, 204, 38, 0.08), transparent 15rem),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

/* A Floor Ad is rendered by Yandex outside the page layout. Add scroll room
   only after the creative is confirmed rendered, so controls can move above
   it without shifting the current viewport or resizing the ad itself. Keep
   that room until Q2 reloads so closing the ad cannot pull the page upward. */
.yan-floor-space .mp-app {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

@media (max-width: 600px) {
    .yan-floor-space .mp-app {
        padding-bottom: calc(30dvh + 60px + env(safe-area-inset-bottom));
    }
}

/* Lift the column on any viewport wider than the column itself */
@media (min-width: 420px) {
    .mp-app {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.04),
            0 24px 80px rgba(0, 0, 0, 0.6),
            0 0 140px rgba(68, 215, 195, 0.14);
    }
}

/* ===== Intro funnel — single-fold ad+question layout =====
   Tuned to fit the entire page (ad + heading + question + 3 options +
   legal footer) inside one viewport on every device down to ~640px
   tall (iPhone SE 5G). No scroll required. */

.intro-pitch {
    padding: 10px 16px 0;
}
.intro-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 9px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: rgba(255, 213, 79, 0.12);
    border: 1px solid rgba(255, 213, 79, 0.42);
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.intro-title {
    color: var(--gold);
    font-weight: 800;
    font-size: 21px;
    margin: 0;
    letter-spacing: 0;
}
.intro-sub {
    color: #fff;
    font-size: 13.5px;
    margin: 4px 0 0;
    line-height: 1.28;
}
.intro-sub b { color: var(--gold); }

.intro-step-two .intro-pitch {
    padding-top: 10px;
}
.intro-step-two .intro-kicker {
    display: none;
}
.intro-step-two .intro-title {
    font-size: 18px;
}
.intro-step-two .intro-sub {
    font-size: 12.5px;
}
.intro-step-two .intro-legal-footer {
    display: none;
}

.intro-success-card {
    text-align: center;
    padding: 24px 22px 22px;
}
.intro-success-check {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    border-radius: 50%;
    background: rgba(0, 230, 118, 0.12);
    border: 1px solid rgba(0, 230, 118, 0.44);
    color: var(--win);
    font-size: 38px;
    font-weight: 900;
    box-shadow: 0 0 24px rgba(0, 230, 118, 0.22);
}
.intro-bridge {
    color: var(--text-muted);
    font-size: 13px;
    margin: 12px 0 0;
}
.intro-bridge b {
    color: var(--gold);
}

.intro-question {
    padding: 4px 16px 6px;
}
.intro-question-text {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 8px 0 10px;
    line-height: 1.25;
}
.intro-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.intro-option {
    display: block;
    width: 100%;
    min-height: 48px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 11px;
    padding: 11px 14px;
    appearance: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
    color: #fff;
    transition: background 0.12s, border-color 0.12s;
}
.intro-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
}
/* Instant tap feedback — the option lights up the moment you tap it,
   not when the server response comes back. */
.intro-option {
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.25s cubic-bezier(.2,.9,.3,1.4);
}
.intro-option.pending {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(0.98);
}
/* Correct/wrong reveal: bounce-in effect so the color change has visual weight */
.intro-option.correct {
    background: var(--win);
    border-color: #fff;
    color: #002211;
    transform: scale(1.04);
    box-shadow: 0 0 18px rgba(0, 230, 118, 0.5);
}
.intro-option.wrong {
    background: var(--loss);
    border-color: #fff;
    color: #fff;
    transform: scale(0.96);
    box-shadow: 0 0 18px rgba(255, 23, 68, 0.45);
}

/* ===== Value-prop / social-proof block ===== */
.value-prop {
    margin: 20px 14px 0;
    padding: 18px 16px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}
.value-prop-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.value-prop-brand {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 900;
    color: #e8fbf7;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.value-prop-brand b {
    color: var(--gold);
    font-weight: 900;
}
.value-prop-logo {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFE680, var(--gold) 55%, var(--gold-deep));
    color: #2a1500;
    font-weight: 900;
    font-size: 17px;
    line-height: 38px;
    text-align: center;
    flex: 0 0 auto;
}
.value-prop-tag {
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25;
}
.value-prop-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.55;
}
.value-prop-list li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 6px;
}
.value-prop-list li::before {
    content: "✓";
    position: absolute;
    left: 4px; top: 0;
    color: var(--gold);
    font-weight: 900;
}
.value-prop-list b { color: var(--gold); }
.value-prop-proof {
    color: var(--gold);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    margin: 6px 0 10px;
}
.value-prop-login {
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-decoration: none;
}
.value-prop-login b { color: var(--gold); }
.value-prop-login:hover { color: #fff; }

/* Tiny legal footer for the intro funnel */
.intro-legal-footer {
    text-align: center;
    padding: 8px 16px 6px;
    font-size: 10.8px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.35;
}
.intro-legal-footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}

/* =========================
   HUD
   ========================= */
.q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}
.q-hud-left { display: flex; align-items: center; gap: 8px; }
.q-hud-right { display: flex; align-items: center; gap: 8px; }

.q-logo {
    display: inline-block;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff url('/assets/img/header-logo.png?v=20260717logo1') center / 82% no-repeat;
    border: 2px solid rgba(255,255,255,0.18);
    box-shadow: 0 1px 8px rgba(0,0,0,0.45), 0 0 18px rgba(255,215,0,0.22);
    text-decoration: none;
}

.q-coin-pill {
    background: rgba(0,0,0,0.4);
    border: 1.5px solid var(--gold);
    color: var(--gold);
    padding: 5px 12px 5px 28px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 14px;
    position: relative;
    min-width: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.q-coin-pill::before {
    content: "";
    position: absolute;
    left: 5px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE680, var(--coin-1) 60%, var(--coin-2));
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}
.q-coin-pill.pop { transform: scale(1.12); transition: transform 0.18s; }

/* XP bar + level pip */
.q-xp-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.35);
    border-radius: 18px;
    padding: 3px 8px 3px 3px;
    border: 1px solid rgba(0, 229, 255, 0.35);
}
.q-level-pip {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--cyan);
    color: #001f24;
    font-weight: 900;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}
.q-xp-bar {
    width: 60px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.q-xp-bar > .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--hot-pink));
    border-radius: 3px;
    width: 0%;
    transition: width 0.6s ease-out;
}

/* =========================
   Streak strip (replaces daily-login modal + ticker)
   Always visible, always available, zero clicks to engage.
   ========================= */
.streak-strip {
    background: linear-gradient(90deg, rgba(255,23,68,0.18), rgba(255,64,129,0.18));
    border-top: 1px solid rgba(255,64,129,0.35);
    border-bottom: 1px solid rgba(255,64,129,0.35);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.streak-strip .streak-fire { color: var(--gold); font-size: 14px; font-weight: 800; }
.streak-strip .streak-count { color: var(--gold); font-weight: 900; }
.streak-strip .streak-cd { color: var(--loss); font-family: 'Courier New', monospace; font-weight: 700; }
.streak-strip .streak-claim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    min-height: 44px;
    background: var(--gold);
    color: #2a1500;
    border: 0;
    padding: 5px 10px;
    font-weight: 800;
    border-radius: 14px;
    font-size: 11px;
    cursor: pointer;
}

/* =========================
   Buttons
   ========================= */
.q-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 13px 26px;
    border-radius: 28px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none !important;
    border: 0;
    cursor: pointer;
    text-align: center;
    transition: transform 0.05s;
    letter-spacing: 0.3px;
    line-height: 1.15;
    text-transform: uppercase;
}
.q-btn:active { transform: scale(0.96); }

.q-btn-gold {
    background: linear-gradient(180deg, #FFE680, var(--gold) 60%, var(--gold-deep));
    color: #2a1500;
    box-shadow: 0 3px 10px rgba(255,215,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.15);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.q-btn-gold:hover { color: #1a0900; }

/* Pulse only fires when user JUST gained the ability to act — */
/* never always-on. Activate by adding .pulse-now to a button.    */
.q-btn-gold.pulse-now { animation: btnPulse 1s ease-in-out 3; }
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(255,215,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.15); }
    50%      { box-shadow: 0 5px 18px rgba(255,215,0,0.8),  inset 0 -2px 0 rgba(0,0,0,0.15); }
}

.q-btn-pink {
    background: linear-gradient(180deg, #FF80AB, var(--hot-pink) 60%, #C2185B);
    color: #fff;
    box-shadow: 0 3px 10px rgba(255,64,129,0.4);
}

.q-btn-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.35);
}

.q-btn-skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    background: transparent;
    color: rgba(255,255,255,0.45);
    border: 0;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: underline !important;
}
.q-btn-skip:hover { color: rgba(255,255,255,0.75); }

.q-btn-block { display: flex; width: 100%; }

/* =========================
   Question / option cards
   ========================= */
.q-question-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px 14px;
    margin: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.q-question-text {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.3;
}
.q-option {
    display: block;
    width: 100%;
    min-height: 48px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 12px 14px;
    appearance: none;
    margin-bottom: 8px;
    cursor: pointer;
    font-weight: 700;
    font: inherit;
    color: #fff;
    line-height: 1.25;
    transition: background 0.12s;
    text-align: center;
}
.q-option:hover { background: rgba(255,255,255,0.16); }
.q-option.correct {
    background: var(--win);
    border-color: #fff;
    color: #002211;
}
.q-option.wrong {
    background: var(--loss);
    border-color: #fff;
    color: #fff;
}

/* =========================
   Tabs
   ========================= */
.q-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin: 0 12px;
    gap: 3px;
}
.q-tab {
    appearance: none;
    border: 0;
    background: transparent;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
    padding: 10px 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 10px 10px 0 0;
    transition: background 0.15s;
}
.q-tab.active {
    color: #fff;
    background: rgba(255,64,129,0.16);
    border-bottom: 3px solid var(--hot-pink);
}

/* =========================
   Contest cards
   ========================= */
.q-contest-card {
    background: rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 12px 13px;
    margin: 8px 12px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.06);
}
.q-contest-card .badge-new {
    position: absolute;
    top: -7px; right: 12px;
    background: var(--hot-pink);
    color: #fff;
    padding: 2px 9px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.q-contest-card .badge-sponsored {
    position: absolute;
    top: -7px; left: 12px;
    background: var(--cyan);
    color: #002b30;
    padding: 2px 9px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 800;
}
.q-contest-card h5 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
}
.q-contest-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 4px 0 10px;
}
.q-contest-prize {
    color: var(--gold);
    font-weight: 800;
    font-size: 13.5px;
}
.q-countdown { font-family: 'Courier New', monospace; font-weight: 700; }
.q-countdown.urgent { color: var(--urgent); }

.rules-box {
    text-align: left;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 14px;
    margin: 18px 0;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid rgba(255,215,0,0.2);
}
.rules-box a { color: var(--gold); }

/* =========================
   Ad slots — fixed dimensions, zero CLS
   =========================
   Container reserves calm layout space + 24px for the neutral "Реклама"
   label. Yandex fills the inner unit on push.
*/
.ad-slot {
    position: relative;
    margin: 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    overflow: hidden;
}
.ad-slot::before {
    content: "Реклама";
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}
.ad-slot .yan-ad-unit {
    display: block !important;
    z-index: 2;
    width: 100%;
}

/* Responsive display unit WITHOUT full-width-responsive, so Yandex serves a
   standard rectangle (300x250 / 336x280 / 320x100) that displays in full
   rather than a full-bleed portrait that eats the screen. Reserve the largest
   expected creative plus the 24px label from first paint through no-fill so
   late ad rendering cannot move the quiz controls. */
.ad-slot--rect {
    width: 100%;
    max-width: 336px;
    height: 304px;
    min-height: 304px;
    max-height: 304px;
    padding-top: 24px;
}

/* In-feed variant: sits inline between contest cards in the home list.
   Tighter top/bottom margin to match contest-card spacing (10px/14px). */
.ad-slot--inline {
    margin: 10px 14px;
}

/* Bottom-of-content slot. Yandex serves these responsive units a 300x250 /
   320x250 rectangle (verified live), so use the same stable reservation as
   top rectangles. This prevents both clipping and no-fill layout shifts. */
.ad-slot--banner {
    width: 100%;
    max-width: 336px;
    height: 304px;
    min-height: 304px;
    max-height: 304px;
    padding-top: 24px;
}

/* Keep no-fill slots in flow so quiz content does not jump upward when
   Yandex returns unfilled / unfill-optimized. The ad creative itself is
   hidden, but the reserved container remains as calm layout space. */
.ad-slot:has(ins[data-ad-status^="unfill"]) {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.045);
    box-shadow: none;
}
/* Same effect for browsers that don't support :has(); JS in ads.js
   adds .ad-slot--empty to the container after the Yandex status fires. */
.ad-slot--empty {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.045);
    box-shadow: none;
}

.ad-slot:has(ins[data-ad-status^="unfill"])::before,
.ad-slot--empty::before {
    content: "";
}

.ad-slot:has(ins[data-ad-status^="unfill"]) .yan-ad-unit,
.ad-slot--empty .yan-ad-unit {
    display: none !important;
}

.ad-slot--banner .yan-ad-unit {
    display: block !important;
    width: 100% !important;
}

.ad-slot--placeholder {
    border: 1px dashed rgba(255,255,255,0.18);
}
.ad-placeholder-note {
    color: rgba(255,255,255,0.42);
    font-size: 11px;
    text-align: center;
    padding: 24px 10px 10px;
}

/* Spacer enforced before a bottom-of-screen ad to keep ~60px gap from
   the CTA above it — prevents misclick policy violations. */
.ad-spacer-cta {
    height: 60px;
    pointer-events: none;
}

/* Local-only Rewarded preview overlay. Production uses Yandex Rewarded. */
.ad-fullscreen-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 24px;
}
.ad-fullscreen-overlay.show { display: flex; }
.ad-fullscreen-overlay .ad-card {
    background: #111;
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 14px;
    padding: 28px 20px;
    max-width: 300px;
    width: 100%;
    text-align: center;
}
.ad-fullscreen-overlay .ad-fs-label {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
}
.ad-fullscreen-overlay .ad-fs-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin-top: 6px;
}
.ad-fullscreen-overlay .ad-countdown {
    font-size: 48px;
    color: var(--gold);
    margin: 12px 0;
    font-weight: 900;
}

/* =========================
   Floating bubbles (spin + fortune)
   No bobbing animation — battery cost > engagement lift.
   ========================= */
/* Anchor floating bubbles to the right edge of the MOBILE COLUMN
   (not the viewport). On mobile they sit 12px from screen edge; on
   desktop they sit 12px from the column's right edge. */
.float-stack {
    position: fixed;
    bottom: 86px;
    right: max(12px, calc(50% - 200px + 12px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 50;
}
.float-bubble {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFE680, var(--gold) 60%, var(--gold-deep));
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 24px;
}
.float-bubble.pink {
    background: linear-gradient(145deg, #FF80AB, var(--hot-pink) 60%, #C2185B);
}

/* (Modal styles live at the top of this file alongside .screen, since the
   custom .q-modal system handles dialogs.) */

/* =========================
   Score page
   ========================= */
.q-score-hero { text-align: center; padding: 26px 16px 8px; }
.q-score-hero .score-num {
    font-size: 64px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}
.q-score-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}
.result-reward-offer {
    width: min(100%, 420px);
    margin: 12px auto 0;
}
.result-reward-offer > span {
    display: block;
    margin-bottom: 7px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
}
.result-reward-offer .q-btn {
    min-height: 48px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
}

/* =========================
   Quiz HUD
   ========================= */
.q-quiz-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0,0,0,0.4);
    font-weight: 800;
    border-bottom: 1px solid rgba(255,64,129,0.25);
    position: sticky;
    top: 0;
    z-index: 30;
}
.q-quiz-hud .timer { color: var(--gold); }
.q-quiz-hud .timer.urgent { color: var(--urgent); }

.q-helpers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 14px;
}
.q-helper-btn {
    min-width: 0;
    min-height: 44px;
    background: rgba(0,229,255,0.18);
    border: 1px solid var(--cyan);
    color: #fff;
    border-radius: 10px;
    padding: 5px 6px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}
.q-helper-btn::before { content: "📺"; font-size: 12px; }
.q-helper-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================
   Reward preview (inside choice-of-reward and ad-watch screens)
   Salience: make the +N huge.
   ========================= */
.reward-preview {
    text-align: center;
    margin: 10px 0 16px;
}
.reward-preview .reward-amount {
    font-size: 56px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -1px;
}
.reward-preview .reward-suffix {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* =========================
   Choice-of-reward grid
   ========================= */
.reward-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}
.reward-choice {
    appearance: none;
    width: 100%;
    min-height: 78px;
    background: rgba(0,0,0,0.35);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 12px 6px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.reward-choice:hover { background: rgba(255,255,255,0.08); }
.reward-choice.highlight {
    border-color: var(--gold);
    background: rgba(255,215,0,0.15);
}
.reward-choice.highlight::after {
    content: "ЛУЧШЕ";
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: #2a1500;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 8px;
}
.reward-choice .rc-points {
    font-size: 22px;
    font-weight: 900;
    color: var(--gold);
}
.reward-choice .rc-ads {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* =========================
   Inline +N toast (replaces sound + coin-fly)
   ========================= */
.q-toast {
    position: fixed;
    z-index: 9100;
    font-weight: 900;
    font-size: 22px;
    pointer-events: none;
    transform: translateX(-50%);
    text-shadow: 0 2px 6px rgba(0,0,0,0.55);
    animation: toastFloat 1.0s ease-out forwards;
}
@keyframes toastFloat {
    0%   { opacity: 0; transform: translate(-50%, 0)    scale(0.7); }
    20%  { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}

#confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9500;
}

/* =========================
   Cooldown bar
   ========================= */
.cooldown-bar {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--loss);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 8px 14px;
    text-align: center;
    font-size: 13px;
}
.cooldown-bar .cd-timer { color: var(--loss); font-weight: 900; }

/* =========================
   Spin wheel
   ========================= */
.spin-wheel-wrap { position: relative; width: 260px; height: 260px; margin: 18px auto; }
.spin-wheel {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 5px solid var(--gold);
    box-shadow: 0 0 22px rgba(255,215,0,0.35), inset 0 0 10px rgba(0,0,0,0.45);
    transition: transform 4s cubic-bezier(0.15, 0.85, 0.35, 1);
    background: conic-gradient(
        var(--hot-pink) 0 45deg,
        var(--cyan)     45deg 90deg,
        var(--gold)     90deg 135deg,
        var(--win)      135deg 180deg,
        var(--hot-pink) 180deg 225deg,
        var(--cyan)     225deg 270deg,
        var(--gold)     270deg 315deg,
        var(--win)      315deg 360deg
    );
}
.spin-pointer {
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 22px solid var(--loss);
    z-index: 10;
}
.spin-prizes { position: absolute; inset: 0; pointer-events: none; }
.spin-prizes span {
    position: absolute;
    top: 50%; left: 50%;
    color: #000;
    font-weight: 900;
    font-size: 13px;
}

/* =========================
   Achievement badge
   ========================= */
.achievement-badge {
    background: linear-gradient(135deg, var(--cyan), var(--hot-pink));
    border-radius: 50%;
    width: 72px; height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
}

/* =========================
   Welcome / signup / daily / etc
   ========================= */
.welcome-splash input,
.signup-input {
    min-height: 44px;
    background: rgba(0,0,0,0.35);
    border: 2px solid var(--gold);
    border-radius: 10px;
    color: #fff;
    padding: 11px;
    font-size: 15px;
    text-align: center;
    width: 100%;
    margin: 10px 0;
}
.welcome-splash input::placeholder,
.signup-input::placeholder { color: rgba(255,255,255,0.4); }

.day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin: 12px 0;
}
.day-cell {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 3px;
    text-align: center;
    font-size: 10.5px;
}
.day-cell.claimed { background: var(--win); color: #002211; }
.day-cell.today { background: var(--gold); color: #2a1500; }
.day-cell .reward { font-weight: 900; font-size: 12px; }

footer.q-footer {
    text-align: center;
    padding: 16px 14px 90px;
    color: var(--text-muted);
    font-size: 11px;
}
footer.q-footer a { color: var(--gold); margin: 0 4px; text-decoration: none; }
footer.q-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}

/* Screen-reader-only heading for SEO / a11y crawlers. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}