/* ============================================================================
 * halftone-skin.css — "Halftone Field" whole-app reskin (option 10).
 * Loaded LAST. Additive glass theme over the existing layout. No layout changes.
 *
 * Strategy: translucent panels float over a fixed halftone canvas. Live
 * backdrop-blur is kept OFF the big scrolling panels (rail/lives/chat/mlist/pcol)
 * to preserve the documented fast-scroll fix; it is reserved for floating overlays.
 * ========================================================================== */

/* ---- show the field through the shell -------------------------------- */
html, body { background: #040404 !important; }
#vfx-halftone { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.frame { background: transparent !important; z-index: 1; }
.app3 { position: relative; z-index: 1; }
.m3 { background: transparent !important; }

/* ---- Tier A · token flip (glass-ifies token-driven panels) ------------ */
:root {
  --surface: rgba(13,14,17,0.60);
  --raised: rgba(255,255,255,0.05);
  --raised-2: rgba(255,255,255,0.09);
  --side-bg: rgba(11,12,15,0.46);
  --rail-bg: rgba(8,9,11,0.50);
  --main-bg: transparent;
  --hair: rgba(255,255,255,0.08);
}

/* ---- the index.html inline !important panel block — re-assert as glass -- */
/* (equal specificity + !important + loaded later → wins; keeps NO live blur) */
.app3 > .rail {
  background: linear-gradient(180deg, rgba(10,11,14,0.58), rgba(8,9,11,0.50)) !important;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.app3 > .lives {
  background: linear-gradient(170deg, rgba(12,13,16,0.55), rgba(9,10,13,0.46)) !important;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.app3 .stage .chat {
  /* chat text legibility — keep this panel the most opaque */
  background: linear-gradient(165deg, rgba(12,13,17,0.80), rgba(9,10,13,0.74)) !important;
}
.app3 .stage .mlist {
  background: linear-gradient(165deg, rgba(13,14,18,0.64), rgba(10,11,14,0.56)) !important;
}
/* .lvcard keeps no backdrop-filter (inline block) — give it a translucent fill */
.app3 .lvcard { background: rgba(255,255,255,0.035) !important; }
.app3 .lvcard:hover { background: rgba(255,255,255,0.06) !important; }
.app3 .lvcard--hero {
  background: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 60%) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

/* ---- Tier B · primary page panels (the .pcol gradient panel, 7 pages) -- */
.pcol {
  background: linear-gradient(165deg, rgba(13,14,18,0.62), rgba(10,11,14,0.54)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.72) !important;
}
.page,
.vid-hero,
.musec-hero {
  background: rgba(13,14,18,0.5) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ---- Tier C · cards / tiles (translucent, no blur — they live in scrollers) */
.plcard, .vid-clip, .vid-poster, .vid-shelf--grid .vid-poster, .mqtile, .musec-btn,
.acard, .ybpcard, .pcompose, .pcard, .setrow, .srchbar, .lbtab, .glchip,
.mtbl, .pod, .shop2-chip, .shop-card, .shop-tank, .shop-mine, .shop-box,
.shop-xrow, .shop-wd, .shop-histrow, .shop-empty, .shop-fuel, .lr-pop {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: none;
}
/* preserve accent-meaning surfaces: they are intentionally NOT in the Tier C
   group above, so their saturated fills survive. Re-assert the gold podium. */
.pod--1 { background: linear-gradient(165deg, rgba(242,210,74,0.14), rgba(242,210,74,0.04)) !important; }

/* ---- Tier D · headers / bars become transparent over their panel glass - */
.chan, .stage .chan, .topbar, .pcol__head, .lives__head, .side__head,
.mlist__head, .npop__head, .evtpop__title, .musec-toolbar {
  background: transparent !important;
}

/* ---- Tier E · inputs / pills (slightly raised for contrast) ----------- */
.cbox, .cwin__composer input, .searchbox.open, .searchin, .wallet, .wchip,
.iconbtn, .searchbtn, .notif, .btns {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
}
.cbox, .searchin, .cwin__composer input { background: rgba(255,255,255,0.06); }

/* ---- Tier F · floating overlays — real glass blur (no scroll cost) ----- */
.ctxmenu, .musec-pop, .mqpanel, .vtoast, .shop-modal__card, .aopop, .glpop,
.wsheet__card, .hub-upload__card, .cwin-cashmodal, .evtpop, .npop, .cwin,
.dpf, .dpf--profilecard, .hub-mini, .mwidget, .factions, .lr-ctrls, .lr-extra,
.lr-chat, .lr-tray {
  background: rgba(13,13,16,0.82) !important;
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ---- LiveRoom: let the injected field show through the structural
   containers, while video tiles + chat panels stay legible ------------- */
.liveroom { background: transparent !important; }
.liveroom .lr-body, .liveroom .lr-main, .liveroom .lr-call,
.liveroom .lr-top, .liveroom .lr-dock { background: transparent !important; }
.liveroom .lr-chat, .liveroom .lr-ctrls, .liveroom .lr-extra, .liveroom .lr-tray {
  background: rgba(13,13,16,0.78) !important;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.liveroom .lr-live { color: var(--red); }

/* ---- video / cinema surfaces stay opaque (never glass) ---------------- */
.hub-canvas, .hub-fs, .pcard__art, .plcard__art, .vid-poster__art,
.musec-hero__art, .hub-theater__video { backdrop-filter: none; }
.hub-fs { background: #000 !important; }

/* ---- onboarding: same animated field as the app, behind a glass card ----- */
/* transparent so the body's #vfx-halftone field (with its edge vignette) shows
 * behind the splash/login — matches the home page. The card stays frosted glass. */
.ob2 { background: transparent !important; }
.ob2-card {
  background: linear-gradient(162deg, rgba(255,255,255,0.08), rgba(13,14,18,0.62) 50%) !important;
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
}

/* ---- dot-matrix glyph styling ---------------------------------------- */
.dm-glyph { display: inline-block; vertical-align: -0.12em; }
.dmw { display: inline-flex; align-items: center; }
.dmw-num { color: var(--green); }
.dmw-icon { display: inline-flex; align-items: center; justify-content: center; }
/* active rail icon goes green; hover/idle inherit existing .sq colour */
.rail .sq--btn.active,
.app3 .rail .sq--btn.active .dm-glyph,
.app3 .rail .sq--btn.active .dmw-icon { color: var(--green) !important; }
.rail .sqlogo { color: var(--text); }

/* active tabs/chips: green-tinted glass (option-10 active state) so the
   dot text — which inherits currentColor — stays legible (was dark-on-dark). */
.lbtab.on, .shop2-tab.on, .glchip.on, .musec-tab.on, .vid-typechips .glchip.on {
  background: rgba(74,222,128,0.15) !important;
  color: var(--green) !important;
  border: 1px solid rgba(74,222,128,0.4) !important;
}
.lbtab.on .dm-glyph, .shop2-tab.on .dm-glyph, .glchip.on .dm-glyph { color: var(--green) !important; }
/* the sqlogo tile: let the dot V breathe */
.sqlogo .dmw { line-height: 0; }

/* ---- accent discipline guards (keep saturated, never glassify) -------- */
.av--live .avbg { box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 4px var(--red) !important; }
.minilive, .boost .dm-glyph, .lr-live { color: var(--red); }

/* ---- keep-legible: chat body text full strength ----------------------- */
.stream, .msg__line, .cmsg__txt, .cwin__body { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  #vfx-halftone { opacity: 0.9; }
}

/* ============================================================================
 * Liquid-glass containers (user request 2026-06-26).
 * Frost the main panels so the animated halftone reads as soft glass behind
 * content — see-through + real backdrop blur, while staying legible. Loaded LAST
 * so it overrides the index.html inline `backdrop-filter:none` scroll-glitch
 * guard. Safe now because the field is dim/dense: behind the glass its detail is
 * blurred away; the crisp dots only show in the gaps between panels.
 * To revert to flat translucent panels, delete this block.
 * ========================================================================== */
/* (.chatdock stays unpainted: it is a pointer-events:none layout strip — frosting
   it slabbed the 12px gaps between docked DM windows. W1A-61. .cwin has Tier F.) */
.app3 > .rail,
.app3 > .lives,
.app3 .stage .chat,
.app3 .stage .mlist,
.pcol, .page, .vid-hero, .musec-hero {
  -webkit-backdrop-filter: blur(13px) saturate(1.15) !important;
  backdrop-filter: blur(13px) saturate(1.15) !important;
}
.app3 > .rail        { background: linear-gradient(180deg, rgba(10,11,14,0.44), rgba(8,9,11,0.34)) !important; }
.app3 > .lives       { background: linear-gradient(170deg, rgba(12,13,16,0.42), rgba(9,10,13,0.32)) !important; }
.app3 .stage .chat   { background: linear-gradient(165deg, rgba(12,13,17,0.58), rgba(9,10,13,0.50)) !important; }
.app3 .stage .mlist  { background: linear-gradient(165deg, rgba(12,13,16,0.46), rgba(9,10,13,0.38)) !important; }
.pcol                { background: linear-gradient(165deg, rgba(13,14,18,0.48), rgba(10,11,14,0.40)) !important; }
.page, .vid-hero, .musec-hero { background: rgba(13,14,18,0.42) !important; }

/* small cards/tiles sit ON the frosted panels, so they need no own blur — keep
 * them a light translucent fill that lets the parent glass show through. */
.app3 .lvcard, .plcard, .vid-poster, .mqtile, .acard, .pcard, .pod, .shop-card {
  background: rgba(255,255,255,0.05) !important;
}

/* Edge vignette (user request 2026-06-26): the field is only softened by frosted
 * panels in the middle; the uncovered margins + corners (top, sides, bottom)
 * showed the crisp field at full strength, which read as harsh. Mask the canvas
 * so it stays full in the centre but fades to near-nothing toward every edge —
 * the bare field becomes "almost not there". Tune the % stops to taste. */
#vfx-halftone {
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 45%, #000 42%, rgba(0,0,0,0.16) 76%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 72% 78% at 50% 45%, #000 42%, rgba(0,0,0,0.16) 76%, rgba(0,0,0,0) 100%);
}

/* Background turned OFF (profile > Settings > Appearance): no canvas, plain
 * near-black that matches the field's base fill so the glass panels tint the
 * same. window.VFX.setEnabled(false) adds this class + removes the canvas. */
html.vfx-off, html.vfx-off body { background: #05060a !important; }