/* ================================================================
   JOGADLE — TOMSOFOOT / PREMIUM SPORTS UI
   Couche visuelle. Toutes les règles de jeu restent dans jogadle.js.
   ================================================================ */

:root {
  --jg-bg: #070718;
  --jg-ink: #f7f8ff;
  --jg-muted: #a4a6c0;
  --jg-violet: #6f55ff;
  --jg-violet-2: #44218a;
  --jg-blue: #335bff;
  --jg-red: #f02f45;
  --jg-red-deep: #63152a;
  --jg-green: #22ca72;
  --jg-green-deep: #0b5639;
  --jg-line: rgba(146, 139, 220, .24);
  --jg-panel: rgba(12, 12, 38, .78);
  --jg-shadow: 0 18px 55px rgba(0, 0, 18, .52);
  --jg-ease: cubic-bezier(.2, .78, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--jg-bg); }
body { color: var(--jg-ink); font-family: Inter, Arial, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.jogadle {
  --mx: 50%;
  --my: 45%;
  isolation: isolate;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(52px, 5.4vw, 92px) 24px 62px;
  background:
    radial-gradient(820px 560px at var(--mx) var(--my), rgba(140, 84, 235, .26), transparent 72%),
    radial-gradient(980px 700px at 72% 16%, rgba(96, 96, 232, .22), transparent 70%),
    radial-gradient(760px 620px at 24% 96%, rgba(196, 82, 190, .20), transparent 72%),
    linear-gradient(118deg, #16123a 0%, #221a52 44%, #241a54 69%, #140f34 100%);
}

.jogadle::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(38, 16, 66, .60) 0%, rgba(26, 18, 58, .26) 24%, rgba(24, 16, 52, .16) 50%, rgba(44, 18, 70, .46) 100%),
    linear-gradient(180deg, rgba(34, 20, 70, .14), rgba(12, 8, 30, .52)),
    url("../assets/jeu-fond.jpg") center 36% / cover no-repeat;
  opacity: 1;
  filter: saturate(.98) contrast(1.02) brightness(1.22);
}

.jogadle::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    /* Lueurs violet / rose dans les coins sombres */
    radial-gradient(620px 500px at 0% 100%, rgba(168, 74, 220, .22), transparent 72%),
    radial-gradient(620px 500px at 100% 100%, rgba(220, 74, 152, .20), transparent 72%),
    radial-gradient(560px 460px at 0% 0%, rgba(140, 78, 226, .17), transparent 72%),
    radial-gradient(560px 460px at 100% 0%, rgba(214, 82, 156, .17), transparent 72%),
    linear-gradient(111deg, transparent 0 8%, rgba(114, 87, 255, .11) 8.08% 8.16%, transparent 8.24% 91%, rgba(87, 70, 206, .08) 91.08% 91.16%, transparent 91.24%),
    radial-gradient(circle at 51% 55%, transparent 0 30%, rgba(8, 5, 26, .08) 62%, rgba(6, 4, 20, .36) 100%);
}

.jogadle-stage {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background:
    linear-gradient(134deg, transparent 0 17%, rgba(118, 88, 255, .055) 17.1% 17.22%, transparent 17.32%),
    linear-gradient(46deg, transparent 0 82%, rgba(62, 91, 255, .055) 82.1% 82.2%, transparent 82.3%);
}

/* ---------- HERO ---------- */
.td-hero {
  width: min(1510px, 100%);
  margin: 0 auto;
  text-align: center;
}

.td-eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  color: #ff4058;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.td-eyebrow i { width: 28px; height: 2px; background: var(--jg-red); }

.td-hero h1 {
  margin: 25px auto 0;
  font-family: "Archivo Black", Inter, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.045em;
  line-height: .98;
}
.td-hero h1 > span {
  display: block;
  color: #fff;
  font-size: clamp(36px, 3.5vw, 64px);
}
.td-hero h1 > em {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 10px auto 0;
  color: var(--jg-red);
  font-size: clamp(22px, 4.25vw, 78px);
  font-style: normal;
  white-space: nowrap;
  text-shadow: 0 8px 38px rgba(240, 47, 69, .12);
}

.td-hero > p {
  max-width: 690px;
  margin: 25px auto 0;
  color: #c3c5d7;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}
.daily-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: #aaaec8;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.daily-meta strong { color: #fff; }
.daily-meta .separator { width: 5px; height: 5px; border-radius: 50%; background: var(--jg-red); box-shadow: 0 0 12px rgba(240,47,69,.45); }
.daily-meta .dm-edition { align-self: center; }

/* ---------- Compte à rebours « Prochain joueur » (tuiles) ---------- */
.td-countdown {
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 13px 20px 11px; border-radius: 16px; text-transform: none; letter-spacing: 0;
  background: linear-gradient(180deg, rgba(18,44,96,.55), rgba(8,18,44,.55));
  border: 1px solid rgba(80,135,235,.34);
  box-shadow: 0 14px 40px rgba(0,10,40,.5), inset 0 1px rgba(255,255,255,.05);
}
.td-countdown__label {
  color: #9fb2d8; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.td-countdown__tiles { display: flex; align-items: flex-start; gap: 8px; }
.cd-tile {
  min-width: 60px; padding: 9px 8px 7px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #1a53c0, #0a4eb8 55%, #082a63);
  border: 1px solid rgba(120,170,250,.4);
  box-shadow: 0 6px 16px rgba(6,26,80,.5), inset 0 1px rgba(255,255,255,.22);
}
.cd-tile strong {
  display: block; font-family: "Archivo Black", Inter, sans-serif; font-weight: 900;
  font-size: 28px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0,0,20,.4);
}
.cd-tile small { display: block; margin-top: 5px; color: #bcd0f6; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cd-colon { font-family: "Archivo Black", Inter, sans-serif; font-style: normal; font-size: 24px; color: #4f7fe0; align-self: flex-start; margin-top: 6px; }

/* ---------- Bandeau de pastilles sous le compteur ---------- */
.hero-chips { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }

/* « X joueurs ont déjà trouvé aujourd'hui » (preuve sociale) — agrandi ~70% */
.found-today {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 12px 26px; border-radius: 999px; color: #cfe0ff; font-size: 21px; font-weight: 700;
  background: linear-gradient(90deg, rgba(10,44,105,.6), rgba(30,95,220,.4));
  border: 1px solid rgba(90,150,245,.45);
}
.found-today svg { flex: 0 0 auto; width: 25px; height: 25px; color: #ffd76a; }
.found-today strong { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }

/* « Effectifs à jour le … » — agrandi ~70% */
.effectifs-maj {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 12px 26px; border-radius: 999px; color: #9fb2d8; font-size: 21px; font-weight: 700;
  background: rgba(14,32,70,.5); border: 1px solid rgba(70,120,210,.3);
}
.effectifs-maj svg { flex: 0 0 auto; width: 24px; height: 24px; color: #39d17f; }
.effectifs-maj strong { color: #dfe8fb; font-weight: 800; }

@media (max-width: 600px) {
  .td-countdown { padding: 11px 16px 9px; }
  .cd-tile { min-width: 52px; }
  .cd-tile strong { font-size: 24px; }
}
.top-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.icon-button {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(176, 170, 228, .38);
  background: linear-gradient(145deg, rgba(28,27,69,.72), rgba(9,9,31,.7));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,17,.25);
  cursor: pointer; transition: .22s var(--jg-ease);
}
.icon-button:hover { transform: translateY(-2px); border-color: rgba(124,102,255,.76); background: rgba(54,40,111,.65); }

/* ---------- GAME HUD ---------- */
.game-shell { width: min(1510px, 100%); margin: 34px auto 0; }
.progress-row {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr 64px 1fr 170px;
  align-items: center;
  min-height: 58px;
  padding: 0 25px;
  color: #c0c2d9;
  border-top: 1px solid rgba(138,132,203,.28);
  border-bottom: 1px solid rgba(138,132,203,.24);
  background: linear-gradient(90deg, transparent, rgba(20,17,59,.32) 17%, rgba(28,22,74,.45) 50%, rgba(20,17,59,.32) 83%, transparent);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.progress-row > span, .progress-row > strong { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.progress-row > strong { text-align: right; }
.progress-rail { height: 1px; background: rgba(153,149,211,.45); display: flex; align-items: center; justify-content: space-between; }
.progress-rail i { width: 8px; height: 8px; border-radius: 50%; background: #5c5e86; box-shadow: 0 0 0 2px rgba(14,13,46,.9); }
.progress-rail i:first-child { background: var(--jg-red); box-shadow: 0 0 12px rgba(240,47,69,.46); }
.attempt-count + .progress-rail i:first-child { background:#5c5e86; box-shadow:0 0 0 2px rgba(14,13,46,.9); }
.attempt-count {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: 64px; height: 44px;
  margin: auto;
  border: 1px solid rgba(111, 85, 255, .72);
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(47,38,112,.95), rgba(8,9,35,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 7px 20px rgba(0,0,18,.42), 0 0 18px rgba(72,56,190,.14);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* ---------- SEARCH ---------- */
.search-wrap { position: relative; z-index: 15; width: min(850px, 92%); margin: 22px auto 0; }
.search-wrap > label { display: block; margin-bottom: 12px; text-align: center; color: #d7d8e6; font-size: 12px; font-weight: 600; }
.search-field {
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 58px 0 66px;
  overflow: hidden;
  border: 1px solid rgba(117, 91, 255, .78);
  border-radius: 10px;
  background:
    linear-gradient(115deg, rgba(24,21,70,.93), rgba(8,11,38,.92) 50%, rgba(22,15,62,.92)),
    rgba(8,8,30,.92);
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -16px 35px rgba(1,2,18,.2), 0 16px 40px rgba(0,0,18,.35), 0 0 0 1px rgba(18,19,67,.7);
  transition: .22s var(--jg-ease);
}
.search-field::before { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(105deg, transparent 0 73%, rgba(104,77,255,.09) 73.2% 73.5%, transparent 73.7%); }
.search-field:focus-within { border-color: #836dff; box-shadow: inset 0 1px rgba(255,255,255,.1), 0 18px 50px rgba(0,0,20,.42), 0 0 26px rgba(92,67,255,.14); }
.search-field:focus-within::after { content:""; position:absolute; left:0; top:13px; bottom:13px; width:2px; background: var(--jg-red); box-shadow: 0 0 14px rgba(240,47,69,.48); }
.search-icon { position: absolute; left: 27px; width: 18px; height: 18px; border: 3px solid var(--jg-red); border-radius: 50%; }
.search-icon::after { content:""; position:absolute; width:9px; height:3px; background:var(--jg-red); right:-7px; bottom:-3px; transform:rotate(-48deg); border-radius:3px; }
.search-field input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 600; }
.search-field input::placeholder { color: #8f91b4; font-weight: 500; }
.search-field.locked { opacity: .7; }
.field-corner { position:absolute; width:25px; height:25px; right:-1px; bottom:-1px; border-right:2px solid var(--jg-red); border-bottom:2px solid var(--jg-red); border-radius:0 0 9px 0; filter:drop-shadow(0 0 6px rgba(240,47,69,.35)); }

.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  overflow: hidden;
  border: 1px solid rgba(111,85,255,.48); border-radius: 9px;
  background: rgba(9,9,30,.98); backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0,0,15,.62);
}
.suggestions button { width:100%; min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border:0; border-bottom:1px solid rgba(132,126,190,.12); background:transparent; cursor:pointer; text-align:left; }
.suggestions button:hover, .suggestions button:focus-visible { outline:0; background:linear-gradient(90deg, rgba(87,63,194,.36), rgba(31,25,85,.36)); }
.suggestions button span { font-weight:800; }
.suggestions button small { color:#9397b7; }
/* Joueur déjà proposé : réapparaît, non cliquable, avec la mention stylisée « joueur déjà utilisé ». */
.suggestions .sugg-used { width:100%; min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 22px; border-bottom:1px solid rgba(132,126,190,.12); opacity:.72; cursor:not-allowed; }
.suggestions .sugg-used span { font-weight:800; color:#c9c9df; }
.suggestions .sugg-used small { color:#8a8fb0; }
.suggestions .sugg-used__tag { flex:0 0 auto; font-style:normal; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#ffb3c1; padding:4px 10px; border-radius:999px; border:1px solid rgba(240,73,111,.5); background:rgba(60,14,30,.55); box-shadow:inset 0 1px rgba(255,255,255,.06); }

/* Liste « joueurs déjà utilisés » — s'affiche automatiquement sous la recherche à chaque mauvaise proposition. */
.used-list { margin:14px 0 4px; display:flex; flex-direction:column; gap:7px; }
.used-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; border:1px solid rgba(240,73,111,.28); background:linear-gradient(90deg, rgba(52,14,28,.5), rgba(20,17,44,.4)); }
.used-item__tag { flex:0 0 auto; font-style:normal; font-size:9.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#ffb3c1; padding:4px 9px; border-radius:999px; border:1px solid rgba(240,73,111,.5); background:rgba(60,14,30,.6); }
.used-item__name { font-weight:800; color:#fff; }
.used-item__first { color:#a9adcb; margin-left:auto; font-size:12px; }

/* ---------- BOARD ---------- */
#td-board-area { margin-top: 30px; }
.empty-board { min-height: 160px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#9da0ba; border-top:1px solid rgba(130,125,190,.11); border-bottom:1px solid rgba(130,125,190,.11); }
.empty-board .ball-mark { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(155,147,219,.35); border-radius:50%; color:var(--jg-red); font-family:"Archivo Black"; }
.empty-board h3 { margin:13px 0 4px; color:#fff; font-size:15px; text-transform:uppercase; }
.empty-board p { margin:0; font-size:12px; }
.board-wrap { overflow-x:auto; overflow-y:visible; padding: 0 0 24px; scrollbar-color:#554e8a #0b0b23; scrollbar-width:thin; }
.board { min-width: 1120px; }
.board-head, .guess-row { display:grid; grid-template-columns:1.15fr 1.05fr 1.08fr .95fr 1fr 1.12fr .72fr .66fr; gap:9px; }
.board-head { margin-bottom:9px; padding:0 4px; }
.board-head span { padding:0 6px; font-family:Inter, Arial, sans-serif; font-size:15.4px; font-weight:900; letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(180deg,#f4f2ff 0%,#c2b2ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 6px rgba(120,90,240,.3)); }
.guess-row { margin-bottom: 28px; perspective:1200px; }
.flip-cell { position:relative; min-width:0; height:96px; perspective:1100px; }
.flip-cell::before { content:""; position:absolute; z-index:-1; inset:5px -3px -5px 4px; border:1px solid rgba(111,85,255,.22); border-radius:9px; background:rgba(20,17,54,.35); transform:translate(2px,2px); }
.flip-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.flip-face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px 10px; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:9px; text-align:center; }
.flip-front { border:1px solid rgba(111,85,255,.44); background:linear-gradient(155deg,#171642,#090a25); box-shadow:inset 0 1px rgba(255,255,255,.07), var(--jg-shadow); color:#7661ff; font-family:"Archivo Black"; }
.flip-front .flip-logo { width:52px; height:52px; border-radius:11px; object-fit:cover; opacity:.97; box-shadow:0 3px 9px rgba(0,0,0,.4); }
.flip-back { transform:rotateY(180deg); border:1px solid rgba(128,117,205,.38); background:linear-gradient(155deg,rgba(26,24,68,.98),rgba(8,9,29,.98)); box-shadow:inset 0 1px rgba(255,255,255,.07), inset 0 -22px 40px rgba(0,0,10,.18), 0 17px 34px rgba(0,0,15,.34); color:#fff; font-size:18.2px; font-weight:800; }
.flip-back::before { content:""; position:absolute; pointer-events:none; inset:3px; border:1px solid rgba(255,255,255,.045); border-radius:6px; }
.player-cell { justify-content:flex-start; padding-left:20px; border-left:2px solid #6e57ff; background:linear-gradient(140deg,#151538,#090a21); }
.player-cell b { font-size:19.5px; }
.flip-back.correct { border-color:rgba(42,225,124,.58); background:linear-gradient(145deg,#10633f 0%,#0b4b33 55%,#082d24 100%); box-shadow:inset 0 1px rgba(255,255,255,.08), inset 0 -25px 40px rgba(1,30,20,.25), 0 0 20px rgba(24,190,101,.09), 0 17px 34px rgba(0,0,15,.34); }
.flip-back.wrong { border-color:rgba(247,48,76,.58); background:linear-gradient(145deg,#75182f 0%,#571328 56%,#350d20 100%); box-shadow:inset 0 1px rgba(255,255,255,.07), inset 0 -25px 40px rgba(36,0,10,.2), 0 0 20px rgba(240,47,69,.08), 0 17px 34px rgba(0,0,15,.34); }
.flip-back.result::after { position:absolute; left:50%; bottom:-18px; transform:translateX(-50%); display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#08091c; font-size:16px; font-weight:900; box-shadow:0 7px 14px rgba(0,0,12,.42); }
.flip-back.correct::after { content:"✓"; color:#37de86; border:2px solid #25ca71; }
.flip-back.wrong::after { content:"×"; color:#ff4058; border:2px solid #f02f45; }
.fig { font-size:28.6px; font-weight:900; font-variant-numeric:tabular-nums; }
.arw { width:25px; height:25px; margin-left:8px; fill:#ff4058; vertical-align:-4px; }
.arw.up { transform:rotate(180deg); }
.revealed .flip-inner { transform:rotateY(180deg); }
.revealing .flip-inner { animation:jg-flip .46s var(--jg-ease) var(--delay) both; }
@keyframes jg-flip { 0%{transform:rotateY(0) scale(1)} 48%{transform:rotateY(90deg) scale(1.025)} 100%{transform:rotateY(180deg) scale(1)} }

/* ---------- LEGEND ---------- */
.legend { width:max-content; max-width:100%; margin:0 auto; padding:13px 24px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; border:1px solid rgba(127,120,193,.25); border-radius:999px; background:linear-gradient(180deg,rgba(19,19,53,.72),rgba(9,9,29,.72)); box-shadow:inset 0 1px rgba(255,255,255,.04); color:#999db8; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.legend span { display:flex; align-items:center; gap:8px; }
.legend i { width:12px; height:12px; border-radius:50%; }
.legend i.correct { border:2px solid var(--jg-green); box-shadow:0 0 8px rgba(34,202,114,.25); }
.legend i.wrong { border:2px solid var(--jg-red); box-shadow:0 0 8px rgba(240,47,69,.25); }
.legend b { color:#dadcf0; font-size:15px; }

/* ---------- JOUEURS DÉJÀ UTILISÉS ---------- */
.used-players { width:min(1000px,100%); margin:18px auto 0; display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; }
.used-title { display:inline-flex; align-items:center; gap:13px; font-family:"Archivo Black",Inter,sans-serif; font-size:17.6px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  background:linear-gradient(90deg,#ff6db4 0%,#ff4058 52%,#ff8a4c 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 12px rgba(240,47,69,.4)); }
.used-title::before, .used-title::after { content:""; width:30px; height:2px; border-radius:2px; }
.used-title::before { background:linear-gradient(90deg, transparent, #ff5fb0); }
.used-title::after { background:linear-gradient(90deg, #ff8a4c, transparent); }
.used-list { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.used-chip { padding:11px 20px; border:1px solid rgba(111,85,255,.5); border-radius:999px; background:linear-gradient(180deg,rgba(24,20,67,.85),rgba(9,9,29,.85)); box-shadow:inset 0 1px rgba(255,255,255,.05), 0 6px 16px rgba(0,0,15,.35); color:#eaeaff; font-size:22.1px; font-weight:800; letter-spacing:.01em; }

/* ---------- INDICE (bouton rose, bas à droite) — verrouillé jusqu'à 5 mauvaises réponses ---------- */
.hint-fab { position:fixed; right:clamp(16px,2vw,30px); bottom:clamp(16px,2vw,30px); z-index:950; }
.hint-fab__btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 22px; min-height:52px;
  border:1px solid rgba(255,255,255,.32); border-radius:999px;
  cursor:pointer; color:#fff;
  font-family:"Archivo Black", Inter, sans-serif; font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  background:linear-gradient(180deg,#ff5fb0,#e5348c);
  box-shadow:0 12px 32px rgba(233,52,140,.45), inset 0 1px rgba(255,255,255,.38);
  transition:transform .18s var(--jg-ease), box-shadow .18s var(--jg-ease), background .2s ease;
}
.hint-fab__btn:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(233,52,140,.62), inset 0 1px rgba(255,255,255,.45); }
/* éléments internes pilotés par l'état */
.hint-fab__ic, .hint-fab__count, .hint-fab__reveal { display:none; }
.hint-fab__ic { align-items:center; justify-content:center; }
.hint-fab__ic--q { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22); font-size:14px; }
.hint-fab__ic--lock svg { display:block; }
.hint-fab__count { min-width:40px; padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.24); font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; }
.hint-fab__reveal b { margin-left:2px; font-size:1.35em; letter-spacing:.02em; }
/* Verrouillé : gris/violet, curseur d'aide, pas d'éclat */
.hint-fab.is-locked .hint-fab__btn { background:linear-gradient(180deg,#5b5170,#332a44); border-color:rgba(255,255,255,.2); box-shadow:0 10px 26px rgba(0,0,15,.42), inset 0 1px rgba(255,255,255,.14); cursor:help; }
.hint-fab.is-locked .hint-fab__ic--lock { display:inline-flex; }
.hint-fab.is-locked .hint-fab__count { display:inline-grid; place-items:center; }
/* Débloqué : rose vif + éclat */
.hint-fab.is-ready .hint-fab__ic--q { display:inline-flex; }
/* Révélé */
.hint-fab.is-open .hint-fab__reveal { display:inline; }
.hint-fab.is-open .hint-fab__label,
.hint-fab.is-open .hint-fab__ic,
.hint-fab.is-open .hint-fab__count { display:none; }
.hint-fab.is-open .hint-fab__btn { background:linear-gradient(180deg,#ff81c4,#d63a86); }
/* Éclat brillant : uniquement quand l'indice est débloqué */
.hint-fab__shine { position:absolute; top:-30%; left:0; width:42%; height:160%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform:translateX(-170%) skewX(-18deg); opacity:0; }
.hint-fab.is-ready .hint-fab__shine { animation:hintShine 7s ease-in-out infinite; }
@keyframes hintShine {
  0%   { transform:translateX(-170%) skewX(-18deg); opacity:0; }
  3%   { opacity:.92; }
  13%  { transform:translateX(330%) skewX(-18deg); opacity:0; }
  100% { transform:translateX(330%) skewX(-18deg); opacity:0; }
}
/* Point d'interrogation + infobulle explicative */
.hint-info { position:absolute; top:-10px; right:-10px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:linear-gradient(160deg,#211b4d,#0c0d29); color:#fff; font-family:"Archivo Black",Inter,sans-serif; font-size:14px; line-height:1; display:grid; place-items:center; cursor:help; box-shadow:0 6px 16px rgba(0,0,15,.5); }
.hint-info:hover { border-color:#ff5fb0; color:#ffd3ea; }
.hint-tip { position:absolute; right:0; bottom:calc(100% + 14px); width:min(268px,74vw); padding:13px 15px; border-radius:11px; border:1px solid rgba(121,87,255,.6); background:linear-gradient(160deg,#181640,#0a0b22); color:#e8e8f6; font-size:12.5px; font-weight:600; line-height:1.5; box-shadow:0 18px 44px rgba(0,0,15,.62); opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .18s var(--jg-ease), transform .18s var(--jg-ease); }
.hint-tip::after { content:""; position:absolute; right:16px; bottom:-7px; width:12px; height:12px; background:#0e0f2a; border-right:1px solid rgba(121,87,255,.6); border-bottom:1px solid rgba(121,87,255,.6); transform:rotate(45deg); }
.hint-info:hover ~ .hint-tip, .hint-fab.show-tip .hint-tip { opacity:1; transform:none; pointer-events:auto; }
@media (max-width:720px){ .hint-fab__btn{ padding:12px 17px; font-size:13px; min-height:46px; } .hint-tip{ font-size:12px; } }

/* ---------- MODE TEST (privé, injecté seulement si testMode) ---------- */
.test-mode { position:fixed; top:clamp(12px,2vw,20px); left:clamp(12px,2vw,20px); z-index:1400; display:flex; align-items:center; gap:11px; padding:9px 13px; border-radius:12px; border:1px dashed rgba(255,190,90,.7); background:linear-gradient(180deg,rgba(40,26,10,.92),rgba(22,15,7,.92)); box-shadow:0 12px 30px rgba(0,0,15,.5); backdrop-filter:blur(6px); }
.test-mode__badge { font-family:"Archivo Black",Inter,sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#ffcf7a; }
.test-mode__btn { border:1px solid rgba(255,190,90,.6); border-radius:8px; background:linear-gradient(180deg,#ffb347,#f0870f); color:#241405; font-family:"Archivo Black",Inter,sans-serif; font-size:12px; letter-spacing:.03em; text-transform:uppercase; padding:9px 14px; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.4); transition:transform .15s ease, box-shadow .15s ease; }
.test-mode__btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(240,135,15,.4), inset 0 1px rgba(255,255,255,.5); }
@media (max-width:720px){ .test-mode { gap:8px; padding:7px 10px; } .test-mode__btn { font-size:11px; padding:8px 11px; } }

/* ---------- END / MODALS ---------- */
#td-end { margin:25px auto 0; }
.end-card { width:min(720px,100%); margin:auto; padding:26px; border:1px solid rgba(111,85,255,.4); border-radius:12px; background:linear-gradient(145deg,rgba(24,20,67,.93),rgba(8,9,29,.94)); box-shadow:0 28px 70px rgba(0,0,15,.5); text-align:center; }
.end-card h3 { margin:0 0 8px; font-family:"Archivo Black"; text-transform:uppercase; }
.end-card button, .modal button:not(.modal-close) { border:1px solid rgba(128,105,255,.6); border-radius:7px; background:#40258d; padding:12px 17px; cursor:pointer; font-weight:800; }
.modal-backdrop { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:20px; background:rgba(3,3,13,.78); backdrop-filter:blur(14px); }
.modal { position:relative; width:min(600px,100%); max-height:85vh; overflow:auto; padding:34px; border:1px solid rgba(126,106,238,.5); border-radius:13px; background:linear-gradient(145deg,#181640,#08091f); box-shadow:0 40px 100px rgba(0,0,12,.7); }
.modal-close { position:absolute; right:15px; top:13px; width:36px; height:36px; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:transparent; cursor:pointer; font-size:23px; }
.td-eyebrow + h3, .modal h3 { font-family:"Archivo Black"; text-transform:uppercase; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:22px 0; }
.stats-grid div { padding:18px 8px; border:1px solid rgba(126,112,214,.24); background:rgba(255,255,255,.025); text-align:center; }
.stats-grid b { display:block; font-size:25px; }.stats-grid span{display:block;color:#a4a6c0;font-size:10px;text-transform:uppercase;margin-top:5px}
.td-toast { position:fixed; z-index:1200; left:50%; bottom:28px; transform:translateX(-50%); padding:12px 18px; border:1px solid rgba(117,91,255,.5); border-radius:8px; background:#10102b; box-shadow:0 18px 50px rgba(0,0,15,.45); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .jogadle { padding-inline:16px; }
  .game-shell { margin-top:28px; }
  .progress-row { grid-template-columns:125px 1fr 58px 1fr 125px; padding-inline:15px; }
  .progress-row > span,.progress-row > strong { font-size:9px; }
  .attempt-count { width:58px; }
}

@media (max-width: 720px) {
  .jogadle { min-height:100svh; padding-top:36px; }
  .td-eyebrow { font-size:9px; gap:9px; }.td-eyebrow i{width:18px}
  .td-hero h1 { margin-top:19px; }
  .td-hero h1 > span { font-size:clamp(29px,9vw,43px); }
  .td-hero h1 > em { margin-top:7px; font-size:clamp(18px,6vw,28px); }
  .td-hero > p { width:min(94%,540px); margin-top:18px; font-size:12px; }
  .daily-meta { gap:8px; margin-top:15px; font-size:14px; }.daily-meta .separator{width:4px;height:4px}
  .top-actions { margin-top:15px; }.icon-button{width:40px;height:40px}
  .progress-row { grid-template-columns:1fr 52px 1fr; min-height:52px; margin-top:22px; }
  .progress-row .progress-rail { display:none; }
  .progress-row > span{grid-column:1}.attempt-count{grid-column:2;width:52px;height:38px}.progress-row > strong{grid-column:3}
  .search-wrap { width:100%; margin-top:18px; }.search-field{height:60px;padding-left:57px}.search-icon{left:22px}
  #td-board-area { margin-top:24px; }
  .board-wrap { margin-inline:-16px; padding-inline:16px; }
  .board { min-width:1000px; }
  .flip-cell { height:86px; }
  .legend { width:100%; gap:12px 18px; padding:12px; border-radius:12px; }
  .empty-board { min-height:130px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
}

/* Bouton haut-parleur (coupe/active le son) — même style que les autres icônes du haut. */
.top-actions .sound-toggle svg{display:block}
.top-actions .sound-toggle.is-muted{opacity:.6}
.top-actions .sound-toggle.is-muted:hover{opacity:.85}

/* N° absent : petite explication sous le tiret (« pas de n° officiel »). */
.result.num .no-num{display:block;margin-top:3px;font-size:9.5px;font-weight:700;line-height:1.1;letter-spacing:.01em;text-transform:none;opacity:.92}
.result.num .fig.dash{line-height:1}

/* ============================================================
   Écran de résultat de fin de partie (note OVR + anneau) —
   style « Apple × EA », bleu roi, paliers de couleur.
   ============================================================ */
.end-card.jr{--a:#7cc0ff;--b:#2464d8;--glow:.4;max-width:500px;width:100%;text-align:center;padding:34px 30px 26px;border-radius:26px;
  background:linear-gradient(180deg,rgba(46,55,82,.92),rgba(28,36,60,.95));border:1px solid rgba(150,175,230,.18);
  box-shadow:0 40px 90px rgba(0,4,20,.55),inset 0 1px rgba(255,255,255,.08);color:#f5f7fb;
  font-family:-apple-system,"SF Pro Display",Inter,Arial,sans-serif}
.jr.jr-elite{--a:#3fd0ff;--b:#0a84ff;--glow:.9}
.jr.jr-high{--a:#6ab6ff;--b:#1e63d8;--glow:.55}
.jr.jr-mid{--a:#7cc0ff;--b:#2464d8;--glow:.4}
.jr.jr-low{--a:#93a6cf;--b:#42598f;--glow:.15}
.jr .jr-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;color:#9aa3ba;text-transform:uppercase}
.jr .jr-title{margin:10px 0 0;font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.12;color:#fff;
  text-transform:none;font-family:-apple-system,"SF Pro Display",Inter,Arial,sans-serif}
.jr .jr-title .jr-n{color:var(--a)}
.jr .jr-ring{position:relative;width:186px;height:186px;margin:20px auto 0}
.jr .jr-ring svg{width:186px;height:186px;transform:rotate(-90deg)}
.jr .jr-track{fill:none;stroke:rgba(255,255,255,.11);stroke-width:11}
.jr .jr-arc{fill:none;stroke:url(#jrg);stroke-width:11;stroke-linecap:round}
.jr .jr-s0{stop-color:var(--a)}.jr .jr-s1{stop-color:var(--b)}.jr .jr-glow{flood-color:var(--a);flood-opacity:var(--glow)}
.jr .jr-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jr .jr-ovr{font-size:56px;font-weight:700;letter-spacing:-.03em;line-height:.9;background:linear-gradient(180deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.jr .jr-rank{margin-top:2px;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--a);text-transform:uppercase}
.jr .jr-stars{margin-top:3px;font-size:12px;letter-spacing:3px}
.jr .jr-stars .on{color:var(--a)}.jr .jr-stars span:not(.on){color:rgba(150,170,210,.3)}
.jr .jr-beat{margin:16px 0 0;font-size:14.5px;color:#cfd6e6}.jr .jr-beat b{color:#fff;font-weight:600}
.jr .jr-grid{margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden}
.jr .jr-cell{background:rgba(40,49,74,.72);padding:14px 10px}
.jr .jr-cell--wide{grid-column:1 / -1}
.jr .jr-k{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:#9aa3ba;text-transform:uppercase}
.jr .jr-v{margin-top:4px;font-size:23px;font-weight:600;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.jr .jr-v.pos{color:#3ddc84}
.jr .jr-v .up{color:#3ddc84;font-style:normal;font-size:14px}.jr .jr-v .down{color:#ff6b6b;font-style:normal;font-size:14px}
.jr .jr-v sup{font-size:.55em}
.jr .jr-hint{margin:13px 0 0;font-size:12.5px;color:#8b93a8}.jr .jr-hint a{color:#5aa8ff;cursor:pointer;text-decoration:none}
.jr .jr-cd{margin:18px 0 0;font-size:14px;color:#9aa3ba}.jr .jr-cd b{color:#eef2fb;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.jr .jr-actions{margin:20px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.jr .jr-pill{display:inline-flex;align-items:center;gap:9px;min-width:250px;justify-content:center;padding:13px 26px;border-radius:980px;border:0;cursor:pointer;background:linear-gradient(180deg,#3a90ff,#0a4eb8);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;box-shadow:0 12px 26px rgba(10,60,150,.45);font-family:inherit}
.jr .jr-pill svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.jr .jr-links{display:flex;align-items:center;gap:22px}
.jr .jr-links a{display:inline-flex;align-items:center;gap:5px;color:#5aa8ff;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none}
@media (max-width:600px){.jr .jr-title{font-size:23px}.jr .jr-ovr{font-size:48px}.end-card.jr{padding:28px 20px 22px}}