:root {
  /* palette dés (indépendante du thème) */
  --dice-red:    #ff5555;
  --dice-orange: #ffa64d;
  --dice-yellow: #ffe14d;
  --dice-green:  #5ee89a;
  --dice-blue:   #5aa9ff;
  --dice-purple: #c38bff;
  --dice-hidden: #7a8aa6;

  /* thème par défaut : violet */
  --bg-top:      #b78bff;
  --bg-bot:      #6a1fd8;
  --btn-bg:      #7b2cf0;
  --btn-bg-2:    #9256ff;
  --card-bg:     #624f85;
  --card-border: #ffffff;
  --text:        #ffffff;
  --text-shadow: #3c0e7a;
  --pattern-alpha: 0.26;
  --side-bg:     rgba(90, 40, 170, 0.45);
  --side-border: rgba(255, 255, 255, 0.18);
}

/* ---------- Thèmes ---------- */
body[data-theme="blue"] {
  --bg-top: #6cb6ff; --bg-bot: #2f86de;
  --btn-bg: #0b5fff; --btn-bg-2: #2a74ff;
  --card-bg: #4a6b94; --text-shadow: #0b3a7a;
  --side-bg: rgba(10, 40, 100, 0.45);
}
body[data-theme="purple"] {
  --bg-top: #b78bff; --bg-bot: #6a1fd8;
  --btn-bg: #7b2cf0; --btn-bg-2: #9256ff;
  --card-bg: #624f85; --text-shadow: #3c0e7a;
  --side-bg: rgba(90, 40, 170, 0.45);
}
body[data-theme="green"] {
  --bg-top: #5de8a2; --bg-bot: #0f8f52;
  --btn-bg: #1aa65a; --btn-bg-2: #28c56e;
  --card-bg: #3f6e58; --text-shadow: #0c4a2a;
  --side-bg: rgba(20, 80, 50, 0.45);
}
body[data-theme="red"] {
  --bg-top: #ff7a7a; --bg-bot: #b1222d;
  --btn-bg: #d93333; --btn-bg-2: #ef5252;
  --card-bg: #803f44; --text-shadow: #5e0b11;
  --side-bg: rgba(130, 20, 30, 0.45);
}
body[data-theme="orange"] {
  --bg-top: #ffb878; --bg-bot: #e26a16;
  --btn-bg: #ef7922; --btn-bg-2: #ff9742;
  --card-bg: #80593a; --text-shadow: #652900;
  --side-bg: rgba(140, 60, 15, 0.45);
}
body[data-theme="yellow"] {
  --bg-top: #ffe66b; --bg-bot: #d49800;
  --btn-bg: #d9a000; --btn-bg-2: #f4bc1c;
  --card-bg: #7a6830; --text-shadow: #5a3e00;
  --pattern-alpha: 0.18;
  --side-bg: rgba(130, 95, 0, 0.45);
}
body[data-theme="black"] {
  --bg-top: #4a4a4e; --bg-bot: #0e0e10;
  --btn-bg: #1b1b1f; --btn-bg-2: #313138;
  --card-bg: #2a2a30; --text-shadow: #000000;
  --pattern-alpha: 0.34;
  --side-bg: rgba(20, 20, 24, 0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background-color: var(--bg-top);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='720' viewBox='0 0 420 720' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(40 60) rotate(-10)'><rect width='40' height='40' rx='7'/><circle cx='11' cy='11' r='2.4' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='29' cy='29' r='2.4' fill='white' fill-opacity='0.45' stroke='none'/></g><g transform='translate(160 55)'><circle r='12'/><circle r='7'/></g><g transform='translate(280 55) rotate(12)'><rect width='36' height='52' rx='5'/><path d='M18 20c-3-5-10-4-10 2 0 5 7 10 10 15 3-5 10-10 10-15 0-6-7-7-10-2z' fill='white' fill-opacity='0.4' stroke='none'/></g><path d='M85 175c6-10 14-10 20 0s14 10 20 0'/><path d='M240 170l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z' fill='white' fill-opacity='0.45' stroke='none'/><g transform='translate(355 180)'><circle r='11'/><circle r='6'/></g><g transform='translate(60 260) rotate(8)'><rect width='40' height='40' rx='7'/><circle cx='11' cy='11' r='2.4' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='20' cy='20' r='2.4' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='29' cy='29' r='2.4' fill='white' fill-opacity='0.45' stroke='none'/></g><g transform='translate(220 270) rotate(-6)'><rect width='46' height='22' rx='3'/><line x1='23' y1='2' x2='23' y2='20'/><circle cx='11' cy='11' r='2' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='33' cy='7' r='2' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='37' cy='15' r='2' fill='white' fill-opacity='0.45' stroke='none'/></g><g transform='translate(335 285)'><circle cx='0' cy='-9' r='6'/><path d='M-6-2c-2 4-3 8-3 12h18c0-4-1-8-3-12z'/><ellipse cx='0' cy='13' rx='10' ry='3'/></g><g transform='translate(40 390)'><circle r='12'/><circle r='7'/></g><g transform='translate(170 380) rotate(-10)'><rect width='36' height='52' rx='5'/><path d='M18 20c-3-5-10-4-10 2 0 5 7 10 10 15 3-5 10-10 10-15 0-6-7-7-10-2z' fill='white' fill-opacity='0.4' stroke='none'/></g><g transform='translate(310 400) rotate(16)'><rect width='40' height='40' rx='7'/><circle cx='20' cy='20' r='2.6' fill='white' fill-opacity='0.45' stroke='none'/></g><path d='M85 490l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z' fill='white' fill-opacity='0.45' stroke='none'/><path d='M250 500c6-10 14-10 20 0s14 10 20 0'/><g transform='translate(60 585) rotate(5)'><rect width='46' height='22' rx='3'/><line x1='23' y1='2' x2='23' y2='20'/><circle cx='11' cy='7' r='2' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='11' cy='15' r='2' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='34' cy='11' r='2' fill='white' fill-opacity='0.45' stroke='none'/></g><g transform='translate(230 605)'><circle r='11'/><circle r='6'/></g><g transform='translate(340 595)'><circle cx='0' cy='-9' r='6'/><path d='M-6-2c-2 4-3 8-3 12h18c0-4-1-8-3-12z'/><ellipse cx='0' cy='13' rx='10' ry='3'/></g><g transform='translate(160 655) rotate(-14)'><rect width='40' height='40' rx='7'/><circle cx='11' cy='29' r='2.4' fill='white' fill-opacity='0.45' stroke='none'/><circle cx='29' cy='11' r='2.4' fill='white' fill-opacity='0.45' stroke='none'/></g></svg>"),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 420px 720px, 100% 100%;
  background-attachment: fixed, fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background: inherit;
  background-image: inherit;
  background-size: inherit;
  background-attachment: inherit;
  background-repeat: inherit;
  mix-blend-mode: normal;
  opacity: var(--pattern-alpha);
  pointer-events: none;
  z-index: -1;
}

.mode-banner {
  margin: 10px auto 0;
  max-width: 460px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 14px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
}
.mode-banner code { background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 6px; }
.hidden { display: none !important; }

/* ---------- Hero / zone d'accueil + titre principal ---------- */
.hero-slot {
  width: 100%;
  min-height: clamp(210px, 24vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.hero-title {
  margin: 0;
  text-align: center;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4.8vw, 66px);
  letter-spacing: clamp(2px, 0.3vw, 4px);
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 4px 0 #000, 0 7px 12px rgba(0, 0, 0, 0.4);
}

/* ---------- Stage (three-column layout, hauteurs égales) ---------- */
.stage {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(360px, 520px) minmax(220px, 260px);
  gap: 22px;
  justify-content: center;
  align-items: stretch; /* les 3 colonnes prennent la hauteur de la plus grande */
  padding: clamp(28px, 4vw, 48px) 24px 10px;
  max-width: 1280px;
  margin: 0 auto;
}

.app {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  height: 100%; /* colonne centrale prend toute la hauteur de la row */
}
.app > .glass-card { flex: 1 1 auto; }

/* verify-card déplacée hors du stage pour que les sidebars s'alignent
   pile à la fin du panneau central (après la légende des couleurs). */
.verify-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px 40px;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(360px, 520px) minmax(220px, 260px);
  gap: 22px;
  justify-content: center;
}
.verify-inner { grid-column: 2; min-width: 0; }

@media (max-width: 1024px) {
  .hero-slot { min-height: clamp(180px, 28vw, 260px); padding: 0 16px; }
  .hero-title { font-size: clamp(27px, 6.2vw, 50px); }
  .stage { grid-template-columns: 1fr; max-width: 520px; padding: 20px 16px 10px; align-items: start; }
  .streamers-col { order: 2; min-height: auto; }
  .app { order: 1; height: auto; }
  .streamers-right { order: 3; }
  .verify-wrap { grid-template-columns: 1fr; max-width: 520px; padding: 10px 16px 36px; }
  .verify-inner { grid-column: 1; }
}
@media (max-width: 560px) {
  .hero-slot { min-height: clamp(160px, 34vw, 220px); padding: 0 12px; }
  .hero-title {
    font-size: clamp(23px, 7.4vw, 40px);
    letter-spacing: 1.5px;
    text-shadow:
      -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
      -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
      0 3px 0 #000, 0 6px 10px rgba(0, 0, 0, 0.4);
  }
}

/* ---------- Streamer side panels ---------- */
.streamers-col {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 20px 16px 22px;
  color: #fff;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background .35s ease, border-color .35s ease;
  height: 100%;
  overflow-y: auto;
}
.streamers-title {
  text-align: center;
  font-family: "Luckiest Guy", "Fredoka One", sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin: 2px 0 16px;
  line-height: 1.1;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
}
.streamers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.streamers-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
  padding: 14px 8px;
}
.streamer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 7px 14px 7px 7px;
  transition: background .18s ease, transform .18s ease;
}
.streamer-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.streamer-item.is-live {
  border-color: rgba(255, 80, 80, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 80, 80, 0.25), 0 6px 16px rgba(255, 50, 50, 0.18);
}
.streamer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  min-width: 0;
}
.streamer-avatar-img {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  background: #2a1a44;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-left: 4px;
  box-shadow: 0 0 10px rgba(229, 57, 53, 0.65);
  animation: livePulse 1.6s ease-in-out infinite;
}
.live-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 10px rgba(229, 57, 53, 0.65); }
  50%     { box-shadow: 0 0 18px rgba(229, 57, 53, 0.95); }
}
.streamer-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #2a1a44;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.streamer-meta { display: flex; flex-direction: column; min-width: 0; }
.streamer-name {
  display: flex; align-items: center; gap: 4px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.verified-badge {
  width: 14px; height: 14px;
  background: #1da1f2;
  border-radius: 50%;
  padding: 2px;
}
.streamer-handle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

/* ---------- Auth row ---------- */
.auth-row {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  min-height: 0;
  padding: 0 24px;
}
.btn-auth {
  background: #fff; color: var(--btn-bg);
  border: 2px solid #fff; border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 4px 12px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.user-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.3);
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  font-size: 13px; font-weight: 600;
}
.user-badge img { width: 30px; height: 30px; border-radius: 50%; background: #fff; }

/* ---------- Mute button ---------- */
.mute-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 50;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .1s ease, background .2s ease;
}
.mute-btn:hover { background: rgba(0, 0, 0, 0.5); }
.mute-btn:active { transform: scale(0.95); }
.mute-icon { width: 22px; height: 22px; display: none; }
.mute-btn[aria-pressed="false"] .mute-on { display: block; }
.mute-btn[aria-pressed="true"]  .mute-off { display: block; }

/* ---------- Title ---------- */
.title {
  text-align: center;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: 2px;
  margin: 6px 0 4px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow:
    -3px -3px 0 #000, 3px -3px 0 #000, -3px  3px 0 #000, 3px  3px 0 #000,
    -3px  0   0 #000, 3px  0   0 #000, 0   -3px 0 #000, 0    3px 0 #000,
     0    5px 0 #000, 0    7px 10px rgba(0,0,0,.35);
  line-height: 1;
}

.cartoon-text {
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px  2px 0 #000, 2px  2px 0 #000,
    -2px  0   0 #000, 2px  0   0 #000, 0   -2px 0 #000, 0    2px 0 #000,
     0    3px 0 #000;
}

/* ---------- Pill selects ---------- */
.controls { display: flex; gap: 12px; }
.pill-select {
  flex: 1;
  background: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 5px 0 rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
}
.pill-select::after {
  content: "";
  position: absolute; right: 14px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-55%) rotate(45deg);
  border-right: 3px solid var(--btn-bg);
  border-bottom: 3px solid var(--btn-bg);
  pointer-events: none;
}
.pill-custom { overflow: visible; }

.pill-trigger {
  width: 100%;
  background: transparent;
  color: var(--btn-bg);
  border: none; outline: none;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 2px;
  padding: 12px 36px 12px 20px;
  cursor: pointer;
  text-transform: uppercase;
  text-align: left;
}
.pill-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  z-index: 20;
  max-height: 60vh;
  overflow-y: auto;
}
.pill-menu[hidden] { display: none; }
.pill-menu li {
  padding: 8px 14px;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 2px;
  color: #111111;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}
.pill-menu li:hover { background: rgba(0, 0, 0, 0.07); }
.pill-menu li.active { background: rgba(0, 0, 0, 0.12); }
.pill-select select {
  width: 100%;
  background: transparent;
  color: var(--btn-bg);
  border: none; outline: none;
  font-family: "Nunito", "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 2px;
  padding: 12px 36px 12px 20px;
  appearance: none;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: none;
}
.pill-select select option {
  background: #fff;
  font-family: "Nunito", "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1.5px;
  padding: 10px;
  text-shadow: none;
}

/* ---------- Glass card wrapper ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  padding: 22px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.glass-card .title { margin: 2px 0 0; }
.glass-card .palette-legend { margin-top: 2px; }

/* ---------- Dice area ---------- */
.dice-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  padding: 6px 0 2px;
}
.die {
  width: 64px; height: 64px;
  border-radius: 14px;
  border: 3px solid #ffffff;
  display: grid; place-items: center;
  box-shadow:
    0 4px 0 rgba(0,0,0,.22),
    inset 0 -4px 0 rgba(0,0,0,.14),
    inset 0 3px 0 rgba(255,255,255,.22);
  transition: transform .3s cubic-bezier(.22,1.3,.4,1), background-color .25s ease;
  position: relative;
}
.die.rolling { animation: tumble .45s ease-in-out; }
@keyframes tumble {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(220deg) scale(0.85); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Animation de révélation du dé : rotation + pop, 700 ms,
   fluide et moderne. Démarre après le --reveal-delay propre à chaque dé. */
.die.reveal {
  animation: die-reveal 700ms cubic-bezier(.2, .9, .3, 1.15) both;
  animation-delay: var(--reveal-delay, 0ms);
  transform-origin: 50% 55%;
  will-change: transform, opacity;
}
.die.reveal .pip { animation: pip-reveal 700ms ease-out both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes die-reveal {
  0%   { opacity: 0; transform: rotate(-220deg) scale(0.35); }
  55%  { opacity: 1; transform: rotate(10deg)   scale(1.08); }
  75%  {              transform: rotate(-4deg)  scale(0.97); }
  100% { opacity: 1; transform: rotate(0)      scale(1); }
}
@keyframes pip-reveal {
  0%, 50% { opacity: 0; transform: scale(0.4); }
  100%    { opacity: 1; transform: scale(1); }
}
/* En reduce-motion : on retire le mouvement (rotation/scale), mais on garde
   un fondu court de 300 ms, discret, pour qu'il y ait quand même un retour
   visuel au clic sur RELANCER. */
@media (prefers-reduced-motion: reduce) {
  .die.reveal {
    animation: die-reveal-soft 300ms ease-out both;
    animation-delay: var(--reveal-delay, 0ms);
    transform: none;
  }
  .die.reveal .pip { animation: none; opacity: 1; transform: none; }
}
@keyframes die-reveal-soft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.die.shaking {
  background: #ecf0f6 !important;
  animation: diceShake var(--shake-dur, 1.8s) cubic-bezier(.4,0,.6,1);
}
.die.shaking .pip { opacity: 0; }
@keyframes diceShake {
  0%   { transform: translate(0, 0) rotate(0) scale(1); }
  8%   { transform: translate(-7px, -5px) rotate(-22deg) scale(0.95); }
  16%  { transform: translate(6px, 4px) rotate(26deg) scale(1.05); }
  24%  { transform: translate(-5px, 6px) rotate(-34deg) scale(0.97); }
  32%  { transform: translate(7px, -7px) rotate(18deg) scale(1.06); }
  40%  { transform: translate(-8px, 3px) rotate(-26deg) scale(0.94); }
  48%  { transform: translate(5px, -6px) rotate(32deg) scale(1.03); }
  56%  { transform: translate(-6px, 5px) rotate(-16deg) scale(1.01); }
  64%  { transform: translate(4px, -4px) rotate(22deg) scale(0.98); }
  72%  { transform: translate(-3px, 3px) rotate(-14deg) scale(1.02); }
  80%  { transform: translate(3px, -2px) rotate(10deg) scale(1); }
  88%  { transform: translate(-2px, 2px) rotate(-6deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}
.die .pip {
  width: 16px; height: 16px; border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.22);
}
.die[data-color="red"]    { background: var(--dice-red); }
.die[data-color="orange"] { background: var(--dice-orange); }
.die[data-color="yellow"] { background: var(--dice-yellow); }
.die[data-color="yellow"] .pip { background: #5a4100; box-shadow: none; }
.die[data-color="green"]  { background: var(--dice-green); }
.die[data-color="blue"]   { background: var(--dice-blue); }
.die[data-color="purple"] { background: var(--dice-purple); }
.die.blurred {
  filter: blur(10px);
  cursor: pointer;
  transition: filter .25s ease;
}
.die.blurred:hover { filter: blur(6px); }

body.anti-awk-on .pill-select { filter: blur(5px); transition: filter .25s ease; }
body.anti-awk-on .pill-select:hover { filter: blur(2px); }

.history-dot.blurred {
  filter: blur(6px);
  cursor: pointer;
  transition: filter .25s ease;
}

/* ---------- Game ID card ---------- */
.gid-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 16px 18px 18px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.gid-label {
  font-weight: 700; font-size: 12px; letter-spacing: 3px;
  color: rgba(255,255,255,.75);
}
.gid-value {
  font-family: "Fredoka", monospace;
  font-weight: 700;
  font-size: clamp(30px, 8vw, 40px);
  letter-spacing: 1px;
  color: #ffffff;
  user-select: all;
  line-height: 1.05;
}
.btn-copy {
  background: #6b6b6b; color: #ffffff; border: none;
  border-radius: 12px; padding: 7px 22px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.btn-copy:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.gid-sub {
  margin: 4px 0 0; font-size: 11.5px;
  color: #ffb7c3; font-weight: 500;
}
.gid-sub.ok { color: #a7ffcf; }

/* ---------- Big buttons ---------- */
.btn-big {
  background: linear-gradient(180deg, var(--btn-bg-2), var(--btn-bg));
  color: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 20px;
  padding: 16px 20px;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .08s ease;
  text-transform: uppercase;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px  2px 0 #000, 2px  2px 0 #000,
    -2px  0   0 #000, 2px  0   0 #000, 0   -2px 0 #000, 0    2px 0 #000,
     0    3px 0 #000;
}
.btn-big:hover { filter: brightness(1.07); }
.btn-big:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn-big:disabled { cursor: progress; opacity: 0.75; filter: none; }
.btn-big.is-loading { position: relative; }
.btn-big.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; right: 14px;
  width: 16px; height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Counter panel ---------- */
.counter-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(255,255,255,.75);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 20px;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  color: var(--btn-bg);
}
.counter-col {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 48px;
}
.counter-col.right { align-items: flex-end; }
.counter-btn {
  background: transparent; border: none;
  color: var(--btn-bg);
  font-family: inherit;
  font-weight: 700; font-size: 15px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.counter-btn:hover { background: rgba(255,255,255,.5); }
.counter-btn:active { transform: translateY(1px); }
.counter-value {
  text-align: center;
  font-family: "Fredoka", monospace;
  font-weight: 700;
  font-size: 28px;
  color: var(--btn-bg);
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}

/* ---------- Toggle ---------- */
.toggle-row {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.toggle-label {
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px  2px 0 #000, 2px  2px 0 #000,
    -2px  0   0 #000, 2px  0   0 #000, 0   -2px 0 #000, 0    2px 0 #000,
     0    3px 0 #000;
}
.switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.3);
  border: 2px solid #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease;
}
.slider::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}
.switch input:checked + .slider { background: #4ddc8a; }
.switch input:checked + .slider::before { transform: translateX(22px); }

/* ---------- Legend ---------- */
.palette-legend {
  background: rgba(0,0,0,.35);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.2px;
}
.palette-legend span { font-weight: 700; }

/* ---------- Verify Game ID ---------- */
.verify-card { margin-top: 2px; }
.verify-title {
  text-align: center;
  font-family: "Luckiest Guy", "Fredoka One", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 5.5vw, 28px);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, 0 3px 0 #000;
}
.verify-form { display: flex; gap: 10px; }
.verify-form input {
  flex: 1;
  background: #fff;
  border: 3px solid #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: "Nunito", "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #111;
  outline: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
  min-width: 0;
}
.verify-form input::placeholder { color: rgba(0,0,0,.4); letter-spacing: 1px; }
.verify-btn { padding: 12px 22px; font-size: 16px; letter-spacing: 1.5px; flex: 0 0 auto; }

.verify-result { min-height: 10px; }
.lookup-card {
  background: rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.lookup-gid {
  font-family: "Luckiest Guy", "Fredoka One", sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: 2px;
  text-align: center;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
  word-break: break-all;
}
.lookup-dice { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lookup-die {
  width: 50px; height: 50px;
  border-radius: 12px;
  border: 3px solid #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.lookup-die .pip {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.25);
}
.lookup-meta {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.9);
  letter-spacing: .5px;
}
.lookup-colors { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.lookup-colors-lbl { font-size: 12px; opacity: .8; font-weight: 700; letter-spacing: .5px; }
.lookup-colors-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lookup-color-chip {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.lookup-msg { margin: 0; text-align: center; color: rgba(255,255,255,.9); font-weight: 600; }
.lookup-msg.err { color: #ffd0d0; }

/* ---------- History modal ----------
   Le grand fond de la fenêtre reprend automatiquement les variables du
   thème principal (--bg-top / --bg-bot) et suit donc le sélecteur de
   couleur du site : bleu, vert, violet, orange, rouge, jaune, noir. */
.modal {
  border: none;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  color: #fff;
  border-radius: 22px;
  padding: 20px;
  width: min(92vw, 460px);
  max-height: 80vh;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  font-family: inherit;
}
body[data-theme="yellow"] .modal { color: #221800; }
body[data-theme="yellow"] .modal h2 { color: #332500; }
.modal::backdrop { background: rgba(0,0,0,.6); }
.modal h2 {
  margin: 0 0 14px;
  text-align: center;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 5.5vw, 28px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, 0 3px 0 #000;
}
body[data-theme="yellow"] .modal h2 {
  color: #fff;
}
.history-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 55vh; overflow-y: auto; padding-right: 4px;
  margin-bottom: 14px;
}
.history-item {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 12px;
}
.history-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; opacity: .85; margin-bottom: 8px; font-weight: 500;
}
.history-dice { display: flex; flex-wrap: wrap; gap: 6px; }
.history-dot {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
}
.history-empty { text-align: center; opacity: .7; padding: 20px 0; }

/* ---------- Admin panel ---------- */
.admin-fab {
  display: none;
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 50;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: "Luckiest Guy", "Fredoka One", sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.admin-fab:not(.hidden) { display: block; }
.admin-fab.admin-on {
  background: #7b2cf0;
  border-color: #fff;
}

.admin-modal { width: min(94vw, 420px); text-align: center; }
.admin-modal h2 {
  font-family: "Luckiest Guy", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 10px;
  font-size: 22px;
}
.admin-sub { margin: 0 0 14px; font-size: 13px; opacity: 0.85; font-weight: 500; }
.admin-modal input,
.admin-panel-modal input,
.admin-panel-modal select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 14px;
  outline: none;
}
.admin-modal input::placeholder,
.admin-panel-modal input::placeholder { color: rgba(255,255,255,.5); }
.admin-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.admin-actions .btn-big { flex: 1; min-width: 120px; padding: 10px 14px; font-size: 14px; }
.admin-msg { min-height: 18px; margin: 10px 0 0; font-size: 13px; color: #ffd0d0; font-weight: 600; }
.admin-msg.ok { color: #a7ffcf; }

.admin-panel-modal { width: min(96vw, 640px); max-height: 86vh; padding: 18px; }
.admin-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.admin-header h2 {
  flex: 1; margin: 0;
  font-family: "Luckiest Guy", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.admin-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.admin-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.admin-section h3 {
  margin: 0 0 10px;
  font-family: "Luckiest Guy", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffd84d;
}
.admin-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-row input, .admin-row select { flex: 1; min-width: 160px; }
.admin-btn { padding: 11px 18px; font-size: 14px; letter-spacing: 1px; }
.admin-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 150px; }
.admin-field span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: .8; font-weight: 700; }

.admin-player {
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  font-family: "Nunito", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.admin-player:empty { display: none; }
.admin-player .ap-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.admin-player .ap-gid { font-family: "Luckiest Guy", sans-serif; letter-spacing: 1.5px; font-size: 16px; }
.admin-player .ap-online { font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 800; }
.admin-player .ap-online.on { background: #22b36b; color: #fff; }
.admin-player .ap-online.off { background: rgba(255,255,255,.15); color: rgba(255,255,255,.75); }
.admin-player .ap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin-bottom: 10px; }
.admin-player .ap-grid b { opacity: .7; font-weight: 700; margin-right: 6px; }
.admin-player .ap-history { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.admin-player .ap-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.admin-player .ap-row .ap-date { opacity: .7; font-size: 11.5px; min-width: 110px; }
.admin-player .ap-dots { display: flex; gap: 5px; }
.ap-dot { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #fff; }

.admin-pred-dice { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pred-die {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  background: rgba(0,0,0,.2);
}
.pred-die select {
  width: 72px;
  padding: 6px 6px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 8px;
}
.pred-swatch { width: 40px; height: 40px; border-radius: 8px; border: 2px solid #fff; }

.admin-action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-action-row .btn-big { flex: 1; min-width: 180px; padding: 12px 16px; font-size: 14px; }
.admin-btn-force { background: linear-gradient(180deg, #ef5252, #c62828); }

.admin-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 260px; overflow-y: auto;
  padding-right: 4px;
}
.ai-badge.forced { background: #c62828; color: #fff; }
.ai-badge.consumed { background: rgba(255,255,255,.2); color: #fff; }

.forced-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 6px auto 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  border: none;
  font-family: "Nunito", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  box-shadow: none;
  width: 100%;
}
.forced-banner[hidden] { display: none; }
.forced-banner-footer {
  margin: 14px auto 0;
  justify-content: center;
  text-align: center;
}
.forced-banner::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ff9292;
}
.dice-area.has-forced { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dice-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.history-item .forced-tag {
  display: inline-block; margin-left: 8px;
  background: #c62828; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 4px;
}
.admin-list:empty::before {
  content: "— vide —";
  display: block;
  text-align: center;
  color: rgba(255,255,255,.6);
  padding: 10px 0;
  font-size: 13px;
}
.admin-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: "Nunito", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.admin-item .ai-head {
  display: flex; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; font-weight: 800; align-items: center; flex-wrap: wrap;
}
.admin-item .ai-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
}
.ai-badge.exact { background: #22b36b; color: #fff; }
.ai-badge.partial { background: #f7b500; color: #000; }
.ai-badge.miss { background: #d93333; color: #fff; }
.ai-badge.pending { background: rgba(255,255,255,.2); color: #fff; }
.admin-item .ai-dots { display: flex; gap: 5px; margin: 4px 0; }
.admin-item .ai-dots.vs { align-items: center; }
.admin-item .ai-vs { font-size: 11px; opacity: .7; letter-spacing: 1px; margin: 2px 0 0; }
.admin-item .ai-del {
  background: transparent; border: 1px solid rgba(255,255,255,.3); color: #ffd0d0;
  border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 800; cursor: pointer;
}

/* ---------- Admin password change ---------- */
.admin-password-form { display: flex; flex-direction: column; gap: 10px; }
.admin-password-form .admin-field { flex: 1; }

/* ---------- Admin streamer manager ---------- */
.admin-streamer-form { display: flex; flex-direction: column; gap: 10px; }
.admin-streamer-form .admin-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
  color: #fff;
  min-width: 140px;
}
.admin-streamer-form .admin-check input { width: 18px; height: 18px; accent-color: #7b2cf0; }
.admin-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-note b { color: #fff; font-weight: 800; }

.admin-streamers-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .admin-streamers-cols { grid-template-columns: 1fr; }
}
.admin-streamers-col h4 {
  margin: 0 0 8px;
  font-family: "Luckiest Guy", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.admin-streamer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.admin-streamer-list:empty::before {
  content: "— vide —";
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 10px 0;
  font-size: 12px;
}
.admin-streamer-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 12.5px;
  align-items: center;
}
.admin-streamer-row .as-avatar { grid-row: 1 / 3; }
.admin-streamer-row .as-actions { grid-column: 2; }
.admin-streamer-row .as-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #2a1a44;
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}
.admin-streamer-row .as-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-streamer-row .as-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.admin-streamer-row .as-name { font-weight: 800; color: #fff; display: flex; align-items: center; gap: 4px; }
.admin-streamer-row .as-handle { font-size: 11px; opacity: 0.65; }
.admin-streamer-row .as-live {
  background: #e53935; color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 1px 5px; border-radius: 4px;
  margin-left: 4px;
}
.admin-streamer-row .as-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.admin-streamer-row .as-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11.5px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: background .15s ease, transform .1s ease;
}
.admin-streamer-row .as-btn:hover { background: rgba(255, 255, 255, 0.18); }
.admin-streamer-row .as-btn:active { transform: translateY(1px); }
.admin-streamer-row .as-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.admin-streamer-row .as-btn.del {
  background: rgba(229, 57, 53, 0.25);
  color: #ffdede;
  border-color: rgba(255, 120, 120, 0.6);
}
.admin-streamer-row .as-btn.del:hover {
  background: rgba(229, 57, 53, 0.6);
  color: #fff;
}

/* ---------- Inline confirm (stacked <dialog>, top layer) ---------- */
.inline-confirm-dialog {
  width: min(92vw, 420px);
  padding: 22px 22px 18px;
  text-align: center;
}
.inline-confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.75); }
.inline-confirm-msg {
  margin: 0 0 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.inline-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.inline-confirm-actions .btn-big {
  flex: 1;
  padding: 10px 14px;
  font-size: 15px;
  letter-spacing: 1px;
}
.inline-confirm-actions .ic-cancel {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}
.inline-confirm-actions .ic-ok {
  background: linear-gradient(180deg, #ef5252, #c62828);
}

/* ---------- Stats card (câblé au thème) ---------- */
.stats-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 24px 0;
}
.stats-card {
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  padding: 28px clamp(20px, 4vw, 40px) 30px;
  color: #fff;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background .35s ease, border-color .35s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stats-card[hidden] { display: none; }
.stats-title {
  margin: 0;
  text-align: center;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3.1vw, 32px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    0 3px 0 #000;
}
.stats-sub {
  margin: 0 0 10px;
  font-family: "Luckiest Guy", "Fredoka One", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    -1.5px 0 0 #000, 1.5px 0 0 #000, 0 -1.5px 0 #000, 0 1.5px 0 #000;
}
.stats-block { text-align: left; }
.stats-colors, .stats-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stats-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 999px;
  color: #111;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.stats-swatch {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(0,0,0,.25);
  flex-shrink: 0;
}
.stats-color-chip.winner { outline: 2px solid #ffd84d; outline-offset: 2px; }
.stats-color-chip .trophy { font-size: 14px; }
.stats-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 999px;
  color: #111;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.stats-roll {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.stats-roll-die {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 42px;
}
.stats-roll-die .idx { font-size: 11px; font-weight: 700; opacity: 0.85; letter-spacing: 0.5px; }
.stats-roll-die .sq {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.stats-roll-total {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.9;
}
.stats-history { flex-direction: column; gap: 8px; }
.stats-history li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}
.stats-history .sh-date { font-size: 12px; font-weight: 700; opacity: 0.9; min-width: 110px; }
.stats-history .sh-dots { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.stats-history .sh-dot {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,.8);
}
.stats-history .sh-count { font-size: 12px; font-weight: 800; opacity: 0.85; }
.stats-empty { opacity: 0.8; font-weight: 600; font-size: 13px; margin: 0; }
body[data-theme="yellow"] .stats-card { color: #221800; }
body[data-theme="yellow"] .stats-sub { color: #fff; }
body[data-theme="yellow"] .stats-history li { color: #221800; background: rgba(255,255,255,.3); }
body[data-theme="yellow"] .stats-history .sh-date,
body[data-theme="yellow"] .stats-history .sh-count { color: #221800; }
@media (max-width: 1024px) {
  .stats-wrap { padding: 6px 16px 0; max-width: 520px; }
  .stats-card { padding: 24px 20px 24px; border-radius: 24px; }
  .stats-history .sh-date { min-width: 0; font-size: 11px; }
}

/* ---------- Info cards (sous le stage, câblés au thème) ---------- */
.info-cards {
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.info-card {
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  padding: 28px clamp(20px, 4vw, 40px) 32px;
  color: #ffffff;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-align: center;
  transition: background .35s ease, border-color .35s ease;
}
.info-title {
  margin: 0 0 18px;
  font-family: "Luckiest Guy", "Fredoka One", "Fredoka", cursive, sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    0 3px 0 #000;
}
.info-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  font-weight: 500;
  color: #ffffff;
  max-width: 620px;
  margin: 0 auto;
}
.info-body p { margin: 0; }
.info-body b { font-weight: 800; }
body[data-theme="yellow"] .info-card,
body[data-theme="yellow"] .info-body { color: #221800; }
body[data-theme="yellow"] .info-title { color: #ffffff; }
@media (max-width: 1024px) {
  .info-cards { padding: 6px 16px 36px; max-width: 520px; }
  .info-card { padding: 24px 20px 26px; border-radius: 24px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: #0f0623;
  color: #fff;
  border: 2px solid #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  z-index: 60;
}