/* MasterSnakou — starter */
:root{
  --bg0:#020205;
  --bg1:#05060a;
  --fg:#e9eef7;
  --muted:#aeb6c6;
  --accent:#00d4ff;
  --accent2:#6affd6;
  --shadow: rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 50% 40%, #0b101a 0%, var(--bg1) 45%, var(--bg0) 100%);
  color:var(--fg);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Canvas background */
#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}

/* Centered content */
.center{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  gap:14px;
  text-align:center;
  pointer-events:none;
}

.logo-wrap{
  position:relative;
  width:min(44vmin, 280px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  transform: translateZ(0);
}

.logo{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  filter:
    drop-shadow(0 14px 30px var(--shadow))
    drop-shadow(0 0 22px rgba(0,212,255,.28));
  transform: translateY(-2px);
}

.halo{
  position:absolute;
  inset:-18%;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,212,255,.18) 0%,
      rgba(106,255,214,.10) 28%,
      rgba(0,0,0,0) 62%);
  filter: blur(10px);
  opacity:.9;
  animation: breathe 3.6s ease-in-out infinite;
  z-index:-1;
}

@keyframes breathe{
  0%,100%{ transform: scale(.98); opacity:.72;}
  50%{ transform: scale(1.03); opacity:1;}
}

.tagline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  letter-spacing:.5px;
  font-weight:600;
  font-size: clamp(14px, 2.2vmin, 18px);
  color: var(--muted);
  text-shadow: 0 10px 26px var(--shadow);
  user-select:none;
}

.tagline .name{
  color: var(--fg);
}

.tagline .dot{
  opacity:.55;
}


  body{ overflow:auto; }
  .halo{ animation:none; }
}


/* =========================
   SOCIAL ICONS + CTA
========================= */
.socials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:16px;
  pointer-events:auto;
}

.socials .social{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  --hover: var(--accent);
}

.socials .social svg{
  width:22px;
  height:22px;
  fill: var(--accent);
  transition: fill .22s ease;
}

.socials .social[data-platform="twitch"]{ --hover:#9146FF; }
.socials .social[data-platform="x"]{ --hover:#ffffff; }
.socials .social[data-platform="youtube"]{ --hover:#FF0000; }
.socials .social[data-platform="youtube-vod"]{ --hover:#FF0000; }
.socials .social[data-platform="instagram"]{ --hover:#E1306C; }
.socials .social[data-platform="discord"]{ --hover:#5865F2; }

.socials .social:hover{
  transform: translateY(-3px) scale(1.04);
  background: color-mix(in srgb, var(--hover) 18%, rgba(255,255,255,0.04));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--hover) 42%, rgba(0,0,0,.35));
}

.socials .social:hover svg{
  fill: var(--hover);
}

/* CTA buttons (extension + mobile apps) */
.cta{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px; /* now above text */
  pointer-events:auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  color: var(--fg);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  min-height:44px;
  will-change: transform;
}

.btn .btn-ic{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
}

.btn svg{
  width:22px;
  height:22px;
  fill: var(--accent);
  transition: fill .22s ease;
}

.btn:hover{
  transform: translateY(-3px);
  background: rgba(0,232,240,0.10);
  box-shadow: 0 16px 38px rgba(0,232,240,.28);
}

.btn[data-btn="chrome"]:hover{
  background: rgba(66,133,244,0.12);
  box-shadow: 0 16px 38px rgba(66,133,244,.32);
}
.btn[data-btn="chrome"]:hover svg{ fill:#4285F4; }

.btn[data-btn="android"]:hover{
  background: rgba(61,220,132,0.12);
  box-shadow: 0 16px 38px rgba(61,220,132,.32);
}
.btn[data-btn="android"]:hover svg{ fill:#3DDC84; }

.btn[data-btn="apple"]:hover{
  background: rgba(255,255,255,0.10);
  box-shadow: 0 16px 38px rgba(255,255,255,.20);
}
.btn[data-btn="apple"]:hover svg{ fill:#fff; }

/* Mobile ultra-optimisée */
@media (max-width: 520px){
  .logo-wrap{ width:min(62vmin, 240px); }
  .tagline{
    max-width: 92vw;
    line-height: 1.35;
    padding: 0 14px;
    font-size: 14px;
  }

  .cta{
    width: 92vw;
    gap:10px;
    margin-top:12px;
  }
  .btn{
    width: 100%;
    justify-content:center;
    padding: 12px 14px;
  }

  .socials{
    gap:12px;
    margin-top:14px;
  }
  .socials .social{
    width:44px;
    height:44px;
  }
}

/* Touch devices: avoid sticky hover */
@media (hover: none){
  .socials .social:hover{ transform:none; }
  .btn:hover{ transform:none; }
}



/* =========================
   FOOTER
========================= */
.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  z-index: 10;
}

.site-footer p{
  margin: 0;
  padding: 8px 14px;
  font-size: 12px;
  color: rgba(233,238,247,.75);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  text-align: center;
}

.site-footer a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.site-footer a:hover{
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 520px){
  .site-footer{
    bottom: 6px;
  }
  .site-footer p{
    font-size: 11px;
    padding: 6px 12px;
  }
}


/* =========================
   STATS (Counters)
========================= */
.stats{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 10px;
  pointer-events:auto;
}

.stat{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,0.045);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  min-width: 210px;
}

.stat-ic{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,0.28);
}

.stat-ic svg{
  width:20px;
  height:20px;
  fill: var(--accent);
}

.stat[data-stat="twitch"] .stat-ic svg{ fill:#9146FF; }
.stat[data-stat="youtube"] .stat-ic svg{ fill:#FF0000; }
.stat[data-stat="discord"] .stat-ic svg{ fill:#5865F2; }

.stat-label{
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  color: rgba(233,238,247,.9);
}

.stat-value{
  font-size:12px;
  color: rgba(233,238,247,.75);
}

.stat-value span{
  font-size:14px;
  font-weight:900;
  color: rgba(233,238,247,.98);
}

/* Extensions chooser */
.ext{
  position:relative;
}

.ext summary{
  list-style:none;
  cursor:pointer;
}
.ext summary::-webkit-details-marker{ display:none; }

.ext .chev{
  margin-left: 2px;
  opacity:.75;
  font-weight: 900;
}

.ext[open] .chev{ opacity:1; }

.ext-menu{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 10px);
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:16px;
  background: rgba(10, 12, 18, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  z-index: 30;
  min-width: 210px;
}

.ext-menu a{
  display:flex;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color: rgba(233,238,247,.92);
  background: rgba(255,255,255,0.05);
  transition: background .2s ease, transform .2s ease;
}

.ext-menu a:hover{
  background: rgba(0,232,240,0.12);
  transform: translateY(-1px);
}

@media (max-width: 520px){
  .stats{
    width:92vw;
    gap:10px;
    margin-top: 8px;
  }
  .stat{
    width:100%;
    min-width: 0;
    justify-content:flex-start;
  }
  .ext-menu{
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 360px);
  }
}


/* =========================
   STATS LAYOUT (Icon left + text centered)
========================= */
.stats .stat{
  justify-content:flex-start;
}

.stats .stat-meta{
  flex:1;
  text-align:center;
}

.stats .stat-label,
.stats .stat-value{
  width:100%;
  text-align:center;
}



.stats{
  position: relative;
  z-index: 3;
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 12px;
}
.stat{
  display:flex;
  align-items:center;
  background: rgba(0,0,0,0.35);
  padding: 12px 16px;
  border-radius: 16px;
}
.stat-meta{
  text-align:center;
}


/* =========================
   HARD FIX: STATS ICONS + SOCIALS
   (kept at end to override duplicates)
========================= */

/* Ensure stats icon SVGs render */
.stats .stat-ic{
  display:grid;
  place-items:center;
}
.stats .stat-ic svg{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Socials should be a horizontal row and clickable */
.socials{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  pointer-events:auto !important;
  margin-top:16px !important;
}

.socials .social{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:14px !important;
  pointer-events:auto !important;
}

.socials .social svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  opacity:1 !important;
}

/* If some earlier rule forces a column stack, cancel it */
.socials, .socials *{
  writing-mode: horizontal-tb;
}

/* Fix any accidental opacity/transform hiding */
.socials .social{
  opacity:1 !important;
  transform:none;
}

/* Keep the original per-network hover colors if present; add discord if missing */
.socials .social[data-platform="discord"]{ --hover:#5865F2; }


/* =========================
   FIX: COUNTER ICONS VISIBILITY
========================= */
.stats .stat-ic,
.stats .stat-ic *{
  opacity: 1 !important;
  visibility: visible !important;
}

.stats .stat-ic svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
}

.stats .stat-ic svg path{
  fill: currentColor;
}

.stat[data-stat="twitch"] .stat-ic{ color:#9146FF; }
.stat[data-stat="youtube-main"] .stat-ic,
.stat[data-stat="youtube-vod"] .stat-ic{ color:#FF0000; }
.stat[data-stat="discord"] .stat-ic{ color:#5865F2; }


/* =========================
   FIX ICONS: FORCE SVG FILL
========================= */
.stats .stat-ic{
  display:grid !important;
  place-items:center !important;
}

.stats .stat-ic svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  fill: currentColor !important;
}

.stats .stat-ic svg *{
  fill: currentColor !important;
  opacity:1 !important;
  visibility:visible !important;
}

.stat[data-stat="twitch"] .stat-ic{ color:#9146FF !important; }
.stat[data-stat="youtube-main"] .stat-ic,
.stat[data-stat="youtube-vod"] .stat-ic{ color:#FF0000 !important; }
.stat[data-stat="discord"] .stat-ic{ color:#5865F2 !important; }


/* =========================
   FIX: STATS ICONS ALWAYS VISIBLE
========================= */
.stats .stat-ic{
  color: var(--accent);
  background: rgba(255,255,255,0.05);
  overflow: visible !important;
}

.stats .stat-ic svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  fill: currentColor !important;
  filter:none !important;
}

.stats .stat-ic svg path,
.stats .stat-ic svg circle,
.stats .stat-ic svg rect{
  fill: currentColor !important;
  opacity:1 !important;
  visibility:visible !important;
}

.stat[data-stat="twitch"] .stat-ic{ color:#9146FF !important; }
.stat[data-stat="youtube-main"] .stat-ic,
.stat[data-stat="youtube-vod"] .stat-ic{ color:#FF0000 !important; }
.stat[data-stat="discord"] .stat-ic{ color:#5865F2 !important; }


/* =========================
   FIX: COUNTER ICONS (SVG)
========================= */
.stats .stat-ic svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
.stats .stat-ic svg *{
  fill: currentColor !important;
  opacity:1 !important;
  visibility:visible !important;
}
.stat[data-stat="twitch"] .stat-ic{ color:#9146FF !important; }
.stat[data-stat="youtube-main"] .stat-ic,
.stat[data-stat="youtube-vod"] .stat-ic{ color:#FF0000 !important; }
.stat[data-stat="discord"] .stat-ic{ color:#5865F2 !important; }