.stiva-duel-app {
    --stiva-red: #cd1b20;
    --stiva-red-dark: #ac2026;
    --stiva-ink: #1f242e;
    --stiva-muted: #6d7582;
    --stiva-border: #d8dee6;
    --stiva-surface: #ffffff;
    --stiva-soft: #f3f5f8;
    --stiva-shadow: 0 18px 40px rgba(31, 36, 46, 0.12);
    max-width: 1240px;
    margin: 0 auto;
    color: var(--stiva-ink);
    font-family: Roboto, sans-serif;
}

body.stiva-duel-room-viewport {
    margin: 0;
    background: linear-gradient(180deg, #0f1217 0%, #171b22 100%);
}

.stiva-duel-room-page {
    min-height: 100vh;
    padding: 24px;
}

.stiva-duel-exit-button {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(23, 27, 34, 0.92);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--stiva-shadow);
}

.stiva-duel-exit-button:hover {
    background: var(--stiva-red);
    color: #fff;
}

.stiva-duel-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    padding: 36px 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle at top right, rgba(205, 27, 32, 0.18), transparent 30%),
        linear-gradient(135deg, #171b22 0%, #222833 55%, #11151b 100%);
    color: #fff;
    box-shadow: var(--stiva-shadow);
}

.stiva-duel-hero h2,
.stiva-empty-stage h3,
.stiva-finale-card h3,
.stiva-duel-panel h3,
.stiva-duel-question h3,
.stiva-duel-stage h3,
.stiva-reveal-card h4 {
    margin: 0;
    font-family: "Bebas Neue", cursive;
    letter-spacing: 0.04em;
}

.stiva-duel-kicker,
.stiva-duel-subtitle {
    margin: 0;
}

.stiva-duel-kicker {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 12px;
}

.stiva-duel-hero h2 {
    font-size: clamp(2.6rem, 4vw, 4.8rem);
    line-height: 0.95;
}

.stiva-duel-subtitle {
    margin-top: 12px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.78);
}

.stiva-duel-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
}

.stiva-duel-panel {
    padding: 24px;
    border: 1px solid var(--stiva-border);
    background: var(--stiva-surface);
    box-shadow: var(--stiva-shadow);
}

.stiva-duel-sidebar,
.stiva-duel-main {
    display: grid;
    gap: 24px;
}

.stiva-duel-stage {
    min-height: 540px;
    background:
        linear-gradient(180deg, rgba(205, 27, 32, 0.03) 0%, rgba(255, 255, 255, 0) 22%),
        var(--stiva-surface);
}

.stiva-stage-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.stiva-phase-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--stiva-soft);
    color: var(--stiva-red-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.stiva-duel-timer {
    display: inline-flex;
    gap: 10px;
    align-items: baseline;
    color: var(--stiva-red);
}

.stiva-duel-timer span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.stiva-duel-timer strong {
    font-family: "Bebas Neue", cursive;
    font-size: 2rem;
    line-height: 1;
}

.stiva-question-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.stiva-question-badge,
.stiva-question-difficulty {
    padding: 7px 11px;
    border-radius: 999px;
    background: #171b22;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.stiva-question-difficulty {
    background: var(--stiva-red);
}

#stiva-duel-question h3 {
    margin: 0 0 22px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 0.98;
}

#stiva-duel-answers {
    display: grid;
    gap: 14px;
}

.stiva-answer-card {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--stiva-border);
    background: #fff;
    color: var(--stiva-ink);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.stiva-answer-card:hover:not(:disabled),
.stiva-answer-card:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--stiva-red);
    box-shadow: 0 14px 30px rgba(205, 27, 32, 0.12);
    outline: none;
}

.stiva-answer-card:disabled {
    cursor: default;
    opacity: .98;
}

.stiva-answer-card.is-selected {
    border-color: var(--stiva-red);
    box-shadow: inset 0 0 0 1px var(--stiva-red);
}

.stiva-answer-card.is-correct {
    border-color: #20a05b;
    box-shadow: inset 0 0 0 1px #20a05b;
}

.stiva-answer-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #171b22;
    color: #fff;
    font-family: "Bebas Neue", cursive;
    font-size: 1.5rem;
}

.stiva-answer-text {
    font-size: 1.05rem;
    font-weight: 600;
}

.stiva-key-hint {
    color: var(--stiva-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stiva-answer-percent {
    justify-self: end;
    font-family: "Bebas Neue", cursive;
    font-size: 1.6rem;
    color: var(--stiva-red);
}

.stiva-status-hero,
.stiva-room-standby,
.stiva-score-strip,
.stiva-arena-stat,
.stiva-survival-meter,
.stiva-reveal-card,
.stiva-finale-card,
.stiva-empty-stage {
    border-radius: 16px;
}

.stiva-status-hero,
.stiva-room-standby {
    position: relative;
    overflow: hidden;
}

.stiva-status-hero::after,
.stiva-room-standby::after {
    content: "";
    position: absolute;
    inset: auto -20% -35% auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(205, 27, 32, 0.18), transparent 68%);
    pointer-events: none;
}

#stiva-duel-result {
    margin-top: 24px;
}

.stiva-state-note,
.stiva-reveal-card,
.stiva-finale-card,
.stiva-empty-stage,
.stiva-player-score {
    padding: 16px 18px;
    border: 1px solid var(--stiva-border);
    background: var(--stiva-soft);
}

.stiva-state-note.is-success,
.stiva-answer-outcome.is-success {
    color: #157347;
}

.stiva-state-note.is-warning {
    color: #9a5c00;
}

.stiva-state-note.is-danger,
.stiva-answer-outcome.is-danger {
    color: #b42318;
}

.stiva-state-note.is-info {
    color: #0f5cb5;
}

.stiva-login-button {
    display: inline-flex;
    width: auto;
    margin: 14px 0 0;
    padding: 10px 18px;
    color: #fff;
    text-decoration: none;
}

.stiva-player-score {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.stiva-player-score span,
.stiva-stat-stack span {
    color: var(--stiva-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stiva-player-score strong,
.stiva-stat-stack strong {
    font-family: "Bebas Neue", cursive;
    font-size: 2rem;
    line-height: 1;
}

.stiva-stat-stack + .stiva-stat-stack {
    margin-top: 12px;
}

.stiva-distribution {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.stiva-distribution-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 88px;
    gap: 12px;
    align-items: center;
}

.stiva-distribution-bar {
    overflow: hidden;
    height: 12px;
    background: #dde4ee;
}

.stiva-distribution-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--stiva-red) 0%, #ff5c52 100%);
}

.stiva-distribution-meta {
    color: var(--stiva-muted);
    font-size: 0.92rem;
}

.stiva-answer-outcome {
    margin: 18px 0 0;
    font-weight: 700;
}

.stiva-finale-card {
    background:
        radial-gradient(circle at top right, rgba(205, 27, 32, 0.18), transparent 28%),
        linear-gradient(135deg, #171b22 0%, #232b36 100%);
    color: #fff;
}

.stiva-finale-card p,
.stiva-empty-stage p {
    margin-bottom: 0;
}

.stiva-finale-card.is-game-over {
    background: linear-gradient(135deg, #3a1013 0%, #181b21 100%);
}

.stiva-empty-stage {
    text-align: center;
    background:
        linear-gradient(180deg, rgba(205, 27, 32, 0.04), transparent),
        var(--stiva-soft);
}

.stiva-duel-login-gate {
    padding: 28px;
    border: 1px solid var(--stiva-border);
    background: var(--stiva-soft);
}

@media (max-width: 1024px) {
    .stiva-duel-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .stiva-duel-hero,
    .stiva-duel-panel {
        padding: 20px;
    }

    .stiva-stage-topline,
    .stiva-question-header,
    .stiva-distribution-row {
        grid-template-columns: 1fr;
        display: grid;
    }

    .stiva-answer-card {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px;
    }

    .stiva-answer-letter {
        width: 42px;
        height: 42px;
    }
}

/* Stiva Duel Arena 1.2 */
body.stiva-duel-room-viewport {
    min-width: 320px;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        radial-gradient(circle at 50% -10%, #3b1b20 0, #161b23 36%, #0b0e13 78%);
    background-size: 44px 44px, 44px 44px, auto;
    color: #e9edf3;
}

.stiva-duel-room-page { padding: 18px 24px 40px; }
.stiva-duel-app {
    --arena-red: #ef3038;
    --arena-red-dark: #b4171d;
    --arena-black: #11151b;
    --arena-panel: #191f28;
    --arena-line: rgba(255,255,255,.11);
    --arena-muted: #9ba6b5;
    max-width: 1440px;
    color: #e9edf3;
    font-family: "Trebuchet MS", sans-serif;
}

.stiva-arena-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 8px 12px 8px 18px;
    border: 1px solid var(--arena-line);
    border-bottom: 0;
    background: rgba(11,14,19,.9);
    backdrop-filter: blur(16px);
}

.stiva-network-state { display: flex; align-items: center; gap: 9px; color: #aeb8c5; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stiva-network-state i { width: 8px; height: 8px; border-radius: 50%; background: #31ce82; box-shadow: 0 0 0 5px rgba(49,206,130,.12); animation: stiva-network-pulse 1.8s infinite; }
.stiva-network-state.is-offline i { background: var(--arena-red); box-shadow: 0 0 0 5px rgba(239,48,56,.12); }
.stiva-duelist-chip { display: flex; align-items: center; gap: 10px; }
.stiva-duelist-chip > span { display: grid; width: 38px; height: 38px; place-items: center; background: var(--arena-red); color: #fff; font-weight: 900; }
.stiva-duelist-chip small { display: block; color: #778291; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stiva-duelist-chip strong { display: block; max-width: 190px; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }

.stiva-duel-exit-button { top: auto; right: 22px; bottom: 18px; min-height: 40px; border-color: rgba(255,255,255,.16); background: rgba(10,13,18,.88); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(12px); }
.stiva-duel-hero { display: flex; align-items: center; justify-content: space-between; min-height: 180px; margin: 0 0 16px; padding: 30px 38px; border-color: var(--arena-line); background: radial-gradient(circle at 82% 30%, rgba(239,48,56,.24), transparent 24%), linear-gradient(115deg, #1b212b 0%, #11151b 65%, #251116 100%); }
.stiva-duel-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0 72%, rgba(255,255,255,.025) 72% 73%, transparent 73% 78%, rgba(255,255,255,.025) 78% 79%, transparent 79%); }
.stiva-hero-copy { position: relative; z-index: 1; }
.stiva-duel-kicker { color: #ef777b !important; font-weight: 800; }
.stiva-duel-hero h2 { color: #ffffff !important; font-size: clamp(3.6rem, 6vw, 6.8rem); text-transform: uppercase; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.stiva-duel-subtitle { max-width: 720px; color: #b5beca !important; font-size: 15px; }
.stiva-hero-mark { position: relative; z-index: 1; display: grid; min-width: 150px; place-items: center; padding: 14px; }
.stiva-hero-mark > span { display: grid; width: 88px; height: 88px; place-items: center; border: 2px solid var(--arena-red); border-radius: 50%; color: #fff; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 38px; box-shadow: 0 0 0 10px rgba(239,48,56,.06), 0 0 40px rgba(239,48,56,.16); }
.stiva-hero-mark small { margin-top: 15px; color: #aeb6c2; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.stiva-duel-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 16px; }
.stiva-duel-sidebar { align-content: start; gap: 16px; }
.stiva-duel-panel { border-color: var(--arena-line); background: rgba(25,31,40,.94); color: #e9edf3; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.stiva-panel-kicker { margin: 0 0 5px; color: #778291; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.stiva-duel-panel > h3 { color: #fff !important; font-size: 26px; }
.stiva-status-hero { position: relative; overflow: hidden; min-height: 190px; padding: 22px 0 0; }
.stiva-status-hero > i { display: grid; width: 50px; height: 50px; margin-bottom: 24px; place-items: center; border: 1px solid #485361; color: #fff !important; font-style: normal; font-weight: 900; }
.stiva-status-hero > span { display: block; color: #7f8a98; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.stiva-status-hero > strong { display: block; margin: 5px 0 8px; color: #fff !important; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 32px; letter-spacing: .03em; }
.stiva-status-hero p { margin: 0; color: #9da7b5; font-size: 13px; line-height: 1.55; }
.stiva-status-hero.is-alive > i { border-color: #31ce82; background: rgba(49,206,130,.12); color: #55e79d !important; }
.stiva-status-hero.is-eliminated > i { border-color: var(--arena-red); background: rgba(239,48,56,.12); color: #ff6b70 !important; }
.stiva-status-hero.is-eliminated::after { content: "ELIMINATED"; position: absolute; top: 22px; right: -32px; padding: 5px 34px; background: var(--arena-red-dark); color: #fff !important; font-size: 8px; font-weight: 900; letter-spacing: .12em; transform: rotate(42deg); }
.stiva-score-strip { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; margin-top: 18px; border: 1px solid var(--arena-line); background: #11161d; }
.stiva-score-strip span { color: #818c9a; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.stiva-score-strip strong { color: #fff !important; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 27px; }

.stiva-room-panel #stiva-duel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 18px; }
.stiva-arena-stat { padding: 11px 7px; border: 1px solid var(--arena-line); background: #131820; text-align: center; }
.stiva-arena-stat span { display: block; color: #778290; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.stiva-arena-stat strong { display: block; margin-top: 4px; color: #fff !important; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 26px; }
.stiva-arena-stat.is-alive strong { color: #55e79d; }
.stiva-arena-stat.is-out strong { color: #ff656b; }
.stiva-survival-meter { grid-column: 1 / -1; margin-top: 9px; }
.stiva-survival-meter > div:first-child { display: flex; justify-content: space-between; color: #8e99a7; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.stiva-survival-meter > div:last-child { height: 5px; margin-top: 7px; background: #0d1117; }
.stiva-survival-meter i { display: block; height: 100%; background: linear-gradient(90deg, #19945a, #54e39b); transition: width .4s ease; }
.stiva-sudden-death { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px; margin-top: 8px; background: #49151a; }
.stiva-sudden-death > i { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #ff6d72; color: #ff7b80; font-style: normal; font-weight: 900; }
.stiva-sudden-death strong,.stiva-sudden-death span { display: block; }
.stiva-sudden-death span { color: #d99a9d; font-size: 10px; }
.stiva-room-standby { grid-column: 1/-1; text-align: center; }
.stiva-room-standby span { color: #778291; font-size: 9px; text-transform: uppercase; }
.stiva-room-standby strong { display: block; margin-top: 7px; color: #fff; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 28px; }
.stiva-room-standby p { color: #909baa; font-size: 12px; }

.stiva-duel-stage {
    min-height: 650px;
    padding: 28px 30px;
    background: linear-gradient(180deg, rgba(172, 32, 38, 0.08) 0%, rgba(17, 21, 27, 0.5) 100%), #171d26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e9edf3;
}
.stiva-stage-topline { margin-bottom: 12px; }
.stiva-phase-pill { gap: 8px; border-radius: 0; background: #171c24; color: #fff; }
.stiva-phase-pill i { width: 7px; height: 7px; border-radius: 50%; background: #ac2026; }
.stiva-duel-app[data-phase="live"] .stiva-phase-pill i { background: #31ce82; animation: stiva-network-pulse 1.2s infinite; }
.stiva-round-progress { margin-bottom: 28px; color: #707987; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.stiva-round-progress > div { height: 4px; margin-top: 8px; background: rgba(255, 255, 255, 0.08); }
.stiva-round-progress i { display: block; height: 100%; background: linear-gradient(90deg, #ac2026, #ef3038); transition: width .4s ease; }
.stiva-duel-timer { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 9px; min-width: 112px; padding: 9px 12px; background: #171c24; color: #fff; }
.stiva-duel-timer span { color: #9ca7b6; font-size: 8px; font-weight: 900; }
.stiva-duel-timer strong { grid-row: span 2; color: #fff; font-size: 40px; }
.stiva-duel-timer small { color: #737e8c; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.stiva-duel-timer.is-urgent { background: #ac2026; animation: stiva-urgent .65s infinite alternate; }
.stiva-question-header { margin-bottom: 20px; }
.stiva-question-badge,.stiva-question-difficulty { border-radius: 0; }
.stiva-question-difficulty.is-legendary { background: #11151b; box-shadow: inset 3px 0 #ac2026; }
#stiva-duel-question h3 { max-width: 980px; margin-bottom: 28px; font-size: clamp(2.4rem, 4vw, 4.6rem); line-height: 1.02; color: #fff; }
#stiva-duel-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stiva-answer-card {
    position: relative;
    grid-template-columns: 54px minmax(0,1fr) auto;
    min-height: 86px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1c232d;
    color: #e9edf3;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.stiva-answer-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: transparent; }
.stiva-answer-card:hover:not(:disabled),.stiva-answer-card:focus-visible:not(:disabled) { transform: translateY(-3px); border-color: #ac2026; outline: none; background: #232b37; box-shadow: 0 18px 35px rgba(0,0,0,.3); }
.stiva-answer-card:hover:not(:disabled)::before { background: #ac2026; }
.stiva-answer-card.is-selected { border-color: #1673d1; background: rgba(22, 115, 209, 0.12); box-shadow: inset 4px 0 #1673d1, 0 8px 24px rgba(22, 115, 209, 0.15); }
.stiva-answer-card.is-selected .stiva-answer-letter { background: #1673d1; }
.stiva-answer-card.is-locking { animation: stiva-answer-lock .6s ease; }
.stiva-answer-card.is-correct { border-color: #18945a; background: rgba(24, 148, 90, 0.12); box-shadow: inset 4px 0 #18945a, 0 8px 24px rgba(24, 148, 90, 0.15); }
.stiva-answer-card.is-correct .stiva-answer-letter { background: #18945a; }
.stiva-answer-card.is-wrong { border-color: #c72a31; background: rgba(199, 42, 49, 0.12); box-shadow: inset 4px 0 #c72a31, 0 8px 24px rgba(199, 42, 49, 0.15); }
.stiva-answer-card.is-wrong .stiva-answer-letter { background: #c72a31; }
.stiva-answer-letter { background: #171c24; color: #fff; }
.stiva-answer-text { color: #fff; font-size: 16px; line-height: 1.35; }
.stiva-key-hint { color: #9aa3ae; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.stiva-answer-percent { min-width: 42px; color: #fff; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 24px; text-align: right; }

.stiva-empty-stage { display: grid; min-height: 410px; place-items: center; align-content: center; border: 0; background: radial-gradient(circle, rgba(239,48,56,.08), transparent 44%); }
.stiva-stage-sigil { display: grid; width: 86px; height: 86px; place-items: center; border: 2px solid var(--arena-red); border-radius: 50%; color: var(--arena-red); font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 33px; box-shadow: 0 0 0 12px rgba(239,48,56,.05); }
.stiva-empty-stage > p { margin: 27px 0 7px; color: var(--arena-red-dark); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.stiva-empty-stage h3 { color: #fff; font-size: clamp(2.5rem,5vw,4.7rem); }
.stiva-empty-stage > span { color: #747e8a; }
.stiva-waiting-lines { display: flex; gap: 5px; margin-top: 25px; }
.stiva-waiting-lines i { width: 30px; height: 3px; background: #d9dde3; animation: stiva-wait 1.4s infinite; }
.stiva-waiting-lines i:nth-child(2) { animation-delay: .18s; }.stiva-waiting-lines i:nth-child(3) { animation-delay: .36s; }

.stiva-lock-confirmation { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #9fc7ec; background: #eef6ff; color: #124e87; }
.stiva-lock-confirmation .stiva-lock-icon { display: grid; width: 38px; height: 38px; place-items: center; background: #1673d1; color: #fff; font-weight: 900; }
.stiva-lock-confirmation strong,.stiva-lock-confirmation p { display: block; margin: 0; }.stiva-lock-confirmation p { margin-top: 3px; font-size: 12px; }
.stiva-lock-confirmation > i { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: #1673d1; animation: stiva-network-pulse 1.2s infinite; }
.stiva-reveal-card { padding: 0; border: 0; background: transparent; }
.stiva-reveal-key { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 18px 22px; background: #13291f; color: #fff; }
.stiva-reveal-key > span { color: #8ed2af; font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.stiva-reveal-key > strong { grid-row: span 2; font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 55px; }
.stiva-reveal-key > p { margin: 3px 0 0; color: #c0d5c9; font-size: 16px; }
.stiva-answer-outcome { display: flex; align-items: center; gap: 13px; padding: 15px 20px; margin: 8px 0 0; background: #fff; }
.stiva-answer-outcome > i { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; font-size: 20px; font-style: normal; }
.stiva-answer-outcome.is-success > i { background: #18945a; }.stiva-answer-outcome.is-danger > i { background: #c72a31; }
.stiva-answer-outcome strong,.stiva-answer-outcome span { display: block; }.stiva-answer-outcome span { margin-top: 2px; color: #717b87; font-size: 12px; font-weight: 400; }
.stiva-finale-card { display: grid; min-height: 420px; place-items: center; align-content: center; text-align: center; padding: 28px; }
.stiva-finale-card > span { color: #ef777b; font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.stiva-finale-card h3 { margin-top: 9px; font-size: clamp(3.4rem,7vw,6.2rem); line-height: .95; }
.stiva-finale-card p { color: #fff; font-size: 22px; font-weight: 800; }
.stiva-crown { color: #f1bd4a; font-size: 64px; }
.stiva-state-note { display: grid; gap: 5px; }.stiva-state-note strong { color: currentColor; }.stiva-state-note span { font-size: 12px; }
.stiva-duel-login-gate { max-width: 600px; padding: 50px; margin: 12vh auto; border-color: var(--arena-line); background: #171d26; color: #fff; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.26); }
.stiva-duel-login-gate > span { color: #ef777b; font-size: 10px; font-weight: 900; letter-spacing: .17em; }.stiva-duel-login-gate h2 { font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-size: 45px; }.stiva-duel-login-gate p { color: #9ea8b5; }.stiva-duel-login-gate a { display: inline-flex; padding: 14px 22px; margin-top: 12px; background: var(--arena-red); color: #fff; font-weight: 900; text-decoration: none; text-transform: uppercase; }

@keyframes stiva-network-pulse { 50% { box-shadow: 0 0 0 9px rgba(49,206,130,0); } }
@keyframes stiva-urgent { to { transform: scale(1.03); box-shadow: 0 0 30px rgba(239,48,56,.32); } }
@keyframes stiva-wait { 0%,100% { background:#d9dde3; } 50% { background:var(--arena-red); } }
@keyframes stiva-answer-lock { 50% { transform: scale(.985); } }

@media (prefers-reduced-motion: reduce) {
    .stiva-duel-app *, .stiva-duel-app *::before, .stiva-duel-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 1024px) {
    .stiva-duel-layout {
        display: flex;
        flex-direction: column;
    }
    .stiva-duel-main {
        order: 1;
    }
    .stiva-duel-sidebar {
        order: 2;
        grid-template-columns: repeat(2, 1fr);
    }
    .stiva-status-hero { min-height: 145px; }
}

@media (max-width: 767px) {
    .stiva-duel-room-page { padding: 8px 8px 76px; }
    .stiva-arena-toolbar { min-height: 50px; padding-left: 12px; }
    .stiva-network-state span { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stiva-duelist-chip small { display: none; }.stiva-duelist-chip strong { max-width: 105px; font-size: 11px; }
    .stiva-duelist-chip > span { width: 32px; height: 32px; }
    
    /* Collapsed Hero when phase is live or revealed */
    .stiva-duel-app[data-phase="live"] .stiva-duel-hero,
    .stiva-duel-app[data-phase="revealed"] .stiva-duel-hero {
        min-height: auto;
        padding: 12px 16px;
        margin-bottom: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    .stiva-duel-app[data-phase="live"] .stiva-duel-hero h2,
    .stiva-duel-app[data-phase="revealed"] .stiva-duel-hero h2 {
        font-size: 1.6rem;
    }
    .stiva-duel-app[data-phase="live"] .stiva-duel-hero .stiva-duel-subtitle,
    .stiva-duel-app[data-phase="revealed"] .stiva-duel-hero .stiva-duel-subtitle,
    .stiva-duel-app[data-phase="live"] .stiva-duel-hero .stiva-duel-kicker,
    .stiva-duel-app[data-phase="revealed"] .stiva-duel-hero .stiva-duel-kicker {
        display: none;
    }

    .stiva-duel-hero { min-height: 132px; padding: 22px 18px; }
    .stiva-duel-hero h2 { font-size: 3.1rem; }.stiva-duel-subtitle { font-size: 12px; }.stiva-hero-mark { display: none; }
    .stiva-duel-sidebar { grid-template-columns: 1fr; }.stiva-duel-panel { padding: 18px; }
    .stiva-player-panel { order: 1; }.stiva-room-panel { order: 2; }
    .stiva-duel-stage { min-height: auto; padding: 18px 14px; }
    .stiva-stage-topline { display: flex; align-items: center; }
    .stiva-phase-pill { padding: 7px 9px; font-size: 9px; }.stiva-duel-timer { min-width: 96px; padding: 7px 9px; }.stiva-duel-timer strong { font-size: 32px; }
    #stiva-duel-question h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 20px; }
    #stiva-duel-answers { grid-template-columns: 1fr; gap: 10px; }
    .stiva-answer-card {
        grid-template-columns: 44px minmax(0,1fr) auto;
        min-height: auto;
        padding: 12px 14px;
        border-radius: 4px;
        background: #1c232d;
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
    }
    .stiva-answer-card:active {
        transform: scale(0.98);
    }
    .stiva-answer-card.is-selected {
        background: rgba(22, 115, 209, 0.12) !important;
        border-color: #1673d1 !important;
    }
    .stiva-answer-card.is-correct {
        background: rgba(24, 148, 90, 0.12) !important;
        border-color: #18945a !important;
    }
    .stiva-answer-card.is-wrong {
        background: rgba(199, 42, 49, 0.12) !important;
        border-color: #c72a31 !important;
    }
    .stiva-answer-letter { width: 44px; height: 44px; }.stiva-answer-text { font-size: 14px; color: #fff; }.stiva-key-hint { display: none; }
    .stiva-empty-stage { min-height: 330px; }.stiva-empty-stage h3 { font-size: 2.7rem; color: #fff; }
    .stiva-duel-exit-button { right: 8px; bottom: 8px; }
}

/* Custom Inline Auth Gate for Duel Room */
.stiva-duel-auth-box {
    max-width: 480px !important;
    margin: 8vh auto !important;
    padding: 0 !important;
    background: #191f28 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4) !important;
}

.stiva-duel-auth-box,
.stiva-duel-auth-box h2,
.stiva-duel-auth-box p,
.stiva-duel-auth-box label,
.stiva-duel-auth-box small,
.stiva-duel-auth-box span {
    color: #e9edf3 !important;
}

.stiva-duel-auth-box input {
    color: #fff !important;
    background: #10141b !important;
    border-color: #394252 !important;
}

.stiva-duel-auth-box input::placeholder {
    color: #7d8796 !important;
}

.stiva-auth-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.stiva-auth-tab-btn {
    flex: 1;
    padding: 18px;
    background: rgba(10, 13, 18, 0.5);
    border: none;
    color: #aeb6c2;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.stiva-auth-tab-btn:hover {
    color: #fff;
    background: rgba(10, 13, 18, 0.8);
}

.stiva-auth-tab-btn.active {
    background: transparent;
    color: #ef3038;
    border-bottom: 2px solid #ef3038;
}

.stiva-auth-panel p {
    color: #aeb6c2;
}

.stiva-auth-field label {
    color: #d8dee9;
}

.stiva-auth-field input {
    color: #fff;
    background: #10141b;
    border-color: #394252;
}

.stiva-auth-field input::placeholder {
    color: #7d8796;
}

.stiva-auth-panel {
    display: none;
    padding: 38px 30px;
}

.stiva-auth-panel.active {
    display: block;
}

.stiva-auth-network-label {
    display: block;
    color: #ef777b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.17em;
    margin-bottom: 12px;
}

.stiva-auth-panel h2 {
    font-family: "Bebas Neue", "Arial Narrow", sans-serif;
    font-size: 38px !important;
    line-height: 1 !important;
    margin: 0 0 10px !important;
    color: #fff !important;
}

.stiva-auth-panel p {
    color: #9ea8b5;
    font-size: 14px;
    margin-bottom: 28px;
}

.stiva-auth-field {
    margin-bottom: 20px;
    text-align: left;
}

.stiva-auth-field label {
    display: block;
    color: #9ba6b5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.stiva-auth-field input {
    width: 100%;
    padding: 12px 14px;
    background: #11151b;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}

.stiva-auth-field input:focus {
    outline: none;
    border-color: #ef3038;
}

.stiva-auth-submit-btn {
    width: 100%;
    padding: 14px;
    background: #ef3038;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.stiva-auth-submit-btn:hover {
    background: #b4171d;
}

.stiva-auth-feedback {
    margin: 15px 0;
    font-size: 13px;
    text-align: left;
    font-weight: 600;
}

.stiva-auth-feedback.is-error {
    color: #ff6b70;
}

.stiva-auth-feedback.is-success {
    color: #55e79d;
}

/* Premium Custom styles */
.stiva-pay-button {
    display: inline-block;
    background: linear-gradient(135deg, #cd1b20 0%, #a21014 100%);
    color: #fff !important;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 14px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(205, 27, 32, 0.4);
    text-align: center;
}

.stiva-pay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(205, 27, 32, 0.6);
    background: linear-gradient(135deg, #e02228 0%, #cd1b20 100%);
}

.stiva-reward-banner {
    background: linear-gradient(135deg, #1c212a 0%, #11141a 100%);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.stiva-reward-banner::before,
.stiva-reward-banner::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0d0f12;
    border-radius: 50%;
    top: 50%;
    margin-top: -10px;
}

.stiva-reward-banner::before {
    left: -11px;
}

.stiva-reward-banner::after {
    right: -11px;
}

.stiva-reward-banner span {
    display: block;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.stiva-reward-banner strong {
    display: block;
    color: #ffd700;
    font-size: 24px;
    font-family: monospace;
    letter-spacing: 2px;
    background: rgba(255, 215, 0, 0.08);
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    margin: 6px 0;
}

.stiva-reward-banner small {
    display: block;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    margin-top: 6px;
}