/* =================================================================
   VULU — LIQUID GLASS SKIN  (override layer, loaded LAST)
   Reskins the existing architecture in an iOS liquid-glass material:
   near-black board + ambient color, translucent refractive panels,
   specular top light. Color rules unchanged:
   green = acts, red = live, purple = gems, blue = watching, gold = rewards.
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg:#070707;
  --text:#F3F7F3; --text-2:#A6B0AA; --muted:#8E9890; /* AA-passing on the dark glass bg (was #6C766F, ~4.2:1) */
  --border:rgba(255,255,255,0.10);
  --hair:rgba(255,255,255,0.07);
  --divider:rgba(255,255,255,0.08);
  --fill:rgba(255,255,255,0.05);
  --fill-hover:rgba(255,255,255,0.10);
  --raised:rgba(255,255,255,0.06);
  --raised-2:rgba(255,255,255,0.11);
  --surface:rgba(255,255,255,0.04);
  --side-bg:rgba(255,255,255,0.022);
  --rail-bg:rgba(255,255,255,0.026);
  --main-bg:rgba(255,255,255,0.016);
  --input-bg:rgba(255,255,255,0.05);
  --purple:#C77DFF; --blue:#4D8DFF; --gold:#F2D24A; --fuel:#FF8A3D;
}

body{ background:#070707; }

/* ---------- ambient board — color washes removed: pure black ---------- */
.frame{ background:#070707 !important; }
.frame::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:none;
}
.app3{ position:relative; z-index:1; background:transparent !important; }
.stage{ background:transparent !important; }

/* =================================================================
   STRUCTURAL GLASS PANELS — rail / lives / chat / members
   ================================================================= */
.app3 > .rail,
.app3 > .lives,
.stage .chat,
.stage .mlist{
  background:linear-gradient(162deg, rgba(255,255,255,0.085), rgba(255,255,255,0.022) 47%, rgba(255,255,255,0.055)) !important;
  -webkit-backdrop-filter:blur(28px) saturate(175%);
  backdrop-filter:blur(28px) saturate(175%);
}
/* rail + lives now read as floating glass bubbles, matching .chat / .mlist */
.app3 > .rail,
.app3 > .lives{
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:22px !important;
  margin:14px 0 14px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 0 0 1px rgba(255,255,255,0.045), 0 26px 64px -24px rgba(0,0,0,0.72);
}
.app3 > .lives{ overflow:hidden; }
.stage .chat,
.stage .mlist{
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 0 0 1px rgba(255,255,255,0.045), 0 26px 64px -24px rgba(0,0,0,0.72);
}
/* chat header reads a touch brighter, like frosted glass on glass */
.stage .chan{ background:rgba(255,255,255,0.03) !important; border-bottom:1px solid rgba(255,255,255,0.08) !important; }
.lives__head{ border-bottom:1px solid rgba(255,255,255,0.08); }

/* =================================================================
   GLASS CONTROLS — wallet / search / notif / composer / buttons
   ================================================================= */
.wallet,
.searchbtn,
.notif,
.searchbox.open,
.cbox,
.mlist__head .add,
.chan .ib{
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
}
.wallet{
  background:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.wic{ background:rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
.searchbtn,
.notif{
  background:linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.searchbox.open{
  background:linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.cbox{
  background:linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.cbox .send,
.cwin__send{
  background:linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)) !important;
  color:#F6F7F6 !important; border:1px solid rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 16px -8px rgba(0,0,0,0.55) !important;
  transition: background .15s;
}
.cbox .send:hover, .cwin__send:hover{ background:linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)) !important; }
.cbox .send .ic, .cwin__send .ic{ color:#F6F7F6; }

/* =================================================================
   RAIL squircles — active = liquid green blob
   ================================================================= */
.app3 .rail .sq{ background:rgba(255,255,255,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.app3 .rail .sq:hover{ background:rgba(255,255,255,0.09); }
.app3 .rail .sq.active{
  background:linear-gradient(160deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)) !important;
  color:#FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.22), 0 8px 22px -8px rgba(0,0,0,0.5);
}
.app3 .rail .sq.active::before{ background:#FFFFFF; }
.sqlogo{
  background:linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* =================================================================
   LIVES — glass cards, solid mosaics (legibility), glass Go Live
   ================================================================= */
.lvcard{
  background:linear-gradient(162deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.lvcard:hover{
  background:linear-gradient(162deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 14px 32px -16px rgba(0,0,0,0.6);
}
.mosaic{ border-radius:13px; box-shadow: inset 0 0 0 1.5px rgba(255,68,88,0.45); }
.minilive{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 12px rgba(255,68,88,0.35); }
.lives__head .hcount{ background:rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.cvy .golive{
  background:linear-gradient(160deg, rgba(255,68,88,0.62), rgba(240,45,68,0.40)) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 0 0 0 1px rgba(255,120,135,0.32), 0 14px 34px -10px rgba(255,68,88,0.5) !important;
}
.cvy .golive:hover{ background:linear-gradient(160deg, rgba(255,90,108,0.72), rgba(245,60,82,0.48)) !important; }

/* =================================================================
   MESSAGES + friends — soft glass bubbles, refined rhythm
   ================================================================= */
.stage .msg:hover{ background:rgba(255,255,255,0.04); }
.react{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.react.on{ background:rgba(255,255,255,0.16) !important; border-color:rgba(255,255,255,0.3) !important; color:#ffffff !important; }
.msg__actions button{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.frow:hover,
.mem:hover{ background:rgba(255,255,255,0.06); }
.mlist__head{ border-bottom:1px solid rgba(255,255,255,0.07); }

/* sys / gift chips */
.stage .sysmsg{ background:rgba(255,255,255,0.03) !important; border:1px solid rgba(255,255,255,0.07) !important; }
.stage .sysmsg.gift{ background:rgba(199,125,255,0.10) !important; border-color:rgba(199,125,255,0.24) !important; }

/* welcome ball */
.welcome .ball{
  background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

/* =================================================================
   FLOATING GLASS — popups, menus, docked chats, event sheet
   ================================================================= */
.npop,
.evtpop,
.factions,
.msgmenu,
.cwin,
.cwin__head{
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
}
.npop,
.evtpop,
.factions,
.msgmenu,
.cwin{
  background:linear-gradient(160deg, rgba(28,32,31,0.78), rgba(16,20,19,0.72)) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 28px 70px -18px rgba(0,0,0,0.8) !important;
}
.npop::before{ background:rgba(28,32,31,0.92) !important; border-color:rgba(255,255,255,0.12) !important; }
.evtpop::before{ background:rgba(22,26,25,0.9) !important; border-color:rgba(255,255,255,0.12) !important; }
.cwin__head{ background:rgba(255,255,255,0.04) !important; }
.evtmodal{ background:rgba(5,6,6,0.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.evtpop__icon{ background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.evtstat{ background:rgba(255,255,255,0.045) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.evtpop__join{
  background:linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.03)) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
.evtpop__join:hover{ background:linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)) !important; }
.cmsg.them{ background:rgba(255,255,255,0.07) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cmsg.me{ background:rgba(255,255,255,0.12) !important; color:#ffffff !important; }

/* chat action menu / reaction picker / attach + cash popovers — opaque frosted
   glass so the messages behind them never bleed through */
.cmsg-menu, .cmsg-pick, .cwin__attach, .cwin__cash{
  background:linear-gradient(160deg, rgba(30,34,33,0.93), rgba(18,22,21,0.9)) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 26px 64px -16px rgba(0,0,0,0.85) !important;
}
/* floating per-message hover toolbar — opaque frosted so it reads over messages */
.dmsg__acts{
  background:linear-gradient(160deg, rgba(34,38,37,0.94), rgba(22,26,25,0.92)) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
}

/* event rail button face */
.evt__face{ background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.evt__track{ stroke:rgba(255,255,255,0.12); }

/* =================================================================
   LIVE ROOM — glass chrome, solid video tiles
   ================================================================= */
.liveroom{ background:#070707 !important; }
.liveroom::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:none;
}
.lr-top, .lr-body{ position:relative; z-index:1; }
.lr-top{ border-bottom:1px solid rgba(255,255,255,0.08); }
.lr-chat,
.lr-ctrls,
.lr-extra{
  background:linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02)) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:18px !important;
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  backdrop-filter:blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.lr-call{ background:rgba(0,0,0,0.25) !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:18px !important; }
.lr-dbtn{ background:rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
.lr-dbtn:hover{ background:rgba(255,255,255,0.13); }
.lr-dbtn.leave{ background:linear-gradient(160deg, rgba(255,68,88,0.55), rgba(240,45,68,0.35)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
.lr-back, .lr-top .lr-follow{
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)) !important;
  border:1px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

/* =================================================================
   MOBILE (iOS home) — ambient board, glass cards / pills / dock
   ================================================================= */
.ios, .ios *{ font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; }
.ios{ background:#070707 !important; }
.ios::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:none;
}
.ios__status, .ios__body, .ios__tabs{ position:relative; z-index:1; }
.ios__wpill{
  background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.07);
}
.ios__card{
  background:linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 16px 40px -22px rgba(0,0,0,0.7);
}
.ios__card .lead{ background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); }
.ios__tabs{
  background:linear-gradient(160deg, rgba(20,24,22,0.72), rgba(8,10,9,0.82)) !important;
  -webkit-backdrop-filter:blur(28px) saturate(170%); backdrop-filter:blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.ios__fab{
  background:linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 26px -10px rgba(0,0,0,0.6);
}
.ios__golive{
  background:linear-gradient(160deg, rgba(255,68,88,0.62), rgba(240,45,68,0.40)) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 0 0 0 1px rgba(255,120,135,0.30), 0 16px 38px -10px rgba(255,68,88,0.5) !important;
}
.ios__fabmenu{
  background:linear-gradient(160deg, rgba(28,32,31,0.82), rgba(16,20,19,0.76)) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 28px 70px -18px rgba(0,0,0,0.8);
}

/* keep numerals tidy across the skin */
.frame, .ios{ -webkit-font-smoothing:antialiased; }