:root {
      --bg:      #f0f2f8;
      --bg2:     #e8eaf4;
      --surface: #ffffff;
      --border:  rgba(0,0,0,0.07);
      --text:    #0f1117;
      --sub:     #6b7280;
      --muted:   #9ca3af;
      --online:  #16a34a;
      --offline: #dc2626;
      --discord: #5865F2;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Outfit', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      min-height: 100dvh; /* Safari iOS : viewport dynamique */
      /* overflow-x géré par .blobs (position:fixed, overflow:hidden) */
    }

    /* ── BLOBS ── */
    .blobs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.2; animation:blobmove 22s ease-in-out infinite alternate; }
    .b1 { width:700px;height:700px;background:radial-gradient(#c7d2fe,#a5b4fc);top:-220px;left:-180px;animation-delay:0s; }
    .b2 { width:550px;height:550px;background:radial-gradient(#bfdbfe,#7dd3fc);bottom:-160px;right:-120px;animation-delay:-9s; }
    .b3 { width:420px;height:420px;background:radial-gradient(#d9f99d,#86efac);top:35%;left:52%;animation-delay:-16s; }
    @keyframes blobmove { from{transform:translate(0,0) scale(1)} to{transform:translate(35px,28px) scale(1.07)} }

    /* ── WRAPPER ── */
    .wrap {
      position:relative; z-index:2; max-width:1160px; margin:0 auto;
      padding: 0 28px 0; /* le footer gère lui-même le padding bas */
    }

    /* ── HEADER ── */
    /* padding-top dynamique : pousse le logo sous le Dynamic Island / barre Liquid Glass haute */
    header { padding: max(32px, env(safe-area-inset-top, 0px)) 0 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
    .eyebrow {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.22);
      border-radius:999px; padding:5px 14px;
      font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
      color:#6366f1; margin-bottom:14px;
    }
    .edot { width:6px;height:6px;border-radius:50%;background:#6366f1;animation:blink 2s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }
    h1 { font-size:clamp(32px,5vw,52px); font-weight:900; letter-spacing:-0.035em; line-height:1.05; color:#ffffff; }
    h1 span { background:linear-gradient(120deg,#6366f1 0%,#8b5cf6 45%,#06b6d4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .sub-head { margin-top:10px; font-size:16px; color:#ffffff; font-weight:500; line-height:1.6; max-width:400px; }

    /* ── DISCORD BTN ── */
    .discord-btn {
      display:inline-flex; align-items:center; gap:10px;
      background:var(--discord); color:#fff; text-decoration:none;
      padding:14px 26px; border-radius:14px;
      font-family:'Outfit',sans-serif; font-size:15px; font-weight:700;
      box-shadow:0 4px 22px rgba(88,101,242,.36);
      transition:all .25s cubic-bezier(.4,0,.2,1); white-space:nowrap; flex-shrink:0;
      flex:1; justify-content:center;
    }
    .discord-btn:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(88,101,242,.46); background:#4f5de8; }

    /* ── PILLS ── */
    .pills { display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap; align-items:stretch; width:100%; }
    .pill { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.18); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.25); border-radius:14px; padding:12px 18px; box-shadow:0 1px 5px rgba(0,0,0,.08); animation:fadeUp .5s ease both; transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease; }

    .pill-icon { width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0; }
    .pill-val { font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1;color:rgba(15,17,28,0.9); }
    .pill-lbl { font-size:10.5px;font-weight:700;color:rgba(30,32,48,0.75);text-transform:uppercase;letter-spacing:.09em; }

    /* ── SECTION ROW ── */
    .sec-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
    .sec-lbl { font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0f1117; }
    .live-badge { display:flex;align-items:center;gap:6px; font-size:12px;font-weight:600;color:#0f1117; }
    .live-dot { width:7px;height:7px;border-radius:50%;background:var(--online);animation:pulseg 2s ease-in-out infinite; }
    @keyframes pulseg { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)} }

    /* ── GRID ── */
    .glass-zone {
      background: rgba(240,242,248,0.22);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 22px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    }
    /* ── GRID : subgrid pour aligner ip-row et link-pills ── */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: subgrid;
      gap: 18px;
    }

    @media(max-width:1100px) { .grid { grid-template-columns: repeat(2,1fr); } }
    @media(max-width:700px)  { .grid { grid-template-columns: 1fr; } }

    /* ── CARD ── */
    .card {
      --ac: #6366f1;
      position: relative;
      background: rgba(15,17,28,0.4);
      border: 2px solid var(--ac);
      border-radius: 22px;
      padding: 26px;
      cursor: default; color: inherit;
      grid-row: span 5;
      display: grid;
      grid-template-rows: subgrid;
      box-shadow: 0 2px 14px rgba(0,0,0,.06);
      transition: all .3s cubic-bezier(.4,0,.2,1);
      overflow: hidden;
      animation: fadeUp .5s ease both;
    }

    /* Game background image */
    .card-bg {
      position:absolute; inset:0; border-radius:22px;
      background-size:cover; background-position:center;
      opacity:1;
      transition:opacity .4s ease;
      z-index:0;
    }
    .card:hover .card-bg { opacity:1; }

    /* Gradient overlay over image */
    .card-bg-fade {
      position:absolute; inset:0; border-radius:22px;
      background:linear-gradient(180deg,
        rgba(10,12,20,0.55) 0%,
        rgba(10,12,20,0.35) 35%,
        rgba(10,12,20,0.65) 70%,
        rgba(10,12,20,0.88) 100%
      );
      z-index:1;
      transition:all .4s;
    }
    .card:hover .card-bg-fade {
      background:linear-gradient(180deg,
        rgba(10,12,20,0.45) 0%,
        rgba(10,12,20,0.25) 35%,
        rgba(10,12,20,0.6) 70%,
        rgba(10,12,20,0.85) 100%
      );
    }

    /* Inner glow on hover */
    .card::before {
      content:''; position:absolute; inset:0; border-radius:22px;
      background:radial-gradient(ellipse at top left, var(--ac), transparent 60%);
      opacity:0; transition:opacity .4s; z-index:2;
    }
    .card:hover { transform:translateY(-5px) scale(1.005); box-shadow:0 22px 55px rgba(0,0,0,.5), 0 0 20px 0px var(--ac); }
    .card:hover::before { opacity:.06; }

    /* All card content sits above bg */
    .c-head, .csep, .stats-row, .ip-zone, .link-pills { position:relative; z-index:3; }
    .p-row, .bar-wrap, .ip-row { position:relative; z-index:3; }
    .stats-row { display:flex; flex-direction:column; justify-content:flex-end; }
    .ip-zone { display:flex; flex-direction:column; justify-content:flex-end; width:100%; }

    .stripe { display:none; }

    /* card head */
    .c-head { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;position:relative;z-index:3; }
    .g-meta { display:flex;align-items:center;gap:14px; }
    .g-icon { width:54px;height:54px; border-radius:16px; display:flex;align-items:center;justify-content:center;font-size:27px; position:relative; flex-shrink:0; }
    .g-icon-bg { position:absolute;inset:0;border-radius:16px;background:var(--ac);opacity:.25;transition:opacity .3s; }
    .card:hover .g-icon-bg { opacity:.4; }
    .g-name { font-size:26px;font-weight:900;letter-spacing:-.03em;color:#fff;line-height:1.1; text-shadow:0 2px 8px rgba(0,0,0,0.6); }
    .g-type { font-size:13px;color:#fff;font-weight:500;margin-top:5px; }

    /* badge */
    .sbadge { display:inline-flex;align-items:center;gap:6px;padding:5px 11px; border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; flex-shrink:0;transition:all .3s; }
    .sbadge.online  { background:rgba(22,163,74,0.25); color:#4ade80; border:1px solid rgba(74,222,128,0.3); }
    .sbadge.offline { background:rgba(220,38,38,0.25); color:#f87171; border:1px solid rgba(248,113,113,0.3); }
    .sbadge.loading { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.1); }
    .sdot { width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0; }
    .sbadge.online .sdot { animation:pulseg 1.8s ease-in-out infinite; }

    /* sep */
    .csep { height:1px;background:rgba(255,255,255,0.45);margin-bottom:18px;position:relative;z-index:3; }

    /* players */
    .p-row { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px;position:relative;z-index:3; }
    .p-lbl { font-size:10.5px;font-weight:700;color:#fff;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px; }
    .p-count { font-family:'DM Mono',monospace;font-size:30px;font-weight:500; color:#fff;line-height:1;letter-spacing:-.02em; }
    .p-count .sl { color:#fff;font-size:22px;margin:0 4px; }
    .p-count .mx { color:#fff;font-size:20px; }
    .p-pct { font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,0.28);padding:4px 10px;border-radius:8px;backdrop-filter:blur(4px); }

    /* bar */
    .bar-wrap { height:6px;background:rgba(255,255,255,0.35);border-radius:6px;overflow:hidden;margin-bottom:18px;position:relative;z-index:3; }
    .bar-fill { height:100%;border-radius:6px;background:var(--ac); transition:width .9s cubic-bezier(.4,0,.2,1); position:relative;overflow:hidden; }
    .bar-fill::after { content:'';position:absolute;top:0;left:-100%;width:100%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:shimbar 2.5s ease-in-out infinite; }
    @keyframes shimbar { 0%{left:-100%}60%{left:100%}100%{left:100%} }

    /* ip row */
    .ip-row { display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:10px 14px;position:relative;z-index:3;backdrop-filter:blur(6px); }
    .ip-txt { font-family:'DM Mono',monospace;font-size:12.5px;color:#fff;letter-spacing:.02em; }

    /* ── PILLS DE LIENS empilées ── */
    .link-pills {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-top: 10px;
      align-self: start;
    }
    .link-pill {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      backdrop-filter: blur(6px);
      text-decoration: none;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      transition: all .22s cubic-bezier(.4,0,.2,1);
      position: relative;
    }
    .link-pill span { flex: 1; }
    .link-pill svg { flex-shrink: 0; opacity: .65; transition: opacity .2s; }
    .link-pill:hover {
      background: rgba(0,0,0,0.55);
      border-color: var(--ac);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 4px 18px rgba(0,0,0,0.3), 0 0 14px 0px var(--ac);
    }
    .link-pill:hover svg { opacity: 1; }
    /* ── TOOLTIP link-pill ── */
    .link-pill::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px); left: 50%;
      transform: translateX(-50%) scale(0.9);
      background: rgba(15,17,28,0.92);
      border: 1px solid rgba(255,255,255,0.25);
      color: #fff; font-family: 'Outfit', sans-serif;
      font-size: 11px; font-weight: 600;
      padding: 5px 10px; border-radius: 7px;
      white-space: nowrap; pointer-events: none;
      opacity: 0; transition: all .18s ease; z-index: 200;
    }
    .link-pill::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 3px); left: 50%;
      transform: translateX(-50%) scale(0.9);
      border: 5px solid transparent;
      border-top-color: rgba(15,17,28,0.92);
      pointer-events: none; opacity: 0;
      transition: all .18s ease; z-index: 200;
    }
    .link-pill:hover::after,
    .link-pill:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }



    /* ── DEV BADGE ── */
    .dev-badge {
      position:absolute; top:14px; left:50%; transform:translateX(-50%);
      background:linear-gradient(135deg,#f59e0b,#ef4444);
      color:#fff; font-size:11px; font-weight:800;
      padding:5px 14px; border-radius:999px;
      letter-spacing:0.06em; text-transform:uppercase;
      box-shadow:0 3px 12px rgba(239,68,68,0.35);
      white-space:nowrap; z-index:10;
      animation:devpulse 2.5s ease-in-out infinite;
    }
    @keyframes devpulse {
      0%,100% { box-shadow:0 3px 12px rgba(239,68,68,0.35); }
      50%      { box-shadow:0 3px 20px rgba(239,68,68,0.6); }
    }

    /* ── FOOTER ── */
    /* padding-bottom = espace music-player + env(safe-area-inset-bottom)
       Le footer descend DANS la zone Liquid Glass (comme le working site).
       Le verre iOS composite le contenu visible à ces coordonnées. */
    footer { margin-top:70px;padding-top:26px;padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; }
    footer span { font-size:13px;color:var(--muted); }

    /* ── TOAST ── */
    .toast { position:fixed;bottom:28px;left:50%; transform:translateX(-50%) translateY(16px); background:var(--text);color:#fff; padding:11px 22px;border-radius:12px; font-size:13.5px;font-weight:600; opacity:0;pointer-events:none;z-index:999; transition:all .3s cubic-bezier(.4,0,.2,1); box-shadow:0 8px 32px rgba(0,0,0,.2);white-space:nowrap; }
    .toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

    /* ── TOPBAR ── */
    #topbar { position:fixed;top:0;left:0;height:3px;z-index:9999; background:linear-gradient(90deg,#6366f1,#8b5cf6,#06b6d4); width:0%;opacity:0;border-radius:0 3px 3px 0; transition:width 3s linear,opacity .3s; }

    /* ── ANIM ── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
    .skel { display:inline-block;border-radius:6px; background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%); background-size:200% 100%;animation:skm 1.4s infinite; }
    @keyframes skm { 0%{background-position:200% 0}100%{background-position:-200% 0} }


    /* ── UPTIME KUMA SECTION ── */
    .kuma-section {
      margin-top: 0;
    }
    .kuma-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px;
    }
    .kuma-title {
      font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
      text-transform: uppercase; color: #0f1117;
    }
    .kuma-link {
      font-size: 14px; font-weight: 700; color: #3730a3;
      text-decoration: none; display: flex; align-items: center; gap: 5px;
      transition: color .2s;
    }
    .kuma-link:hover { color: #1e1b8e; }

    .kuma-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
    }

    .kuma-card {
      background: rgba(255,255,255,0.18);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 16px;
      padding: 16px 20px;
      display: flex; flex-direction: column; gap: 10px;
      box-shadow: 0 1px 6px rgba(0,0,0,.05);
      animation: fadeUp .5s ease both;
      transition: box-shadow .25s;
    }
    .kuma-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }

    .kuma-card-top {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .kuma-card-name {
      font-size: 14px; font-weight: 700; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .kuma-status {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 999px;
      font-size: 11px; font-weight: 700; letter-spacing: .04em;
      text-transform: uppercase; flex-shrink: 0;
    }
    .kuma-status.up      { background: #dcfce7; color: #15803d; }
    .kuma-status.down    { background: #fee2e2; color: #b91c1c; }
    .kuma-status.pending { background: #fef9c3; color: #a16207; }
    .kuma-status.maintenance { background: #ede9fe; color: #6d28d9; }
    .kuma-status.unknown { background: #f3f4f6; color: #6b7280; }

    .kuma-sdot {
      width: 6px; height: 6px; border-radius: 50%;
      background: currentColor; flex-shrink: 0;
    }
    .kuma-status.up .kuma-sdot { animation: pulseg 1.8s ease-in-out infinite; }

    /* Barre d'uptime 24h */
    .kuma-bar {
      display: flex; gap: 2px; height: 28px; align-items: stretch;
    }
    .kuma-bar-seg {
      flex: 1; border-radius: 3px;
      background: #e5e7eb;
      transition: transform .15s;
      cursor: default;
    }
    .kuma-bar-seg.up          { background: #22c55e; }
    .kuma-bar-seg.down        { background: #ef4444; }
    .kuma-bar-seg.maintenance { background: #a78bfa; }
    .kuma-bar-seg.pending     { background: #facc15; }
    .kuma-bar-seg:hover       { transform: scaleY(1.15); }

    .kuma-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 11px; color: rgba(15,17,28,0.65); font-weight: 600;
    }

    /* Maintenance banner */
    .kuma-maintenance {
      background: linear-gradient(135deg, rgba(109,40,217,.1), rgba(99,102,241,.08));
      border: 1px solid rgba(109,40,217,.2);
      border-radius: 14px; padding: 14px 18px;
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 14px; animation: fadeUp .5s ease both;
    }
    .kuma-maintenance-icon {
      font-size: 20px; flex-shrink: 0;
    }
    .kuma-maintenance-title {
      font-size: 13px; font-weight: 700; color: #6d28d9;
    }
    .kuma-maintenance-time {
      font-size: 11.5px; color: rgba(15,17,28,0.6); margin-top: 2px;
    }

    .kuma-loading {
      text-align: center; padding: 32px;
      color: rgba(15,17,28,0.6); font-size: 13px;
    }
    .kuma-error {
      text-align: center; padding: 20px;
      color: #ef4444; font-size: 13px; background: #fee2e2;
      border-radius: 12px;
    }
    @media(max-width:640px){ header{flex-direction:column;align-items:flex-start;} .grid{grid-template-columns:1fr;} }
/* ── PARTICULES FIREFLY — derrière tout le contenu ── */
.jqueryFireFly {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ── BACKGROUND IMAGE ── */
/* ── PARTICULES FIREFLY — derrière tout le contenu ── */
.jqueryFireFly {
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Override du z-index inline de particles.js : doit être au-dessus du video wrap (0) */
#particles-canvas {
  z-index: 1 !important;
}

/* ── VIDEO BACKGROUND ─────────────────────────────────────────────────
   iOS 26 Safari : position:fixed bloque le compositing Liquid Glass.
   Solution : position:sticky + margin-bottom négatif → même effet visuel
   (vidéo reste en fond pendant le scroll) sans bloquer le verre.
   html{background:#f2f2f7} → Safari lit cette couleur claire pour teinter
   le Liquid Glass (couleur claire = verre frosted transparent).            */
html {
  background: #f2f2f7;
}
body {
  background: transparent !important;
}
.blobs { display: none; }

#bg-video-wrap {
  /* Même principe que a.html (qui fonctionne) :
     La vidéo ne couvre PAS les zones verre iOS (haut/bas).
     Ces zones voient html{background:#f2f2f7} = clair = verre transparent.
     safe-area-inset-top    = Dynamic Island
     safe-area-inset-bottom = barre Liquid Glass bas               */
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 0;
  pointer-events: none;
}

#bg-video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Centrage légèrement vers le haut pour que la partie
     colorée de la vidéo soit visible sous le Liquid Glass */
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

/* Overlay supprimé — il assombrissait la vidéo et rendait
   le Liquid Glass quasi-noir. Le contraste est géré par le
   fond sombre des cartes de contenu. */
#bg-video-overlay {
  display: none;
}

/* ── LOGO ── */
.logo-wrap {
  position: relative;
  z-index: 100;        /* au-dessus du contenu pour que le tooltip passe */
  flex-shrink: 0;
  cursor: pointer;
  overflow: visible;   /* jamais clipper le tooltip */
}
.site-logo {
  display: block;
  width: 120px;
  animation: logopulse 5s ease-in-out infinite;
  filter: drop-shadow(0 4px 28px rgba(99,102,241,0.45));
}

/* ── LOGO EASTER EGG — tooltip discret ── */
.egg-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  /* style volontairement sobre pour rester caché */
  background: rgba(10,11,20,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 9999;
}
.egg-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(10,11,20,0.78);
}
.logo-wrap:hover .egg-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.egg-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: .04em;
}
.egg-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px; font-weight: 700;
  color: rgba(180,185,255,0.75);
  letter-spacing: .02em;
}
@keyframes egg-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  65%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.egg-count.pop { animation: egg-pop .28s cubic-bezier(.4,0,.2,1); }
@keyframes logopulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ── GLASS ZONE ── */
.glass-zone {
  background: rgba(240,242,248,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

/* ── MENU BUTTON — visible uniquement en Zen Mode ── */
#menu-btn {
  position: fixed;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  display: none;           /* caché par défaut */
  align-items: center; gap: 10px;
  /* background transparent : Safari lit les éléments position:fixed pour teinter
     le Liquid Glass — un fond sombre rendrait la barre opaque/noire.
     Le fond visuel est sur ::before (que Safari ignore). */
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  z-index: 9999;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  user-select: none;
}
#menu-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(15,17,28,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: -1;
  pointer-events: none;
  transition: background .25s ease;
}
#menu-btn:hover {
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
#menu-btn:hover::before {
  background: rgba(15,17,28,0.75);
}
#menu-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
  pointer-events: none;
}
/* affiché + style violet en Zen Mode */
body.zen-mode #menu-btn {
  display: flex;
  border-color: rgba(99,102,241,0.6);
}
body.zen-mode #menu-btn::before {
  background: rgba(99,102,241,0.25);
}
body.zen-mode #menu-label { color: #c7d2fe; }

/* ── MUSIC PLAYER ── */
#music-player {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 10px;
  /* background transparent : Safari lit les position:fixed pour teinter le Liquid Glass.
     Fond sombre → barre verre opaque noire. Le fond visuel est sur ::before. */
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  z-index: 9999;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  user-select: none;
}
#music-player::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(15,17,28,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: -1;
  pointer-events: none;
  transition: background .25s ease;
}
#music-player:hover {
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
#music-player:hover::before {
  background: rgba(15,17,28,0.75);
}
#music-btn { display:none; }
#music-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em;
  pointer-events: none;
}
#music-player.playing { border-color: rgba(99,102,241,0.6); }
#music-player.playing::before { background: rgba(99,102,241,0.25); }
#music-player.playing #music-label { color: #c7d2fe; }
#music-player.playing #music-icon-on {
  animation: swing-note 1.2s ease-in-out infinite alternate;
  transform-origin: 65% 15%;
}
@keyframes swing-note {
  0%   { transform: rotate(-12deg); }
  100% { transform: rotate(12deg); }
}

/* ── EYEBROW VERT ── */
.eyebrow-green {
  background: rgba(22,163,74,0.12) !important;
  border-color: rgba(22,163,74,0.3) !important;
  color: rgba(15,17,28,0.45) !important;
}
.edot-green { background: #16a34a !important; }

/* ── TOPBAR RAPIDE ── */
#topbar { transition: width 1.5s ease, opacity 0.3s !important; }

/* ── DEV BADGE ── */
.dev-badge {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff; font-size:11px; font-weight:800;
  padding:5px 14px; border-radius:999px;
  letter-spacing:0.06em; text-transform:uppercase;
  box-shadow:0 3px 12px rgba(239,68,68,0.35);
  white-space:nowrap; z-index:10;
  animation:devpulse 2.5s ease-in-out infinite;
}
@keyframes devpulse {
  0%,100% { box-shadow:0 3px 12px rgba(239,68,68,0.35); }
  50%      { box-shadow:0 3px 20px rgba(239,68,68,0.6); }
}

/* ── STEAM BTN ── */
.steam-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: rgba(23,33,57,0.85);
  border: 1px solid rgba(103,193,245,0.4);
  border-radius: 8px;
  color: #67c1f5;
  text-decoration: none;
  padding: 0;
  flex-shrink: 0;
  transition: all .2s ease;
}
.steam-icon-btn:hover {
  background: rgba(103,193,245,0.25);
  border-color: rgba(103,193,245,0.8);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 2px 12px rgba(103,193,245,0.35);
}
.steam-icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: rgba(23,33,57,0.95);
  border: 1px solid rgba(103,193,245,0.4);
  color: #67c1f5; font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 7px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: all .18s ease; z-index: 200;
}
.steam-icon-btn::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%) scale(0.9);
  border: 5px solid transparent;
  border-top-color: rgba(23,33,57,0.95);
  pointer-events: none; opacity: 0;
  transition: all .18s ease; z-index: 200;
}
.steam-icon-btn:hover::after,
.steam-icon-btn:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }

/* ── COPY BTN ── */
.copy-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all .2s ease;
}
.copy-icon-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  transform: scale(1.1);
}
.copy-icon-btn.copied {
  background: rgba(22,163,74,0.35);
  border-color: rgba(74,222,128,0.6);
  color: #4ade80;
}
.copy-icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: rgba(15,17,28,0.92);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 7px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: all .18s ease; z-index: 200;
}
.copy-icon-btn::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%) scale(0.9);
  border: 5px solid transparent;
  border-top-color: rgba(15,17,28,0.92);
  pointer-events: none; opacity: 0;
  transition: all .18s ease; z-index: 200;
}
.copy-icon-btn:hover::after,
.copy-icon-btn:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }

/* ── DISCORD PILL ── */
.discord-pill {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(88,101,242,0.75);
  border: 1px solid rgba(88,101,242,0.9);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(88,101,242,0.35);
  animation: fadeUp .5s ease both;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}
.discord-pill:hover {
  background: rgba(88,101,242,0.92);
  border-color: #5865F2;
  transform: scale(1.03) !important;
  box-shadow: 0 6px 22px rgba(88,101,242,0.55);
}
.discord-pill svg { color: #fff; flex-shrink: 0; }
.discord-pill .pill-val { color: #fff; font-size: 15px; }
.discord-pill .pill-lbl { color: rgba(255,255,255,0.8); }
.discord-pill::after {
  content: '';
  position: absolute;
  top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,215,0,0.07) 30%, rgba(255,215,0,0.32) 50%, rgba(255,215,0,0.07) 70%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.discord-pill:hover::after {
  animation: shimmer-gold .55s linear infinite;
}
@keyframes shimmer-gold {
  0%   { left: -120%; }
  100% { left: 160%; }
}



@media(max-width:640px) {
  .site-logo { width: 80px; }
}

/* ══════════════════════════════════════════
   ZEN MODE — easter egg logo × 5 clics
   Garde UNIQUEMENT : fond vidéo brut,
   #music-player, #menu-btn
   Tout le reste disparaît (particules, overlay, footer…)
══════════════════════════════════════════ */
.wrap > *, .blobs, #topbar,
#particles-canvas, #bg-video-overlay {
  transition: opacity .9s ease;
}
body.zen-mode {
  overflow: hidden;
}
body.zen-mode .wrap > *,
body.zen-mode .blobs,
body.zen-mode #topbar,
body.zen-mode #particles-canvas,
body.zen-mode #bg-video-overlay {
  opacity: 0 !important;
  pointer-events: none;
}

    /* ══════════════════════════════════════════
       CLASH OF CLANS — zone stats dans la carte
    ══════════════════════════════════════════ */
    .coc-zone { position:relative; z-index:3; display:flex; flex-direction:column; gap:10px; }
    .coc-loading { font-size:12px; color:rgba(255,255,255,0.35); padding:8px 0; font-weight:600; }

    .coc-top { display:grid; grid-template-columns:1fr 1px 1fr; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.1); border-radius:12px; overflow:hidden; }
    .coc-half { padding:11px 13px; display:flex; flex-direction:column; gap:3px; }
    .coc-divider { background:rgba(255,255,255,0.1); }
    .coc-big { font-size:22px; font-weight:900; color:#fff; line-height:1; }
    .coc-max { font-size:13px; font-weight:700; color:rgba(255,255,255,0.3); }
    .coc-gold { color:#fcd34d; }
    .coc-sub { font-size:9.5px; font-weight:700; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:.08em; }
    .coc-bar-bg { height:5px; background:rgba(255,255,255,0.15); border-radius:5px; overflow:hidden; margin-top:6px; }
    .coc-bar-fill { height:100%; border-radius:5px; background:#f59e0b; transition:width .8s ease; }
    .coc-wars { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
    .coc-war-wins { font-size:14px; font-weight:900; color:#86efac; }
    .coc-war-badge { display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:4px 9px; border-radius:7px; background:rgba(239,68,68,0.18); border:1px solid rgba(239,68,68,0.35); width:fit-content; }
    .coc-war-dot { width:6px; height:6px; border-radius:50%; background:#ef4444; animation:pulseg 1.2s ease-in-out infinite; }
    .coc-war-badge span { font-size:10px; font-weight:700; color:#fca5a5; }

    .coc-sep { height:1px; background:rgba(255,255,255,0.12); }

    .coc-members { display:flex; flex-direction:column; gap:5px; }
    .coc-member-row { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.08); border-radius:9px; padding:7px 11px; }
    .coc-member-pos { font-size:9.5px; font-weight:700; color:rgba(255,255,255,0.25); width:12px; text-align:center; flex-shrink:0; }
    .coc-member-name { flex:1; font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* ── Badges de ligue ── */
    .league-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:5px; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; flex-shrink:0; }
    .league-icon  { width:28px; height:28px; object-fit:contain; flex-shrink:0; }
    .league-chip  { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
    .league-chip span { font-size:10px; font-weight:700; color:rgba(255,255,255,0.75); white-space:nowrap; }
    .league-none     { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.35); }
    .league-bronze   { background:rgba(180,100,40,0.22);  border:1px solid rgba(180,100,40,0.45);  color:#cd7f32; }
    .league-silver   { background:rgba(160,165,180,0.18); border:1px solid rgba(160,165,180,0.4);  color:#c8cdd8; }
    .league-gold     { background:rgba(245,185,0,0.18);   border:1px solid rgba(245,185,0,0.42);   color:#fbbf24; }
    .league-crystal  { background:rgba(125,210,245,0.18); border:1px solid rgba(125,210,245,0.42); color:#7dd3fc; }
    .league-master   { background:rgba(180,80,240,0.18);  border:1px solid rgba(180,80,240,0.42);  color:#c084fc; }
    .league-champion { background:rgba(239,68,68,0.18);   border:1px solid rgba(239,68,68,0.42);   color:#fca5a5; }
    .league-titan    { background:rgba(245,158,11,0.2);   border:1px solid rgba(245,158,11,0.48);  color:#fcd34d; }
    .league-legend   { background:rgba(245,158,11,0.15);  border:1px solid rgba(245,158,11,0.5);   color:#fde68a; }