/* === HIDDEN COIN === */
.hcc-coin-wrapper {
    position: fixed;
    bottom: 80px;
    right: 40px;
    z-index: 9998;
    cursor: pointer;
    opacity: 0;
    transform: scale(0);
    animation: hcc-pop-in 0.45s ease-out 0s forwards, hcc-float 3s ease-in-out infinite 0.45s;
}

@keyframes hcc-pop-in {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    70% { transform: scale(1.2) rotate(10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes hcc-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hcc-coin {
    width: 50px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    animation: hcc-spin 4s linear infinite;
}

@keyframes hcc-spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.hcc-coin-face {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 22px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(0,0,0,0.2);
}

.hcc-coin-front {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #8B6508;
    transform: rotateY(0deg);
    border: 3px solid #DAA520;
}

.hcc-coin-back {
    background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
    color: #fff;
    transform: rotateY(180deg);
    border: 3px solid #B8860B;
}

.hcc-coin-glow {
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
    animation: hcc-pulse-glow 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hcc-pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.hcc-coin-wrapper.collected .hcc-coin {
    animation: hcc-collect-burst 0.8s ease-out forwards !important;
}

@keyframes hcc-collect-burst {
    0% { transform: scale(1) rotateY(0deg); }
    30% { transform: scale(1.5) rotateY(180deg); }
    60% { transform: scale(0.5) rotateY(360deg); opacity: 1; }
    100% { transform: scale(0) rotateY(540deg); opacity: 0; }
}

.hcc-coin-wrapper.collected .hcc-coin-glow {
    animation: hcc-glow-burst 0.8s ease-out forwards;
}

@keyframes hcc-glow-burst {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(3); }
}

/* === TRACKER BAR === */
.hcc-tracker {
    position: fixed;
    top: 32px;
    right: 20px;
    z-index: 9999;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 25px;
    padding: 8px 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 10px rgba(255,215,0,0.2);
    border: 2px solid #FFD700;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
    min-width: 160px;
}

.hcc-tracker.visible {
    opacity: 1;
    transform: translateY(0);
}

.hcc-tracker-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.hcc-tracker-icon {
    font-size: 20px;
    animation: hcc-icon-bounce 1s ease infinite;
}

@keyframes hcc-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.hcc-tracker-count {
    color: #FFD700;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Courier New', monospace;
    min-width: 32px;
    text-align: center;
}

.hcc-tracker-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.hcc-tracker-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    border-radius: 3px;
    width: 0%;
    transition: width 0.6s ease;
    box-shadow: 0 0 8px rgba(255,215,0,0.5);
}

/* === MODAL === */
.hcc-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hcc-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.hcc-modal {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    border-radius: 20px;
    padding: 0;
    max-width: 420px;
    width: 90%;
    border: 2px solid #FFD700;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.2);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.hcc-modal-overlay.active .hcc-modal { transform: scale(1); }

.hcc-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.hcc-modal-close:hover { background: rgba(255,255,255,0.1); }

.hcc-modal-header {
    text-align: center;
    padding: 30px 30px 20px;
    background: linear-gradient(180deg, rgba(255,215,0,0.1) 0%, transparent 100%);
}

.hcc-modal-coin {
    font-size: 60px;
    animation: hcc-modal-coin-spin 1s ease-out;
    margin-bottom: 10px;
}

@keyframes hcc-modal-coin-spin {
    0% { transform: scale(0) rotate(-360deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.hcc-modal-header h2 {
    color: #FFD700;
    margin: 0 0 8px;
    font-size: 24px;
    text-shadow: 0 2px 10px rgba(255,215,0,0.3);
}

.hcc-modal-header p { color: #aaa; margin: 0; font-size: 14px; }
.hcc-modal-body { padding: 20px 30px 30px; }
.hcc-save-options { display: flex; flex-direction: column; gap: 15px; }

.hcc-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.hcc-divider::before,
.hcc-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #333;
}

.hcc-divider span { padding: 0 15px; }
.hcc-save-form { display: flex; flex-direction: column; gap: 12px; }

.hcc-save-form input {
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #333;
    background: rgba(0,0,0,0.3);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.hcc-save-form input:focus { border-color: #FFD700; }
.hcc-save-form input::placeholder { color: #666; }

.hcc-btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.hcc-btn-primary {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(255,215,0,0.3);
}

.hcc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,215,0,0.4);
}

.hcc-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid #444;
}

.hcc-btn-secondary:hover {
    background: rgba(255,255,255,0.15);
    border-color: #666;
}

.hcc-guest-save { text-align: center; }
.hcc-guest-save p { color: #888; font-size: 13px; margin: 0 0 10px; }

.hcc-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .hcc-coin-wrapper { bottom: 30px; right: 20px; }
}

/* v1.2 reward/profile additions */
.hcc-profile-linked { text-align:center; color:#ddd; }
.hcc-profile-linked p { margin:0 0 14px; }
.hcc-balance-note { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); color:#888; text-align:center; font-size:12px; }
.hcc-balance-note strong { color:#FFD700; }
.hcc-form-error { min-height:18px; color:#ff8f8f; font-size:12px; text-align:center; }
.hcc-coin-front { font-size:20px; }


/* === SITE-WIDE PLAYER HUD === */
.hcc-player-hud {
    position: fixed;
    top: 22px;
    right: 20px;
    z-index: 9999;
    width: 190px;
    min-height: 62px;
    padding: 9px 12px;
    border: 2px solid #FFD700;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 12px rgba(255,215,0,.18);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 1;
    transform: none;
    text-align: left;
    font: inherit;
}

body.admin-bar .hcc-player-hud { top: 52px; }

.hcc-player-hud:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(0,0,0,.4), 0 0 16px rgba(255,215,0,.24);
}

.hcc-hud-icon {
    flex: 0 0 auto;
    font-size: 27px;
    line-height: 1;
}

.hcc-hud-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hcc-player-name {
    display: block;
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
}

.hcc-hud-score {
    color: #FFD700;
    font-size: 13px;
    line-height: 1.1;
}

.hcc-hud-score strong {
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

.hcc-hud-label {
    color: #d8c45a;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hcc-hud-bar {
    display: block;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.hcc-hud-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    box-shadow: 0 0 8px rgba(255,215,0,.55);
    transition: width .45s ease;
}

@media (max-width: 768px) {
    .hcc-player-hud {
        top: 12px;
        right: 10px;
        width: 165px;
        min-height: 54px;
        padding: 7px 10px;
        border-radius: 14px;
    }

    body.admin-bar .hcc-player-hud { top: 58px; }

    .hcc-hud-icon { font-size: 23px; }
    .hcc-player-name { max-width: 108px; font-size: 11px; }
    .hcc-hud-score strong { font-size: 14px; }
}

/* === v1.5 mining/HUD refinements === */
/* Keep an unclaimed node permanently visible. Entrance is one-time only; the coin itself spins forever. */
.hcc-coin-wrapper {
    animation: hcc-pop-in 0.42s ease-out 0s forwards !important;
}

/* Move the modal reward coin slightly upward so it never crowds the heading. */
.hcc-modal-header {
    padding-top: 24px;
}
.hcc-modal-coin {
    position: relative;
    top: -8px;
    margin-bottom: -2px;
}

/* Preserve the compact player HUD as a bottom-left persistent control. */
.hcc-player-hud {
    top: auto !important;
    right: auto !important;
    bottom: 18px !important;
    left: 18px !important;
}
body.admin-bar .hcc-player-hud {
    top: auto !important;
}

/* Site-wide compact status line for the G1/Bimber menu bar. */
.hcc-top-status {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    margin: 0 9px 0 0;
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    transition: background .18s ease, opacity .18s ease;
}
.hcc-top-status:hover {
    background: rgba(255,215,0,.10);
}
.hcc-top-status-icon {
    font-size: 16px;
}
.hcc-top-status-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    font-size: 11px;
    font-weight: 700;
}
.hcc-top-status-total {
    color: #d9b100;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}
.hcc-top-status-label {
    color: inherit;
    opacity: .72;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.hcc-top-status-hint {
    padding-left: 6px;
    border-left: 1px solid rgba(128,128,128,.28);
    color: inherit;
    opacity: .62;
    font-size: 9px;
}

/* If the expected theme header is unavailable, keep the status usable as a fallback. */
.hcc-top-status-floating {
    position: fixed;
    top: 12px;
    right: 18px;
    z-index: 9998;
    background: rgba(20,20,32,.93);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
body.admin-bar .hcc-top-status-floating {
    top: 44px;
}

@media (max-width: 768px) {
    .hcc-player-hud {
        bottom: 12px !important;
        left: 10px !important;
    }
    .hcc-top-status {
        gap: 4px;
        margin-right: 4px;
        padding: 3px 5px;
    }
    .hcc-top-status-name,
    .hcc-top-status-hint {
        display: none;
    }
    .hcc-top-status-floating {
        top: 8px;
        right: 8px;
    }
}

/* === v1.6 instant feedback, auth, and mined-state refinements === */
.hcc-modal-header {
    padding: 22px 28px 18px;
}

.hcc-modal-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.hcc-modal-heading-copy {
    min-width: 0;
    text-align: left;
}

.hcc-modal-coin {
    position: static;
    top: auto;
    margin: 0;
    flex: 0 0 auto;
    font-size: 44px;
    line-height: 1;
}

.hcc-modal-header h2 {
    margin: 0 0 5px;
}

.hcc-modal-header p {
    margin: 0;
}

.hcc-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(0,0,0,.18);
    color: #aaa;
    font-size: 12px;
}

.hcc-auth-link {
    flex: 0 0 auto;
    color: #FFD700;
    font-weight: 700;
    text-decoration: none;
}

.hcc-auth-link:hover {
    color: #fff2a8;
    text-decoration: underline;
}

.hcc-mined-marker {
    position: fixed;
    right: 32px;
    bottom: 74px;
    z-index: 9998;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(255,215,0,.55);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(26,26,46,.96), rgba(22,33,62,.96));
    box-shadow: 0 4px 16px rgba(0,0,0,.32), 0 0 10px rgba(255,215,0,.16);
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(.96);
    transition: opacity .18s ease, transform .18s ease;
}

.hcc-mined-marker.visible {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hcc-mined-icon {
    font-size: 20px;
    line-height: 1;
}

.hcc-mined-text {
    color: #e7d77b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Keep the HUD visible even while an article's claim-state request is resolving. */
.hcc-player-hud {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .hcc-modal-heading-row {
        gap: 10px;
    }

    .hcc-modal-coin {
        font-size: 38px;
    }

    .hcc-modal-header h2 {
        font-size: 21px;
    }

    .hcc-auth-row {
        font-size: 11px;
    }

    .hcc-mined-marker {
        right: 14px;
        bottom: 26px;
        padding: 7px 9px;
    }

    .hcc-mined-text {
        display: none;
    }
}

/* === v1.7 instant reveal, player identity, visible confetti === */
.hcc-modal-playerline {
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
}
.hcc-modal-playerline strong {
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}
.hcc-auth-link-solo {
    margin-left: auto;
}

/* Modal overlay is z-index 10000; particles need to burst in front of it. */
.hcc-particle {
    z-index: 10005 !important;
    box-shadow: 0 0 6px rgba(255,255,255,.35);
}

/* A quick visual ping accompanies the first usable scroll/gesture. */
.hcc-coin-wrapper.hcc-spawn-ping .hcc-coin-glow {
    animation: hcc-spawn-ping-glow .42s ease-out 1 !important;
}
.hcc-coin-wrapper.hcc-spawn-ping .hcc-coin {
    animation: hcc-spawn-ping-coin .42s ease-out 1, hcc-spin 4s linear infinite .42s !important;
}
@keyframes hcc-spawn-ping-glow {
    0% { opacity:.45; transform:scale(1); }
    50% { opacity:1; transform:scale(1.5); }
    100% { opacity:.6; transform:scale(1); }
}
@keyframes hcc-spawn-ping-coin {
    0% { transform:scale(1) rotateY(0deg); }
    45% { transform:scale(1.16) rotateY(90deg); }
    100% { transform:scale(1) rotateY(180deg); }
}


/* === v1.9 player auth + modal cleanup === */
/* The click-site coin/confetti already supplies the reward flourish. Keep the modal headline unobstructed. */
.hcc-modal-heading-row {
    justify-content: center;
}
.hcc-modal-heading-copy {
    text-align: center;
    width: 100%;
}
.hcc-modal-coin {
    display: none !important;
}

.hcc-auth-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.hcc-player-login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: -4px 0 16px;
    padding: 14px;
    border: 1px solid rgba(255,215,0,.22);
    border-radius: 12px;
    background: rgba(0,0,0,.20);
}

.hcc-player-login-form[style*="display:none"],
.hcc-player-login-form[style*="display: none"] {
    display: none;
}

.hcc-player-login-form input {
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid #333;
    background: rgba(0,0,0,.34);
    color: #fff;
    outline: none;
}

.hcc-player-login-form input:focus {
    border-color: #FFD700;
}

.hcc-login-title {
    margin: 0 0 2px;
    color: #FFD700;
    font-weight: 800;
    font-size: 14px;
}


/* === v2.0 player identity + mobile state cleanup === */
.hcc-profile-linked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #d7d7df;
    text-align: center;
}
.hcc-profile-linked p { margin: 0; font-size: 13px; color: #b9bac6; }
.hcc-profile-linked .hcc-done { min-width: 150px; }
.hcc-guest-account-panel { text-align: center; }
.hcc-guest-account-panel > p { margin: 0 0 14px; color: #b9bac6; }
.hcc-account-actions { display:flex; gap:10px; }
.hcc-account-actions .hcc-btn { flex:1; }
.hcc-guest-link {
    margin-top: 12px;
    border: 0;
    background: transparent;
    color: #8f92a1;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.hcc-signout-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
}
.hcc-signout-footer .hcc-auth-link {
    color: #8f92a1;
    font-size: 11px;
    font-weight: 500;
    text-decoration: underline;
}
.hcc-signout-footer .hcc-auth-link:hover { color:#FFD700; }

/* The modal has no decorative coin in any viewport. */
.hcc-modal-coin { display:none !important; }

@media (max-width:768px) {
    .hcc-account-actions { flex-direction:column; }
    .hcc-player-login-form { margin:0 0 14px; padding:12px; }
    .hcc-modal-body { padding:16px 20px 22px; }
    .hcc-modal-header { padding:20px 22px 15px; }
    /* A mined marker and live coin are mutually exclusive in JS; keep marker tucked into the node location. */
    .hcc-mined-marker { right:20px; bottom:100px; }
}

/* === v2.3.1 mobile player strip + balance-only public economy === */
.hcc-mobile-player-bar {
    display: none;
}

@media (max-width: 768px) {
    /* Keep the original floating player HUD in its familiar bottom-left position. */
    .hcc-player-hud {
        display: flex !important;
        top: auto !important;
        right: auto !important;
        bottom: 12px !important;
        left: 10px !important;
    }

    /* The old desktop/header status chip stays hidden; mobile gets its own narrow strip. */
    .hcc-top-status {
        display: none !important;
    }

    /* A slim, standalone line between the logo/header and content/featured carousel. */
    .hcc-mobile-player-bar:not([hidden]) {
        display: flex;
        width: 100%;
        height: 30px;
        min-height: 30px;
        box-sizing: border-box;
        align-items: center;
        position: relative;
        z-index: 40;
        border-top: 1px solid rgba(255,215,0,.22);
        border-bottom: 1px solid rgba(255,215,0,.38);
        background: rgba(20,20,31,.98);
        box-shadow: 0 1px 3px rgba(0,0,0,.22);
        color: #fff;
        overflow: hidden;
    }

    .hcc-mobile-player-main {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        color: inherit;
        flex: 1 1 auto;
        min-width: 0;
        height: 30px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        text-align: left;
        cursor: pointer;
        font: inherit;
    }

    .hcc-mobile-player-icon {
        flex: 0 0 auto;
        font-size: 15px;
        line-height: 1;
    }

    .hcc-mobile-player-copy {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    .hcc-mobile-player-name {
        flex: 0 0 auto;
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
    }

    .hcc-mobile-player-cta {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #b8bac5;
        font-size: 9px;
        line-height: 1;
    }

    .hcc-mobile-player-wallet {
        flex: 0 0 auto;
        color: #d9b100;
        font-size: 9px;
        font-weight: 700;
        white-space: nowrap;
    }

    .hcc-mobile-player-wallet strong {
        font-family: 'Courier New', monospace;
        font-size: 11px;
    }

    .hcc-mobile-player-signin {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        height: 30px;
        border: 0;
        border-left: 1px solid rgba(255,215,0,.22);
        background: transparent;
        color: #FFD700;
        padding: 0 9px;
        font-size: 9px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .02em;
        cursor: pointer;
    }

    .hcc-mobile-player-signin:active {
        background: rgba(255,215,0,.10);
    }

    /* Once a login/register path is chosen, show only that state. */
    .hcc-player-login-form {
        margin-top: 0;
    }

    .hcc-guest-account-panel > p strong {
        color: #FFD700;
        font-size: 13px;
    }

    .hcc-guest-account-panel > p span {
        display: inline-block;
        margin-top: 4px;
        color: #9699a8;
        font-size: 11px;
    }
}


/* === v2.3.2 hard compact mobile header HUD === */
@media (max-width: 768px) {
    /* The bottom-left HUD remains the full player card. This top strip is intentionally tiny. */
    #hcc-mobile-player-bar.hcc-mobile-player-bar:not([hidden]) {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
        overflow: hidden !important;
        background: #15151f !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,215,0,.18) !important;
        border-bottom: 1px solid rgba(255,215,0,.38) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        line-height: 1 !important;
    }

    #hcc-mobile-player-main.hcc-mobile-player-main {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        align-items: center !important;
        gap: 6px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #fff !important;
        overflow: hidden !important;
        line-height: 1 !important;
        font-size: 10px !important;
        text-transform: none !important;
    }

    #hcc-mobile-player-bar .hcc-mobile-player-icon {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        font-size: 13px !important;
        line-height: 16px !important;
    }

    #hcc-mobile-player-bar .hcc-mobile-player-icon img,
    #hcc-mobile-player-bar .hcc-mobile-player-icon img.emoji {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        max-width: 14px !important;
        min-height: 14px !important;
        max-height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #hcc-mobile-player-bar .hcc-mobile-player-copy {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: hidden !important;
        line-height: 1 !important;
    }

    #hcc-mobile-player-bar .hcc-mobile-player-name {
        display: inline-block !important;
        flex: 0 1 auto !important;
        max-width: 105px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: .02em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #hcc-mobile-player-bar .hcc-mobile-player-cta {
        display: inline-block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #b8bac5 !important;
        font-size: 8px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #hcc-mobile-player-bar .hcc-mobile-player-wallet {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        color: #d9b100 !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    #hcc-mobile-player-bar .hcc-mobile-player-wallet strong {
        margin: 0 3px 0 0 !important;
        padding: 0 !important;
        font-family: 'Courier New', monospace !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    #hcc-mobile-player-signin.hcc-mobile-player-signin {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        align-items: center !important;
        border: 0 !important;
        border-left: 1px solid rgba(255,215,0,.22) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #FFD700 !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }
}
\n\n/* === v2.3.3 mobile identity placement + state clarity === */\n@media (max-width: 768px) {\n    #hcc-mobile-player-main.hcc-mobile-player-main {\n        justify-content: flex-start !important;\n        padding: 0 10px !important;\n        gap: 7px !important;\n    }\n    #hcc-mobile-player-bar .hcc-mobile-player-copy { display: none !important; }\n    #hcc-mobile-player-bar .hcc-mobile-player-wallet {\n        order: 2 !important;\n        flex: 0 0 auto !important;\n        font-size: 9px !important;\n    }\n    #hcc-mobile-player-bar .hcc-mobile-player-wallet strong {\n        font-size: 11px !important;\n        letter-spacing: .03em !important;\n    }\n    #hcc-mobile-player-bar .hcc-mobile-player-cta {\n        order: 3 !important;\n        display: inline-block !important;\n        flex: 1 1 auto !important;\n        min-width: 0 !important;\n        max-width: none !important;\n        font-size: 8px !important;\n        opacity: .78 !important;\n    }\n    #hcc-mobile-player-action.hcc-mobile-player-action {\n        display: inline-flex !important;\n        flex: 0 0 auto !important;\n        align-items: center !important;\n        justify-content: center !important;\n        height: 28px !important;\n        min-height: 28px !important;\n        max-height: 28px !important;\n        max-width: 145px !important;\n        margin: 0 !important;\n        padding: 0 12px !important;\n        border: 0 !important;\n        border-left: 1px solid rgba(255,215,0,.22) !important;\n        border-radius: 0 !important;\n        background: transparent !important;\n        box-shadow: none !important;\n        color: #FFD700 !important;\n        font-size: 9px !important;\n        font-weight: 900 !important;\n        line-height: 1 !important;\n        letter-spacing: .02em !important;\n        text-transform: uppercase !important;\n        white-space: nowrap !important;\n        overflow: hidden !important;\n        text-overflow: ellipsis !important;\n    }\n    #hcc-mobile-player-action.hcc-mobile-player-action.is-player { color: #fff !important; }\n    #hcc-mobile-player-name {\n        display: block !important;\n        max-width: 120px !important;\n        overflow: hidden !important;\n        text-overflow: ellipsis !important;\n        white-space: nowrap !important;\n    }\n}\n/* Secret Squirrel TV — scoped to .sstv-root and .sstv-overlay */
.sstv-root,.sstv-overlay{--sstv-accent:#ccff55;--sstv-accent2:#ff8d62;--sstv-bg:#101720;--sstv-card-w:222px;--sstv-round:16px;--sstv-paper:#f0f5e9;--sstv-muted:#a9b6b4;color:var(--sstv-paper);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box}
.sstv-root *,.sstv-overlay *{box-sizing:border-box}
.sstv-root button,.sstv-overlay button{font:inherit;cursor:pointer}
.sstv-root button:focus-visible,.sstv-overlay button:focus-visible,.sstv-overlay a:focus-visible{outline:3px solid var(--sstv-accent);outline-offset:3px}
.sstv-root .sstv-rail{background:var(--sstv-bg);background-image:radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--sstv-accent) 13%,transparent),transparent 31%),radial-gradient(circle at 6% 100%,color-mix(in srgb,var(--sstv-accent2) 7%,transparent),transparent 36%);border-top:2px solid color-mix(in srgb,var(--sstv-accent) 55%,transparent);border-bottom:1px solid #334148;border-radius:0;box-shadow:0 -14px 40px rgba(0,0,0,.1);padding:28px clamp(14px,3.6vw,44px) 15px;position:relative;overflow:hidden;isolation:isolate}
.sstv-root .sstv-rail:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 7px,rgba(255,255,255,.013) 8px);z-index:-1;pointer-events:none}
.sstv-root .sstv-rail-head{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:18px;position:relative}
.sstv-root .sstv-brand{display:flex;align-items:center;min-width:0;gap:12px}
.sstv-root .sstv-mascot{width:96px;height:94px;align-self:flex-end;object-fit:contain;margin-top:-34px;margin-bottom:-10px;filter:drop-shadow(0 4px 1px rgba(0,0,0,.3));animation:sstv-peek 6.5s ease-in-out infinite;transform-origin:bottom center;flex-shrink:0}
@keyframes sstv-peek{0%,87%,100%{transform:translateY(3px) rotate(-3deg)}90%,95%{transform:translateY(-5px) rotate(3deg)}}
.sstv-root .sstv-eyebrow,.sstv-overlay .sstv-stage-brand small,.sstv-overlay .sstv-grid-heading small{font-size:9px;line-height:1.3;letter-spacing:2.1px;color:var(--sstv-accent);font-weight:800}
.sstv-root .sstv-eyebrow{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.sstv-root .sstv-live-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--sstv-accent);box-shadow:0 0 9px var(--sstv-accent);animation:sstv-pulse 2s ease-in-out infinite}
@keyframes sstv-pulse{50%{opacity:.3}}
.sstv-root .sstv-logo{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;color:var(--sstv-paper);font-size:clamp(26px,3.6vw,45px);letter-spacing:.8px;line-height:.98;text-transform:uppercase}
.sstv-root .sstv-logo-tv{color:var(--sstv-accent);text-shadow:2px 3px 0 rgba(0,0,0,.45)}
.sstv-root .sstv-subtitle{color:var(--sstv-muted);font-size:12px;margin-top:7px}
.sstv-root .sstv-open-hatch{background:var(--sstv-accent);border:0;border-radius:6px;color:#121914;font-size:12px;font-weight:900;letter-spacing:1px;padding:14px 16px;white-space:nowrap;box-shadow:4px 4px 0 var(--sstv-accent2);transform:rotate(1.5deg);transition:transform .18s,box-shadow .18s}
.sstv-root .sstv-open-hatch:hover{transform:rotate(-2deg) translateY(-2px);box-shadow:6px 6px 0 var(--sstv-accent2)}
.sstv-root .sstv-track-frame{position:relative;display:flex;align-items:center;gap:8px}
.sstv-root .sstv-track{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--sstv-accent) transparent;padding:10px 2px 15px;flex:1;min-width:0}
.sstv-root .sstv-video-card,.sstv-overlay .sstv-grid-card{background:#1b2730;border:1px solid #3c4b50;border-radius:var(--sstv-round);color:var(--sstv-paper);overflow:hidden;text-align:left;display:flex;flex-direction:column;padding:0;min-width:0;transition:transform .16s,border-color .16s,box-shadow .16s}
.sstv-root .sstv-video-card{flex:0 0 var(--sstv-card-w);scroll-snap-align:start;box-shadow:0 5px 0 rgba(0,0,0,.22)}
.sstv-root .sstv-video-card:hover,.sstv-overlay .sstv-grid-card:hover{transform:translateY(-4px) rotate(-.6deg);border-color:var(--sstv-accent);box-shadow:0 8px 20px rgba(0,0,0,.32)}
.sstv-root .sstv-card-image,.sstv-overlay .sstv-card-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#24303b;width:100%}
.sstv-root .sstv-card-image img,.sstv-overlay .sstv-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .24s}
.sstv-root .sstv-video-card:hover img,.sstv-overlay .sstv-grid-card:hover img{transform:scale(1.06)}
.sstv-root .sstv-card-play,.sstv-overlay .sstv-card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.85);background:rgba(6,15,21,.67);backdrop-filter:blur(5px);color:white;border-radius:50%;font-size:15px;padding-left:3px}
.sstv-root .sstv-video-card:hover .sstv-card-play,.sstv-overlay .sstv-grid-card:hover .sstv-card-play{background:var(--sstv-accent);color:#101720;border-color:var(--sstv-accent)}
.sstv-root .sstv-demo-badge,.sstv-overlay .sstv-demo-badge{position:absolute;top:7px;left:7px;font-size:8px;letter-spacing:1px;font-weight:850;color:#172017;background:var(--sstv-accent);padding:4px 6px;transform:rotate(-3deg)}
.sstv-root .sstv-card-bottom,.sstv-overlay .sstv-card-bottom{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sstv-root .sstv-card-number,.sstv-overlay .sstv-card-number{font-size:8px;font-weight:900;letter-spacing:1.5px;color:var(--sstv-accent2)}
.sstv-root .sstv-card-title,.sstv-overlay .sstv-card-title{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:1.4}
.sstv-root .sstv-track-nav{background:#27333b;border:1px solid #45535a;color:var(--sstv-accent);border-radius:50%;width:30px;height:30px;flex-shrink:0;font-size:24px;line-height:18px;display:grid;place-items:center;padding-bottom:5px}
.sstv-root .sstv-track-nav:hover{background:var(--sstv-accent);color:#121914}
.sstv-root .sstv-rail-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#7c9496;font-size:9px;letter-spacing:1.8px;padding-top:3px;font-weight:700}
.sstv-root .sstv-rail-foot b{color:var(--sstv-accent2)}
.sstv-root .sstv-empty{background:#161f26;color:#c9d3c7;padding:20px}
/* Modal */
body.sstv-overlay-open{overflow:hidden!important}
.sstv-overlay{position:fixed!important;inset:0!important;z-index:2147483000!important;display:flex;align-items:center;justify-content:center;padding:clamp(4px,2vw,23px);color:var(--sstv-paper);isolation:isolate}
.sstv-overlay-backdrop{position:absolute;inset:0;background:rgba(0,5,9,.87);backdrop-filter:blur(11px);cursor:zoom-out;z-index:-1}
.sstv-overlay .sstv-stage{height:100%;width:min(1500px,100%);position:relative;overflow:hidden;display:flex;flex-direction:column;border:2px solid var(--sstv-accent);border-radius:12px;background:var(--sstv-bg);box-shadow:0 0 0 5px rgba(0,0,0,.3),0 22px 65px rgba(0,0,0,.5)}
.sstv-overlay .sstv-stage:before{content:"TOP SECRET • TOP SECRET • TOP SECRET";position:absolute;left:-70px;top:290px;transform:rotate(-90deg);font-size:8px;letter-spacing:4px;color:rgba(255,255,255,.1);pointer-events:none}
.sstv-overlay .sstv-stage-head{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid #38434b;padding:14px clamp(12px,2.5vw,34px);background:#0b1118;flex-shrink:0;min-height:76px}
.sstv-overlay .sstv-stage-brand{display:flex;align-items:center;gap:12px;min-width:0}
.sstv-overlay .sstv-stage-icon{font-size:36px;transform:rotate(-17deg)}
.sstv-overlay .sstv-stage-brand small{display:block;margin-bottom:3px}
.sstv-overlay .sstv-stage-brand strong{display:block;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(21px,2.7vw,34px);letter-spacing:1px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:65vw}
.sstv-overlay .sstv-stage-actions{display:flex;align-items:center;gap:20px}
.sstv-overlay .sstv-tiny-label{font-size:9px;color:#819395;letter-spacing:1.2px}
.sstv-overlay .sstv-close{background:transparent;color:var(--sstv-accent);border:1px solid var(--sstv-accent);border-radius:6px;font-size:12px;font-weight:800;letter-spacing:1px;padding:9px 12px}
.sstv-overlay .sstv-close:hover{background:var(--sstv-accent);color:#111}
.sstv-overlay .sstv-stage-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:clamp(12px,2.8vw,34px);scrollbar-color:var(--sstv-accent) #19232d;scrollbar-width:thin}
.sstv-overlay .sstv-top-content{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,.75fr);align-items:start;gap:clamp(16px,3vw,40px)}
.sstv-overlay .sstv-player-shell{min-width:0}
.sstv-overlay .sstv-player{aspect-ratio:16/9;background:#010305;border:2px solid #39464c;position:relative;overflow:hidden;box-shadow:8px 9px 0 rgba(0,0,0,.25)}
.sstv-overlay .sstv-player video,.sstv-overlay .sstv-player iframe{display:block;width:100%;height:100%;border:0;object-fit:contain;background:black}
.sstv-overlay .sstv-player-sub{display:flex;gap:12px;justify-content:space-between;margin-top:14px;align-items:center;font-size:10px;font-weight:800;letter-spacing:1.4px;color:#b4c3bf}
.sstv-overlay .sstv-playing-pill{color:var(--sstv-accent);font-size:10px}
.sstv-overlay .sstv-file-tag{display:inline-block;background:var(--sstv-accent2);color:#1a1311;font-size:9px;font-weight:950;letter-spacing:2px;padding:7px 9px;transform:rotate(-2deg);margin:3px 0 20px}
.sstv-overlay .sstv-active-info h2{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;line-height:1.05;letter-spacing:.4px;font-size:clamp(31px,4.5vw,63px);margin:0 0 18px;color:var(--sstv-paper);overflow-wrap:anywhere}
.sstv-overlay .sstv-current-description{font-size:clamp(13px,1.4vw,16px);line-height:1.7;color:#b3c0ba;margin:0 0 24px}
.sstv-overlay .sstv-actions{display:flex;flex-wrap:wrap;gap:11px}
.sstv-overlay .sstv-read-story,.sstv-overlay .sstv-next-video,.sstv-overlay .sstv-story-link{border:0;color:#142016;background:var(--sstv-accent);font-size:12px;font-weight:900;letter-spacing:.7px;border-radius:5px;padding:13px 14px;text-decoration:none;display:inline-block}
.sstv-overlay .sstv-next-video{background:#27353b;color:#f7f7e8;border:1px solid #536066}
.sstv-overlay .sstv-read-story:hover,.sstv-overlay .sstv-story-link:hover{filter:brightness(1.13)}
.sstv-overlay .sstv-disclaimer{font-size:10px;color:#637b7d;margin-top:22px}
.sstv-overlay .sstv-grid-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:1px dashed #4c605e;margin:40px 0 17px;padding-top:24px}
.sstv-overlay .sstv-grid-heading h3{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(24px,3.5vw,39px);margin:6px 0 0;letter-spacing:.3px}
.sstv-overlay .sstv-grid-heading>span{color:var(--sstv-accent);font-size:10px;white-space:nowrap;letter-spacing:1.3px}
.sstv-overlay .sstv-video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sstv-overlay .sstv-grid-card{width:100%;cursor:pointer}
.sstv-overlay .sstv-grid-card.is-active{border-color:var(--sstv-accent);box-shadow:0 0 0 2px var(--sstv-accent)}
.sstv-overlay .sstv-grid-card .sstv-card-title{font-size:13px}
.sstv-overlay .sstv-stage-foot{margin:38px 0 3px;color:#678084;text-align:center;letter-spacing:2px;font-size:10px}
.sstv-overlay .sstv-no-signal{width:100%;height:100%;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(0deg,#16252b,#16252b 3px,#26343a 4px);gap:8px}
.sstv-overlay .sstv-no-signal span{font-size:56px}.sstv-overlay .sstv-no-signal strong{font-size:17px;letter-spacing:2px}.sstv-overlay .sstv-no-signal p{font-size:13px;color:#ccd3c5;margin:0}.sstv-overlay .sstv-no-signal a{color:var(--sstv-accent);font-weight:bold}
.sstv-overlay .sstv-story-panel{position:absolute;z-index:4;right:0;top:76px;bottom:0;width:min(470px,100%);background:#f2eedb;color:#1a2a28;padding:clamp(20px,4vw,44px);transform:translateX(103%);transition:transform .24s ease;box-shadow:-16px 0 25px rgba(0,0,0,.3);overflow-y:auto;visibility:hidden}
.sstv-overlay .sstv-story-panel.is-open{transform:translateX(0);visibility:visible}
.sstv-overlay .sstv-story-close{border:0;background:transparent;padding:0;color:#20372b;font-weight:800;font-size:12px;letter-spacing:1.2px;margin-bottom:52px}
.sstv-overlay .sstv-story-kicker{display:block;background:#203b2b;color:var(--sstv-accent);font-size:10px;letter-spacing:1.4px;padding:8px 10px;width:max-content;max-width:100%;transform:rotate(-1deg)}
.sstv-overlay .sstv-story-title{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(34px,4vw,54px);margin:28px 0 14px;line-height:1.05;color:#193328}
.sstv-overlay .sstv-story-description{font-size:17px;line-height:1.65;color:#384940;margin-bottom:30px}
.sstv-overlay .sstv-story-link{background:#203b2b;color:#d9f8ac}
.sstv-overlay .sstv-story-link[aria-disabled="true"]{opacity:.6;pointer-events:none}
.sstv-overlay .sstv-story-note{margin-top:24px;font-size:11px;color:#6f7768;line-height:1.5}
/* alternate styles */
.sstv-root[data-tv-style="arcade"] .sstv-rail,.sstv-overlay[data-tv-style="arcade"] .sstv-stage{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px)}
.sstv-root[data-tv-style="arcade"] .sstv-logo,.sstv-overlay[data-tv-style="arcade"] .sstv-stage-brand strong{text-shadow:3px 3px 0 var(--sstv-accent2)}
.sstv-root[data-tv-style="noir"] .sstv-rail{background-image:radial-gradient(ellipse at 90% 40%,rgba(255,255,255,.045),transparent 65%)}
.sstv-root[data-tv-style="noir"] .sstv-mascot{filter:grayscale(.8) drop-shadow(1px 4px 0 #000)}
@media(max-width:850px){.sstv-overlay .sstv-top-content{grid-template-columns:1fr}.sstv-overlay .sstv-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sstv-overlay .sstv-file-tag{margin-bottom:10px}.sstv-overlay .sstv-active-info h2{margin-bottom:9px}.sstv-overlay .sstv-disclaimer{display:none}.sstv-overlay .sstv-current-description{margin-bottom:15px}}
@media(max-width:540px){.sstv-root .sstv-rail{padding:25px 8px 12px}.sstv-root .sstv-rail-head{align-items:flex-start;flex-direction:column;gap:11px;padding:0 7px}.sstv-root .sstv-brand{gap:6px}.sstv-root .sstv-mascot{width:65px;height:74px;margin-top:-24px;margin-bottom:-5px}.sstv-root .sstv-logo{font-size:27px}.sstv-root .sstv-eyebrow{font-size:7px;letter-spacing:.9px}.sstv-root .sstv-subtitle{font-size:11px}.sstv-root .sstv-open-hatch{font-size:11px;padding:9px 12px;margin-left:70px}.sstv-root .sstv-track-nav{display:none}.sstv-root .sstv-track{padding-left:8px}.sstv-root .sstv-rail-foot{font-size:8px;letter-spacing:.6px;padding:2px 9px}.sstv-overlay{padding:0}.sstv-overlay .sstv-stage{border-width:0;border-radius:0}.sstv-overlay .sstv-stage-head{min-height:64px;padding:8px 12px}.sstv-overlay .sstv-stage-icon{font-size:24px}.sstv-overlay .sstv-stage-brand strong{font-size:20px}.sstv-overlay .sstv-stage-brand small{font-size:7px;letter-spacing:1px}.sstv-overlay .sstv-close{padding:8px;font-size:17px}.sstv-overlay .sstv-close span,.sstv-overlay .sstv-tiny-label{display:none}.sstv-overlay .sstv-stage-scroll{padding:12px}.sstv-overlay .sstv-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sstv-overlay .sstv-grid-heading{margin-top:23px}.sstv-overlay .sstv-grid-heading>span{display:none}.sstv-overlay .sstv-story-panel{top:64px}.sstv-overlay .sstv-stage-head{border-bottom:1px solid #3e5146}}
@media(prefers-reduced-motion:reduce){.sstv-root .sstv-mascot,.sstv-root .sstv-live-dot{animation:none}.sstv-root *, .sstv-overlay *{transition-duration:.001s!important;scroll-behavior:auto!important}}