:root{
  --ui-scale: 1.2;
  --max-width: 1480px;

  --hud-font: clamp(12px, 1.1vw, 16px);
  --hud-pad: calc(8px * var(--ui-scale));
  --card-radius: 16px;
  --table-ar: 16/9;

  /* Image de fond principale */
  --bg-image: url('/assets/bg/arena-night.png');

  /* Palette “bleu nuit + ice/electric” */
  --bg-1: #070c19;
  --bg-2: #0b1230;
  --panel: #0c152a;
  --line: #122644;

  --accent:    #79beff;
  --accent-2:  #3f6dff;
  --text:      #e2f0ff;
  --muted:     #a6c1da;

  --glow:      rgba(121,190,255,.75);
  --glow-2:    rgba(63,109,255,.55);

  --wheel-cell: 120px;
  --tile-space-bg: #0a1428;
  --dice-size: clamp(84px, 8.5vw, 112px);
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-image) center / cover fixed no-repeat;
  background-color: #000;
}

.app{max-width:var(--max-width);margin:16px auto;padding:0 16px}

/* ===== Topbar ===== */
.topbar{ position:fixed; right:14px; top:14px; z-index:5000; display:flex; gap:8px }
.icon-btn{
  width:36px;height:36px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(121,190,255,.25);
  background: linear-gradient(180deg, rgba(8,16,30,.9), rgba(6,12,22,.92));
  color: var(--accent);
  box-shadow:
    0 6px 14px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(121,190,255,.10),
    0 0 12px rgba(121,190,255,.12);
}
.vol-wrap{ position:relative }
.vol-pop{
  position:absolute; right:0; top:42px; display:none; padding:8px;
  background: rgba(12,18,34,.92);
  border:1px solid rgba(121,190,255,.18);
  border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.vol-pop.show{ display:block }
.vol-pop input[type="range"]{ width:140px }

/* ===== Cartes ===== */
.card{
  background:
    linear-gradient(180deg, rgba(10,16,30,.92), rgba(8,14,28,.92)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 10px, rgba(0,0,0,.012) 10px 20px);
  border:1px solid var(--line); border-radius:var(--card-radius); padding:14px; margin:12px 0;
  box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.card.glass{
  background:rgba(10,18,36,.62); backdrop-filter: blur(4px);
  border:1px solid rgba(121,190,255,.14);
}
.card.tiki-slab{
  background:
    linear-gradient(180deg, rgba(10,20,36,.92), rgba(8,14,28,.92)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, rgba(0,0,0,.03) 8px 16px);
  border:1px solid rgba(121,190,255,.18);
  box-shadow:
    inset 0 0 0 1px rgba(121,190,255,.10),
    inset 0 10px 40px rgba(0,0,0,.35),
    0 12px 28px rgba(0,0,0,.28);
}

/* ===== Boutons ===== */
.controls{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.controls.wrap{flex-wrap:wrap}
.controls.center{justify-content:center}
.controls .bottom{margin-top:6px}

.btn{
  padding:10px 14px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(121,190,255,.22);
  background:#0c152a; color:var(--text);
  transition:transform .08s, box-shadow .12s, filter .12s;
  box-shadow:0 1px 0 rgba(255,255,255,.04);
  font-weight: 900;
  letter-spacing: .3px;
}
.btn:hover{transform:translateY(-1px); filter: drop-shadow(0 0 10px rgba(121,190,255,.18));}
.btn:active{transform:translateY(0)}
.btn-green{
  background:
    radial-gradient(120px 40px at 50% -30%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(121,190,255,.95), rgba(40,113,198,.98));
  border-color: rgba(121,190,255,.45) !important;
  color:#07101a;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  box-shadow:0 8px 18px rgba(121,190,255,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-yellow{
  background:
    radial-gradient(120px 40px at 50% -30%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(180deg, rgba(63,109,255,.92), rgba(36,64,172,.96));
  border-color: rgba(63,109,255,.45) !important;
  color:#eef2ff;
  box-shadow:0 8px 18px rgba(63,109,255,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-red{
  background:
    radial-gradient(120px 40px at 50% -30%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(180deg, rgba(212,32,32,.92), rgba(140,18,18,.96));
  border-color: rgba(212,32,32,.5) !important;
  color:#ffeaea; box-shadow:0 8px 18px rgba(212,32,32,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ===== Stage / players ===== */
.stage{ display:flex; flex-direction:column; align-items:center; gap:12px; min-height: calc(100vh - 160px); justify-content:center; }
.players-row{
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px; width:100%; max-width: 1100px;
}
.player{
  background:
    linear-gradient(180deg, #0e1b2e, #0b1726),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 8px, rgba(0,0,0,.02) 8px 16px);
  border:1px solid rgba(121,190,255,.18);
  border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;
  box-shadow:inset 0 0 0 1px rgba(121,190,255,.08); position:relative;
}
.player img{width:28px;height:28px;border-radius:50%; border:1px solid rgba(121,190,255,.25)}
.player.left{opacity:.6}
.name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@keyframes turnGlow{
  0%{ box-shadow: 0 0 0 2px rgba(121,190,255,.65), 0 0 16px rgba(121,190,255,.25) }
  100%{ box-shadow: 0 0 0 2px rgba(63,109,255,.75), 0 0 20px rgba(63,109,255,.32) }
}
.player.is-turn{
  animation: turnGlow 1.1s ease-in-out infinite alternate;
  border-color: rgba(121,190,255,.5);
}

/* ===== Avatar picker compact ===== */
.picker{display:flex;align-items:center;gap:6px}
.picker button{
  width:22px;height:22px;padding:0;border-radius:6px;border:1px solid rgba(121,190,255,.25);background:#0d1730;color:var(--text);cursor:pointer;
  line-height:1;font-size:14px; flex:0 0 auto;
}
.picker--small #avatarCurrent{
  width:28px;height:28px;border-radius:8px;border:1px solid rgba(121,190,255,.25);display:block;
  object-fit:cover; aspect-ratio:1 / 1;
}

/* ===== PHRASE GRID ===== */
.phrase-grid{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:8px auto; max-width:1100px }
.word{ display:inline-flex; flex-wrap:nowrap; gap:6px }
.tile{
  min-width:38px; min-height:48px; padding:8px 12px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(121,190,255,.22);
  background:#ffffff; color:transparent;
  font-weight:900; font-size:22px; letter-spacing:1px; text-transform:uppercase;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 12px rgba(255,255,255,.12);
}
.tile.open{ color:#0b1220; box-shadow: inset 0 0 10px rgba(0,0,0,.06); }
.tile.space{ background: var(--tile-space-bg); border-color: transparent; box-shadow:none; }

/* glow + flip */
.tile.lit{ animation: tileGlow .22s ease-out; box-shadow: 0 0 0 3px var(--glow) inset, 0 0 20px var(--glow-2); }
@keyframes tileGlow{ 0%{ box-shadow: 0 0 0 0 rgba(121,190,255,0) inset, 0 0 0 rgba(63,109,255,0) } 100%{ box-shadow: 0 0 0 3px var(--glow) inset, 0 0 20px var(--glow-2) } }
.tile.flip{ animation: tileFlip .28s ease; }
@keyframes tileFlip{ 0%{ transform: rotateY(0deg) } 50%{ transform: rotateY(90deg) } 100%{ transform: rotateY(0deg) } }

/* ===== Alphabet ===== */
.alpha-grid{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:8px 0; }
.alpha{
  position:relative;
  padding:8px 10px; border-radius:10px;
  border:1px solid rgba(121,190,255,.22);
  background:#0f1b36; color:var(--text); cursor:pointer; font-weight:900;
  box-shadow: inset 0 0 0 1px rgba(121,190,255,.06);
}
.alpha.off{ opacity:.45; pointer-events:none }

/* >>> Croix rouge pour lettres déjà utilisées */
.alpha.used{ opacity:.75; }
.alpha.used::after{
  content:'✕';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#ff4d4d; font-weight:900; font-size:18px;
  text-shadow: 0 0 6px rgba(255,77,77,.5), 0 1px 0 rgba(0,0,0,.6);
  pointer-events:none;
}

/* ===== Bande-roue ===== */
.wheel-bar{
  position:relative; margin-top:8px; width:100%; max-width:1100px; height:56px;
  border:1px solid rgba(121,190,255,.22); border-radius:12px; overflow:hidden; background:#09152c;
  box-shadow: inset 0 0 30px rgba(121,190,255,.06);
}
.wheel-strip{ position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; will-change: transform; transform: translateX(0); }
.wheel-cell{
  width:var(--wheel-cell); flex:0 0 var(--wheel-cell); height:100%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:18px; letter-spacing:.5px; user-select:none;
  color:#eefaff; opacity:.95;
  background:
    linear-gradient(180deg, rgba(22,38,66,.88), rgba(12,24,46,.94));
  border-left:1px solid rgba(121,190,255,.08);
  border-right:1px solid rgba(121,190,255,.06);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Pointeur bleu collé en HAUT */
.wheel-pointer{
  position:absolute;
  top:-4px;               /* remonte le marqueur au bord supérieur */
  bottom:auto;            /* on annule l'étirement vertical */
  left:50%;
  transform:translateX(-50%); /* plus de translation verticale */
  height:18px;            /* petite hauteur en haut */
  display:flex; align-items:flex-start; justify-content:center;
  color: var(--accent);
  text-shadow: 0 0 10px var(--glow), 0 2px 6px rgba(0,0,0,.4);
  font-weight:900; pointer-events:none;
}
.wheel-last{ position:absolute; right:8px; top:50%; transform:translateY(-50%); font-weight:900; color:#cfe7ff }

/* ===== Overlays ===== */
.overlay-err{
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 9999;
  font-size: clamp(28px, 6vw, 90px); color: #e8f7ff;
  text-shadow: 0 0 10px var(--glow), 0 10px 24px rgba(0,0,0,.45), 0 0 28px var(--glow-2);
  letter-spacing: 1px;
}
.overlay-err.show{ display:flex; animation: overlayErr .7s ease both; }
@keyframes overlayErr{ 0%{ opacity:0; transform: scale(.96) } 40%{ opacity:1; transform: scale(1) } 100%{ opacity:1 } }

/* “Mot découvert par …” */
.overlay-solved{ position:fixed; inset:0; display:none; align-items:flex-start; justify-content:center; z-index:10000; padding-top:40px; }
.solved-card{
  background:
    linear-gradient(180deg, rgba(12,20,36,.92), rgba(10,16,30,.92)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 12px, rgba(0,0,0,.012) 12px 24px);
  border:1px solid rgba(121,190,255,.35);
  border-radius:16px; padding:12px 16px; text-align:center;
  box-shadow:0 16px 48px rgba(0,0,0,.45), inset 0 0 24px rgba(121,190,255,.12);
}
.solved-text{
  font-weight: 900;
  font-size: clamp(18px, 3.5vw, 36px);
  color: var(--accent);
  text-shadow: 0 0 14px var(--glow), 0 2px 0 rgba(0,0,0,.5);
}

/* Utils */
.small{color:var(--muted)}
.dim{color:var(--muted)}