/* /Components/Games/NInvention/NInventionGame.razor.rz.scp.css */
/* NInvention — scoped styles (single component, so scoped CSS reaches all of it, including the
   Card render fragment). Grayscale only, alongside the global pg- design system. */

/* break overly long single words (a one-word feature/name) so they wrap instead of overflowing the card;
   inherited, so it covers every place player text appears. `anywhere` (not break-word) also lets the
   pitch's grid columns shrink. */
.ninv-wrap[b-t1q8r0wjx9] { text-align: center; overflow-wrap: anywhere; }

.ninv-submit[b-t1q8r0wjx9] { margin-top: 1.25rem; }

/* the per-phase intro instructions (timer runs while you read; "Got it" proceeds) */
.ninv-instructions[b-t1q8r0wjx9] {
    text-align: left;
    color: #d8d8de;
    line-height: 1.55;
    font-size: 0.98rem;
    margin: 0.6rem auto 1.4rem;
    max-width: 34rem;
}

/* generic vertical list used by revise / fund / scoreboard */
.ninv-list[b-t1q8r0wjx9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 1.25rem;
}

/* a selectable option (feature request, problem pick) */
.ninv-item[b-t1q8r0wjx9] {
    display: block;
    width: 100%;
    text-align: left;
    background: #141417;
    border: 1px solid #2c2c33;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    color: #ededf0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ninv-item:hover[b-t1q8r0wjx9] { border-color: #45454f; }
.ninv-item.selected[b-t1q8r0wjx9] { border-color: #fafafa; background: #1d1d22; }

/* the shared invention card (Card render fragment) */
.ninv-card[b-t1q8r0wjx9] {
    text-align: left;
    background: #141417;
    border: 1px solid #2c2c33;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}
.ninv-name[b-t1q8r0wjx9] { font-weight: 700; color: #f0f0f3; font-size: 1.05rem; }
.ninv-tagline[b-t1q8r0wjx9] { color: #c4c4cc; font-style: italic; margin-top: 0.15rem; }
.ninv-features[b-t1q8r0wjx9] {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
    color: #d8d8de;
    font-size: 0.9rem;
}
.ninv-features li[b-t1q8r0wjx9] { margin: 0.1rem 0; }
.ninv-solves[b-t1q8r0wjx9] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: #8a8a92;
}
.ninv-solve[b-t1q8r0wjx9] { color: #b4b4bc; margin-top: 0.1rem; }

/* presentation pitch: name + tagline on top, features (left 30%) | picture (right 70%) */
.ninv-pitch[b-t1q8r0wjx9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 1.25rem;
    background: var(--th-bg, transparent);
    border: 1px solid var(--th-border, transparent);
    border-radius: 12px;
    padding: 0.9rem;
}
.ninv-pitch .ninv-pitch-name[b-t1q8r0wjx9] { color: var(--th-accent, #fafafa); }
.ninv-pitch .ninv-pitch-tagline[b-t1q8r0wjx9] { color: var(--th-text, #c4c4cc); }
.ninv-pitch .ninv-feature[b-t1q8r0wjx9] { border-color: var(--th-border, #2c2c33); color: var(--th-text, #ededf0); }
.ninv-pitch .ninv-features-head[b-t1q8r0wjx9] { color: var(--th-accent, #8a8a92); opacity: 0.85; }
.ninv-pitch-solving[b-t1q8r0wjx9] { color: #8a8a92; font-size: 0.82rem; font-style: italic; margin: 0 0 0.4rem; }
.ninv-pitch-name[b-t1q8r0wjx9] { font-size: 1.8rem; font-weight: 800; color: #fafafa; line-height: 1.1; }
.ninv-pitch-tagline[b-t1q8r0wjx9] { color: #c4c4cc; font-style: italic; font-size: 1.05rem; }
.ninv-pitch-grid[b-t1q8r0wjx9] {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 0.6rem;
    align-items: start;
    margin-top: 0.4rem;
}
.ninv-pitch-features[b-t1q8r0wjx9] { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.ninv-features-head[b-t1q8r0wjx9] {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 700;
    color: #8a8a92;
    margin: 0 0 0.1rem;
}
.ninv-feature[b-t1q8r0wjx9] {
    background: #141417;
    border: 1px solid #2c2c33;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    color: #ededf0;
    font-size: 0.9rem;
    text-align: left;
}

/* the pitch picture — a white box when blank, or the drawing as an <img> (object-fit keeps its aspect) */
.ninv-canvas[b-t1q8r0wjx9] { background: #ffffff; border-radius: 8px; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
/* the picture slides in like a sheet of paper when revealed */
.ninv-paper-slide[b-t1q8r0wjx9] { animation: ninv-paper-in-b-t1q8r0wjx9 0.55s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes ninv-paper-in-b-t1q8r0wjx9 {
    from { opacity: 0; transform: translateX(45px) rotate(2.5deg); }
    to { opacity: 1; transform: translateX(0) rotate(0); }
}
/* clickable picture box in a build form — opens the drawing pad */
.ninv-canvas-edit[b-t1q8r0wjx9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 7rem;
    margin-top: 0.1rem;
    padding: 0.5rem;
    background: #141417;
    border: 1px dashed #3a3a42;
    border-radius: 8px;
    color: #8a8a92;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.ninv-canvas-edit:hover[b-t1q8r0wjx9] { border-color: #6a6a72; color: #d8d8de; }
.ninv-canvas-thumb[b-t1q8r0wjx9] { max-width: 100%; max-height: 13rem; border-radius: 6px; background: #fff; }

/* read-only locked feature row in a build form */
.ninv-locked[b-t1q8r0wjx9] {
    text-align: left;
    background: #1b1b1f;
    border: 1px solid #2c2c33;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    color: #9a9aa2;
}

/* "*originally known as X" footnote at the bottom of a pitch */
.ninv-foot[b-t1q8r0wjx9] { color: #8a8a92; font-size: 0.78rem; font-style: italic; margin: 0.5rem 0 0; }

/* presentation schedule (who pitches, in order) */
.ninv-sched[b-t1q8r0wjx9] { display: flex; flex-direction: column; gap: 0.45rem; margin: 1rem 0; }
.ninv-sched-row[b-t1q8r0wjx9] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: #141417;
    border: 1px solid #2c2c33;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
}
.ninv-sched-row.me[b-t1q8r0wjx9] { border-color: #fafafa; background: #1d1d22; }
.ninv-sched-num[b-t1q8r0wjx9] {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-weight: 700;
    color: #8a8a92;
    min-width: 1.3rem;
}
.ninv-sched-row.me .ninv-sched-num[b-t1q8r0wjx9] { color: #fafafa; }
.ninv-sched-name[b-t1q8r0wjx9] { font-weight: 600; color: #f0f0f3; }

/* ---------- presentation customization ---------- */
/* each theme sets CSS variables; the pitch + swatches read them (a deliberate colour exception) */
.ninv-theme-classic[b-t1q8r0wjx9] { --th-bg: #18181b; --th-border: #2a2a30; --th-accent: #fafafa; --th-text: #ededf0; }
.ninv-theme-crimson[b-t1q8r0wjx9] { --th-bg: #1e0f12; --th-border: #6a2433; --th-accent: #ff7088; --th-text: #f3dde1; }
.ninv-theme-ocean[b-t1q8r0wjx9]   { --th-bg: #0c161f; --th-border: #244a63; --th-accent: #5bc8ff; --th-text: #dceaf3; }
.ninv-theme-forest[b-t1q8r0wjx9]  { --th-bg: #0f1a12; --th-border: #2d5436; --th-accent: #7fd98a; --th-text: #deeede; }
.ninv-theme-sunset[b-t1q8r0wjx9]  { --th-bg: #251410; --th-border: #7a4026; --th-accent: #ffae57; --th-text: #f6e2d3; }
.ninv-theme-royal[b-t1q8r0wjx9]   { --th-bg: #15101f; --th-border: #43306a; --th-accent: #bb8dff; --th-text: #e7ddf5; }
.ninv-theme-gold[b-t1q8r0wjx9]    { --th-bg: #1c1808; --th-border: #6a571c; --th-accent: #ffd45e; --th-text: #f3e9c9; }
.ninv-theme-neon[b-t1q8r0wjx9]    { --th-bg: #0a0f14; --th-border: #1f7a76; --th-accent: #39f0d0; --th-text: #d6f7f0; }

.ninv-theme-pick[b-t1q8r0wjx9] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.4rem; }
.ninv-theme-swatch[b-t1q8r0wjx9] {
    background: var(--th-bg);
    border: 2px solid var(--th-border);
    border-radius: 8px;
    padding: 0.7rem 0.3rem;
    cursor: pointer;
    color: var(--th-accent);
    font-weight: 700;
    font-size: 0.72rem;
}
/* box-shadow (not outline) so the glow repaints instantly when selected, without needing a reflow */
.ninv-theme-swatch.selected[b-t1q8r0wjx9] { box-shadow: 0 0 0 3px #fafafa; }

.ninv-track-list[b-t1q8r0wjx9] { display: flex; flex-direction: column; gap: 0.3rem; max-height: 13rem; overflow-y: auto; margin-bottom: 0.4rem; }

/* applause banner shown between presenters */
.ninv-applause[b-t1q8r0wjx9] {
    margin: 1rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fafafa;
    animation: ninv-pop-in-b-t1q8r0wjx9 0.3s ease-out;
}

/* per-player sound mute toggle (its own row above the timer) */
.ninv-controls[b-t1q8r0wjx9] { text-align: right; margin-bottom: 0.5rem; }
.ninv-sound[b-t1q8r0wjx9] {
    background: none;
    border: 1px solid #3a3a42;
    color: #9a9aa2;
    border-radius: 6px;
    padding: 0.12rem 0.5rem;
    font-size: 0.7rem;
    cursor: pointer;
}
.ninv-sound:hover[b-t1q8r0wjx9] { color: #d8d8de; border-color: #55555f; }

/* each revealed item pops in */
.ninv-pop[b-t1q8r0wjx9] { animation: ninv-pop-in-b-t1q8r0wjx9 0.22s ease-out; }
@keyframes ninv-pop-in-b-t1q8r0wjx9 {
    from { opacity: 0; transform: scale(0.96) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.ninv-reveal-controls[b-t1q8r0wjx9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* requests: an invention card with its suggestion box */
.ninv-req[b-t1q8r0wjx9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

/* funding tiles */
.ninv-fund[b-t1q8r0wjx9] {
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    cursor: pointer;
    transition: outline-color 0.15s ease, opacity 0.15s ease;
    outline: 2px solid transparent;
}
.ninv-fund-body[b-t1q8r0wjx9] { flex: 1; }
.ninv-fund.funded[b-t1q8r0wjx9] { outline-color: #fafafa; }
.ninv-fund.dim[b-t1q8r0wjx9] { opacity: 0.5; }
.ninv-fund:hover:not(.dim)[b-t1q8r0wjx9] { outline-color: #6a6a72; }
.ninv-tier[b-t1q8r0wjx9] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #18181b;
    background: #fafafa;
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* scoreboard — player money board uses the shared <Leaderboard>; this styles the
   per-invention "raised" list below it. */
.ninv-earn[b-t1q8r0wjx9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #141417;
    border: 1px solid #2c2c33;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
}
.ninv-score-name[b-t1q8r0wjx9] { font-weight: 600; color: #f0f0f3; }
.ninv-money[b-t1q8r0wjx9] {
    margin-left: auto;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-weight: 700;
    color: #d8d8de;
}
.ninv-earn-head[b-t1q8r0wjx9] { margin-top: 0.5rem; }
/* /Components/Games/NSlander/NSlanderGame.razor.rz.scp.css */
/* NSlander — scoped styles (ns- prefix). Single component, so scoped CSS reaches every element here,
   including the PostView / render-fragment elements and the JS-typed (scoped) text elements (JS only sets
   textContent, never adds styled children). Mirrors NInvention's layout/proportions + the global pg-
   system. Grayscale only; "logos" and stars are CSS shapes, never emoji glyphs. */

.ns-wrap[b-ep69r50snv] { text-align: center; overflow-wrap: anywhere; }
.ns-submit[b-ep69r50snv] { margin-top: 1.25rem; }

/* ---- corner controls — identical to NInvention's .ninv-controls / .ninv-sound ---- */
.ns-controls[b-ep69r50snv] { text-align: right; margin-bottom: 0.5rem; }
.ns-sound[b-ep69r50snv] {
    background: none; border: 1px solid #3a3a42; color: #9a9aa2;
    border-radius: 6px; padding: 0.12rem 0.5rem; font-size: 0.7rem; cursor: pointer;
}
.ns-sound:hover[b-ep69r50snv] { color: #d8d8de; border-color: #55555f; }
.ns-controls .ns-sound + .ns-sound[b-ep69r50snv] { margin-left: 0.4rem; }

/* per-phase intro instructions — mirrors .ninv-instructions */
.ns-instructions[b-ep69r50snv] {
    text-align: left; color: #d8d8de; line-height: 1.55; font-size: 0.98rem;
    margin: 0.6rem auto 1.4rem; max-width: 34rem;
}

/* the honest answer the framer is twisting */
.ns-quote[b-ep69r50snv] {
    text-align: left; background: #141417; border-left: 3px solid #3a3a42; border-radius: 0 8px 8px 0;
    padding: 0.7rem 0.85rem; margin: 0.75rem 0 0.25rem; color: #fafafa; font-size: 1.05rem;
}
.ns-quote-role[b-ep69r50snv] { text-align: left; font-size: 0.8rem; font-style: italic; color: #8a8a92; margin: 0.3rem 0 0.5rem; }

/* ---- medium picker (2 of N offered) ---- */
.ns-medium-pick[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.75rem 0 1.25rem; }
.ns-medium-opt[b-ep69r50snv] {
    display: flex; flex-direction: column; gap: 0.15rem; text-align: left; width: 100%;
    background: #141417; border: 1px solid #2c2c33; border-radius: 10px; padding: 0.85rem;
    cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.ns-medium-opt:hover[b-ep69r50snv] { border-color: #45454f; background: #1d1d22; }
.ns-medium-opt-name[b-ep69r50snv] { font-weight: 700; color: #fafafa; font-size: 1.05rem; }
.ns-medium-opt-sub[b-ep69r50snv] { font-size: 0.82rem; color: #8a8a92; }

/* ---- drawing field (opens the DrawingPad) — mirrors NInvention's canvas-edit ---- */
.ns-canvas-edit[b-ep69r50snv] {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 7rem;
    margin-top: 0.1rem; padding: 0.5rem; background: #141417; border: 1px dashed #3a3a42; border-radius: 8px;
    color: #8a8a92; font-size: 0.85rem; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease;
}
.ns-canvas-edit:hover[b-ep69r50snv] { border-color: #6a6a72; color: #d8d8de; }
.ns-canvas-thumb[b-ep69r50snv] { max-width: 100%; max-height: 13rem; border-radius: 6px; background: #fff; }

/* drawn pictures display on white (the pad draws on a white canvas); they slide in after a short beat */
.ns-img[b-ep69r50snv], .ns-img-blank[b-ep69r50snv] {
    background: #fff; display: block; width: 100%; object-fit: contain;
    animation: ns-pic-in-b-ep69r50snv 0.5s ease-out 0.45s both;
}
@keyframes ns-pic-in-b-ep69r50snv { from { opacity: 0; transform: translateX(26px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ================= revealed posts (each its own fake internet page) ================= */
.ns-post[b-ep69r50snv] {
    position: relative; text-align: left; overflow: hidden;
    background: #141417; border: 1px solid #2c2c33; border-radius: 14px;
    padding: 0.9rem; margin: 0.75rem 0 1.25rem; animation: ns-pop-in-b-ep69r50snv 0.28s ease-out;
}

/* shared top bar + parody logos */
.ns-bar[b-ep69r50snv] {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 0.55rem; margin-bottom: 0.7rem; border-bottom: 1px solid #2c2c33;
}
.ns-logo[b-ep69r50snv] { display: flex; align-items: center; gap: 0.32rem; font-weight: 800; font-size: 0.95rem; letter-spacing: -0.02em; color: #f0f0f3; }
.ns-bar-dots[b-ep69r50snv] { display: flex; gap: 0.22rem; }
.ns-bar-dots span[b-ep69r50snv] { width: 0.28rem; height: 0.28rem; border-radius: 50%; background: #5a5a62; }

/* NTube: a white play-button block */
.ns-logo-yt-mark[b-ep69r50snv] { display: inline-block; width: 1.3rem; height: 0.92rem; background: #fafafa; border-radius: 4px; position: relative; }
.ns-logo-yt-mark[b-ep69r50snv]::after {
    content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%);
    width: 0; height: 0; border-left: 0.38rem solid #141417; border-top: 0.24rem solid transparent; border-bottom: 0.24rem solid transparent;
}
/* Nazon: two-tone wordmark with a "smile" swoosh */
.ns-logo-shop[b-ep69r50snv] { position: relative; padding-bottom: 0.18rem; }
.ns-logo-shop-on[b-ep69r50snv] { color: #b4b4bc; }
.ns-logo-shop[b-ep69r50snv]::after {
    content: ""; position: absolute; left: 0.05rem; right: 0.05rem; bottom: -0.05rem; height: 0.4rem;
    border-bottom: 2px solid #8a8a92; border-radius: 0 0 70% 70%;
}
/* Nynder: a CSS heart */
.ns-heart[b-ep69r50snv] { position: relative; display: inline-block; width: 0.9rem; height: 0.82rem; }
.ns-heart[b-ep69r50snv]::before, .ns-heart[b-ep69r50snv]::after { content: ""; position: absolute; top: 0; width: 0.46rem; height: 0.72rem; background: #fafafa; border-radius: 0.46rem 0.46rem 0 0; }
.ns-heart[b-ep69r50snv]::before { left: 0.45rem; transform: rotate(-45deg); transform-origin: 0 100%; }
.ns-heart[b-ep69r50snv]::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
/* NHub: "N" + an inverted "Hub" chip */
.ns-logo-adult[b-ep69r50snv] { color: #fafafa; }
.ns-logo-adult-box[b-ep69r50snv] { background: #fafafa; color: #141417; padding: 0 0.28rem; border-radius: 3px; margin-left: 0.05rem; }
/* NNN: a boxed news wordmark */
.ns-logo-news[b-ep69r50snv] { font-weight: 900; letter-spacing: -0.04em; color: #fafafa; border: 2px solid #fafafa; padding: 0 0.28rem; border-radius: 3px; font-size: 0.86rem; }

/* ---- video card (NTube + NHub share this) ---- */
.ns-yt-player[b-ep69r50snv] { position: relative; }
.ns-yt-thumb[b-ep69r50snv] { aspect-ratio: 16 / 9; border-radius: 10px; }
.ns-xxx[b-ep69r50snv] {
    aspect-ratio: 16 / 9; border-radius: 10px; background: #0a0a0c; display: grid; place-items: center;
    color: #e8e8ea; font-weight: 900; font-size: 2.1rem; letter-spacing: 0.35em; padding-left: 0.35em;
    animation: ns-pic-in-b-ep69r50snv 0.5s ease-out 0.45s both;
}
.ns-yt-dur[b-ep69r50snv] {
    position: absolute; right: 0.4rem; bottom: 0.4rem; background: rgba(15, 15, 17, 0.85); color: #fafafa;
    font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.32rem; border-radius: 4px; font-family: ui-monospace, "Consolas", monospace;
}
.ns-yt-title[b-ep69r50snv] { font-weight: 700; color: #f5f5f7; font-size: 1.08rem; line-height: 1.3; margin-top: 0.6rem; min-height: 1.4rem; }
.ns-yt-meta[b-ep69r50snv] { font-size: 0.82rem; color: #9a9aa2; margin-top: 0.25rem; display: flex; align-items: center; gap: 0.45rem; }
.ns-dot[b-ep69r50snv] { width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #5a5a62; display: inline-block; flex-shrink: 0; }
.ns-yt-actions[b-ep69r50snv] { display: flex; gap: 1.1rem; margin-top: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid #2c2c33; }
.ns-yt-act[b-ep69r50snv] { display: flex; align-items: center; gap: 0.32rem; font-size: 0.82rem; font-weight: 600; color: #ededf0; }
.ns-yt-act.ns-dim[b-ep69r50snv] { color: #6a6a72; font-weight: 500; }
.ns-ic[b-ep69r50snv] { display: inline-block; }
.ns-ic-up[b-ep69r50snv] { width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-bottom: 0.55rem solid #c4c4cc; }
.ns-ic-down[b-ep69r50snv] { width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.55rem solid #c4c4cc; }
.ns-yt-desc[b-ep69r50snv] { font-size: 0.85rem; color: #9a9aa2; margin-top: 0.5rem; line-height: 1.4; min-height: 0.9rem; }

/* ---- NNN news article ---- */
.ns-news-kicker[b-ep69r50snv] {
    display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    color: #141417; background: #c4c4cc; padding: 0.1rem 0.4rem; border-radius: 3px; margin-bottom: 0.45rem;
}
.ns-news-headline[b-ep69r50snv] { font-family: Georgia, "Times New Roman", serif; font-weight: 800; font-size: 1.32rem; line-height: 1.2; color: #f5f5f7; min-height: 1.6rem; }
.ns-news-byline[b-ep69r50snv] { font-size: 0.78rem; color: #8a8a92; margin-top: 0.45rem; display: flex; align-items: center; gap: 0.45rem; }
.ns-news-summary[b-ep69r50snv] { font-family: Georgia, "Times New Roman", serif; font-size: 0.98rem; color: #c4c4cc; line-height: 1.5; margin-top: 0.6rem; min-height: 1.2rem; }

/* ---- shared comment (NTube / NHub / NNN) ---- */
.ns-comhead[b-ep69r50snv] { font-size: 0.82rem; font-weight: 700; color: #c4c4cc; margin-top: 0.7rem; }
.ns-cmt[b-ep69r50snv] { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 0.6rem; }
.ns-cmt-av[b-ep69r50snv] { flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #3a3a42; color: #fafafa; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.ns-cmt-body[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.15rem; }
.ns-cmt-author[b-ep69r50snv] { font-size: 0.78rem; font-weight: 600; color: #c4c4cc; display: flex; gap: 0.4rem; align-items: center; }
.ns-cmt-ago[b-ep69r50snv] { font-weight: 400; color: #6a6a72; font-size: 0.72rem; }
.ns-cmt-text[b-ep69r50snv] { color: #fafafa; font-size: 1rem; line-height: 1.35; }

/* ---- generic framer-authored tag pills (dating interests / adult tags) ---- */
.ns-tags[b-ep69r50snv] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.ns-tag[b-ep69r50snv] { font-size: 0.76rem; color: #d8d8de; background: #1d1d22; border: 1px solid #33333a; border-radius: 999px; padding: 0.18rem 0.55rem; }

/* ---- Nazon review ---- */
.ns-rv-head[b-ep69r50snv] { display: flex; gap: 0.8rem; align-items: flex-start; }
.ns-rv-photo[b-ep69r50snv] { width: 5rem; height: 5rem; border-radius: 10px; flex-shrink: 0; }
.ns-rv-info[b-ep69r50snv] { flex: 1; }
.ns-rv-name[b-ep69r50snv] { font-weight: 700; color: #f0f0f3; font-size: 1.05rem; line-height: 1.3; min-height: 1.3rem; }
.ns-rv-pdesc[b-ep69r50snv] { font-size: 0.85rem; color: #9a9aa2; margin-top: 0.15rem; }
.ns-rv-agg[b-ep69r50snv] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.ns-rv-avg[b-ep69r50snv] { font-weight: 700; color: #ededf0; font-size: 0.85rem; }
.ns-rv-count[b-ep69r50snv] { font-size: 0.8rem; color: #8a8a92; }
.ns-rv-price[b-ep69r50snv] { margin-top: 0.4rem; font-size: 1.2rem; font-weight: 800; color: #fafafa; }
.ns-rv-review[b-ep69r50snv] { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid #2c2c33; }
.ns-rv-rrow[b-ep69r50snv] { display: flex; align-items: center; gap: 0.5rem; }
.ns-rv-rauthor[b-ep69r50snv] { font-size: 0.82rem; font-weight: 600; color: #c4c4cc; }
.ns-rv-text[b-ep69r50snv] { color: #fafafa; font-size: 1.05rem; margin: 0.45rem 0 0.3rem; line-height: 1.4; }
.ns-rv-verified[b-ep69r50snv] { font-size: 0.72rem; font-weight: 700; color: #8a8a92; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Nynder profile ---- */
.ns-dp-head[b-ep69r50snv] { display: flex; gap: 0.85rem; align-items: center; }
.ns-dp-photo[b-ep69r50snv] { width: 5.5rem; height: 5.5rem; border-radius: 50%; flex-shrink: 0; }
.ns-dp-id[b-ep69r50snv] { flex: 1; }
.ns-dp-name[b-ep69r50snv] { font-weight: 800; font-size: 1.45rem; color: #fafafa; line-height: 1.1; display: flex; align-items: baseline; gap: 0.1rem; flex-wrap: wrap; }
.ns-dp-age[b-ep69r50snv] { font-weight: 400; font-size: 1.15rem; color: #c4c4cc; }
.ns-dp-age[b-ep69r50snv]::before { content: ", "; }
.ns-dp-loc[b-ep69r50snv] { font-size: 0.82rem; color: #8a8a92; margin-top: 0.25rem; }
.ns-dp-about[b-ep69r50snv] { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid #2c2c33; }
.ns-dp-about-label[b-ep69r50snv] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6a6a72; font-weight: 700; margin-bottom: 0.3rem; }
.ns-dp-bio[b-ep69r50snv] { color: #ededf0; font-size: 1.02rem; line-height: 1.4; }

/* ---- Nweet tweet ---- */
.ns-logo-tw-mark[b-ep69r50snv] { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 5px; background: #fafafa; color: #141417; font-weight: 900; font-size: 0.82rem; }
.ns-tw-row[b-ep69r50snv] { display: flex; align-items: center; gap: 0.55rem; }
.ns-tw-av[b-ep69r50snv] { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex-shrink: 0; }
.ns-tw-av-initial[b-ep69r50snv] { background: #3a3a42; color: #fafafa; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; }
.ns-tw-id[b-ep69r50snv] { display: flex; flex-direction: column; line-height: 1.15; }
.ns-tw-name[b-ep69r50snv] { font-weight: 700; color: #f5f5f7; font-size: 0.95rem; }
.ns-tw-handle[b-ep69r50snv] { color: #8a8a92; font-size: 0.82rem; }
.ns-tw-body[b-ep69r50snv] { color: #fafafa; font-size: 1.1rem; line-height: 1.4; margin-top: 0.6rem; min-height: 1.3rem; }
.ns-tw-meta[b-ep69r50snv] { color: #8a8a92; font-size: 0.8rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.45rem; }
.ns-tw-reply[b-ep69r50snv] { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #2c2c33; }
.ns-tw-replyto[b-ep69r50snv] { color: #8a8a92; font-size: 0.8rem; margin-bottom: 0.45rem; }
.ns-tw-replybody[b-ep69r50snv] { color: #fafafa; font-size: 1.05rem; line-height: 1.4; margin-top: 0.5rem; }

/* ---- Neddit forum post ---- */
.ns-logo-fo-mark[b-ep69r50snv] { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fafafa; }
.ns-fo-sub[b-ep69r50snv] { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: #f0f0f3; font-size: 0.92rem; }
.ns-fo-suborb[b-ep69r50snv] { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #3a3a42; flex-shrink: 0; }
.ns-fo-poster[b-ep69r50snv] { color: #8a8a92; font-size: 0.78rem; margin-top: 0.4rem; display: flex; align-items: center; gap: 0.45rem; }
.ns-fo-title[b-ep69r50snv] { font-weight: 700; color: #f5f5f7; font-size: 1.1rem; line-height: 1.3; margin-top: 0.5rem; min-height: 1.4rem; }
.ns-fo-body[b-ep69r50snv] { color: #c4c4cc; font-size: 0.92rem; line-height: 1.45; margin-top: 0.4rem; min-height: 0.9rem; }
.ns-fo-actions[b-ep69r50snv] { display: flex; align-items: center; gap: 1rem; margin-top: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid #2c2c33; }
.ns-fo-votes[b-ep69r50snv] { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: #ededf0; }
.ns-fo-act[b-ep69r50snv] { font-size: 0.82rem; font-weight: 600; color: #9a9aa2; }
.ns-fo-act.ns-dim[b-ep69r50snv] { color: #6a6a72; }

/* ---- Nscord direct messages ---- */
.ns-logo-dc-bubble[b-ep69r50snv] { position: relative; width: 1.1rem; height: 0.9rem; background: #fafafa; border-radius: 5px; }
.ns-logo-dc-bubble[b-ep69r50snv]::after { content: ""; position: absolute; left: 0.18rem; bottom: -0.16rem; width: 0; height: 0; border-top: 0.24rem solid #fafafa; border-right: 0.24rem solid transparent; }
.ns-dc-channel[b-ep69r50snv] { display: flex; align-items: center; gap: 0.3rem; font-weight: 700; color: #f0f0f3; font-size: 1rem; padding-bottom: 0.6rem; margin-bottom: 0.2rem; border-bottom: 1px solid #2c2c33; }
.ns-dc-at[b-ep69r50snv] { color: #8a8a92; font-weight: 700; }
.ns-dc-msgs[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.55rem; }
.ns-dc-msg[b-ep69r50snv] { display: flex; gap: 0.6rem; align-items: flex-start; }
.ns-dc-av[b-ep69r50snv] { flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #3a3a42; color: #fafafa; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.ns-dc-av-you[b-ep69r50snv] { background: #55555f; }
.ns-dc-mbody[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.12rem; }
.ns-dc-mhead[b-ep69r50snv] { display: flex; align-items: baseline; gap: 0.5rem; }
.ns-dc-mname[b-ep69r50snv] { font-weight: 700; color: #ededf0; font-size: 0.9rem; }
.ns-dc-mtime[b-ep69r50snv] { color: #6a6a72; font-size: 0.7rem; }
.ns-dc-mtext[b-ep69r50snv] { color: #dcdce0; font-size: 1rem; line-height: 1.35; }
.ns-dc-typing[b-ep69r50snv] { display: flex; align-items: center; gap: 0.25rem; height: 2.1rem; }
.ns-dc-typing span[b-ep69r50snv] { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #6a6a72; animation: ns-dc-bounce-b-ep69r50snv 1.2s infinite; }
.ns-dc-typing span:nth-child(2)[b-ep69r50snv] { animation-delay: 0.2s; }
.ns-dc-typing span:nth-child(3)[b-ep69r50snv] { animation-delay: 0.4s; }
@keyframes ns-dc-bounce-b-ep69r50snv { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-0.25rem); opacity: 1; } }
.ns-dc-fade[b-ep69r50snv] { animation: ns-dc-fade-b-ep69r50snv 0.4s ease-out 0.15s both; }
@keyframes ns-dc-fade-b-ep69r50snv { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- NebMD medical ---- */
.ns-logo-md-cross[b-ep69r50snv] { display: inline-block; width: 1.05rem; height: 1.05rem; background: #fafafa; clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); }
.ns-md-tag[b-ep69r50snv] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a8a92; display: flex; align-items: center; gap: 0.45rem; }
.ns-md-title[b-ep69r50snv] { font-weight: 700; color: #f5f5f7; font-size: 1.08rem; line-height: 1.3; margin-top: 0.5rem; min-height: 1.4rem; }
.ns-md-body[b-ep69r50snv] { color: #c4c4cc; font-size: 0.92rem; line-height: 1.45; margin-top: 0.4rem; min-height: 0.9rem; }
.ns-md-pic[b-ep69r50snv] { aspect-ratio: 4 / 3; max-height: 11rem; border-radius: 8px; margin-top: 0.6rem; }
.ns-md-answer[b-ep69r50snv] { margin-top: 0.85rem; padding: 0.7rem 0.8rem; border-left: 3px solid #6a6a72; background: #18181b; border-radius: 0 8px 8px 0; }
.ns-md-doc[b-ep69r50snv] { display: flex; align-items: center; gap: 0.55rem; }
.ns-md-docav[b-ep69r50snv] { width: 2rem; height: 2rem; border-radius: 50%; background: #3a3a42; color: #fafafa; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; flex-shrink: 0; }
.ns-md-docid[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.12rem; }
.ns-md-docname[b-ep69r50snv] { font-weight: 700; color: #f0f0f3; font-size: 0.9rem; }
.ns-md-badge[b-ep69r50snv] { align-self: flex-start; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #141417; background: #c4c4cc; padding: 0.08rem 0.4rem; border-radius: 3px; }
.ns-md-atext[b-ep69r50snv] { color: #fafafa; font-size: 1.02rem; line-height: 1.4; margin-top: 0.5rem; }

/* ---- GoFundN fundraiser ---- */
.ns-logo-gf-heart[b-ep69r50snv] { position: relative; display: inline-block; width: 0.9rem; height: 0.82rem; }
.ns-logo-gf-heart[b-ep69r50snv]::before, .ns-logo-gf-heart[b-ep69r50snv]::after { content: ""; position: absolute; top: 0; width: 0.46rem; height: 0.72rem; background: #fafafa; border-radius: 0.46rem 0.46rem 0 0; }
.ns-logo-gf-heart[b-ep69r50snv]::before { left: 0.45rem; transform: rotate(-45deg); transform-origin: 0 100%; }
.ns-logo-gf-heart[b-ep69r50snv]::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.ns-gf-title[b-ep69r50snv] { font-weight: 700; color: #f5f5f7; font-size: 1.1rem; line-height: 1.3; min-height: 1.4rem; }
.ns-gf-body[b-ep69r50snv] { color: #c4c4cc; font-size: 0.9rem; line-height: 1.45; margin-top: 0.4rem; min-height: 0.9rem; }
.ns-gf-bar[b-ep69r50snv] { height: 0.55rem; background: #2c2c33; border-radius: 999px; overflow: hidden; margin-top: 0.75rem; }
.ns-gf-fill[b-ep69r50snv] { height: 100%; background: #fafafa; border-radius: 999px; }
.ns-gf-amounts[b-ep69r50snv] { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.82rem; }
.ns-gf-raised[b-ep69r50snv] { font-weight: 700; color: #fafafa; }
.ns-gf-goal[b-ep69r50snv] { color: #8a8a92; }
.ns-gf-donation[b-ep69r50snv] { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid #2c2c33; }
.ns-gf-dav[b-ep69r50snv] { width: 2rem; height: 2rem; border-radius: 50%; background: #3a3a42; color: #fafafa; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; flex-shrink: 0; }
.ns-gf-dbody[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.2rem; }
.ns-gf-dhead[b-ep69r50snv] { font-size: 0.85rem; color: #c4c4cc; }
.ns-gf-dhead strong[b-ep69r50snv] { color: #fafafa; }
.ns-gf-dmsg[b-ep69r50snv] { color: #fafafa; font-size: 1rem; line-height: 1.35; }

/* ---- Nteam game review ---- */
.ns-logo-st-mark[b-ep69r50snv] { position: relative; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fafafa; }
.ns-logo-st-mark[b-ep69r50snv]::after { content: ""; position: absolute; inset: 0.28rem; border-radius: 50%; border: 2px solid #141417; }
.ns-st-title[b-ep69r50snv] { font-weight: 800; color: #f5f5f7; font-size: 1.2rem; margin-top: 0.5rem; min-height: 1.5rem; }
.ns-st-main[b-ep69r50snv] { display: flex; gap: 0.6rem; margin-top: 0.6rem; align-items: flex-start; }
.ns-st-gallery[b-ep69r50snv] { flex: 1.4; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ns-st-preview[b-ep69r50snv] { aspect-ratio: 16 / 9; background: #0c0c0e; border: 1px solid #2c2c33; border-radius: 6px; }
.ns-st-thumbs[b-ep69r50snv] { display: flex; gap: 0.3rem; }
.ns-st-thumb[b-ep69r50snv] { flex: 1; aspect-ratio: 16 / 9; background: #0c0c0e; border: 1px solid #2c2c33; border-radius: 4px; }
.ns-st-side[b-ep69r50snv] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ns-st-cap[b-ep69r50snv] { aspect-ratio: 2.15 / 1; border-radius: 6px; }
.ns-st-desc[b-ep69r50snv] { color: #c4c4cc; font-size: 0.82rem; line-height: 1.4; min-height: 0.9rem; }
.ns-st-meta[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.08rem; }
.ns-st-metalabel[b-ep69r50snv] { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6a6a72; }
.ns-st-rating[b-ep69r50snv] { font-size: 0.9rem; font-weight: 700; color: #ededf0; display: flex; align-items: baseline; gap: 0.35rem; }
.ns-st-rcount[b-ep69r50snv] { font-size: 0.72rem; font-weight: 400; color: #8a8a92; }
.ns-st-date[b-ep69r50snv] { font-size: 0.85rem; color: #c4c4cc; }
.ns-st-review[b-ep69r50snv] { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid #2c2c33; }
.ns-st-verdict[b-ep69r50snv] { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 0.92rem; padding: 0.25rem 0.6rem; border-radius: 4px; }
.ns-st-verdict.rec[b-ep69r50snv] { background: #2e2e36; color: #fafafa; }
.ns-st-verdict.notrec[b-ep69r50snv] { background: #241f22; color: #c4c4cc; }
.ns-st-hours[b-ep69r50snv] { font-size: 0.78rem; color: #8a8a92; margin-top: 0.4rem; }
.ns-st-text[b-ep69r50snv] { color: #fafafa; font-size: 1.02rem; line-height: 1.4; margin-top: 0.5rem; }
.ns-st-author[b-ep69r50snv] { font-size: 0.82rem; color: #8a8a92; margin-top: 0.35rem; }
/* recommend toggle in the Steam frame form */
.ns-rec-row[b-ep69r50snv] { display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.ns-rec[b-ep69r50snv] { flex: 1; padding: 0.6rem; border: 1px solid #2c2c33; border-radius: 8px; background: #141417; color: #9a9aa2; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.ns-rec:hover[b-ep69r50snv] { border-color: #45454f; }
.ns-rec.sel[b-ep69r50snv] { border-color: #fafafa; background: #1d1d22; color: #fafafa; box-shadow: 0 0 0 1px #fafafa; }

/* ---- Nikipedia article ---- */
.ns-logo-wk[b-ep69r50snv] { font-family: Georgia, "Times New Roman", serif; }
.ns-logo-wk-globe[b-ep69r50snv] { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid #8a8a92; font-size: 0.72rem; font-weight: 700; color: #d8d8de; font-family: Georgia, serif; }
.ns-wk-title[b-ep69r50snv] { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.5rem; color: #f5f5f7; border-bottom: 1px solid #3a3a42; padding-bottom: 0.3rem; line-height: 1.2; min-height: 1.8rem; }
.ns-wk-sub[b-ep69r50snv] { font-size: 0.78rem; color: #8a8a92; font-style: italic; margin-top: 0.3rem; }
.ns-wk-infobox[b-ep69r50snv] { float: right; width: 9rem; margin: 0.5rem 0 0.5rem 0.75rem; border: 1px solid #2c2c33; border-radius: 8px; padding: 0.5rem; background: #18181b; }
.ns-wk-pic[b-ep69r50snv] { aspect-ratio: 3 / 4; border-radius: 4px; }
.ns-wk-caption[b-ep69r50snv] { font-family: Georgia, serif; font-size: 0.8rem; color: #c4c4cc; line-height: 1.4; margin-top: 0.4rem; font-style: italic; text-align: center; }
.ns-wk-facts[b-ep69r50snv] { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.72rem; }
.ns-wk-facts tr[b-ep69r50snv] { border-top: 1px solid #2c2c33; }
.ns-wk-facts th[b-ep69r50snv] { text-align: left; vertical-align: top; color: #8a8a92; font-weight: 700; padding: 0.22rem 0.4rem 0.22rem 0; white-space: nowrap; }
.ns-wk-facts td[b-ep69r50snv] { color: #d8d8de; padding: 0.22rem 0; }
.ns-wk-body[b-ep69r50snv] { font-family: Georgia, "Times New Roman", serif; color: #d8d8de; font-size: 0.96rem; line-height: 1.55; margin-top: 0.6rem; min-height: 1.2rem; }
.ns-wk-toc[b-ep69r50snv] { clear: both; display: inline-block; border: 1px solid #2c2c33; background: #18181b; border-radius: 6px; padding: 0.5rem 0.9rem 0.5rem 0.6rem; margin-top: 0.7rem; }
.ns-wk-toc-head[b-ep69r50snv] { font-weight: 700; color: #c4c4cc; font-size: 0.8rem; margin-bottom: 0.25rem; }
.ns-wk-toc-list[b-ep69r50snv] { margin: 0; padding-left: 1.3rem; color: #b4b4bc; }
.ns-wk-toc-list li[b-ep69r50snv] { margin: 0.12rem 0; font-size: 0.85rem; font-family: Georgia, serif; }

/* ---- Nelp review ---- */
.ns-logo-yp-mark[b-ep69r50snv] { display: inline-block; width: 1rem; height: 1rem; background: #fafafa; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ns-yp-name[b-ep69r50snv] { font-weight: 800; color: #f5f5f7; font-size: 1.2rem; min-height: 1.5rem; }
.ns-yp-meta[b-ep69r50snv] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.ns-yp-avg[b-ep69r50snv] { font-weight: 700; color: #ededf0; font-size: 0.9rem; }
.ns-yp-count[b-ep69r50snv] { font-size: 0.8rem; color: #8a8a92; }
.ns-yp-cat[b-ep69r50snv] { font-size: 0.82rem; color: #9a9aa2; margin-top: 0.25rem; display: flex; align-items: center; gap: 0.45rem; }
.ns-yp-review[b-ep69r50snv] { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid #2c2c33; }
.ns-yp-rhead[b-ep69r50snv] { display: flex; align-items: center; gap: 0.55rem; }
.ns-yp-rav[b-ep69r50snv] { width: 2rem; height: 2rem; border-radius: 50%; background: #3a3a42; color: #fafafa; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; flex-shrink: 0; }
.ns-yp-rid[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.18rem; }
.ns-yp-rname[b-ep69r50snv] { font-weight: 700; color: #f0f0f3; font-size: 0.9rem; }
.ns-yp-rtext[b-ep69r50snv] { color: #fafafa; font-size: 1.02rem; line-height: 1.4; margin-top: 0.5rem; }
.ns-yp-photo[b-ep69r50snv] { aspect-ratio: 4 / 3; max-height: 11rem; border-radius: 8px; margin-top: 0.6rem; }

/* ---- Nstagram post ---- */
.ns-logo-ig-cam[b-ep69r50snv] { position: relative; display: inline-block; width: 1.1rem; height: 1.1rem; border: 1.5px solid #fafafa; border-radius: 5px; }
.ns-logo-ig-cam[b-ep69r50snv]::after { content: ""; position: absolute; inset: 0.27rem; border: 1.5px solid #fafafa; border-radius: 50%; }
.ns-ig-head[b-ep69r50snv] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.ns-ig-av[b-ep69r50snv] { width: 2rem; height: 2rem; border-radius: 50%; background: #3a3a42; color: #fafafa; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
.ns-ig-user[b-ep69r50snv] { font-weight: 700; color: #f0f0f3; font-size: 0.92rem; }
.ns-ig-userskel[b-ep69r50snv] { display: inline-block; width: 6rem; height: 0.8rem; }
.ns-ig-photo[b-ep69r50snv] { aspect-ratio: 1 / 1; border-radius: 6px; }
.ns-ig-actions[b-ep69r50snv] { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
.ns-ig-comment[b-ep69r50snv] { width: 1rem; height: 0.9rem; border: 1.5px solid #fafafa; border-radius: 0.35rem 0.35rem 0.35rem 0; }
.ns-ig-send[b-ep69r50snv] { width: 0; height: 0; border-left: 0.55rem solid #fafafa; border-top: 0.32rem solid transparent; border-bottom: 0.32rem solid transparent; }
.ns-ig-likes[b-ep69r50snv] { font-weight: 700; color: #f0f0f3; font-size: 0.85rem; margin-top: 0.5rem; }
.ns-ig-caption[b-ep69r50snv] { color: #ededf0; font-size: 1rem; line-height: 1.4; margin-top: 0.4rem; }
.ns-ig-cuser[b-ep69r50snv] { font-weight: 700; color: #f5f5f7; margin-right: 0.3rem; }
.ns-ig-tags[b-ep69r50snv] { color: #b4b4bc; }
.ns-ig-tag[b-ep69r50snv] { margin-right: 0.3rem; }
.ns-ig-comments[b-ep69r50snv] { color: #8a8a92; font-size: 0.85rem; margin-top: 0.5rem; }

/* ---- star rating (CSS clip-path star — never an emoji glyph) ---- */
.ns-stars[b-ep69r50snv] { display: inline-flex; gap: 0.2rem; }
.ns-star[b-ep69r50snv] {
    width: 1rem; height: 1rem; background: #3a3a42;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.ns-star.full[b-ep69r50snv] { background: #fafafa; }
.ns-star-row[b-ep69r50snv] { display: flex; gap: 0.35rem; margin-top: 0.3rem; }
.ns-star-pick[b-ep69r50snv] {
    width: 1.7rem; height: 1.7rem; padding: 0; border: none; cursor: pointer; background: #2c2c33;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transition: background 0.12s ease;
}
.ns-star-pick.full[b-ep69r50snv] { background: #fafafa; }

/* ---- skeleton loaders (shown while the chrome builds, before the words slap in) ---- */
.ns-skel[b-ep69r50snv] { position: relative; overflow: hidden; background: #26262c; border-radius: 6px; }
.ns-skel[b-ep69r50snv]::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    animation: ns-shimmer-b-ep69r50snv 1.25s infinite;
}
@keyframes ns-shimmer-b-ep69r50snv { to { transform: translateX(100%); } }
.ns-skel-avatar[b-ep69r50snv] { width: 1.9rem; height: 1.9rem; border-radius: 50%; flex-shrink: 0; }
.ns-skel-line[b-ep69r50snv] { display: block; height: 0.72rem; margin: 0.3rem 0; }
.ns-skel-lines[b-ep69r50snv] { display: flex; flex-direction: column; flex: 1; }
.ns-skelrow[b-ep69r50snv] { display: flex; gap: 0.55rem; align-items: flex-start; }
.s40[b-ep69r50snv] { width: 40%; } .s50[b-ep69r50snv] { width: 50%; } .s60[b-ep69r50snv] { width: 60%; } .s70[b-ep69r50snv] { width: 70%; } .s80[b-ep69r50snv] { width: 80%; } .s85[b-ep69r50snv] { width: 85%; } .s90[b-ep69r50snv] { width: 90%; } .s95[b-ep69r50snv] { width: 95%; }

/* ---- the twisted words "slap" in (one of three, chosen per post) ---- */
.ns-slapin[b-ep69r50snv] { will-change: transform, opacity; }
.ns-slap-1[b-ep69r50snv] { animation: ns-slap1-b-ep69r50snv 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both; transform-origin: center; }
.ns-slap-2[b-ep69r50snv] { animation: ns-slap2-b-ep69r50snv 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.ns-slap-3[b-ep69r50snv] { animation: ns-slap3-b-ep69r50snv 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
@keyframes ns-slap1-b-ep69r50snv { 0% { opacity: 0; transform: scale(2.1) rotate(-3deg); } 55% { opacity: 1; transform: scale(0.9) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ns-slap2-b-ep69r50snv { 0% { opacity: 0; transform: translateY(-130%) rotate(-5deg); } 65% { opacity: 1; transform: translateY(8%) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes ns-slap3-b-ep69r50snv { 0% { opacity: 0; transform: translateX(-135%) skewX(10deg); } 65% { opacity: 1; transform: translateX(4%) skewX(-3deg); } 100% { transform: translateX(0) skewX(0); } }

/* ---- notes ---- */
.ns-note[b-ep69r50snv] { color: #8a8a92; font-size: 0.92rem; margin: 0.75rem 0 1.25rem; }

/* ---- final-round snippet picker ---- */
.ns-snippet-list[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1.25rem; }
.ns-snippet-opt[b-ep69r50snv] {
    text-align: left; width: 100%; background: #141417; border: 1px solid #2c2c33; border-radius: 10px;
    padding: 0.7rem 0.85rem; color: #ededf0; font-size: 0.97rem; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ns-snippet-opt:hover[b-ep69r50snv] { border-color: #45454f; background: #1d1d22; }

/* ---- favorite-vote list ---- */
.ns-vote-list[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1.25rem; }
.ns-vote-opt[b-ep69r50snv] {
    display: flex; flex-direction: column; gap: 0.2rem; text-align: left; width: 100%;
    background: #141417; border: 1px solid #2c2c33; border-radius: 10px; padding: 0.75rem 0.85rem;
    cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.ns-vote-opt:hover:not(:disabled)[b-ep69r50snv] { border-color: #45454f; background: #1d1d22; }
.ns-vote-opt:disabled[b-ep69r50snv] { opacity: 0.45; cursor: not-allowed; }
.ns-vote-brand[b-ep69r50snv] { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #8a8a92; }
.ns-vote-frame[b-ep69r50snv] { font-weight: 700; color: #f0f0f3; font-size: 0.95rem; }
.ns-vote-answer[b-ep69r50snv] { color: #fafafa; font-size: 1rem; }
.ns-vote-victim[b-ep69r50snv] { font-size: 0.8rem; color: #8a8a92; }

/* ---- round results ---- */
.ns-results-list[b-ep69r50snv] { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.ns-result-card[b-ep69r50snv] { text-align: left; background: #141417; border: 1px solid #2c2c33; border-radius: 10px; padding: 0.7rem 0.85rem; animation: ns-pop-in-b-ep69r50snv 0.25s ease-out; }
.ns-result-card.fav[b-ep69r50snv] { border-color: #fafafa; box-shadow: 0 0 0 1px #fafafa; }
.ns-result-row[b-ep69r50snv] { display: flex; align-items: center; gap: 0.5rem; }
.ns-result-fav[b-ep69r50snv] { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #141417; background: #fafafa; padding: 0.08rem 0.4rem; border-radius: 3px; }
.ns-result-votes[b-ep69r50snv] { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: #ededf0; }
.ns-result-answer[b-ep69r50snv] { color: #fafafa; font-size: 1rem; margin: 0.4rem 0 0.25rem; }
.ns-result-by[b-ep69r50snv] { font-size: 0.82rem; color: #8a8a92; }
.ns-result-by strong[b-ep69r50snv] { color: #ededf0; }

@keyframes ns-pop-in-b-ep69r50snv { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* /Components/Games/NTrivia/NTriviaGame.razor.rz.scp.css */
/* The NTrivia (nt-*) styles moved to the GLOBAL stylesheet wwwroot/nt.css so the special-round
   components (which are separate Blazor components) share them — component-scoped CSS would not reach
   them. This file is intentionally empty; keep nt-* rules in wwwroot/nt.css. */
/* /Components/Games/Shared/DrawingPad.razor.rz.scp.css */
/* Shared drawing pad. Grayscale chrome (pg- system); the canvas itself is the only place colour lives. */
.pg-draw[b-mf0g5e8wrj] { display: flex; flex-direction: column; gap: 0.7rem; }
.pg-draw-title[b-mf0g5e8wrj] { text-align: center; margin-bottom: 0.1rem; }

.pg-draw-colors[b-mf0g5e8wrj] { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.pg-draw-swatch[b-mf0g5e8wrj] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 2px solid #2c2c33;
    cursor: pointer;
    padding: 0;
    transition: box-shadow 0.1s ease;
}
.pg-draw-swatch.sel[b-mf0g5e8wrj] { box-shadow: 0 0 0 3px #fafafa; }

/* custom-colour picker (round swatch that opens the OS colour picker) */
.pg-draw-customcolor[b-mf0g5e8wrj] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 2px solid #2c2c33;
    cursor: pointer;
    padding: 0;
    background: none;
}
.pg-draw-customcolor[b-mf0g5e8wrj]::-webkit-color-swatch-wrapper { padding: 0; }
.pg-draw-customcolor[b-mf0g5e8wrj]::-webkit-color-swatch { border: none; border-radius: 50%; }
.pg-draw-customcolor[b-mf0g5e8wrj]::-moz-color-swatch { border: none; border-radius: 50%; }

/* size + opacity sliders — a 3-col grid (label | slider | value) so both bars line up exactly */
.pg-draw-sliders[b-mf0g5e8wrj] {
    display: grid;
    grid-template-columns: 3.4rem 1fr 2.8rem;
    align-items: center;
    gap: 0.45rem 0.6rem;
    max-width: 20rem;
    margin: 0 auto;
}
.pg-draw-slabel-text[b-mf0g5e8wrj] { font-size: 0.78rem; color: #9a9aa2; }
.pg-draw-sliders input[type="range"][b-mf0g5e8wrj] { width: 100%; margin: 0; accent-color: #fafafa; }
.pg-draw-sval[b-mf0g5e8wrj] { font-size: 0.78rem; color: #d8d8de; text-align: right; font-variant-numeric: tabular-nums; }

/* tool buttons (fill / eraser / undo / clear) */
.pg-draw-tools-row[b-mf0g5e8wrj] { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.pg-draw-tool[b-mf0g5e8wrj] {
    background: #141417;
    border: 1px solid #2c2c33;
    color: #ededf0;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.8rem;
}
.pg-draw-tool.sel[b-mf0g5e8wrj] { box-shadow: 0 0 0 2px #fafafa; color: #fff; }
.pg-draw-swatch:hover[b-mf0g5e8wrj], .pg-draw-tool:hover[b-mf0g5e8wrj], .pg-draw-customcolor:hover[b-mf0g5e8wrj] { border-color: #55555f; }

.pg-draw-canvas[b-mf0g5e8wrj] {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #2c2c33;
    touch-action: none;   /* so touch draws instead of scrolling */
    cursor: crosshair;
    display: block;
}

.pg-draw-foot[b-mf0g5e8wrj] { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.3rem; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.pg-app[b-xfcksxopzw] {
    min-height: 100vh;
    background: #0f0f11;
}

/* Error UI carried over from the template */
#blazor-error-ui[b-xfcksxopzw] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xfcksxopzw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-pys3j92eve],
.components-reconnect-repeated-attempt-visible[b-pys3j92eve],
.components-reconnect-failed-visible[b-pys3j92eve],
.components-pause-visible[b-pys3j92eve],
.components-resume-failed-visible[b-pys3j92eve],
.components-rejoining-animation[b-pys3j92eve] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-retrying[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-failed[b-pys3j92eve],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-pys3j92eve] {
    display: block;
}


#components-reconnect-modal[b-pys3j92eve] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-pys3j92eve 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-pys3j92eve 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-pys3j92eve 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-pys3j92eve]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-pys3j92eve 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-pys3j92eve {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-pys3j92eve {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-pys3j92eve {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-pys3j92eve] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-pys3j92eve] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-pys3j92eve] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-pys3j92eve] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-pys3j92eve] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-pys3j92eve] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-pys3j92eve] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-pys3j92eve 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-pys3j92eve] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-pys3j92eve {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* The pg-* design system now lives in wwwroot/app.css so every component (Home, GameHost,
   NTriviaGame, future games) shares it. Component-specific styles can still go here if needed. */