/* ScrimView site frame.
   The public ScrimView pages (the landing page, the stream setup guide, the
   scrim planner) share this header, footer and look with the ScrimView app,
   and take nothing from OTPStats: no styles.css, no OTPStats nav or sidebar.
   ScrimView moves to its own domain later; these files move with it as is. */

:root {
    --sv-bg: #07090d;
    --sv-bg-2: #0d1117;
    --sv-bg-3: #151b23;
    --sv-bg-4: #1c232d;
    --sv-line: rgba(255, 255, 255, 0.08);
    --sv-line-2: rgba(255, 255, 255, 0.14);
    --sv-red: #ff4655;
    --sv-red-2: #ff6b77;
    --sv-red-soft: rgba(255, 70, 85, 0.13);
    --sv-red-line: rgba(255, 70, 85, 0.34);
    --sv-text: #e8eaf0;
    --sv-mute: #a2a9ba;
    --sv-dim: #6b7285;
    --sv-ok: #3de0c4;
    --sv-warn: #ffb648;
    --sv-blue: #6b9cff;
    --sv-glow: 0 0 4px rgba(255, 92, 105, 0.9), 0 0 14px rgba(255, 70, 85, 0.5), 0 0 34px rgba(255, 70, 85, 0.22);
    --sv-glow-soft: 0 0 3px rgba(255, 92, 105, 0.55), 0 0 14px rgba(255, 70, 85, 0.22);
    --sv-radius: 14px;
    --sv-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --sv-ease: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.sv {
    margin: 0;
    min-height: 100vh;
    background: var(--sv-bg);
    color: var(--sv-text);
    font: 15px/1.6 var(--sv-font);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}
body.sv > main { flex: 1 0 auto; }
.sv a { color: inherit; }
.sv img { max-width: 100%; }
/* Zero specificity, so any class rule (.sv-btn, a page's own buttons) wins over it. */
:where(.sv) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.sv :focus-visible { outline: 2px solid var(--sv-red); outline-offset: 2px; border-radius: 6px; }
.sv-skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--sv-red); color: #fff; padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.sv-skip:focus { top: 10px; }

.sv-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sv-wrap.narrow { max-width: 880px; }

/* ---------- header ---------- */
.sv-top {
    position: sticky; top: 0; z-index: 50;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(7, 9, 13, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--sv-line);
}
.sv-top-in {
    max-width: 1240px; margin: 0 auto; padding: 0 20px;
    height: 62px; display: flex; align-items: center; gap: 22px;
}
.sv-mark {
    font-weight: 800; font-size: 17px; letter-spacing: 0.14em; color: #fff;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: text-shadow 0.3s;
}
.sv-mark b { color: var(--sv-red); font-weight: 800; text-shadow: var(--sv-glow-soft); transition: text-shadow 0.3s; }
.sv-mark:hover b { text-shadow: var(--sv-glow); }
.sv-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sv-nav a {
    position: relative; color: var(--sv-mute); text-decoration: none;
    font-size: 14px; font-weight: 500; padding: 8px 11px; border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.sv-nav a:hover { color: var(--sv-text); background: rgba(255, 255, 255, 0.04); }
.sv-nav a.on { color: var(--sv-text); }
.sv-nav a.on::after {
    content: ''; position: absolute; left: 11px; right: 11px; bottom: -12px; height: 2px;
    background: var(--sv-red); border-radius: 2px; box-shadow: var(--sv-glow-soft);
}
.sv-top-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* The account side waits for the sign-in check, so a signed-in visitor never
   sees "Sign in" flash first. sv.js lifts this; a 1.5 s fallback lifts it too. */
.sv-top-r[data-pending] { visibility: hidden; }
.sv-menu-btn {
    display: none; width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--sv-line-2); background: var(--sv-bg-3); cursor: pointer;
    align-items: center; justify-content: center;
}
.sv-menu-btn span, .sv-menu-btn span::before, .sv-menu-btn span::after {
    display: block; width: 16px; height: 2px; background: var(--sv-text); border-radius: 2px;
    position: relative; transition: transform 0.25s var(--sv-ease), background 0.2s;
}
.sv-menu-btn span::before, .sv-menu-btn span::after { content: ''; position: absolute; left: 0; }
.sv-menu-btn span::before { top: -5px; }
.sv-menu-btn span::after { top: 5px; }
.sv-top.open .sv-menu-btn span { background: transparent; }
.sv-top.open .sv-menu-btn span::before { transform: translateY(5px) rotate(45deg); }
.sv-top.open .sv-menu-btn span::after { transform: translateY(-5px) rotate(-45deg); }

/* account menu */
.sv-me { position: relative; }
.sv-me-btn {
    display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 5px;
    border-radius: 999px; border: 1px solid var(--sv-line-2); background: var(--sv-bg-3);
    cursor: pointer; font-size: 13px; font-weight: 600; max-width: 230px;
}
.sv-me-btn:hover { border-color: var(--sv-dim); }
.sv-me-btn .sv-av {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sv-red); color: #fff; font-size: 12px; font-weight: 800;
}
.sv-me-btn .sv-me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-me-list {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 60;
    background: var(--sv-bg-2); border: 1px solid var(--sv-line-2); border-radius: 12px;
    padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.18s, transform 0.18s var(--sv-ease);
}
.sv-me.open .sv-me-list { opacity: 1; transform: none; pointer-events: auto; }
.sv-me-list a {
    display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
    font-size: 14px; color: var(--sv-text);
}
.sv-me-list a:hover { background: rgba(255, 255, 255, 0.05); }
.sv-me-list form { margin: 0; }
.sv-me-list button {
    display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
    border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--sv-text);
}
.sv-me-list button:hover { background: rgba(255, 255, 255, 0.05); }
.sv-me-list .sv-me-who { padding: 8px 12px 10px; font-size: 12px; color: var(--sv-dim); border-bottom: 1px solid var(--sv-line); margin-bottom: 4px; }
.sv-me-list hr { border: 0; border-top: 1px solid var(--sv-line); margin: 4px 0; }

/* ---------- buttons, chips, panels ---------- */
.sv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--sv-line-2); background: var(--sv-bg-3); color: var(--sv-text);
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.3s, transform 0.2s var(--sv-ease);
}
.sv-btn:hover { border-color: var(--sv-mute); }
.sv-btn.red { background: var(--sv-red); border-color: var(--sv-red); color: #fff; }
.sv-btn.red:hover { box-shadow: var(--sv-glow); transform: translateY(-1px); }
.sv-btn.ghost { background: transparent; }
.sv-btn.big { height: 48px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.sv-btn.small { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.sv-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

.sv-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--sv-line-2); background: var(--sv-bg-3); color: var(--sv-mute);
    font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.sv-chip.red { border-color: var(--sv-red-line); color: var(--sv-red-2); background: var(--sv-red-soft); }
.sv-chip.ok { border-color: rgba(61, 224, 196, 0.35); color: var(--sv-ok); background: rgba(61, 224, 196, 0.08); }
.sv-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.sv-dot.live { background: var(--sv-red); box-shadow: 0 0 0 0 rgba(255, 70, 85, 0.6); animation: sv-live 1.6s infinite; }
@keyframes sv-live {
    0% { box-shadow: 0 0 0 0 rgba(255, 70, 85, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(255, 70, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 70, 85, 0); }
}

.sv-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 60%), var(--sv-bg-2);
    border: 1px solid var(--sv-line); border-radius: var(--sv-radius);
}
.sv-neon { border-color: var(--sv-red-line); box-shadow: var(--sv-glow-soft); }

.sv-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--sv-red-2);
}
.sv-h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; margin: 0; }
.sv-h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0; }
.sv-h3 { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 0; }
.sv-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--sv-mute); line-height: 1.6; margin: 0; }
.sv-mute { color: var(--sv-mute); }
.sv-dimtext { color: var(--sv-dim); }

/* ---------- page hero ----------
   The centred opening of a public page (the setup guide, the planner): an
   eyebrow, the title with one part lit red (.sv-hl), the lead, over a faint
   glow that reaches up behind the header. */
.sv-hero { position: relative; isolation: isolate; text-align: center; padding: 76px 0 44px; }
.sv-hero::before {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -62px; height: 470px; pointer-events: none;
    background: radial-gradient(620px 230px at 50% 44%, rgba(255, 70, 85, 0.12), transparent 70%),
                radial-gradient(1000px 360px at 50% 0%, rgba(107, 156, 255, 0.05), transparent 70%);
}
.sv-hero .sv-eyebrow { margin-bottom: 16px; }
.sv-hero .sv-lead { max-width: 680px; margin: 20px auto 0; }
.sv-hl { color: var(--sv-red); text-shadow: 0 0 28px rgba(255, 70, 85, 0.35); }
@media (max-width: 860px) {
    .sv-hero { padding: 52px 0 32px; }
}

/* ---------- reveal on scroll ----------
   Plays for everyone: this PC, like many Windows boxes with "animation
   effects" off, tells the browser to reduce motion, and gating on that left
   the page with no animation at all. With reduce on, things still fade in;
   they just do not travel. */
.sv-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--sv-ease), transform 0.8s var(--sv-ease); }
.sv-reveal.in { opacity: 1; transform: none; }
.sv-reveal[data-d="1"] { transition-delay: 0.08s; }
.sv-reveal[data-d="2"] { transition-delay: 0.16s; }
.sv-reveal[data-d="3"] { transition-delay: 0.24s; }
.sv-reveal[data-d="4"] { transition-delay: 0.32s; }
.sv-reveal[data-d="5"] { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
    .sv-reveal { transform: none; }
}
/* No script, no observer: show everything. */
.sv-nojs .sv-reveal { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.sv-foot { border-top: 1px solid var(--sv-line); margin-top: 80px; padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px)); }
.sv-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.sv-foot .sv-mark { font-size: 15px; }
.sv-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.sv-foot nav a { color: var(--sv-mute); text-decoration: none; font-size: 13.5px; }
.sv-foot nav a:hover { color: var(--sv-text); }
.sv-foot-by { margin-left: auto; color: var(--sv-dim); font-size: 13px; }

/* ---------- forms ---------- */
.sv-field { display: block; font-size: 13px; color: var(--sv-mute); font-weight: 500; }
.sv-field > input, .sv-field > select, .sv-field > textarea,
.sv-input {
    display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
    background: var(--sv-bg); border: 1px solid var(--sv-line-2); border-radius: 10px;
    color: var(--sv-text); font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s;
}
.sv-field > input:focus, .sv-field > select:focus, .sv-field > textarea:focus, .sv-input:focus {
    outline: none; border-color: var(--sv-red-line); box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.15);
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
    .sv-top-in { gap: 12px; }
    .sv-menu-btn { display: inline-flex; }
    .sv-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(9, 11, 16, 0.98); border-bottom: 1px solid var(--sv-line);
        padding: 8px 14px 14px; max-height: 0; overflow: hidden; visibility: hidden;
        transition: max-height 0.3s var(--sv-ease), visibility 0.3s;
    }
    .sv-top.open .sv-nav { max-height: 420px; visibility: visible; }
    .sv-nav a { padding: 12px 10px; font-size: 16px; }
    .sv-nav a.on::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
    .sv-top-r .sv-hide-phone { display: none; }
    .sv-foot-by { margin-left: 0; width: 100%; }
}
@media (max-width: 420px) {
    .sv-wrap, .sv-top-in { padding: 0 16px; }
    .sv-mark { font-size: 15px; letter-spacing: 0.1em; }
    .sv-me-btn .sv-me-name { display: none; }
    .sv-me-btn { padding: 0 5px; }
}