/* ═══════════════════════════════════════════════════════
   SOCIALITE — CSS FRAMEWORK
   Méta-réseau social expérimental
   ═══════════════════════════════════════════════════════ */

:root {
  --bg: #06060b;
  --bg2: #0c0c14;
  --card: rgba(255,255,255,0.025);
  --card-hover: rgba(255,255,255,0.055);
  --border: rgba(255,255,255,0.07);
  --border-accent: rgba(0,212,255,0.3);
  --text: #e0e0e0;
  --text-dim: #777;
  --text-bright: #fff;
  --accent: #00d4ff;
  --purple: #b24bf3;
  --pink: #ff006e;
  --green: #00c878;
  --orange: #ff9f43;
  --red: #ff4444;
  --font: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --display: 'Orbitron', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --glow: 0 0 20px rgba(0,212,255,0.2);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100vh; overflow-x: hidden;
  transition: opacity 0.5s;
}

/* ─── SPLASH ─── */
.splash {
  position: fixed; inset:0; z-index:9999; background: #000;
  display: flex; align-items:center; justify-content:center;
  transition: opacity 0.8s, transform 0.8s;
}
.splash.fade-out { opacity:0; transform:scale(1.1); pointer-events:none; }
.splash canvas { position:absolute; inset:0; width:100%; height:100%; }
.splash-content {
  position:relative; z-index:2; text-align:center;
  animation: splashIn 1s ease-out;
}
@keyframes splashIn {
  from { opacity:0; transform:translateY(40px) scale(0.9); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.splash-avatar {
  width:100px; height:100px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; margin:0 auto 1.5rem;
  box-shadow: 0 0 60px rgba(0,212,255,0.5), 0 0 120px rgba(178,75,243,0.3);
  animation: splashAvatar 3s ease-in-out infinite;
}
@keyframes splashAvatar {
  0%,100% { transform:scale(1) rotate(0deg); box-shadow:0 0 60px rgba(0,212,255,0.5); }
  50% { transform:scale(1.08) rotate(5deg); box-shadow:0 0 80px rgba(0,212,255,0.7), 0 0 120px rgba(178,75,243,0.5); }
}
.splash-title {
  font-family: var(--display); font-size: clamp(2.5rem,8vw,5rem);
  font-weight:900; letter-spacing:0.1em;
  background: linear-gradient(135deg, var(--accent), var(--purple), var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.splash-sub {
  font-family: var(--mono); font-size:1rem; color:var(--green);
  margin-top:0.5rem; letter-spacing:0.05em;
}
.splash-loader {
  width:200px; height:4px; background:rgba(255,255,255,0.1);
  border-radius:2px; margin:2rem auto; overflow:hidden;
}
.splash-loader-bar {
  height:100%; width:0%; border-radius:2px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  transition: width 0.3s;
}
.splash-enter {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:1rem 3rem; font-family:var(--display); font-size:1.1rem;
  font-weight:700; letter-spacing:0.1em;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border:none; border-radius:50px; color:#fff; cursor:pointer;
  box-shadow: 0 0 40px rgba(0,212,255,0.4);
  animation: splashBtn 2s ease-in-out infinite;
  opacity:0; transition: opacity 0.5s;
}
.splash-enter.visible { opacity:1; }
@keyframes splashBtn {
  0%,100% { box-shadow:0 0 30px rgba(0,212,255,0.4); transform:scale(1); }
  50% { box-shadow:0 0 50px rgba(0,212,255,0.6); transform:scale(1.03); }
}
.splash-enter:hover { transform:scale(1.08) !important; }

/* Glitch */
.glitch-text {
  position:relative;
}
.glitch-text::before, .glitch-text::after {
  content: attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%;
  background: var(--bg); -webkit-background-clip:text; background-clip:text;
}
.glitch-text::before {
  -webkit-text-fill-color:transparent; background:linear-gradient(135deg,#ff006e,#b24bf3); -webkit-background-clip:text; background-clip:text;
  animation: glitch1 3s infinite; clip-path: inset(0 0 65% 0);
}
.glitch-text::after {
  -webkit-text-fill-color:transparent; background:linear-gradient(135deg,#00d4ff,#00c878); -webkit-background-clip:text; background-clip:text;
  animation: glitch2 3s infinite; clip-path: inset(65% 0 0 0);
}
@keyframes glitch1 { 0%,92%,100%{transform:translate(0)} 93%{transform:translate(-5px,2px)} 95%{transform:translate(5px,-2px)} 97%{transform:translate(-3px,1px)} }
@keyframes glitch2 { 0%,94%,100%{transform:translate(0)} 95%{transform:translate(5px,-2px)} 97%{transform:translate(-5px,2px)} 99%{transform:translate(3px,-1px)} }

/* ─── APP LAYOUT ─── */
.app { position:relative; min-height:100vh; }
.app.hidden { display:none; }

/* BG Canvas */
#bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }
.orb {
  position:fixed; border-radius:50%; filter:blur(120px); opacity:0.2;
  animation: orbFloat 25s ease-in-out infinite; pointer-events:none; z-index:0;
}
.orb-1 { width:600px; height:600px; background:var(--accent); top:-15%; left:-15%; }
.orb-2 { width:500px; height:500px; background:var(--purple); bottom:-15%; right:-15%; animation-delay:-8s; }
.orb-3 { width:400px; height:400px; background:var(--pink); top:30%; left:40%; animation-delay:-16s; }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(60px,-40px) scale(1.1); }
  66% { transform:translate(-40px,60px) scale(0.9); }
}

/* Paint overlay */
.paint-overlay {
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:0; transition: opacity 0.3s;
  background: radial-gradient(circle at 50% 50%, #ff006e, #ff9f43, #b24bf3);
  mix-blend-mode: screen;
}
.paint-overlay.active { opacity:0.85; pointer-events:all; }

/* ─── NAV ─── */
.nav {
  position:fixed; top:0; width:100%; z-index:50;
  background: rgba(6,6,11,0.85); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0.8rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand {
  display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:var(--text-bright);
}
.nav-brand-icon { font-size:1.5rem; }
.nav-brand-text {
  font-family:var(--display); font-weight:700; font-size:1rem;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-links { display:flex; gap:0.3rem; }
.nav-link {
  display:flex; align-items:center; gap:0.4rem; padding:0.5rem 0.8rem;
  text-decoration:none; color:var(--text-dim); border-radius:var(--radius-sm);
  font-size:0.8rem; font-weight:500; transition:all 0.3s;
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.nav-link.active {
  color:var(--accent); background:rgba(0,212,255,0.1);
  box-shadow:0 0 15px rgba(0,212,255,0.1);
}
.nav-link i { font-size:0.9rem; }
.nav-companion-toggle {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.3s; color:#fff; font-size:1rem;
}
.nav-companion-toggle:hover { transform:scale(1.1); box-shadow:0 0 20px rgba(0,212,255,0.4); }

/* ─── MAIN / SECTIONS ─── */
.main-content {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:5rem 1.5rem 2rem;
}
.section { display:none; animation: sectionIn 0.5s ease-out; }
.section.active { display:block; }
@keyframes sectionIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.section-header {
  font-family:var(--display); font-size:1.4rem; font-weight:700;
  margin-bottom:1.5rem; display:flex; align-items:center; gap:0.6rem;
  color:var(--text-bright);
}
.section-header i { color:var(--accent); }

/* ─── HOME ─── */
.home-hero {
  text-align:center; padding:3rem 0 2rem;
}
.home-avatar-ring {
  width:120px; height:120px; margin:0 auto 1.5rem; border-radius:50%;
  padding:4px;
  background: conic-gradient(from 0deg, var(--accent), var(--purple), var(--pink), var(--green), var(--accent));
  animation: ringRotate 8s linear infinite;
}
@keyframes ringRotate { to { transform:rotate(360deg); } }
.home-avatar {
  width:100%; height:100%; border-radius:50%;
  background:var(--bg2); display:flex; align-items:center; justify-content:center;
  font-size:3rem;
}
.home-name {
  font-family:var(--display); font-size:2rem; font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.home-tagline {
  font-family:var(--mono); font-size:0.85rem; color:var(--green);
  background:rgba(0,200,120,0.1); border:1px solid rgba(0,200,120,0.2);
  border-radius:50px; padding:0.4rem 1.2rem; display:inline-flex;
  align-items:center; gap:0.4rem; margin-top:0.5rem;
}
.home-bio { color:var(--text-dim); font-size:0.9rem; margin-top:0.8rem; max-width:500px; margin-inline:auto; }
.home-live {
  display:flex; align-items:center; justify-content:center;
  gap:0.5rem; margin-top:1rem; font-size:0.8rem; color:var(--green);
}
.live-dot {
  width:8px; height:8px; background:var(--green); border-radius:50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.3)} }

.home-quick-links {
  display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center;
  margin-top:1.5rem;
}
.quick-link {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.6rem 1rem; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--border);
  text-decoration:none; color:var(--text); font-size:0.85rem;
  transition:all 0.3s; position:relative; overflow:hidden;
}
.quick-link::before {
  content:''; position:absolute; inset:0; opacity:0;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  transition:opacity 0.3s;
}
.quick-link:hover { border-color:var(--border-accent); transform:translateY(-2px); box-shadow:var(--glow); }
.quick-link:hover::before { opacity:0.1; }
.quick-link i { position:relative; z-index:1; }
.quick-link span { position:relative; z-index:1; font-weight:600; }
.quick-link .ql-handle { font-family:var(--mono); font-size:0.65rem; color:var(--text-dim); position:relative; z-index:1; }

.home-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0.8rem;
  margin-top:2rem; max-width:600px; margin-inline:auto;
}
.stat-card {
  text-align:center; padding:1rem; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius);
}
.stat-val {
  font-family:var(--mono); font-size:1.6rem; font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:0.7rem; color:var(--text-dim); margin-top:0.3rem; }

.home-widget-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0.8rem; margin-top:2rem;
}

/* ─── WIDGETS ─── */
.widget-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.2rem;
  transition:all 0.35s; position:relative; overflow:hidden;
}
.widget-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
  transform:scaleX(0); transition:transform 0.4s;
}
.widget-card:hover { border-color:var(--border-accent); box-shadow:var(--glow); }
.widget-card:hover::before { transform:scaleX(1); }
.widget-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.8rem;
}
.widget-title { display:flex; align-items:center; gap:0.5rem; font-weight:600; font-size:0.9rem; }
.widget-badge {
  font-size:0.6rem; padding:0.15rem 0.5rem;
  background:rgba(0,200,120,0.15); border:1px solid rgba(0,200,120,0.3);
  border-radius:50px; color:var(--green);
}
.widgets-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0.8rem;
}

/* Specific widgets */
.waka-stats { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.waka-stat { text-align:center; padding:0.6rem; background:rgba(0,0,0,0.3); border-radius:var(--radius-sm); }
.waka-value { font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--accent); }
.waka-label { font-size:0.7rem; color:var(--text-dim); }
.waka-langs { display:flex; gap:0.3rem; margin-top:0.8rem; flex-wrap:wrap; }
.waka-lang { font-family:var(--mono); font-size:0.65rem; padding:0.2rem 0.5rem; border-radius:6px; }

.gh-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; text-align:center; }
.gh-stat-val { font-family:var(--mono); font-size:1.3rem; font-weight:700; color:var(--accent); }
.gh-stat-label { font-size:0.65rem; color:var(--text-dim); }

.so-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; text-align:center; }
.so-stat-val { font-family:var(--mono); font-size:1.2rem; font-weight:700; }
.so-stat-label { font-size:0.65rem; color:var(--text-dim); }
.so-rep { color:#f48024; }

.rt-bar-track { height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; margin:0.6rem 0; }
.rt-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--green),var(--accent)); transition:width 2s; }
.rt-details { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--text-dim); }

.twitch-status { display:flex; align-items:center; gap:0.6rem; padding:0.8rem; background:rgba(145,70,255,0.1); border:1px solid rgba(145,70,255,0.2); border-radius:var(--radius-sm); }
.twitch-indicator { width:10px; height:10px; border-radius:50%; }
.twitch-indicator.online { background:#9146FF; box-shadow:0 0 12px #9146FF; animation:twitchPulse 1.5s infinite; }
.twitch-indicator.offline { background:#555; }
@keyframes twitchPulse { 0%,100%{box-shadow:0 0 8px rgba(145,70,255,0.5)} 50%{box-shadow:0 0 20px rgba(145,70,255,0.8)} }

.spotify-now { display:flex; align-items:center; gap:1rem; }
.spotify-art { width:50px; height:50px; border-radius:8px; flex-shrink:0; background:rgba(29,185,84,0.15); display:flex; align-items:center; justify-content:center; }
.spotify-art i { font-size:1.3rem; color:#1DB954; }
.spotify-bars { display:flex; gap:2px; align-items:flex-end; height:14px; }
.spotify-bar { width:3px; background:#1DB954; border-radius:2px; animation:spBounce 0.8s ease-in-out infinite; }
.spotify-bar:nth-child(1){height:6px;animation-delay:0s} .spotify-bar:nth-child(2){height:10px;animation-delay:.15s} .spotify-bar:nth-child(3){height:4px;animation-delay:.3s} .spotify-bar:nth-child(4){height:12px;animation-delay:.1s}
@keyframes spBounce { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.3)} }

.htb-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; margin-top:0.5rem; }
.htb-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#9fef00,var(--accent)); transition:width 2s; }

.soron-bar-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.3rem; font-size:0.7rem; }
.soron-bar-label { width:60px; text-align:right; color:var(--text-dim); font-family:var(--mono); }
.soron-bar-track { flex:1; height:5px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.soron-bar-fill { height:100%; border-radius:3px; transition:width 2s; }

.twitter-embed { border:1px solid rgba(29,161,242,0.2); border-radius:var(--radius-sm); padding:1rem; background:rgba(29,161,242,0.05); min-height:100px; }

/* ─── WALL ─── */
.wall-compose {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; margin-bottom:1.5rem;
}
.wall-compose textarea {
  width:100%; background:transparent; border:none; color:var(--text);
  font-family:var(--font); font-size:0.95rem; resize:vertical;
  outline:none; min-height:60px;
}
.wall-compose-actions { display:flex; justify-content:flex-end; margin-top:0.5rem; }
.wall-feed { display:flex; flex-direction:column; gap:0.8rem; }
.wall-post {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.2rem;
  transition:all 0.3s; animation: wallPostIn 0.4s ease-out;
}
@keyframes wallPostIn { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} }
.wall-post:hover { border-color:var(--border-accent); }
.wall-post.pinned { border-color:rgba(0,200,120,0.3); box-shadow:0 0 15px rgba(0,200,120,0.1); }
.wall-post-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
.wall-post-author { font-weight:600; font-size:0.9rem; }
.wall-post-source {
  font-family:var(--mono); font-size:0.65rem; padding:0.15rem 0.5rem;
  border-radius:50px; background:rgba(0,212,255,0.1); color:var(--accent);
}
.wall-post-content { font-size:0.9rem; line-height:1.5; }
.wall-post-media { margin-top:0.8rem; border-radius:var(--radius-sm); overflow:hidden; max-height:300px; }
.wall-post-media img { width:100%; height:auto; object-fit:cover; }
.wall-post-time { font-family:var(--mono); font-size:0.7rem; color:var(--text-dim); margin-top:0.5rem; }
.wall-post-actions { display:flex; gap:0.5rem; margin-top:0.5rem; }
.wall-post-actions button {
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-dim); padding:0.3rem 0.6rem; font-size:0.7rem; cursor:pointer;
  transition:all 0.2s;
}
.wall-post-actions button:hover { border-color:var(--border-accent); color:var(--accent); }

/* ─── GALLERY ─── */
.gallery-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.gallery-filters { display:flex; gap:0.3rem; }
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:0.6rem;
}
.gallery-item {
  aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
  cursor:pointer; position:relative; background:var(--card);
  border:1px solid var(--border); transition:all 0.3s;
}
.gallery-item:hover { transform:scale(1.03); border-color:var(--border-accent); box-shadow:var(--glow); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item-overlay {
  position:absolute; inset:0; background:linear-gradient(transparent 50%, rgba(0,0,0,0.8));
  opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:0.8rem;
}
.gallery-item:hover .gallery-item-overlay { opacity:1; }
.gallery-item-caption { font-size:0.75rem; color:#fff; }
.gallery-item-source {
  position:absolute; top:0.5rem; right:0.5rem;
  font-family:var(--mono); font-size:0.6rem; padding:0.15rem 0.4rem;
  background:rgba(0,0,0,0.6); border-radius:4px; color:var(--accent);
}

/* ─── LINKS ─── */
.links-category { margin-bottom:2rem; }
.links-category-title {
  font-family:var(--mono); font-size:0.75rem; text-transform:uppercase;
  letter-spacing:0.15em; color:var(--text-dim); margin-bottom:0.8rem;
  padding-left:0.2rem;
}
.links-grid { display:grid; gap:0.5rem; }
.link-card {
  display:flex; align-items:center; gap:1rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:0.85rem 1.2rem;
  text-decoration:none; color:var(--text);
  transition:all 0.35s; position:relative; overflow:hidden;
}
.link-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
  transform:scaleX(0); transition:transform 0.35s;
}
.link-card:hover { background:var(--card-hover); border-color:var(--border-accent); transform:translateY(-2px); box-shadow:var(--glow); }
.link-card:hover::after { transform:scaleX(1); }
.link-icon {
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff; flex-shrink:0;
}
.link-name { font-weight:600; font-size:0.9rem; }
.link-handle { font-family:var(--mono); font-size:0.7rem; color:var(--text-dim); }
.link-arrow { margin-left:auto; color:var(--text-dim); transition:all 0.3s; }
.link-card:hover .link-arrow { transform:translateX(4px); color:var(--accent); }

/* ─── GAME ─── */
.game-container { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.game-toolbar { display:flex; align-items:center; justify-content:space-between; padding:0.8rem 1rem; background:rgba(0,0,0,0.3); flex-wrap:wrap; gap:0.5rem; }
.game-score { font-family:var(--display); font-size:1.2rem; font-weight:700; color:var(--accent); }
.game-weapon-select { display:flex; gap:0.3rem; }
.weapon-btn {
  padding:0.4rem 0.8rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-dim); font-size:0.75rem; cursor:pointer;
  font-family:var(--font); transition:all 0.2s;
}
.weapon-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(0,212,255,0.1); }
.weapon-btn:hover { border-color:var(--border-accent); }
#game-canvas { width:100%; background:#0a1a0a; cursor:crosshair; display:block; image-rendering:pixelated; }
.game-info { padding:0.5rem 1rem; font-size:0.7rem; color:var(--text-dim); font-family:var(--mono); text-align:center; }

/* ─── COMPANION ─── */
.companion {
  position:fixed; bottom:5rem; right:1.5rem; width:340px;
  background:var(--bg2); border:1px solid var(--border-accent);
  border-radius:var(--radius); box-shadow:var(--shadow), 0 0 40px rgba(0,212,255,0.15);
  z-index:60; animation: companionIn 0.4s ease-out;
  display:flex; flex-direction:column;
}
.companion.hidden { display:none; }
@keyframes companionIn { from{opacity:0;transform:translateY(20px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.companion-header {
  display:flex; align-items:center; gap:0.6rem; padding:0.8rem 1rem;
  background:linear-gradient(135deg,rgba(0,212,255,0.1),rgba(178,75,243,0.1));
  border-bottom:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0;
}
.companion-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.9rem;
}
.companion-name { font-weight:600; font-size:0.9rem; flex:1; }
.companion-close { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:1rem; }
.companion-messages { max-height:250px; overflow-y:auto; padding:0.8rem; display:flex; flex-direction:column; gap:0.5rem; }
.companion-msg {
  padding:0.6rem 0.8rem; border-radius:12px; font-size:0.85rem;
  max-width:85%; animation: msgIn 0.3s ease-out;
}
@keyframes msgIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.companion-msg.bot {
  background:rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.15);
  align-self:flex-start; border-bottom-left-radius:4px;
}
.companion-msg.user {
  background:rgba(178,75,243,0.15); border:1px solid rgba(178,75,243,0.2);
  align-self:flex-end; border-bottom-right-radius:4px;
}
.companion-input-row {
  display:flex; gap:0.4rem; padding:0.6rem; border-top:1px solid var(--border);
}
.companion-input-row input {
  flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0.5rem 0.8rem; color:var(--text);
  font-family:var(--font); font-size:0.85rem; outline:none;
}
.companion-input-row input:focus { border-color:var(--accent); }

/* ─── ADMIN ─── */
.admin-tabs { display:flex; gap:0.3rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.admin-tab {
  padding:0.5rem 1rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-dim); cursor:pointer;
  font-family:var(--font); font-size:0.8rem; transition:all 0.2s;
}
.admin-tab.active { border-color:var(--accent); color:var(--accent); background:rgba(0,212,255,0.1); }
.admin-content { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.admin-connector {
  display:flex; align-items:center; gap:1rem; padding:0.8rem;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:0.5rem; transition:all 0.3s;
}
.admin-connector:hover { border-color:var(--border-accent); }
.admin-connector-toggle {
  width:44px; height:24px; border-radius:12px; background:rgba(255,255,255,0.1);
  cursor:pointer; position:relative; transition:all 0.3s; border:none;
}
.admin-connector-toggle.on { background:rgba(0,200,120,0.3); }
.admin-connector-toggle::after {
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform 0.3s;
}
.admin-connector-toggle.on::after { transform:translateX(20px); }
.admin-connector-icon { font-size:1.2rem; width:30px; text-align:center; }
.admin-connector-name { font-weight:600; flex:1; }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.6rem 1.2rem; border:none; border-radius:var(--radius-sm);
  font-family:var(--font); font-weight:600; cursor:pointer;
  transition:all 0.3s; font-size:0.85rem;
}
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--purple)); color:#fff; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,212,255,0.3); }
.btn-sm { padding:0.4rem 0.8rem; font-size:0.75rem; }
.upload-btn { cursor:pointer; }

/* ─── FOOTER ─── */
.site-footer {
  position:relative; z-index:1; text-align:center;
  padding:2rem 1rem; font-size:0.75rem; color:var(--text-dim);
  border-top:1px solid var(--border);
}
.site-footer a { color:var(--accent); text-decoration:none; }
.footer-live { margin-top:0.3rem; display:flex; align-items:center; justify-content:center; gap:0.4rem; }

/* ─── RESPONSIVE ─── */
@media (max-width:768px) {
  .nav-links { display:none; }
  .home-stats { grid-template-columns:1fr 1fr; }
  .companion { width:calc(100% - 2rem); right:1rem; bottom:4rem; }
  .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .game-weapon-select { flex-wrap:wrap; }
}
@media (max-width:480px) {
  .home-name { font-size:1.5rem; }
  .widgets-grid { grid-template-columns:1fr; }
}