/* ═══════════════════════════════════════════════════════════════
   BLUESKY OVERLAY — GTA V MODERN EDITION v3.0
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Anton&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --gta-black:#0d0d0d; --gta-dark:#1a1a1a; --gta-surface:#222222; --gta-elevated:#2a2a2a;
  --gta-gray:#3a3a3a; --gta-gray-light:#666666;
  --gta-violet:#9b59b6; --gta-violet-dim:#7d3c98; --gta-violet-bright:#c39bd3; --gta-violet-glow:#d2b4de;
  --gta-white:#e8e0f0; --gta-white-pure:#ffffff; --gta-white-dim:#9a8fb0;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --glass-bg:rgba(8,4,16,0.93); --glass-border:rgba(155,89,182,0.3);
  --shadow:0 8px 32px rgba(0,0,0,0.6);
  --shadow-lg:0 12px 48px rgba(0,0,0,0.7),0 0 0 1px rgba(155,89,182,0.06);
  --glow-violet:0 0 20px rgba(155,89,182,0.2),0 0 60px rgba(155,89,182,0.06);
  --text-shadow:0 2px 8px rgba(0,0,0,0.8);
  --neon-box:0 0 6px rgba(155,89,182,0.6),0 0 14px rgba(155,89,182,0.4),0 0 30px rgba(155,89,182,0.2),0 0 50px rgba(155,89,182,0.1);
  /* Dashboard vars */
  --nui-violet:#9b59b6; --nui-violet-dim:#7d3c98; --nui-violet-bright:#c39bd3; --nui-violet-glow:#d2b4de; --nui-accent:#e879f9;
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0; overflow:hidden;
  background:transparent;
  font-family:'Inter','Roboto Condensed',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── SCANLINES ── */
.scanlines {
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:0.012;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,0.03) 0px,transparent 1px,transparent 3px);
}

/* ── LOGOS ── */
.overlay-logo {
  position:absolute; top:20px; left:24px; z-index:10;
  width:120px; height:120px; display:flex; align-items:center; justify-content:center; perspective:600px;
}
.overlay-logo img {
  width:100%; height:120px; object-fit:contain;
  animation:logoSpin3D 4s ease-in-out infinite,logoGlow 2s ease-in-out infinite;
  transform-style:preserve-3d;
  filter:drop-shadow(0 0 6px rgba(155,89,182,0.7)) drop-shadow(0 0 14px rgba(155,89,182,0.5)) drop-shadow(0 0 30px rgba(155,89,182,0.3)) drop-shadow(0 0 50px rgba(155,89,182,0.15));
}
.overlay-logo-right { left:auto; right:24px; }

/* ── SUB GOAL ── */
.sub-goal {
  position:absolute; top:130px; left:50%; transform:translateX(-50%) translateY(-40px);
  width:480px; max-width:82vw; height:56px; display:flex; align-items:center;
  z-index:6; opacity:0; background:var(--glass-bg); border:1.5px solid var(--glass-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow),var(--glow-violet),var(--neon-box);
  animation:subGoalEnter 0.8s cubic-bezier(0.25,1,0.5,1) 0.5s forwards,saberPulse 2s ease-in-out infinite;
  overflow:hidden;
}
.sub-goal::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(155,89,182,0.4),transparent);
}
.sub-goal-icon {
  flex-shrink:0; width:56px; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(155,89,182,0.25),rgba(155,89,182,0.1));
  border-right:1px solid rgba(155,89,182,0.15); border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
.sub-goal-icon i { font-size:18px; color:var(--gta-violet-bright); filter:drop-shadow(0 0 8px rgba(155,89,182,0.5)); }
.sub-goal-content { flex:1; padding:8px 18px 10px 14px; min-width:0; }
.sub-goal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.sub-goal-label { font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:2.5px; color:var(--gta-violet-bright); text-shadow:var(--text-shadow); text-transform:uppercase; }
.sub-goal-count { font-family:'Bebas Neue',sans-serif; font-size:15px; color:var(--gta-white-pure); text-shadow:var(--text-shadow); letter-spacing:1px; }
.sub-goal-bar { width:100%; height:6px; background:rgba(255,255,255,0.12); border-radius:50px; overflow:hidden; position:relative; }
.sub-goal-fill {
  height:100%; width:0%; background:linear-gradient(90deg,var(--gta-violet-dim),var(--gta-violet),var(--gta-violet-bright));
  border-radius:50px; box-shadow:0 0 12px rgba(155,89,182,0.5); transition:width 1s cubic-bezier(0.25,1,0.5,1); position:relative;
}
.sub-goal-fill::after {
  content:''; position:absolute; right:-1px; top:-2px; bottom:-2px; width:10px; border-radius:50px;
  background:var(--gta-violet-glow); box-shadow:0 0 8px var(--gta-violet-bright),0 0 16px rgba(155,89,182,0.4); opacity:0.9;
}
.sub-goal-glow {
  position:absolute; inset:0; border-radius:50px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(155,89,182,0.06),transparent); animation:barSweep 4s ease-in-out infinite;
}
.sub-goal.complete { border-color:rgba(195,155,211,0.4); box-shadow:var(--shadow),0 0 25px rgba(155,89,182,0.3); }
.sub-goal.complete .sub-goal-icon { background:linear-gradient(135deg,rgba(195,155,211,0.2),rgba(155,89,182,0.06)); }
.sub-goal.complete .sub-goal-icon i { color:var(--gta-violet-glow); }
.sub-goal.complete .sub-goal-label { color:var(--gta-violet-glow); }
.sub-goal.complete .sub-goal-fill { background:linear-gradient(90deg,var(--gta-violet-bright),var(--gta-violet-glow)); box-shadow:0 0 14px rgba(195,155,211,0.5); }
.sub-goal.complete .sub-goal-fill::after { background:var(--gta-white-pure); box-shadow:0 0 10px var(--gta-violet-glow); }

/* ── HUD BANNER ── */
.hud-banner {
  position:absolute; top:20px; left:50%; transform:translateX(-50%) translateY(-60px);
  width:1100px; max-width:94vw; height:90px; padding:0 36px;
  display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:20px;
  z-index:5; opacity:0; background:var(--glass-bg); border:1.5px solid var(--glass-border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg),var(--glow-violet),var(--neon-box);
  animation:hudEnter 0.9s cubic-bezier(0.25,1,0.5,1) forwards,saberPulse 2s ease-in-out infinite 1s;
  overflow:hidden;
}
.hud-banner::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(155,89,182,0.5),transparent);
}
.hud-banner::after {
  content:''; position:absolute; bottom:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(155,89,182,0.15),transparent);
}
.hud-left { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.hud-center { text-align:center; position:relative; z-index:1; }
.hud-right { display:flex; align-items:center; justify-content:flex-end; gap:10px; position:relative; z-index:1; }
.live-dot {
  width:10px; height:10px; border-radius:50%; background:var(--gta-violet-bright);
  box-shadow:0 0 6px var(--gta-violet-bright),0 0 18px rgba(195,155,211,0.35);
  animation:dotPulse 2s ease-in-out infinite; position:relative; flex-shrink:0;
}
.live-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(195,155,211,0.25); animation:dotRing 2s ease-in-out infinite;
}
.hud-label { font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:2.5px; color:var(--gta-violet-bright); text-shadow:var(--text-shadow); text-transform:uppercase; white-space:nowrap; }
.title { font-family:'Anton',sans-serif; font-size:36px; font-weight:400; letter-spacing:6px; text-transform:uppercase; color:var(--gta-white-pure); text-shadow:0 2px 12px rgba(0,0,0,0.6),0 0 30px rgba(155,89,182,0.12); line-height:1; }
.subtitle { font-family:'Inter',sans-serif; margin-top:5px; font-size:11px; font-weight:400; letter-spacing:3px; color:var(--gta-white-dim); text-shadow:var(--text-shadow); text-transform:uppercase; }
.hud-pill {
  font-family:'Inter',sans-serif; padding:8px 16px; font-size:12px; font-weight:600; letter-spacing:1.5px;
  color:var(--gta-violet-bright); background:rgba(155,89,182,0.15); border:1px solid rgba(155,89,182,0.25);
  border-radius:50px; box-shadow:0 2px 12px rgba(0,0,0,0.3),0 0 8px rgba(155,89,182,0.3);
  white-space:nowrap; position:relative; overflow:hidden; transition:background 0.3s ease;
}
.hud-pill::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(155,89,182,0.08),transparent);
  border-radius:50px; animation:pillSweep 5s ease-in-out infinite;
}
.hud-pill i { margin-right:6px; font-size:11px; color:var(--gta-violet); }

/* ── TWITCH ALERT ── */
.twitch-alert {
  position:absolute; top:240px; left:50%; transform:translateX(-50%) translateY(-40px) scale(0.95);
  width:640px; max-width:92vw; height:110px; z-index:20; opacity:0; pointer-events:none;
  display:flex; align-items:stretch; background:transparent; transition:opacity 0.5s ease, transform 0.5s ease;
}
.twitch-alert.show-alert { opacity:1; transform:translateX(-50%) translateY(0) scale(1); animation:alertSlideIn 0.6s cubic-bezier(0.25,1,0.5,1); }
.twitch-alert.hide-alert { opacity:0 !important; transform:translateX(-50%) translateY(-40px) scale(0.95) !important; animation:none !important; transition:opacity 0.5s ease, transform 0.5s ease !important; }
.alert-icon-box {
  flex-shrink:0; width:110px; height:100%; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; background:linear-gradient(145deg,var(--gta-violet),var(--gta-violet-dim));
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow:4px 0 24px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15),var(--neon-box); overflow:hidden;
}
.alert-icon-box::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,rgba(255,255,255,0.15),transparent 60%); pointer-events:none; }
.alert-icon-box::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40%; background:linear-gradient(to top,rgba(0,0,0,0.15),transparent); pointer-events:none; }
.alert-icon-box i { font-size:34px; color:var(--gta-white-pure); filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3)); position:relative; z-index:1; animation:iconBounce 2.5s ease-in-out infinite; }
.alert-separator { display:none; }
.alert-content {
  flex:1; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:14px 28px 14px 24px; position:relative; z-index:2; min-width:0;
  background:var(--glass-bg); border:1.5px solid var(--glass-border); border-left:none;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0; box-shadow:var(--shadow-lg),var(--neon-box); overflow:hidden;
}
.alert-content::before { content:''; position:absolute; top:0; left:0; right:10%; height:1px; background:linear-gradient(90deg,rgba(155,89,182,0.5),rgba(155,89,182,0.1),transparent); }
.alert-content::after { content:''; position:absolute; bottom:12px; left:24px; width:40px; height:3px; background:var(--gta-violet); border-radius:50px; opacity:0.6; }
.alert-title { font-family:'Anton',sans-serif; font-size:26px; letter-spacing:4px; color:var(--gta-white-pure); text-shadow:0 2px 10px rgba(0,0,0,0.6); text-transform:uppercase; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alert-name { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; letter-spacing:1.5px; color:var(--gta-violet-bright); text-shadow:var(--text-shadow); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alert-subtitle { font-family:'Inter',sans-serif; font-size:10px; letter-spacing:2.5px; color:var(--gta-white-dim); text-shadow:var(--text-shadow); margin-top:3px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alert-dots { position:absolute; bottom:16px; display:flex; gap:5px; z-index:4; }
.alert-dots-left { left:130px; }
.alert-dots-right { right:28px; }
.alert-dots span { width:4px; height:4px; border-radius:50%; background:var(--gta-violet); box-shadow:0 0 6px rgba(155,89,182,0.4); animation:dotFade 2s ease-in-out infinite; }
.alert-dots span:nth-child(2) { animation-delay:0.2s; }
.alert-dots span:nth-child(3) { animation-delay:0.4s; }
.twitch-alert.follower-latest .alert-icon-box { background:linear-gradient(145deg,var(--gta-violet),var(--gta-violet-dim)); }
.twitch-alert.subscriber-latest .alert-icon-box { background:linear-gradient(145deg,var(--gta-violet-bright),var(--gta-violet)); }
.twitch-alert.tip-latest .alert-icon-box { background:linear-gradient(145deg,var(--gta-violet),#6a2d8b); }
.twitch-alert.cheer-latest .alert-icon-box { background:linear-gradient(145deg,#8e44ad,var(--gta-violet-dim)); }
.twitch-alert.raid-latest .alert-icon-box { background:linear-gradient(145deg,#6c3483,#4a235a); animation:raidPulse 0.8s ease-in-out 3; }
.twitch-alert.raid-latest .alert-icon-box i { animation:iconBounce 0.6s ease-in-out infinite; }
.twitch-alert.raid-latest .alert-title { animation:raidFlash 0.5s ease-in-out 3; }

/* ── TWITCH PARTICLES ── */
.twitch-particles-container { position:fixed; inset:0; z-index:100; pointer-events:none; overflow:hidden; perspective:800px; }
.twitch-particles-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:101; animation:textPopIn 0.6s cubic-bezier(0.16,1,0.3,1) forwards; opacity:0; }
.tp-title { font-family:'Anton',sans-serif; font-size:52px; letter-spacing:8px; color:var(--gta-white-pure); text-shadow:0 4px 20px rgba(0,0,0,0.7),0 0 40px rgba(155,89,182,0.4),0 0 80px rgba(155,89,182,0.15); text-transform:uppercase; line-height:1; }
.tp-name { font-family:'Inter',sans-serif; font-size:22px; font-weight:700; letter-spacing:3px; color:var(--gta-violet-bright); text-shadow:0 2px 12px rgba(155,89,182,0.5); margin-top:10px; }
.tp-subtitle { font-family:'Inter',sans-serif; font-size:13px; letter-spacing:4px; color:var(--gta-white-dim); text-shadow:0 2px 8px rgba(0,0,0,0.6); margin-top:6px; text-transform:uppercase; }
.twitch-particle { position:absolute; top:-60px; transform-style:preserve-3d; will-change:transform,opacity; color:var(--gta-violet); filter:drop-shadow(0 0 6px rgba(155,89,182,0.4)); }
.twitch-particle svg { width:100%; height:100%; display:block; }

/* ── VOTE PANEL ── */
.vote-panel { position:fixed; top:50%; right:0; transform:translateY(-50%) translateX(110%); z-index:50; width:380px; pointer-events:none; transition:transform 0.7s cubic-bezier(0.25,1,0.5,1); }
.vote-panel.vote-visible { transform:translateY(-50%) translateX(0); pointer-events:auto; }
.vote-panel-inner { margin-right:24px; padding:28px; background:var(--glass-bg); border:1.5px solid var(--glass-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg),var(--glow-violet),var(--neon-box); animation:saberPulse 2s ease-in-out infinite; position:relative; overflow:hidden; }
.vote-panel-inner::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(155,89,182,0.5),transparent); }
.vote-header { display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.vote-header-icon { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--gta-violet),var(--gta-violet-dim)); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--gta-white-pure); box-shadow:0 4px 16px rgba(155,89,182,0.35); flex-shrink:0; }
.vote-title { font-family:'Anton',sans-serif; font-size:22px; letter-spacing:4px; color:var(--gta-white-pure); text-shadow:0 2px 10px rgba(0,0,0,0.6); text-transform:uppercase; }
.vote-target { font-family:'Inter',sans-serif; font-size:12px; font-weight:500; letter-spacing:2px; color:var(--gta-white-dim); text-transform:uppercase; margin-top:2px; }
.vote-target span { color:var(--gta-violet-bright); font-weight:700; }
.vote-separator { height:1px; margin:16px 0; background:linear-gradient(90deg,transparent,var(--glass-border),transparent); }
.vote-option { margin-bottom:16px; }
.vote-option-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.vote-option-label { font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; display:flex; align-items:center; gap:8px; }
.vote-option-label i { font-size:12px; }
.vote-label-jail { color:var(--gta-violet-bright); text-shadow:0 0 8px rgba(195,155,211,0.4); }
.vote-label-ban { color:#e879f9; text-shadow:0 0 8px rgba(232,121,249,0.4); }
.vote-label-free { color:#34d399; text-shadow:0 0 8px rgba(52,211,153,0.4); }
.vote-count { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--gta-white-pure); text-shadow:var(--text-shadow); }
.vote-bar-track { width:100%; height:8px; background:rgba(255,255,255,0.06); border-radius:50px; overflow:hidden; }
.vote-bar-fill { height:100%; width:0%; border-radius:50px; transition:width 0.5s cubic-bezier(0.25,1,0.5,1); }
.vote-fill-jail { background:linear-gradient(90deg,var(--gta-violet-dim),var(--gta-violet-bright)); box-shadow:0 0 10px rgba(195,155,211,0.4); }
.vote-fill-ban { background:linear-gradient(90deg,#9b59b6,#e879f9); box-shadow:0 0 10px rgba(232,121,249,0.4); }
.vote-fill-free { background:linear-gradient(90deg,#059669,#34d399); box-shadow:0 0 10px rgba(52,211,153,0.4); }
.vote-footer { text-align:center; margin-top:4px; }
.vote-timer { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:3px; color:var(--gta-violet-bright); text-shadow:var(--text-shadow); }
.vote-result { font-family:'Anton',sans-serif; font-size:18px; letter-spacing:4px; margin-top:6px; text-transform:uppercase; }
.vote-result.result-jail { color:var(--gta-violet-bright); text-shadow:0 0 12px rgba(195,155,211,0.5); }
.vote-result.result-ban { color:#e879f9; text-shadow:0 0 12px rgba(232,121,249,0.5); }
.vote-result.result-free { color:#34d399; text-shadow:0 0 12px rgba(52,211,153,0.5); }
.vote-result.result-tie { color:var(--gta-violet-glow); text-shadow:0 0 12px rgba(210,180,222,0.5); }

/* ── CHAT OVERLAY ── */
.chat-overlay { position:fixed; right:24px; bottom:24px; width:380px; max-height:50vh; z-index:30; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; overflow:hidden; }
.chat-msg { display:flex; align-items:flex-start; gap:10px; padding:10px 16px; background:rgba(15,10,25,0.82); border:1px solid rgba(155,89,182,0.35); border-left: 3px solid var(--accent); border-radius:var(--radius-md); box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 8px rgba(155,89,182,0.25); opacity:0; transform:translateX(40px) scale(0.92); max-width:100%; transition:opacity 0.4s cubic-bezier(0.25,1,0.5,1),transform 0.4s cubic-bezier(0.25,1,0.5,1),filter 0.4s ease,max-height 0.4s ease,margin-bottom 0.4s ease,padding 0.4s ease; filter:blur(4px); max-height:0; margin-bottom:0; overflow:hidden; }
.chat-msg.chat-enter { opacity:1; transform:translateX(0) scale(1); filter:blur(0); max-height:120px; margin-bottom:6px; }
.chat-msg.chat-exit { opacity:0; transform:translateX(40px) scale(0.92); filter:blur(4px); }
.chat-msg.chat-exit { opacity:0; transform:translateX(-20px) scale(0.95); filter:blur(3px); max-height:0; margin-bottom:0; padding-top:0; padding-bottom:0; }
.chat-msg-user { font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.5px; color:var(--gta-violet-bright); white-space:nowrap; flex-shrink:0; text-shadow:0 1px 4px rgba(0,0,0,0.5); }
.chat-msg-badge { font-size:10px; margin-right:2px; opacity:0.8; }
.chat-msg-badge.badge-broadcaster { color:#e24040; }
.chat-msg-badge.badge-moderator { color:#59d64a; }
.chat-msg-badge.badge-vip { color:#e879f9; }
.chat-msg-badge.badge-subscriber { color:var(--gta-violet-bright); }
.chat-msg-text { font-family:'Inter',sans-serif; font-size:13px; color:var(--gta-white); line-height:1.4; word-break:break-word; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
.chat-msg-colon { color:var(--gta-white-dim); margin-right:1px; flex-shrink:0; }

/* ── SCREEN OVERLAY ── */
.screen-overlay { position:fixed; inset:0; z-index:210; opacity:0; pointer-events:none; transition:opacity 0.8s cubic-bezier(0.25,1,0.5,1); }
.screen-overlay.screen-overlay-visible { opacity:1; pointer-events:auto; }
.screen-overlay-content { position:absolute; inset:0; }
.screen-overlay-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:screenZoomIn 1s cubic-bezier(0.16,1,0.3,1) forwards; }
.screen-rain { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.rain-drop { position:absolute; top:-20px; width:var(--snow-size); height:var(--snow-size); background:radial-gradient(circle,rgba(255,255,255,0.9),rgba(195,155,211,0.4) 60%,transparent); border-radius:50%; animation:snowFall var(--rain-duration) linear var(--rain-delay) infinite; opacity:var(--rain-opacity); filter:blur(var(--snow-blur)); }
.screen-overlay-flash { position:absolute; inset:0; z-index:3; background:white; opacity:0; pointer-events:none; animation:screenFlash 0.6s ease-out forwards; }

/* ── BRB OVERLAY ── */
.brb-overlay { position:fixed; inset:0; z-index:220; background:transparent; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.8s cubic-bezier(0.25,1,0.5,1); }
.brb-overlay.brb-visible { opacity:1; pointer-events:auto; }
.brb-content { display:none; }
.brb-timer { position:absolute; bottom:60px; left:60px; font-family:'Bebas Neue',sans-serif; font-size:80px; letter-spacing:8px; color:#e879f9; text-shadow:0 0 30px rgba(232,121,249,0.7),0 0 60px rgba(232,121,249,0.3); line-height:1; }

/* ── HIGHLIGHT ── */
.highlight-overlay { position:fixed; bottom:180px; left:50%; transform:translateX(-50%) translateY(30px) scale(0.95); z-index:80; width:600px; max-width:90vw; opacity:0; pointer-events:none; transition:all 0.5s cubic-bezier(0.25,1,0.5,1); }
.highlight-overlay.highlight-visible { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.highlight-inner { display:flex; align-items:flex-start; gap:16px; padding:20px 28px; background:var(--glass-bg); border:1.5px solid var(--glass-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg),var(--glow-violet),var(--neon-box); animation:saberPulse 2s ease-in-out infinite; position:relative; overflow:hidden; }
.highlight-inner::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(155,89,182,0.5),transparent); }
.highlight-icon { flex-shrink:0; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--gta-violet),var(--gta-violet-dim)); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--gta-white-pure); box-shadow:0 4px 16px rgba(155,89,182,0.35); }
.highlight-user { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; letter-spacing:1px; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.highlight-msg { font-family:'Inter',sans-serif; font-size:20px; font-weight:500; color:var(--gta-white-pure); text-shadow:0 2px 10px rgba(0,0,0,0.5); margin-top:6px; line-height:1.4; word-break:break-word; }
.highlight-body { flex:1; min-width:0; }

/* ── POLL OVERLAY ── */
.poll-overlay { position:fixed; top:50%; left:0; transform:translateY(-50%) translateX(-110%); z-index:55; width:380px; pointer-events:none; transition:transform 0.7s cubic-bezier(0.25,1,0.5,1); }
.poll-overlay.poll-visible { transform:translateY(-50%) translateX(0); pointer-events:auto; }
.poll-inner { margin-left:24px; padding:24px; background:var(--glass-bg); border:1.5px solid var(--glass-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg),var(--glow-violet),var(--neon-box); animation:saberPulse 2s ease-in-out infinite; position:relative; overflow:hidden; }
.poll-inner::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(155,89,182,0.5),transparent); }
.poll-header { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.poll-header-icon { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--gta-violet),var(--gta-violet-dim)); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--gta-white-pure); box-shadow:0 4px 16px rgba(155,89,182,0.35); flex-shrink:0; }
.poll-title { font-family:'Anton',sans-serif; font-size:20px; letter-spacing:3px; color:var(--gta-white-pure); text-shadow:0 2px 10px rgba(0,0,0,0.6); text-transform:uppercase; }
.poll-question { font-family:'Inter',sans-serif; font-size:12px; font-weight:500; letter-spacing:1.5px; color:var(--gta-violet-bright); margin-top:2px; }
.poll-separator { height:1px; margin:14px 0; background:linear-gradient(90deg,transparent,var(--glass-border),transparent); }
.poll-option { margin-bottom:12px; }
.poll-option-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.poll-option-label { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; color:var(--gta-white); }
.poll-option-count { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gta-white-pure); text-shadow:var(--text-shadow); }
.poll-bar-track { width:100%; height:8px; background:rgba(255,255,255,0.06); border-radius:50px; overflow:hidden; }
.poll-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--gta-violet-dim),var(--gta-violet-bright)); box-shadow:0 0 10px rgba(195,155,211,0.4); border-radius:50px; transition:width 0.5s cubic-bezier(0.25,1,0.5,1); }
.poll-footer { text-align:center; font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:3px; color:var(--gta-violet-bright); text-shadow:var(--text-shadow); }

/* ── SCENES ── */
.scene-gaming .chat-overlay { display:flex; }
.scene-gaming .hud-banner { display:grid; }
.scene-justchatting .chat-overlay { width:420px; max-height:60vh; }
.scene-justchatting #playersCount { display:none; }
.scene-brb .chat-overlay,.scene-brb .twitch-alert,.scene-brb .vote-panel,.scene-brb .poll-overlay { display:none; }

/* ── KEYFRAMES ── */
@keyframes hudEnter { 0%{transform:translateX(-50%) translateY(-60px);opacity:0;filter:blur(6px);} 100%{transform:translateX(-50%) translateY(0);opacity:1;filter:blur(0);} }
@keyframes subGoalEnter { 0%{transform:translateX(-50%) translateY(-40px);opacity:0;filter:blur(6px);} 100%{transform:translateX(-50%) translateY(0);opacity:1;filter:blur(0);} }
@keyframes alertSlideIn { 0%{transform:translateX(-50%) translateY(-40px) scale(0.96);opacity:0;filter:blur(6px);} 100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1;filter:blur(0);} }
@keyframes dotPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(0.75);opacity:0.5;} }
@keyframes dotRing { 0%,100%{transform:scale(1);opacity:0.4;} 50%{transform:scale(2);opacity:0;} }
@keyframes barSweep { 0%{transform:translateX(-100%);} 50%,100%{transform:translateX(200%);} }
@keyframes pillSweep { 0%{left:-100%;} 50%,100%{left:200%;} }
@keyframes iconBounce { 0%,100%{transform:scale(1) translateY(0);} 50%{transform:scale(1.08) translateY(-2px);} }
@keyframes dotFade { 0%,100%{opacity:0.25;transform:scale(0.8);} 50%{opacity:1;transform:scale(1.2);} }
@keyframes raidFlash { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
@keyframes raidPulse { 0%,100%{box-shadow:4px 0 24px rgba(0,0,0,0.4);} 50%{box-shadow:4px 0 30px rgba(155,89,182,0.5),0 0 50px rgba(155,89,182,0.25);} }
@keyframes logoSpin3D { 0%{transform:rotateY(0deg);} 50%{transform:rotateY(180deg);} 100%{transform:rotateY(360deg);} }
@keyframes saberPulse { 0%,100%{box-shadow:var(--shadow),var(--glow-violet),var(--neon-box);} 50%{box-shadow:var(--shadow),var(--glow-violet),0 0 10px rgba(195,155,211,0.8),0 0 22px rgba(155,89,182,0.6),0 0 44px rgba(155,89,182,0.35),0 0 70px rgba(155,89,182,0.18);} }
@keyframes logoGlow { 0%,100%{filter:drop-shadow(0 0 6px rgba(155,89,182,0.7)) drop-shadow(0 0 14px rgba(155,89,182,0.5)) drop-shadow(0 0 30px rgba(155,89,182,0.3)) drop-shadow(0 0 50px rgba(155,89,182,0.15));} 50%{filter:drop-shadow(0 0 10px rgba(195,155,211,0.9)) drop-shadow(0 0 22px rgba(155,89,182,0.7)) drop-shadow(0 0 44px rgba(155,89,182,0.4)) drop-shadow(0 0 70px rgba(155,89,182,0.2));} }
@keyframes particleFall { 0%{transform:translateY(0) translateX(0) rotateX(var(--rot-x)) rotateY(var(--rot-y)) rotateZ(var(--rot-z));opacity:0;} 8%{opacity:var(--particle-opacity);} 85%{opacity:var(--particle-opacity);} 100%{transform:translateY(calc(100vh + 80px)) translateX(var(--drift)) rotateX(var(--rot-x)) rotateY(var(--rot-y)) rotateZ(var(--rot-z));opacity:0;} }
@keyframes textPopIn { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.7);filter:blur(10px);} 100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);} }
@keyframes screenZoomIn { 0%{opacity:0;transform:scale(1.1);filter:blur(8px) brightness(1.5);} 40%{opacity:1;filter:blur(2px) brightness(1.1);} 100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1);} }
@keyframes screenFlash { 0%{opacity:0.7;} 100%{opacity:0;} }
@keyframes snowFall { 0%{transform:translateY(-20px) translateX(0);} 25%{transform:translateY(25vh) translateX(var(--snow-drift));} 50%{transform:translateY(50vh) translateX(calc(var(--snow-drift) * -0.6));} 75%{transform:translateY(75vh) translateX(var(--snow-drift));} 100%{transform:translateY(calc(100vh + 20px)) translateX(0);} }

/* ═══════════════════════════════════════
   AUTH / DASHBOARD
   ═══════════════════════════════════════ */
.auth-page { display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at top,rgba(155,89,182,.28),transparent 38%),#0a0510; }
.auth-card { width:min(460px,92vw); background:#1a1228; border:1px solid rgba(155,89,182,.35); border-radius:22px; padding:34px; box-shadow:0 20px 70px rgba(0,0,0,.55),0 0 50px rgba(155,89,182,.16); }
h1 { font-family:Anton,Arial,sans-serif; letter-spacing:3px; margin:0 0 16px; }
h2 { margin-top:0; color:#c39bd3; }
p { color:#9a8fb0; }
label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:#c39bd3; font-weight:800; margin:14px 0 7px; }
input { width:100%; padding:13px 14px; border-radius:10px; border:1px solid rgba(155,89,182,.28); background:#08040d; color:white; font-weight:700; outline:none; }
button,.button-link { display:inline-block; border:0; color:white; background:linear-gradient(135deg,#9b59b6,#7d3c98); padding:11px 16px; border-radius:10px; font-weight:900; letter-spacing:1px; cursor:pointer; text-decoration:none; }
button.danger { background:linear-gradient(135deg,#e24040,#a81818); }
.auth-card button { width:100%; margin-top:18px; }
.auth-card a { display:block; margin-top:18px; color:#c39bd3; text-decoration:none; font-weight:800; }
.error { margin-bottom:16px; padding:10px 12px; border-radius:10px; background:rgba(226,64,64,.16); border:1px solid rgba(226,64,64,.35); color:#ffb8b8; font-weight:800; }
.success { margin-bottom:16px; padding:12px 14px; border-radius:12px; background:rgba(89,214,74,.12); border:1px solid rgba(89,214,74,.32); color:#a8ff9d; font-weight:800; }
.topbar { height:58px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; background:#130d1e; border-bottom:1px solid rgba(155,89,182,.25); }
.badge { display:inline-block; margin-left:8px; padding:5px 9px; border-radius:999px; color:#c39bd3; background:rgba(155,89,182,.16); border:1px solid rgba(155,89,182,.35); font-size:12px; font-weight:900; }
.logout { color:white; text-decoration:none; background:rgba(226,64,64,.18); border:1px solid rgba(226,64,64,.35); padding:9px 12px; border-radius:10px; font-weight:800; }
.dashboard { max-width:1180px; margin:0 auto; padding:34px; }
.tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.tab { padding:11px 16px; border-radius:10px; color:#c39bd3; text-decoration:none; background:rgba(255,255,255,.04); border:1px solid rgba(155,89,182,.25); font-weight:900; }
.tab.active { color:white; background:linear-gradient(135deg,#9b59b6,#7d3c98); }
.card { background:#1a1228; border:1px solid rgba(155,89,182,.25); border-radius:18px; padding:24px; }
.users-list { display:flex; flex-direction:column; gap:10px; }
.user-row { display:grid; grid-template-columns:1fr auto auto auto auto; gap:10px; align-items:center; padding:14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(155,89,182,.2); }
.user-row small { display:block; margin-top:4px; color:#9a8fb0; }
@media (max-width:850px) { .user-row { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════
   CAM OVERLAY — Bas gauche
   ═══════════════════════════════════════ */
.cam-overlay {
  position: fixed;
  bottom: 26px;
  left: 22px;
  width: 424px;
  height: 240px;
  z-index: 40;
  animation: camEnter 0.8s cubic-bezier(0.25,1,0.5,1) 0.3s both;
}

@keyframes camEnter {
  0%   { opacity:0; transform:translateY(20px) scale(0.96); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

/* Cadre principal */
.cam-frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(155,89,182,0.55);
  border-radius: 18px;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(155,89,182,0.15),
    0 8px 40px rgba(0,0,0,0.6),
    0 0 30px rgba(155,89,182,0.18),
    inset 0 0 40px rgba(155,89,182,0.05);
  animation: saberPulse 3s ease-in-out infinite;
  overflow: hidden;
  pointer-events: none;
}

/* Scanline animée */
.cam-scanline {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, rgba(155,89,182,0.05), transparent);
  animation: camScan 5s linear infinite;
  pointer-events: none;
}
@keyframes camScan {
  0%   { top: -35%; }
  100% { top: 135%; }
}

/* Coins décoratifs style GTA */
.cam-corner {
  position: absolute;
  width: 22px;
  height: 22px;
}
.cam-corner-tl { top: -1px; left: -1px; border-top: 3px solid var(--gta-violet-bright); border-left: 3px solid var(--gta-violet-bright); border-radius: 18px 0 0 0; }
.cam-corner-tr { top: -1px; right: -1px; border-top: 3px solid var(--gta-violet-bright); border-right: 3px solid var(--gta-violet-bright); border-radius: 0 18px 0 0; }
.cam-corner-bl { bottom: -1px; left: -1px; border-bottom: 3px solid var(--gta-violet-bright); border-left: 3px solid var(--gta-violet-bright); border-radius: 0 0 0 18px; }
.cam-corner-br { bottom: -1px; right: -1px; border-bottom: 3px solid var(--gta-violet-bright); border-right: 3px solid var(--gta-violet-bright); border-radius: 0 0 18px 0; }

/* Label nom — en bas à l'intérieur du cadre */
.cam-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 8px;
  padding: 5px 14px;
  box-shadow: 0 0 14px rgba(155,89,182,0.2), var(--neon-box);
  white-space: nowrap;
}
.cam-label span {
  font-family: 'Anton', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gta-white-pure);
  text-shadow: 0 0 10px rgba(155,89,182,0.4);
  text-transform: uppercase;
}
.cam-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e879f9;
  box-shadow: 0 0 6px #e879f9, 0 0 12px rgba(232,121,249,0.4);
  animation: dotPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}