/* =========================================================
   TURBOPIAF — Design tokens
   Thème : borne d'arcade nocturne (pas le bleu ciel classique)
   ========================================================= */
:root{
  --bg-void:      #0B0F1A;
  --bg-panel:     #131A2B;
  --bg-panel-2:   #1C2540;
  --line:         #2A3554;
  --text:         #E8ECF4;
  --text-dim:     #8792AC;
  --gold:         #FFD23F;   /* pièce d'arcade */
  --gold-dim:     #C79E1F;
  --pipe-green:   #4ADE80;
  --danger:       #FF5D5D;
  --scanline:     rgba(255,255,255,0.035);

  --font-display: 'Press Start 2P', monospace;
  --font-body:    'Space Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:var(--bg-void);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

body{
  min-height:100vh;
  display:flex;
  position:relative;
  overflow-x:hidden;
}

/* CRT scanline overlay — subtil, pas envahissant */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    var(--scanline) 0px,
    var(--scanline) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

a{ color:var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; }

button, input{ font-family:inherit; }

::selection{ background:var(--gold); color:var(--bg-void); }

/* Focus visible pour accessibilité clavier */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.stage{
  display:flex;
  width:100%;
  min-height:100vh;
}

/* ---- Panneau gauche : scène animée ---- */
.scene{
  position:relative;
  flex:1 1 50%;
  min-height:100vh;
  background:url('img/background.png') center bottom / cover no-repeat;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.scene__stars{ display:none; }

/* Tuyaux qui défilent en boucle (démo idle) */
.scene__pipes{
  position:absolute;
  top:0; bottom:112px; left:0;
  width:200%;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  gap:180px;
  padding-left:40px;
  animation:pipes-scroll 8s linear infinite;
  will-change:transform;
}
@keyframes pipes-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.pipe-pair{
  display:flex;
  flex-direction:column;
  height:100%;
  width:52px;
  flex-shrink:0;
  justify-content:space-between;
  opacity:.9;
}
.pipe{
  width:52px;
  background:url('img/pipe-green.png') center top / 52px 320px no-repeat;
  image-rendering:pixelated;
  /* Étire uniquement le corps du tuyau, le cap reste net */
  background-size:52px 100%;
}
.pipe--top{
  height:28%;
  transform:rotate(180deg);
  margin-bottom:auto;
}
.pipe--bottom{
  height:34%;
  margin-top:auto;
}
/* Variantes de hauteur pour un look plus naturel */
.pipe-pair:nth-child(2) .pipe--top,
.pipe-pair:nth-child(5) .pipe--top{ height:36%; }
.pipe-pair:nth-child(2) .pipe--bottom,
.pipe-pair:nth-child(5) .pipe--bottom{ height:26%; }
.pipe-pair:nth-child(3) .pipe--top,
.pipe-pair:nth-child(6) .pipe--top{ height:22%; }
.pipe-pair:nth-child(3) .pipe--bottom,
.pipe-pair:nth-child(6) .pipe--bottom{ height:40%; }

.bird-wrap{
  position:relative;
  z-index:3;
  animation:bob 1.5s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-8deg); }
  50%{ transform:translateY(-18px) rotate(6deg); }
}

.bird{
  width:51px;
  height:36px;
  image-rendering:pixelated;
  object-fit:contain;
  display:block;
}

.scene__caption{
  position:absolute;
  bottom:130px;
  left:0; right:0;
  text-align:center;
  z-index:3;
  pointer-events:none;
}

/* Sol qui défile (classique flappy) */
.scene__base{
  position:absolute;
  left:0; right:0; bottom:0;
  height:112px;
  background:url('img/base.png') repeat-x bottom / auto 112px;
  image-rendering:pixelated;
  z-index:2;
  animation:ground-scroll 1.2s linear infinite;
  will-change:background-position;
}
@keyframes ground-scroll{
  from{ background-position:0 0; }
  to{ background-position:-336px 0; }
}

.scene__logo{
  font-family:var(--font-display);
  font-size:clamp(18px, 2.6vw, 26px);
  color:var(--gold);
  text-shadow:3px 3px 0 rgba(0,0,0,.6);
  letter-spacing:1px;
}
.scene__version{
  margin-top:10px;
  font-size:11px;
  color:rgba(255,255,255,.7);
  letter-spacing:2px;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}

/* ---- Panneau droit : formulaire (coin-op panel) ---- */
.panel-col{
  flex:1 1 50%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:
    linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box;
  border-left:1px solid var(--line);
}

.cabinet{
  width:100%;
  max-width:380px;
}

.cabinet__eyebrow{
  font-size:11px;
  letter-spacing:3px;
  color:var(--gold-dim);
  margin-bottom:10px;
}

.cabinet__title{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.6;
  margin-bottom:8px;
}

.cabinet__sub{
  color:var(--text-dim);
  font-size:13px;
  margin-bottom:32px;
}

.field{
  margin-bottom:18px;
}
.field label{
  display:block;
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--text-dim);
  margin-bottom:8px;
  text-transform:uppercase;
}
.field input{
  width:100%;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:13px 14px;
  font-size:14px;
  border-radius:2px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{ color:#525E7D; }
.field input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,210,63,.15);
  outline:none;
}
.field-hint{ font-size:11px; color:var(--text-dim); margin-top:6px; }

.btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px;
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:1px;
  background:var(--gold);
  color:#22190A;
  border:none;
  border-radius:2px;
  cursor:pointer;
  box-shadow:0 4px 0 var(--gold-dim);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(4px); box-shadow:0 0 0 var(--gold-dim); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn--ghost{
  background:transparent;
  color:var(--text);
  box-shadow:none;
  border:1px solid var(--line);
  margin-top:12px;
}
.btn--ghost:active{ transform:none; box-shadow:none; }

.divider{
  display:flex; align-items:center; gap:12px;
  color:var(--text-dim); font-size:11px;
  margin:26px 0;
}
.divider::before, .divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}

.switch-line{
  text-align:center;
  font-size:13px;
  color:var(--text-dim);
}

.msg{
  margin-top:16px;
  padding:12px 14px;
  border-radius:2px;
  font-size:12.5px;
  line-height:1.5;
  display:none;
}
.msg--error{
  display:block;
  background:rgba(255,93,93,.1);
  border:1px solid rgba(255,93,93,.4);
  color:#FF9B9B;
}
.msg--ok{
  display:block;
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.4);
  color:#8CF0AE;
}

.coin-note{
  margin-top:28px;
  font-size:10.5px;
  color:var(--text-dim);
  text-align:center;
  letter-spacing:.5px;
}

@media (max-width: 860px){
  .stage{ flex-direction:column; }
  .scene{ min-height:300px; }
  .scene__caption{ bottom:90px; }
  .scene__base{ height:80px; background-size:auto 80px; }
  .scene__pipes{ bottom:80px; gap:140px; }
  .panel-col{ min-height:auto; padding:36px 20px 64px; border-left:none; border-top:1px solid var(--line); }
  .bird{ width:42px; height:30px; }
}

/* =========================================================
   HUB — page d'accueil après connexion
   ========================================================= */
/* Image de fond toujours visible au scroll — sans filtre / dégradé */
html:has(.hub),
body:has(.hub){
  background:url('img/background.png') center center / cover no-repeat fixed;
  background-color:var(--bg-void);
  overscroll-behavior-y:none;
}
.hub{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:url('img/background.png') center center / cover no-repeat fixed;
  background-color:var(--bg-void);
}

/* ---- barre du haut ---- */
.hub-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 28px;
  border-bottom:1px solid var(--line);
  background:rgba(19,26,43,.5);
  position:relative;
  z-index:20;
}
.hub-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.hub-brand__bird{
  width:34px;
  height:24px;
  image-rendering:pixelated;
  object-fit:contain;
  display:block;
}
.hub-brand__text{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--gold);
  letter-spacing:.5px;
}
.hub-brand__version{
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:1.5px;
  margin-top:4px;
}
.hub-who{
  display:flex;
  align-items:center;
  gap:14px;
}
.hub-who__name{
  font-size:13px;
  color:var(--text-dim);
}
.hub-who__name span{ color:var(--gold); font-weight:bold; }
.hub-who__coins{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--gold);
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:3px;
  padding:6px 10px;
}

.icon-btn{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--text);
  cursor:pointer;
  transition:border-color .15s ease, transform .08s ease;
}
.icon-btn:hover{ border-color:var(--gold); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:20px; height:20px; }

/* Menu déroulant paramètres (sous le bouton) */
.settings-wrap{
  position:relative;
  z-index:30;
}
.settings-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:280px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 16px 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  z-index:40;
}
.settings-dropdown[hidden]{ display:none !important; }
.settings-dropdown__title{
  font-family:var(--font-display);
  font-size:11px;
  color:var(--gold);
  letter-spacing:1px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.settings-dropdown .modal-row{
  padding:12px 0;
}
.settings-dropdown .btn--danger{
  margin-top:14px;
  width:100%;
}

/* ---- corps du hub ---- */
.hub-body{
  flex:1;
  display:grid;
  grid-template-columns:minmax(320px, 380px) 1fr;
  gap:32px;
  padding:40px 32px;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  align-items:start;
}

/* ---- colonne droite : actions ---- */
.hub-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  max-width:420px;
  width:100%;
  justify-self:end;
}
@media (max-width:720px){
  .hub-actions{
    grid-template-columns:1fr;
    max-width:100%;
    justify-self:stretch;
  }
}

.action-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:6px;
  aspect-ratio:1 / 1;
  min-height:0;
  padding:18px 16px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg-panel);
  cursor:pointer;
  text-decoration:none;
  color:var(--text);
  overflow:hidden;
  transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.action-card:hover{ transform:translateY(-2px); text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.action-card:active{ transform:translateY(0); }

.action-card--play{
  background:linear-gradient(135deg, #1C2540, #131A2B);
  border-color:var(--gold-dim);
}
.action-card--play:hover{ border-color:var(--gold); }
.action-card--play .action-card__icon{ color:var(--gold); }

.action-card--shop{ }
.action-card--shop:hover{ border-color:var(--pipe-green); }
.action-card--shop .action-card__icon{ color:var(--pipe-green); }

.action-card--levels{ }
.action-card--levels:hover{ border-color:#60a5fa; }
.action-card--levels .action-card__icon{ color:#60a5fa; }

.action-card--mission{ }
.action-card--mission:hover{ border-color:#f472b6; }
.action-card--mission .action-card__icon{ color:#f472b6; }

.action-card__icon{
  width:28px; height:28px;
  margin-bottom:2px;
}
.action-card__title{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.5px;
}
.action-card__sub{
  font-size:11px;
  color:var(--text-dim);
  line-height:1.35;
  max-width:14ch;
}
.action-card__corner{
  position:absolute;
  top:12px; right:12px;
  font-size:9px;
  letter-spacing:1px;
  color:var(--gold-dim);
}

.stat-strip{
  margin-top:8px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:6px;
  background:
    linear-gradient(135deg, rgba(255,210,63,.06), transparent 60%),
    var(--bg-panel);
  position:relative;
  overflow:hidden;
}
.stat-strip__label{
  font-size:10px;
  letter-spacing:2px;
  color:var(--text-dim);
  margin-bottom:10px;
}
.stat-strip__value{
  font-family:var(--font-display);
  font-size:26px;
  color:var(--gold);
  text-shadow:0 0 20px rgba(255,210,63,.25);
}

/* ---- leaderboard ---- */
.leaderboard{
  position:relative;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(28,37,64,.4) 0%, transparent 40%),
    var(--bg-panel);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.2);
  transform:translateX(-140px);
}
.leaderboard__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(11,15,26,.35);
}
.leaderboard__title{
  font-family:var(--font-display);
  font-size:12px;
  color:var(--gold);
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:8px;
}
.leaderboard__title::before{
  content:"🏆";
  font-size:14px;
  filter:grayscale(0);
}
.leaderboard__note{
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--text-dim);
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  padding:4px 8px;
  border-radius:3px;
}

.leaderboard__select-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  background:transparent;
  width:100%;
  box-sizing:border-box;
}
.leaderboard__select-label{
  font-size:11px;
  color:var(--text-dim);
  flex:0 0 auto;
}
.leaderboard__select{
  flex:0 1 auto;
  width:auto;
  min-width:110px;
  max-width:160px;
  box-sizing:border-box;
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
  color:var(--text-dim);
  background-color:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 26px 6px 10px;
  cursor:pointer;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:8px 5px;
}
.leaderboard__select:hover,
.leaderboard__select:focus{
  border-color:var(--gold-dim);
  color:var(--text);
  background-color:rgba(255,255,255,.06);
}
.leaderboard__select option{
  background:#121826;
  color:#e2e8f0;
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:13px;
  font-weight:500;
  padding:6px;
}

/* Liste du classement : ~6 lignes visibles (moins si écran petit),
   scroll interne uniquement — la page ne grandit pas */
/* Léger fade en bas de la liste (indique qu'on peut scroller) */
.leaderboard::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:28px;
  background:linear-gradient(to top, rgba(19,26,43,.75) 0%, transparent 100%);
  pointer-events:none;
  z-index:2;
  border-radius:0 0 8px 8px;
}
#leaderboard-body{
  overflow-y:auto;
  overflow-x:hidden;
  /* 6 lignes max — 299px pour ne pas laisser passer une 7e */
  max-height:299px;
  height:auto;
  min-height:0;
  flex:0 1 auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-dim) transparent;
}
#leaderboard-body::-webkit-scrollbar{
  width:6px;
}
#leaderboard-body::-webkit-scrollbar-track{
  background:transparent;
}
#leaderboard-body::-webkit-scrollbar-thumb{
  background:rgba(255,210,63,.35);
  border-radius:3px;
}
#leaderboard-body::-webkit-scrollbar-thumb:hover{
  background:rgba(255,210,63,.55);
}
/* Petits écrans : moins de lignes visibles */
@media (max-height:720px){
  #leaderboard-body{ max-height:calc(4 * 50px); }
}
@media (max-height:580px){
  #leaderboard-body{ max-height:calc(3 * 50px); }
}
@media (max-height:480px){
  #leaderboard-body{ max-height:calc(2 * 50px); }
}
@media (max-width:860px){
  #leaderboard-body{ max-height:calc(4 * 50px); }
}
@media (max-width:860px) and (max-height:640px){
  #leaderboard-body{ max-height:calc(2 * 50px); }
}

/* ---- lignes du classement ---- */
.lb-row{
  display:grid;
  grid-template-columns:40px 1fr 72px;
  align-items:center;
  height:50px;
  min-height:50px;
  max-height:50px;
  box-sizing:border-box;
  padding:0 16px;
  margin:0;
  border-bottom:1px solid rgba(42,53,84,.4);
  font-size:12px;
  transition:background .12s ease;
}
.lb-row__player{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.lb-row__avatar{
  width:28px; height:28px;
  border-radius:50%;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex-shrink:0;
  font-family:var(--font-display);
  font-size:9px;
  color:var(--text-dim);
}
.lb-row__avatar img{
  width:70%; height:70%;
  object-fit:contain;
  image-rendering:pixelated;
}
.lb-row__name{
  color:var(--text);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lb-row__name:hover{ color:var(--gold); text-decoration:none; }
.settings-link{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:var(--text);
  margin-bottom:4px;
}
.settings-link:hover{ text-decoration:none; }
.settings-link__label{
  font-size:13px;
  color:var(--text);
}
.settings-link:hover .settings-link__label{ color:var(--gold); }
.settings-link__hint{
  font-size:11px;
  color:var(--text-dim);
}
.lb-row:last-child{ border-bottom:none; }
.lb-row:hover{ background:rgba(255,255,255,.03); }

.lb-row__rank{
  font-family:var(--font-display);
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:.5px;
}
.lb-row--gold .lb-row__rank{ color:var(--gold); }
.lb-row--silver .lb-row__rank{ color:#C9D3E8; }
.lb-row--bronze .lb-row__rank{ color:#D8925A; }

.lb-row__score{
  text-align:right;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--text-dim);
}
.lb-row--gold .lb-row__score,
.lb-row--silver .lb-row__score,
.lb-row--bronze .lb-row__score{ color:var(--gold); }

.lb-row--me{
  background:rgba(255,210,63,.08);
  border-top:1px solid rgba(255,210,63,.25);
  border-bottom:1px solid rgba(255,210,63,.25);
  box-shadow:inset 3px 0 0 var(--gold);
}
.lb-row--me:hover{ background:rgba(255,210,63,.11); }
.lb-row--me .lb-row__name::after{
  content:"TOI";
  margin-left:8px;
  font-size:8px;
  font-family:var(--font-display);
  letter-spacing:1px;
  color:#22190A;
  background:var(--gold);
  padding:2px 5px;
  border-radius:2px;
  vertical-align:middle;
}

.lb-empty, .lb-loading{
  padding:28px 18px;
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  line-height:1.6;
}

.lb-divider-row{
  text-align:center;
  padding:6px 0;
  font-size:12px;
  color:var(--text-dim);
  letter-spacing:4px;
  opacity:.6;
}

/* ---- podium (top 3) ---- */
.podium{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  padding:24px 14px 20px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,210,63,.08), transparent 70%);
  min-height:160px;
}
.podium-loading{
  padding:28px 0;
  color:var(--text-dim);
  font-size:12px;
  text-align:center;
  width:100%;
}
.podium-spot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:104px;
  position:relative;
}
.podium-spot__medal{
  font-size:16px;
  line-height:1;
  margin-bottom:2px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.podium-spot--1 .podium-spot__medal{ font-size:20px; }
.podium-spot__avatar{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel-2);
  border:2px solid var(--line);
  font-family:var(--font-display);
  font-size:11px;
  color:var(--text);
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
}
.podium-spot__avatar img{
  width:70%; height:70%;
  object-fit:contain;
  image-rendering:pixelated;
}
.podium-spot__name{
  font-size:11px;
  color:var(--text);
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  font-weight:500;
  text-decoration:none;
}
.podium-spot__name:hover{ color:var(--gold); text-decoration:none; }
.podium-spot__score{
  font-family:var(--font-display);
  font-size:10px;
  color:var(--gold);
  margin-bottom:4px;
  white-space:nowrap;
  max-width:100%;
}
.podium-spot__bar{
  width:100%;
  border-radius:6px 6px 0 0;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-bottom:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding-top:8px;
  font-family:var(--font-display);
  font-size:13px;
  position:relative;
}

/* #1 — or */
.podium-spot--1 .podium-spot__bar{
  height:92px;
  background:linear-gradient(180deg, #3D3210 0%, #2A2410 40%, var(--bg-panel-2) 100%);
  border-color:var(--gold-dim);
  color:var(--gold);
  box-shadow:0 0 20px rgba(255,210,63,.15);
}
.podium-spot--1 .podium-spot__avatar{
  border-color:var(--gold);
  width:48px; height:48px;
  font-size:13px;
  box-shadow:0 0 12px rgba(255,210,63,.35);
}
.podium-spot--1 .podium-spot__name{ color:var(--gold); font-weight:bold; }
.podium-spot--1 .podium-spot__score{ font-size:11px; text-shadow:0 0 10px rgba(255,210,63,.4); }

/* Badge jours d'affilée — dans la barre #1, sous le chiffre */
.podium-spot__rank-num{
  line-height:1;
}
.podium-spot__streak{
  padding:2px 7px;
  border-radius:999px;
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:8px;
  font-weight:700;
  letter-spacing:.2px;
  color:#1a1408;
  background:linear-gradient(180deg, #FFE08A 0%, var(--gold) 100%);
  border:1px solid var(--gold-dim);
  box-shadow:0 1px 6px rgba(255,210,63,.3);
  white-space:nowrap;
  line-height:1.25;
}

/* #2 — argent */
.podium-spot--2 .podium-spot__bar{
  height:60px;
  background:linear-gradient(180deg, #2A3040 0%, var(--bg-panel-2) 100%);
  border-color:#6B7A99;
  color:#C9D3E8;
}
.podium-spot--2 .podium-spot__avatar{ border-color:#A8B4CC; }

/* #3 — bronze */
.podium-spot--3 .podium-spot__bar{
  height:46px;
  background:linear-gradient(180deg, #3A2A1A 0%, var(--bg-panel-2) 100%);
  border-color:#8B5E3C;
  color:#D8925A;
}
.podium-spot--3 .podium-spot__avatar{ border-color:#D8925A; }

.podium-empty{
  padding:28px 12px;
  color:var(--text-dim);
  font-size:12px;
  text-align:center;
  width:100%;
  line-height:1.6;
}

@media (max-width: 860px){
  .hub-body{ grid-template-columns:1fr; padding:24px 18px; gap:24px; }
  .leaderboard{ transform:none; }
  .podium{ min-height:140px; padding:18px 10px 16px; }
  .podium-spot{ width:92px; }
}

/* =========================================================
   MODAL — paramètres
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(6,8,14,.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
.modal-overlay.is-open{ display:flex; }

.modal{
  width:100%;
  max-width:360px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 24px;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.modal__title{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--gold);
}
.modal__close{
  background:none; border:none;
  color:var(--text-dim);
  font-size:18px;
  cursor:pointer;
  line-height:1;
  padding:4px;
}
.modal__close:hover{ color:var(--text); }

.modal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.modal-row:last-of-type{ border-bottom:none; }
.modal-row__label{ color:var(--text); }
.modal-row__hint{ font-size:11px; color:var(--text-dim); margin-top:3px; }

.toggle{
  position:relative;
  width:42px; height:24px;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:20px;
  cursor:pointer;
}
.toggle::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--text-dim);
  transition:transform .15s ease, background .15s ease;
}
.toggle.is-on{ border-color:var(--gold-dim); }
.toggle.is-on::after{ transform:translateX(18px); background:var(--gold); }

.modal .btn{ margin-top:22px; }
.modal .btn--danger{
  background:var(--danger);
  box-shadow:0 4px 0 #B93D3D;
  color:#2A0A0A;
}

/* ---- pages "bientôt disponible" (boutique / partie) ---- */
.soon-wrap{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.soon-card{
  text-align:center;
  max-width:440px;
}
.soon-card__icon{ font-size:38px; margin-bottom:18px; }
.soon-card h1{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--gold);
  margin-bottom:14px;
}
.soon-card p{
  color:var(--text-dim);
  font-size:13px;
  line-height:1.7;
  margin-bottom:26px;
}

/* ---- utilitaires prêts pour le moteur de jeu (jeu à venir) ---- */
.game-over-banner{
  width:184px;
  image-rendering:pixelated;
  display:block;
  margin:0 auto 18px;
}
.game-ground{
  background:url('img/base.png') repeat-x bottom / auto 100%;
  image-rendering:pixelated;
}

/* =========================================================
   CHAT — panneau latéral gauche
   ========================================================= */
.chat-toggle{
  position:fixed;
  left:16px;
  bottom:20px;
  z-index:60;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg-panel);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:border-color .15s ease, transform .1s ease;
}
.chat-toggle:hover{ border-color:var(--gold); }
.chat-toggle:active{ transform:scale(.94); }
.chat-toggle__icon{ font-size:20px; line-height:1; }
.chat-toggle__badge{
  position:absolute;
  top:4px; right:4px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--danger);
  border:2px solid var(--bg-panel);
}
.chat-toggle__badge[hidden]{ display:none; }

.chat-backdrop{
  position:fixed; inset:0;
  background:rgba(6,8,14,.45);
  z-index:70;
}
.chat-backdrop[hidden]{ display:none; }

.chat-panel{
  position:fixed;
  top:0; left:0; bottom:0;
  width:min(340px, 92vw);
  z-index:80;
  background:var(--bg-panel);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transform:translateX(-105%);
  transition:transform .22s ease;
  box-shadow:8px 0 32px rgba(0,0,0,.35);
}
.chat-panel.is-open{ transform:translateX(0); }

.chat-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(11,15,26,.4);
}
.chat-panel__title{
  font-family:var(--font-display);
  font-size:12px;
  color:var(--gold);
  letter-spacing:1px;
}
.chat-panel__close{
  background:none; border:none;
  color:var(--text-dim);
  font-size:16px;
  cursor:pointer;
  padding:4px 8px;
  line-height:1;
}
.chat-panel__close:hover{ color:var(--text); }

.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-empty{
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  padding:28px 12px;
  line-height:1.6;
}

.chat-msg{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 10px;
  max-width:95%;
}
.chat-msg--mine{
  align-self:flex-end;
  background:rgba(255,210,63,.08);
  border-color:rgba(255,210,63,.25);
}
.chat-msg__meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
  font-size:10px;
}
.chat-msg__user{
  color:var(--gold);
  text-decoration:none;
  font-weight:bold;
}
.chat-msg__user:hover{ text-decoration:underline; }
.chat-msg__time{ color:var(--text-dim); }
.chat-msg__body{
  font-size:13px;
  color:var(--text);
  line-height:1.45;
  word-break:break-word;
}

.chat-form{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--line);
  background:rgba(11,15,26,.35);
}
.chat-form input{
  flex:1;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:11px 12px;
  font-size:13px;
  font-family:inherit;
  border-radius:2px;
}
.chat-form input:focus{
  border-color:var(--gold);
  outline:none;
  box-shadow:0 0 0 2px rgba(255,210,63,.12);
}
.chat-send{
  width:42px;
  background:var(--gold);
  color:#22190A;
  border:none;
  border-radius:2px;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 2px 0 var(--gold-dim);
}
.chat-send:hover{ filter:brightness(1.05); }
.chat-send:disabled{ opacity:.5; cursor:not-allowed; }

/* Chat — emoji picker, reply, reactions */
.chat-emoji-btn{
  width:38px; height:38px;
  flex-shrink:0;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:2px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.chat-emoji-btn:hover{ border-color:var(--gold); }

.chat-emoji-picker{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:8px 10px;
  border-top:1px solid var(--line);
  background:rgba(11,15,26,.5);
  max-height:110px;
  overflow-y:auto;
}
.chat-emoji-picker[hidden]{ display:none !important; }
.chat-emoji-pick{
  width:32px; height:32px;
  background:transparent;
  border:1px solid transparent;
  border-radius:4px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.chat-emoji-pick:hover{
  background:var(--bg-panel-2);
  border-color:var(--line);
}

.chat-reply-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-top:1px solid var(--line);
  background:rgba(255,210,63,.06);
}
.chat-reply-bar[hidden]{ display:none !important; }
.chat-reply-bar__text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.chat-reply-bar__label{
  font-size:10px;
  color:var(--gold);
}
.chat-reply-bar__preview{
  font-size:11px;
  color:var(--text-dim);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-reply-bar__close{
  background:none; border:none;
  color:var(--text-dim);
  cursor:pointer;
  font-size:14px;
  padding:4px;
}

.chat-msg__reply{
  font-size:11px;
  color:var(--text-dim);
  margin-bottom:4px;
  padding:4px 6px;
  border-left:2px solid var(--gold-dim);
  background:rgba(0,0,0,.15);
  border-radius:0 3px 3px 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-msg__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
}
.chat-msg__reacts{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.chat-react{
  font-size:11px;
  padding:2px 6px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
  line-height:1.3;
}
.chat-react.is-mine{
  border-color:var(--gold-dim);
  background:rgba(255,210,63,.12);
}
.chat-msg__actions{
  display:flex;
  gap:2px;
  opacity:.55;
  transition:opacity .12s ease;
}
.chat-msg:hover .chat-msg__actions{ opacity:1; }
.chat-action{
  background:none;
  border:none;
  cursor:pointer;
  font-size:13px;
  padding:2px 4px;
  line-height:1;
  color:var(--text-dim);
}
.chat-action:hover{ color:var(--gold); }

.chat-react-picker{
  display:flex;
  gap:4px;
  margin-top:6px;
  padding:4px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:6px;
}
.chat-react-picker[hidden]{ display:none !important; }
.chat-react-picker button{
  background:none;
  border:1px solid transparent;
  border-radius:4px;
  cursor:pointer;
  font-size:16px;
  padding:2px 4px;
}
.chat-react-picker button:hover{
  background:var(--bg-panel-2);
  border-color:var(--line);
}

.chat-action--del:hover{ color:var(--danger); }

/* =========================================================
   TURBOPIAF — Dialogues custom (remplace alert/confirm/prompt)
   ========================================================= */
.tf-dialog-overlay{
  position:fixed; inset:0;
  background:rgba(6,8,14,.78);
  display:none;
  align-items:center; justify-content:center;
  z-index:9999;
  padding:20px;
  backdrop-filter: blur(2px);
}
.tf-dialog-overlay.is-open{ display:flex; animation: tf-fade-in .15s ease; }

@keyframes tf-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes tf-pop{
  from{ opacity:0; transform: scale(.94) translateY(8px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}

.tf-dialog{
  width:100%;
  max-width:400px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:22px 22px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,210,63,.08);
  animation: tf-pop .18s ease;
}
.tf-dialog__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  gap:12px;
}
.tf-dialog__title{
  font-family:var(--font-display);
  font-size:12px;
  color:var(--gold);
  letter-spacing:.04em;
}
.tf-dialog__close{
  background:none; border:none;
  color:var(--text-dim);
  font-size:16px;
  cursor:pointer;
  line-height:1;
  padding:4px 6px;
  border-radius:4px;
}
.tf-dialog__close:hover{ color:var(--text); background:rgba(255,255,255,.06); }

.tf-dialog__body{
  font-size:13px;
  line-height:1.55;
  color:var(--text);
  margin-bottom:16px;
  word-break:break-word;
}

.tf-dialog__input-wrap{ margin-bottom:16px; }
.tf-dialog__input{
  width:100%;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:13px;
  padding:10px 12px;
  outline:none;
}
.tf-dialog__input:focus{
  border-color:var(--gold-dim);
  box-shadow:0 0 0 2px rgba(255,210,63,.15);
}

.tf-dialog__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.tf-dialog__actions .btn{
  margin-top:0;
  min-width:100px;
  font-size:11px;
  padding:10px 14px;
}
.tf-dialog__actions .btn--ghost{
  background:transparent;
  border:1px solid var(--line);
  box-shadow:none;
  color:var(--text-dim);
}
.tf-dialog__actions .btn--ghost:hover{
  color:var(--text);
  border-color:var(--text-dim);
}

/* =========================================================
   APERÇU APPARENCE (bandeau + chips paramètres)
   ========================================================= */
.look-preview-banner{
  display:none;
  position:sticky; top:0; z-index:60; width:100%;
  background:linear-gradient(90deg, var(--bg-panel-2), var(--bg-panel));
  border-bottom:1px solid var(--gold);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  padding:10px 16px;
  align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px;
}
.look-preview-banner.is-on{ display:flex; }
/* Pendant l'aperçu d'une apparence : seul le bandeau reste cliquable */
.look-preview-banner.is-on ~ .hub-topbar,
.look-preview-banner.is-on ~ .hub-body{
  pointer-events:none;
  user-select:none;
}
.look-preview-banner__text{
  font-family:var(--font-display); font-size:10px; color:var(--gold); letter-spacing:.5px;
}
.look-preview-banner__text span{
  color:var(--text); font-family:var(--font-body); font-size:12px;
  margin-left:8px; letter-spacing:0;
}
.look-preview-banner__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.look-preview-banner__actions .btn{
  width:auto; padding:8px 12px; font-size:9px; margin:0;
}
.look-preview-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px 0 8px;
}
.look-chip{
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
  padding:8px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg-panel-2); cursor:pointer; text-align:left;
  color:var(--text); font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.look-chip:hover{ border-color:var(--gold-dim); }
.look-chip.is-active{
  border-color:var(--gold);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}
.look-chip__swatches{ display:flex; gap:4px; }
.look-chip__swatch{
  flex:1; height:14px; border-radius:3px; border:1px solid rgba(255,255,255,.12);
}
.look-chip__name{
  font-family:var(--font-display); font-size:8px; letter-spacing:.3px; color:var(--text);
}
.look-chip__meta{ font-size:10px; color:var(--text-dim); }
.look-chip__lock{ color:var(--gold); }


/* =========================================================
   LOOK — STUDIO (layout réel, sans rtl)
   ========================================================= */
html[data-look="studio"],
body[data-look="studio"]{
  --bg-void:#0C0E14;
  --bg-panel:#161B28;
  --bg-panel-2:#1E2538;
  --line:#2E3A55;
  --text:#F0F3FA;
  --text-dim:#9AA3B8;
  --gold:#7DD3FC;
  --gold-dim:#38BDF8;
  --pipe-green:#4ADE80;
  --danger:#FB7185;
  --scanline:rgba(125,211,252,.03);
}

html[data-look="studio"] .hub,
body[data-look="studio"] .hub{
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 70% 0%, rgba(125,211,252,.10), transparent 55%),
    linear-gradient(180deg, #0C0E14 0%, #10141F 100%);
}
html[data-look="studio"] body::before,
body[data-look="studio"]::before{ opacity:.35; }

html[data-look="studio"] .hub-topbar,
body[data-look="studio"] .hub-topbar{
  padding:14px 20px;
  border-bottom:none;
  background:transparent;
  flex-wrap:wrap;
  gap:10px;
}
html[data-look="studio"] .hub-brand__text,
body[data-look="studio"] .hub-brand__text{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--text); text-shadow:none;
}
html[data-look="studio"] .hub-who,
body[data-look="studio"] .hub-who{ flex-wrap:wrap; }
html[data-look="studio"] .hub-who__coins,
body[data-look="studio"] .hub-who__coins{
  border-radius:999px; padding:8px 14px;
  background:rgba(125,211,252,.1); border:1px solid rgba(125,211,252,.25);
}
html[data-look="studio"] .icon-btn,
body[data-look="studio"] .icon-btn{
  width:44px; height:44px; border-radius:999px;
  background:var(--bg-panel); border:1px solid var(--line);
}

/* Colonnes: actions à gauche, classement à droite via grid-areas */
html[data-look="studio"] .hub-body,
body[data-look="studio"] .hub-body{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas:"actions board";
  gap:28px;
  padding:24px 24px 48px;
  max-width:1100px;
  width:100%;
  margin:0 auto;
  box-sizing:border-box;
}
html[data-look="studio"] .hub-body > .hub-actions,
body[data-look="studio"] .hub-body > .hub-actions{
  grid-area:actions;
  max-width:400px !important;
  width:100% !important;
  justify-self:stretch;
  align-self:start;
  gap:14px !important;
  box-sizing:border-box;
}
html[data-look="studio"] .leaderboard,
body[data-look="studio"] .leaderboard{
  grid-area:board;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}

html[data-look="studio"] .menu-btn,
body[data-look="studio"] .menu-btn{
  flex-direction:column !important;
  align-items:center !important;
  text-align:center;
  gap:10px !important;
  padding:20px 16px !important;
  border-radius:18px;
  border:1px solid rgba(125,211,252,.18);
  background:var(--bg-panel);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
html[data-look="studio"] .menu-btn::before,
body[data-look="studio"] .menu-btn::before{ display:none !important; }
html[data-look="studio"] .menu-btn:hover,
body[data-look="studio"] .menu-btn:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(125,211,252,.45);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}
html[data-look="studio"] .menu-btn__icon,
body[data-look="studio"] .menu-btn__icon{
  width:52px !important; height:52px !important;
  border-radius:14px;
  background:rgba(125,211,252,.12);
  border:1px solid rgba(125,211,252,.25);
}
html[data-look="studio"] .menu-btn__icon svg,
body[data-look="studio"] .menu-btn__icon svg{
  width:24px !important; height:24px !important; color:var(--gold) !important;
}
html[data-look="studio"] .menu-btn__text,
body[data-look="studio"] .menu-btn__text{ width:100%; min-width:0; }
html[data-look="studio"] .menu-btn__title,
body[data-look="studio"] .menu-btn__title{ font-size:12px; letter-spacing:1px; }
html[data-look="studio"] .menu-btn__sub,
body[data-look="studio"] .menu-btn__sub{
  max-width:100% !important; margin-top:4px; opacity:.85;
  overflow:hidden; text-overflow:ellipsis;
}
html[data-look="studio"] .menu-btn__arrow,
body[data-look="studio"] .menu-btn__arrow{ display:none !important; }

html[data-look="studio"] .menu-btn--hero,
body[data-look="studio"] .menu-btn--hero{
  padding:24px 16px !important;
  background:linear-gradient(165deg, rgba(125,211,252,.16), var(--bg-panel) 55%);
  border-color:rgba(125,211,252,.35);
}
html[data-look="studio"] .menu-btn--hero .menu-btn__title,
body[data-look="studio"] .menu-btn--hero .menu-btn__title{ font-size:15px; }

html[data-look="studio"] .menu-row,
body[data-look="studio"] .menu-row{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:12px !important;
  width:100%;
}
html[data-look="studio"] .menu-row .menu-btn,
body[data-look="studio"] .menu-row .menu-btn{
  flex-direction:column !important;
  align-items:center !important;
}

html[data-look="studio"] .leaderboard,
body[data-look="studio"] .leaderboard{
  border-radius:20px;
  border:1px solid rgba(125,211,252,.15);
  background:var(--bg-panel);
  box-shadow:0 14px 36px rgba(0,0,0,.3);
  padding:8px;
  transform:none !important;
  overflow:hidden;
}
html[data-look="studio"] .leaderboard__head,
body[data-look="studio"] .leaderboard__head{ padding:16px 16px 8px; border:none; }
html[data-look="studio"] .leaderboard__title,
body[data-look="studio"] .leaderboard__title{
  font-size:11px; letter-spacing:2px; color:var(--text);
}
html[data-look="studio"] .leaderboard__title::before,
body[data-look="studio"] .leaderboard__title::before{ display:none; }
html[data-look="studio"] .podium,
body[data-look="studio"] .podium{ gap:8px; padding:8px 10px 14px; }
html[data-look="studio"] .podium-spot,
body[data-look="studio"] .podium-spot{
  background:var(--bg-panel-2); border-radius:14px; padding:10px 6px;
  border:1px solid var(--line); min-width:0;
}
html[data-look="studio"] .podium-spot__avatar,
body[data-look="studio"] .podium-spot__avatar{
  border-radius:50%; border:2px solid rgba(125,211,252,.35);
}
html[data-look="studio"] .podium-spot__name,
body[data-look="studio"] .podium-spot__name{
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
html[data-look="studio"] .lb-row,
body[data-look="studio"] .lb-row{
  margin:4px 6px; padding:10px 12px; border-radius:12px;
  background:var(--bg-panel-2); border:1px solid transparent;
  box-sizing:border-box;
}
html[data-look="studio"] .lb-row:hover,
body[data-look="studio"] .lb-row:hover{
  border-color:rgba(125,211,252,.3); background:rgba(125,211,252,.06);
}

html[data-look="studio"] .btn,
body[data-look="studio"] .btn{
  border-radius:999px; padding:14px 18px;
  background:var(--gold); color:#0B1220;
  box-shadow:0 5px 0 var(--gold-dim); letter-spacing:1px;
  box-sizing:border-box;
}
html[data-look="studio"] .btn:active,
body[data-look="studio"] .btn:active{
  transform:translateY(3px); box-shadow:0 2px 0 var(--gold-dim);
}
html[data-look="studio"] .btn--ghost,
body[data-look="studio"] .btn--ghost{
  border-radius:999px; background:transparent;
  border:1px solid var(--line); color:var(--text); box-shadow:none;
}
html[data-look="studio"] .settings-dropdown,
html[data-look="studio"] .tf-dialog,
body[data-look="studio"] .settings-dropdown,
body[data-look="studio"] .tf-dialog{
  border-radius:18px; border:1px solid rgba(125,211,252,.2);
  box-shadow:0 20px 48px rgba(0,0,0,.5);
  max-width:min(280px, calc(100vw - 24px));
}
html[data-look="studio"] .field input,
body[data-look="studio"] .field input{ border-radius:12px; }
html[data-look="studio"] .toggle,
body[data-look="studio"] .toggle{ border-radius:999px; }
html[data-look="studio"] .toggle.is-on,
body[data-look="studio"] .toggle.is-on{ background:var(--gold); }

@media (max-width:860px){
  html[data-look="studio"] .hub-body,
  body[data-look="studio"] .hub-body{
    grid-template-columns:1fr !important;
    grid-template-areas:"actions" "board";
    gap:20px; padding:16px 14px 40px;
  }
  html[data-look="studio"] .hub-body > .hub-actions,
  body[data-look="studio"] .hub-body > .hub-actions{
    max-width:100% !important;
  }
}

/* =========================================================
   LOOK — AFFICHE / POSTER (style only, même disposition)
   ========================================================= */
html[data-look="poster"],
body[data-look="poster"]{
  --bg-void:#111111;
  --bg-panel:#1A1A1A;
  --bg-panel-2:#242424;
  --line:#000000;
  --text:#FAFAF5;
  --text-dim:#A8A89C;
  --gold:#FFE500;
  --gold-dim:#C4B000;
  --pipe-green:#00E676;
  --danger:#FF1744;
  --scanline:rgba(255,229,0,.03);
}

html[data-look="poster"] .hub,
body[data-look="poster"] .hub{ overflow-x:hidden; }

html[data-look="poster"] body::before,
body[data-look="poster"]::before{ opacity:.35; }

html[data-look="poster"] .hub-topbar,
body[data-look="poster"] .hub-topbar{
  background:var(--gold);
  border-bottom:4px solid #000;
}
html[data-look="poster"] .hub-brand__text,
body[data-look="poster"] .hub-brand__text{
  color:#000 !important;
  text-shadow:none !important;
  letter-spacing:2px;
}
html[data-look="poster"] .hub-who__name,
body[data-look="poster"] .hub-who__name{ color:#222; }
html[data-look="poster"] .hub-who__name span,
body[data-look="poster"] .hub-who__name span{ color:#000; }
html[data-look="poster"] .hub-who__coins,
body[data-look="poster"] .hub-who__coins{
  background:#000; color:var(--gold);
  border:2px solid #000; border-radius:0;
}
html[data-look="poster"] .icon-btn,
body[data-look="poster"] .icon-btn{
  background:#000; color:var(--gold);
  border:2px solid #000; border-radius:0;
}

html[data-look="poster"] .menu-btn,
body[data-look="poster"] .menu-btn{
  border-radius:0 !important;
  border:3px solid #000 !important;
  background:var(--bg-panel);
  box-shadow:5px 5px 0 #000;
}
html[data-look="poster"] .menu-btn::before,
body[data-look="poster"] .menu-btn::before{
  width:6px; border-radius:0; background:var(--gold);
}
html[data-look="poster"] .menu-btn:hover,
body[data-look="poster"] .menu-btn:hover{
  background:var(--gold) !important;
  color:#000 !important;
  border-color:#000 !important;
  box-shadow:3px 3px 0 #000;
  transform:translate(2px, 2px) !important;
  text-decoration:none;
}
html[data-look="poster"] .menu-btn:hover .menu-btn__title,
html[data-look="poster"] .menu-btn:hover .menu-btn__sub,
html[data-look="poster"] .menu-btn:hover .menu-btn__arrow,
body[data-look="poster"] .menu-btn:hover .menu-btn__title,
body[data-look="poster"] .menu-btn:hover .menu-btn__sub,
body[data-look="poster"] .menu-btn:hover .menu-btn__arrow{ color:#000 !important; }
html[data-look="poster"] .menu-btn:hover .menu-btn__icon,
body[data-look="poster"] .menu-btn:hover .menu-btn__icon{
  background:#000; border-color:#000;
}
html[data-look="poster"] .menu-btn:hover .menu-btn__icon svg,
body[data-look="poster"] .menu-btn:hover .menu-btn__icon svg{ color:var(--gold) !important; }
html[data-look="poster"] .menu-btn__icon,
body[data-look="poster"] .menu-btn__icon{
  border-radius:0 !important;
  border:2px solid #000 !important;
  background:var(--gold);
}
html[data-look="poster"] .menu-btn__icon svg,
body[data-look="poster"] .menu-btn__icon svg{ color:#000 !important; }
html[data-look="poster"] .menu-btn--hero,
body[data-look="poster"] .menu-btn--hero{
  background:#000;
  box-shadow:6px 6px 0 #000;
}
html[data-look="poster"] .menu-btn--hero .menu-btn__title,
body[data-look="poster"] .menu-btn--hero .menu-btn__title{ color:var(--gold); }

html[data-look="poster"] .leaderboard,
body[data-look="poster"] .leaderboard{
  border-radius:0;
  border:3px solid #000;
  box-shadow:6px 6px 0 #000;
  background:var(--bg-panel);
  transform:none !important;
}
html[data-look="poster"] .leaderboard__head,
body[data-look="poster"] .leaderboard__head{
  background:var(--gold);
  border-bottom:3px solid #000;
}
html[data-look="poster"] .leaderboard__title,
body[data-look="poster"] .leaderboard__title{
  color:#000 !important;
  text-shadow:none !important;
  letter-spacing:2px;
}
html[data-look="poster"] .leaderboard__title::before,
body[data-look="poster"] .leaderboard__title::before{ display:none; }
html[data-look="poster"] .leaderboard__note,
body[data-look="poster"] .leaderboard__note{ color:#333; }
html[data-look="poster"] .leaderboard__select,
body[data-look="poster"] .leaderboard__select{
  border-radius:0; border:2px solid #000; background:#fff; color:#000;
}
html[data-look="poster"] .podium-spot__avatar,
body[data-look="poster"] .podium-spot__avatar{
  border-radius:0; border:2px solid #000;
}
html[data-look="poster"] .lb-row,
body[data-look="poster"] .lb-row{
  border-radius:0; border-bottom:2px solid #000;
}
html[data-look="poster"] .lb-row:hover,
body[data-look="poster"] .lb-row:hover{ background:var(--gold); color:#000; }
html[data-look="poster"] .lb-row:hover .lb-row__name,
html[data-look="poster"] .lb-row:hover .lb-row__rank,
html[data-look="poster"] .lb-row:hover .lb-row__score,
body[data-look="poster"] .lb-row:hover .lb-row__name,
body[data-look="poster"] .lb-row:hover .lb-row__rank,
body[data-look="poster"] .lb-row:hover .lb-row__score{ color:#000 !important; }

html[data-look="poster"] .btn,
body[data-look="poster"] .btn{
  border-radius:0;
  border:3px solid #000;
  background:var(--gold);
  color:#000;
  box-shadow:4px 4px 0 #000;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
html[data-look="poster"] .btn:hover,
body[data-look="poster"] .btn:hover{
  filter:none;
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 #000;
}
html[data-look="poster"] .btn:active,
body[data-look="poster"] .btn:active{
  transform:translate(4px,4px);
  box-shadow:0 0 0 #000;
}
html[data-look="poster"] .btn--ghost,
body[data-look="poster"] .btn--ghost{
  background:transparent; color:var(--text);
  border:3px solid #000; box-shadow:4px 4px 0 #000;
}
html[data-look="poster"] .btn--danger,
body[data-look="poster"] .btn--danger{
  background:var(--danger); color:#fff;
  border:3px solid #000; box-shadow:4px 4px 0 #000;
}
html[data-look="poster"] .settings-dropdown,
html[data-look="poster"] .tf-dialog,
body[data-look="poster"] .settings-dropdown,
body[data-look="poster"] .tf-dialog{
  border-radius:0;
  border:3px solid #000;
  box-shadow:8px 8px 0 #000;
  background:var(--bg-panel);
}
html[data-look="poster"] .field input,
body[data-look="poster"] .field input{
  border-radius:0; border:2px solid #000;
}
html[data-look="poster"] .toggle,
body[data-look="poster"] .toggle{
  border-radius:0; border:2px solid #000;
}
html[data-look="poster"] .toggle.is-on,
body[data-look="poster"] .toggle.is-on{ background:var(--gold); }

/* =========================================================
   LOOK — BRUTAL (style only, même disposition)
   ========================================================= */
html[data-look="brutal"],
body[data-look="brutal"]{
  --bg-void:#0A0A0A;
  --bg-panel:#141414;
  --bg-panel-2:#1C1C1C;
  --line:#3A3A3A;
  --text:#F5F5F0;
  --text-dim:#9A9A90;
  --gold:#FF6B00;
  --gold-dim:#B84A00;
  --pipe-green:#A3E635;
  --danger:#EF4444;
  --scanline:rgba(255,107,0,.04);
}

html[data-look="brutal"] .hub,
body[data-look="brutal"] .hub{ overflow-x:hidden; }

html[data-look="brutal"] body::before,
body[data-look="brutal"]::before{
  opacity:.5;
  background:repeating-linear-gradient(
    to bottom,
    var(--scanline) 0 2px,
    transparent 2px 5px
  );
}

html[data-look="brutal"] .hub-topbar,
body[data-look="brutal"] .hub-topbar{
  border-bottom:3px solid #000;
  background:var(--bg-panel);
}
html[data-look="brutal"] .hub-brand__text,
body[data-look="brutal"] .hub-brand__text{
  text-shadow:3px 3px 0 #000;
  letter-spacing:1px;
}
html[data-look="brutal"] .hub-who__coins,
body[data-look="brutal"] .hub-who__coins{
  border-radius:0;
  border:2px solid #000;
  box-shadow:3px 3px 0 #000;
  background:var(--gold);
  color:#1A0A00;
}
html[data-look="brutal"] .icon-btn,
body[data-look="brutal"] .icon-btn{
  border-radius:0;
  border:2px solid #000;
  box-shadow:3px 3px 0 #000;
}

html[data-look="brutal"] .btn,
body[data-look="brutal"] .btn{
  border-radius:0;
  background:var(--gold);
  color:#1A0A00;
  border:3px solid #000;
  box-shadow:5px 5px 0 #000;
  letter-spacing:2px;
  text-transform:uppercase;
}
html[data-look="brutal"] .btn:hover,
body[data-look="brutal"] .btn:hover{
  filter:none;
  background:#FF8533;
  box-shadow:3px 3px 0 #000;
  transform:translate(2px, 2px);
}
html[data-look="brutal"] .btn:active,
body[data-look="brutal"] .btn:active{
  transform:translate(5px, 5px);
  box-shadow:0 0 0 #000;
}
html[data-look="brutal"] .btn--ghost,
body[data-look="brutal"] .btn--ghost{
  background:transparent;
  color:var(--text);
  border:3px solid var(--text);
  box-shadow:4px 4px 0 var(--line);
  border-radius:0;
}
html[data-look="brutal"] .btn--danger,
body[data-look="brutal"] .btn--danger{
  background:var(--danger);
  color:#fff;
  border:3px solid #000;
  box-shadow:5px 5px 0 #000;
}

html[data-look="brutal"] .menu-btn,
body[data-look="brutal"] .menu-btn{
  border-radius:0 !important;
  border:3px solid #000 !important;
  background:var(--bg-panel);
  box-shadow:6px 6px 0 #000;
}
html[data-look="brutal"] .menu-btn::before,
body[data-look="brutal"] .menu-btn::before{
  width:8px;
  background:var(--gold);
  box-shadow:none;
  border-radius:0;
}
html[data-look="brutal"] .menu-btn:hover,
body[data-look="brutal"] .menu-btn:hover{
  transform:translate(-2px, -2px) !important;
  box-shadow:8px 8px 0 #000;
  border-color:#000 !important;
  text-decoration:none;
}
html[data-look="brutal"] .menu-btn:active,
body[data-look="brutal"] .menu-btn:active{
  transform:translate(2px, 2px) !important;
  box-shadow:2px 2px 0 #000;
}
html[data-look="brutal"] .menu-btn__icon,
body[data-look="brutal"] .menu-btn__icon{
  border-radius:0 !important;
  border:2px solid #000 !important;
  background:var(--gold);
}
html[data-look="brutal"] .menu-btn__icon svg,
body[data-look="brutal"] .menu-btn__icon svg{ color:#1A0A00 !important; }
html[data-look="brutal"] .menu-btn--hero,
body[data-look="brutal"] .menu-btn--hero{
  background:#1A1A1A;
  box-shadow:7px 7px 0 #000;
}

html[data-look="brutal"] .leaderboard,
body[data-look="brutal"] .leaderboard{
  border-radius:0;
  border:3px solid #000;
  box-shadow:8px 8px 0 #000;
  background:var(--bg-panel);
  transform:none !important;
}
html[data-look="brutal"] .leaderboard__title,
body[data-look="brutal"] .leaderboard__title{
  text-shadow:3px 3px 0 #000;
  letter-spacing:2px;
}
html[data-look="brutal"] .leaderboard__title::before,
body[data-look="brutal"] .leaderboard__title::before{ display:none; }
html[data-look="brutal"] .lb-row,
body[data-look="brutal"] .lb-row{
  border-radius:0;
  border-bottom:2px solid var(--line);
}
html[data-look="brutal"] .podium-spot__avatar,
body[data-look="brutal"] .podium-spot__avatar{
  border-radius:0;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000;
}

html[data-look="brutal"] .settings-dropdown,
html[data-look="brutal"] .tf-dialog,
body[data-look="brutal"] .settings-dropdown,
body[data-look="brutal"] .tf-dialog{
  border-radius:0;
  border:3px solid #000;
  box-shadow:8px 8px 0 #000;
  background:var(--bg-panel);
}
html[data-look="brutal"] .field input,
body[data-look="brutal"] .field input{
  border-radius:0; border:2px solid #000;
}
html[data-look="brutal"] .toggle,
body[data-look="brutal"] .toggle{
  border-radius:0; border:2px solid #000;
}
html[data-look="brutal"] .toggle.is-on,
body[data-look="brutal"] .toggle.is-on{ background:var(--gold); }

/* ---- Menu contextuel (clic droit) ---- */
.tf-ctx{
  position:fixed;
  z-index:10050;
  min-width:220px;
  max-width:min(280px, calc(100vw - 16px));
  padding:8px;
  background:var(--panel, #131A2B);
  border:2px solid var(--gold, #FFD23F);
  border-radius:10px;
  box-shadow:0 8px 0 rgba(0,0,0,0.45), 0 16px 40px rgba(0,0,0,0.5);
  font-family:inherit;
  color:var(--text, #E8ECF4);
  user-select:none;
}
.tf-ctx__title{
  font-family:var(--font-display), monospace;
  font-size:9px;
  letter-spacing:0.08em;
  color:var(--gold, #FFD23F);
  padding:4px 8px 8px;
  opacity:0.9;
}
.tf-ctx__sep{
  height:1px;
  margin:6px 4px;
  background:rgba(255,255,255,0.12);
}
.tf-ctx__item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
  padding:8px 10px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background 0.12s, transform 0.08s;
}
.tf-ctx__item:hover,
.tf-ctx__item:focus-visible{
  background:rgba(255,210,63,0.14);
  outline:none;
}
.tf-ctx__item:active{ transform:translateY(1px); }
.tf-ctx__item.is-active{
  background:rgba(255,210,63,0.2);
  box-shadow:inset 0 0 0 1px rgba(255,210,63,0.35);
}
.tf-ctx__icon{
  width:1.4em;
  text-align:center;
  flex-shrink:0;
  font-size:14px;
}
.tf-ctx__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tf-ctx__label{
  font-family:var(--font-display), monospace;
  font-size:10px;
  line-height:1.2;
}
.tf-ctx__hint{
  font-size:10px;
  color:var(--text-dim, #8B93A7);
  line-height:1.2;
}
html[data-look="brutal"] .tf-ctx,
body[data-look="brutal"] .tf-ctx{
  border-radius:0;
  border:3px solid #000;
  box-shadow:6px 6px 0 #000;
}
html[data-look="poster"] .tf-ctx,
body[data-look="poster"] .tf-ctx{
  border-radius:0;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  background:#1A1A1A;
}



/* =========================================================
   LOOK — Synthwave (néon magenta / cyan, glow, rétro-nuit)
   ========================================================= */
html[data-look="synth"],
body[data-look="synth"]{
  --bg-void:#0D0618;
  --bg-panel:#1A0F2E;
  --bg-panel-2:#24153D;
  --line:#4A2A6E;
  --text:#F5E9FF;
  --text-dim:#B39BC9;
  --gold:#FF2D95;
  --gold-dim:#FF6BB5;
  --pipe-green:#2EE6D6;
  --danger:#FF5C7A;
  --scanline:rgba(255,45,149,.04);
}

html[data-look="synth"] .hub,
body[data-look="synth"] .hub{
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(255,45,149,.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(46,230,214,.10), transparent 50%),
    radial-gradient(ellipse 50% 35% at 90% 10%, rgba(167,139,250,.12), transparent 45%),
    linear-gradient(180deg, #0D0618 0%, #120822 40%, #1A0A28 100%);
}
html[data-look="synth"] body::before,
body[data-look="synth"]::before{
  opacity:.45;
  background-image:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,45,149,.03) 2px,
    rgba(255,45,149,.03) 4px
  );
}

html[data-look="synth"] .hub-topbar,
body[data-look="synth"] .hub-topbar{
  background:linear-gradient(180deg, rgba(26,15,46,.92), rgba(26,15,46,.55));
  border-bottom:1px solid rgba(255,45,149,.25);
  box-shadow:0 8px 32px rgba(255,45,149,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
html[data-look="synth"] .hub-brand__text,
body[data-look="synth"] .hub-brand__text{
  letter-spacing:3px;
  background:linear-gradient(90deg, #FF2D95, #A78BFA, #2EE6D6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 12px rgba(255,45,149,.45));
}
html[data-look="synth"] .hub-who__coins,
body[data-look="synth"] .hub-who__coins{
  border-radius:999px;
  border:1px solid rgba(255,45,149,.35);
  background:rgba(255,45,149,.12);
  box-shadow:0 0 16px rgba(255,45,149,.15);
}
html[data-look="synth"] .icon-btn,
body[data-look="synth"] .icon-btn{
  border-radius:12px;
  border:1px solid rgba(167,139,250,.35);
  background:rgba(26,15,46,.9);
  box-shadow:0 0 12px rgba(167,139,250,.12);
}
html[data-look="synth"] .icon-btn:hover,
body[data-look="synth"] .icon-btn:hover{
  border-color:rgba(255,45,149,.55);
  box-shadow:0 0 18px rgba(255,45,149,.25);
}

/* Boutons menu */
html[data-look="synth"] .menu-btn,
body[data-look="synth"] .menu-btn{
  border-radius:14px !important;
  border:1px solid rgba(255,45,149,.28) !important;
  background:linear-gradient(145deg, rgba(36,21,61,.95), rgba(26,15,46,.98));
  box-shadow:
    0 0 0 1px rgba(167,139,250,.08),
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-look="synth"] .menu-btn::before,
body[data-look="synth"] .menu-btn::before{
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg, #FF2D95, #2EE6D6);
  box-shadow:0 0 12px rgba(255,45,149,.6);
}
html[data-look="synth"] .menu-btn:hover,
body[data-look="synth"] .menu-btn:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(255,45,149,.55) !important;
  box-shadow:
    0 0 24px rgba(255,45,149,.22),
    0 12px 28px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08);
  text-decoration:none;
}
html[data-look="synth"] .menu-btn:active,
body[data-look="synth"] .menu-btn:active{
  transform:translateY(0) !important;
}
html[data-look="synth"] .menu-btn__icon,
body[data-look="synth"] .menu-btn__icon{
  border-radius:12px !important;
  border:1px solid rgba(255,45,149,.3) !important;
  background:linear-gradient(135deg, rgba(255,45,149,.25), rgba(46,230,214,.15));
  box-shadow:0 0 14px rgba(255,45,149,.2);
}
html[data-look="synth"] .menu-btn__icon svg,
body[data-look="synth"] .menu-btn__icon svg{ color:#FF6BB5 !important; }
html[data-look="synth"] .menu-btn--hero,
body[data-look="synth"] .menu-btn--hero{
  background:linear-gradient(145deg, rgba(255,45,149,.18), rgba(26,15,46,.98) 55%);
  border-color:rgba(255,45,149,.45) !important;
  box-shadow:
    0 0 28px rgba(255,45,149,.2),
    0 10px 28px rgba(0,0,0,.4);
}

/* Classement */
html[data-look="synth"] .leaderboard,
body[data-look="synth"] .leaderboard{
  border-radius:18px;
  border:1px solid rgba(255,45,149,.28);
  background:linear-gradient(165deg, rgba(36,21,61,.92), rgba(26,15,46,.96));
  box-shadow:
    0 0 40px rgba(255,45,149,.1),
    0 16px 40px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-look="synth"] .leaderboard__title,
body[data-look="synth"] .leaderboard__title{
  letter-spacing:2px;
  background:linear-gradient(90deg, #FF2D95, #A78BFA);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 8px rgba(255,45,149,.35));
}
html[data-look="synth"] .leaderboard__title::before,
body[data-look="synth"] .leaderboard__title::before{
  background:linear-gradient(180deg, #FF2D95, #2EE6D6);
  box-shadow:0 0 10px rgba(255,45,149,.5);
}
html[data-look="synth"] .lb-row,
body[data-look="synth"] .lb-row{
  border-radius:10px;
  border-bottom:1px solid rgba(74,42,110,.5);
}
html[data-look="synth"] .lb-row--me,
body[data-look="synth"] .lb-row--me{
  background:rgba(255,45,149,.1);
  box-shadow:inset 0 0 0 1px rgba(255,45,149,.25);
}
html[data-look="synth"] .lb-row--gold .lb-row__rank,
body[data-look="synth"] .lb-row--gold .lb-row__rank{ color:#FF2D95; text-shadow:0 0 10px rgba(255,45,149,.5); }
html[data-look="synth"] .podium-spot__avatar,
body[data-look="synth"] .podium-spot__avatar{
  border-radius:14px;
  border:2px solid rgba(255,45,149,.45);
  box-shadow:0 0 18px rgba(255,45,149,.25);
}
html[data-look="synth"] .podium-spot--1 .podium-spot__avatar,
body[data-look="synth"] .podium-spot--1 .podium-spot__avatar{
  border-color:#FF2D95;
  box-shadow:0 0 24px rgba(255,45,149,.4);
}
html[data-look="synth"] .podium-spot__bar,
body[data-look="synth"] .podium-spot__bar{
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, rgba(255,45,149,.35), rgba(46,230,214,.2));
  border:1px solid rgba(255,45,149,.3);
}

/* XP bar / chips */
html[data-look="synth"] .xp-bar--pill,
body[data-look="synth"] .xp-bar--pill{
  border-color:rgba(255,45,149,.35);
  background:rgba(26,15,46,.9);
  box-shadow:0 0 16px rgba(255,45,149,.12);
}
html[data-look="synth"] .xp-bar__fill,
body[data-look="synth"] .xp-bar__fill{
  background:linear-gradient(90deg, #FF2D95, #A78BFA, #2EE6D6);
}
html[data-look="synth"] .look-chip,
body[data-look="synth"] .look-chip{
  border-radius:12px;
  border-color:rgba(167,139,250,.3);
}
html[data-look="synth"] .look-chip.is-active,
body[data-look="synth"] .look-chip.is-active{
  border-color:#FF2D95;
  box-shadow:0 0 16px rgba(255,45,149,.3);
}

/* Modales / settings / dialogs */
html[data-look="synth"] .settings-dropdown,
html[data-look="synth"] .tf-dialog,
body[data-look="synth"] .settings-dropdown,
body[data-look="synth"] .tf-dialog{
  border-radius:16px;
  border:1px solid rgba(255,45,149,.35);
  background:linear-gradient(165deg, #1A0F2E, #120822);
  box-shadow:0 0 32px rgba(255,45,149,.15), 0 20px 48px rgba(0,0,0,.5);
}
html[data-look="synth"] .field input,
body[data-look="synth"] .field input{
  border-radius:10px;
  border:1px solid rgba(167,139,250,.3);
  background:rgba(13,6,24,.8);
}
html[data-look="synth"] .field input:focus,
body[data-look="synth"] .field input:focus{
  border-color:#FF2D95;
  box-shadow:0 0 12px rgba(255,45,149,.25);
}
html[data-look="synth"] .toggle.is-on,
body[data-look="synth"] .toggle.is-on{
  background:linear-gradient(90deg, #FF2D95, #A78BFA);
}
html[data-look="synth"] .btn,
body[data-look="synth"] .btn{
  border-radius:10px;
}
html[data-look="synth"] .btn:not(.btn--ghost),
body[data-look="synth"] .btn:not(.btn--ghost){
  background:linear-gradient(180deg, #FF6BB5, #FF2D95 55%, #D91A7A);
  box-shadow:0 4px 0 #9B1058, 0 0 16px rgba(255,45,149,.3);
  color:#1A0612;
  border:none;
}

html[data-look="synth"] .tf-ctx,
body[data-look="synth"] .tf-ctx{
  border-radius:14px;
  border:1px solid rgba(255,45,149,.4);
  background:linear-gradient(165deg, #1A0F2E, #120822);
  box-shadow:0 0 24px rgba(255,45,149,.2), 0 12px 32px rgba(0,0,0,.5);
}
html[data-look="synth"] .tf-ctx__title,
body[data-look="synth"] .tf-ctx__title{ color:#FF6BB5; }
html[data-look="synth"] .tf-ctx__item:hover,
html[data-look="synth"] .tf-ctx__item:focus-visible,
body[data-look="synth"] .tf-ctx__item:hover,
body[data-look="synth"] .tf-ctx__item:focus-visible{
  background:rgba(255,45,149,.14);
}
html[data-look="synth"] .tf-ctx__item.is-active,
body[data-look="synth"] .tf-ctx__item.is-active{
  background:rgba(255,45,149,.2);
  box-shadow:inset 0 0 0 1px rgba(255,45,149,.35);
}

/* Chat / cards secondaires */
html[data-look="synth"] .chat-panel,
html[data-look="synth"] .skin-card,
body[data-look="synth"] .chat-panel,
body[data-look="synth"] .skin-card{
  border-radius:14px;
  border-color:rgba(255,45,149,.25);
  box-shadow:0 0 20px rgba(255,45,149,.08);
}