/* ── Layout ── */
.bt-wrap{min-height:100vh;padding-top:var(--nav-h);display:flex;flex-direction:column;}
.bt-screen{display:none;flex:1;}
.bt-screen.active{display:flex;flex-direction:column;}

.section-divider{height:1px;background:#2a2a2a;width:100vw;position:relative;left:50%;transform:translateX(-50%);margin:0 0 32px;}

/* ── Theme selection ── */
.bt-hero{padding:60px 40px 40px;text-align:center;}
.bt-hero-eyebrow{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--purple-light);margin-bottom:12px;}
.bt-hero-title{font-family:var(--font-display);font-size:8rem;letter-spacing:0.02em;font-weight:bold;background:linear-gradient(160deg,#fff,var(--purple-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
.bt-hero-sub{color:var(--text-muted);font-size:0.9rem;margin-top:16px;}
.themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;max-width:960px;margin:0 auto;padding:0 40px 60px;text-align:left;}
.theme-card{position:relative;padding:44px 40px;text-decoration:none;color:var(--text);overflow:hidden;cursor:pointer;transition:transform 0.25s,box-shadow 0.25s;border-radius:2px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;}
.theme-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.5);}
/* Au hover : le fond (couleur OU image) gagne en intensité — saturation +
   luminosité boostées, et l'overlay assombrissant s'allège pour mieux laisser
   transparaître le visuel. Cohérent avec les GameCard de l'accueil. */
.theme-card-bg{position:absolute;inset:0;z-index:0;transition:filter 0.35s ease,transform 0.5s ease;}
.theme-card:hover .theme-card-bg{filter:saturate(1.25) brightness(1.18);transform:scale(1.04);}
.theme-card-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,8,8,0) 0%,rgba(8,8,8,0.85) 70%);z-index:1;transition:opacity 0.35s ease;}
.theme-card:hover .theme-card-overlay{opacity:0.55;}
.theme-card-content{position:relative;z-index:2;}
.theme-card-num{font-family:var(--font-display);font-size:5rem;position:absolute;top:20px;right:24px;opacity:0.12;line-height:1;z-index:2;}
.theme-card-emoji{font-size:2.2rem;margin-bottom:12px;line-height:1;}
.theme-card-name{font-family:var(--font-display);font-size:2rem;letter-spacing:0.04em;margin-bottom:8px;line-height:1.1;}
.theme-card-desc{font-size:0.8rem;color:rgba(255,255,255,0.6);line-height:1.6;margin-bottom:12px;}
.theme-card-meta{font-family:var(--font-mono);font-size:0.65rem;color:var(--purple-light);}
.theme-card-arrow{font-size:1.1rem;color:rgba(255,255,255,0.4);transition:transform 0.3s,color 0.3s;margin-top:8px;}
.theme-card:hover .theme-card-arrow{transform:translateX(6px);color:#fff;}

/* ── Setup (nb questions + durée) ── */
.bt-setup{max-width:520px;margin:0 auto;padding:60px 40px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;}
.bt-setup-title{font-family:var(--font-display);font-size:2.5rem;letter-spacing:0.05em;margin-bottom:32px;}
.setup-row{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap;}
.setup-opt{padding:12px 20px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:var(--font-mono);font-size:0.8rem;transition:all 0.2s;background:var(--surface);}
.setup-opt.sel{border-color:var(--purple);background:rgba(124,58,237,0.12);color:var(--purple-light);}
.setup-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;}

/* ── Game screen ── */
.bt-game{max-width:680px;margin:0 auto;padding:32px 40px;flex:1;display:flex;flex-direction:column;gap:20px;}
#btGameThemeName{font-family:var(--font-display);font-size:1.8rem;letter-spacing:0.04em;text-align:center;line-height:1.1;}
.bt-progress{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.bt-progress-bar{height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-light));transition:width 0.4s ease;border-radius:2px;}
.bt-counter{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);text-align:right;margin-top:4px;}
.bt-score-badge{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.08em;color:var(--purple-light);}

/* ── Player ── */
/* Player : la border + le box-shadow restent à L'INTÉRIEUR (inset) pour ne JAMAIS modifier la largeur visuelle */
.bt-player{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px;text-align:center;transition:border-color 0.3s,box-shadow 0.3s;}
.bt-player.revealed.correct{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green),inset 0 0 24px rgba(61,220,132,0.12);}
.bt-player.revealed.wrong{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red),inset 0 0 24px rgba(255,50,50,0.12);}
.bt-cover{width:clamp(80px,38vw,180px);height:clamp(80px,38vw,180px);border-radius:8px;margin:0 auto 20px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:4rem;}
.bt-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.bt-cover.hidden img{display:none;}
.bt-cover.hidden::after{content:'🎵';font-size:4rem;}
.bt-waveform{display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin:16px 0;}
.bt-bar{width:4px;border-radius:2px;background:var(--purple-dim);transition:height 0.1s ease;}
.bt-waveform.playing .bt-bar{background:var(--purple-light);animation:wave 0.8s ease-in-out infinite;}
.bt-waveform.playing .bt-bar:nth-child(1){animation-delay:0s;height:16px;}
.bt-waveform.playing .bt-bar:nth-child(2){animation-delay:0.1s;height:32px;}
.bt-waveform.playing .bt-bar:nth-child(3){animation-delay:0.2s;height:24px;}
.bt-waveform.playing .bt-bar:nth-child(4){animation-delay:0.15s;height:40px;}
.bt-waveform.playing .bt-bar:nth-child(5){animation-delay:0.05s;height:20px;}
.bt-waveform.playing .bt-bar:nth-child(6){animation-delay:0.25s;height:36px;}
.bt-waveform.playing .bt-bar:nth-child(7){animation-delay:0.1s;height:28px;}
@keyframes wave{0%,100%{transform:scaleY(0.5);}50%{transform:scaleY(1.2);}}
.bt-bar{height:20px;}
.bt-timer{font-family:var(--font-display);font-size:3rem;letter-spacing:0.05em;color:var(--purple-light);}
.bt-play-btn{background:linear-gradient(135deg,var(--purple),var(--purple2));border:none;border-radius:50%;width:56px;height:56px;font-size:1.4rem;cursor:pointer;color:#fff;transition:all 0.2s;margin:0 auto;display:flex;align-items:center;justify-content:center;}
.bt-play-btn:hover{transform:scale(1.1);box-shadow:0 8px 24px rgba(124,58,237,0.4);}

/* ── Answer area ── */
.bt-answer-area{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;position:relative;z-index:10;}
.bt-answer-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;}
.bt-input-row{display:flex;gap:10px;align-items:stretch;}
.bt-input{flex:1;min-width:0;padding:14px 16px;background:var(--bg);border:2px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-body);font-size:1rem;outline:none;transition:border-color 0.2s;}
/* Bloc boutons à LARGEUR FIXE — l'input garde la même taille que les boutons changent ou non */
.bt-btn-group{flex:0 0 180px;display:flex;gap:8px;}
.bt-btn-group .btn{flex:1;padding:14px 8px;font-size:0.85rem;white-space:nowrap;justify-content:center;}
.bt-input:focus{border-color:var(--purple);}
.bt-input.correct{border-color:var(--green);background:rgba(61,220,132,0.04);}
.bt-input.wrong{border-color:var(--red);}

/* ── Reveal interne (dans le player) : HAUTEUR FIXE, espace réservé en permanence ── */
/* La zone est toujours présente dans le flow → le player ne change jamais de taille */
.bt-inline-reveal{visibility:hidden;margin-top:20px;padding-top:20px;border-top:1px solid transparent;height:80px;overflow:hidden;box-sizing:content-box;display:flex;flex-direction:column;justify-content:center;}
.bt-player.revealed .bt-inline-reveal{visibility:visible;border-top-color:var(--border);}
.bt-player.revealed.correct .bt-inline-reveal{border-top-color:rgba(61,220,132,0.3);}
.bt-player.revealed.wrong .bt-inline-reveal{border-top-color:rgba(255,50,50,0.3);}
.bt-inline-result{font-family:var(--font-display);font-size:1.6rem;letter-spacing:0.06em;line-height:1;margin-bottom:8px;}
.bt-inline-result.correct{color:var(--green);}
.bt-inline-result.wrong{color:var(--red);}
.bt-inline-answer{font-size:0.9rem;color:var(--text-muted);line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px;}
.bt-inline-answer strong{color:var(--text);font-weight:700;}

/* ── Score screen ── */
.bt-score{max-width:520px;margin:0 auto;padding:60px 40px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.bt-score-circle{width:160px;height:160px;border-radius:50%;border:4px solid var(--purple);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 32px;background:rgba(124,58,237,0.08);}
.bt-score-num{font-family:var(--font-display);font-size:4rem;letter-spacing:0.05em;line-height:1;color:var(--purple-light);}
.bt-score-total{font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted);}
.bt-score-msg{font-family:var(--font-display);font-size:2rem;letter-spacing:0.05em;margin-bottom:12px;}
.bt-score-sub{color:var(--text-muted);font-size:0.9rem;margin-bottom:32px;}

/* ── Search bar ── */
#btSearch{
  display:block;
  width:calc(100% - 80px);
  max-width:880px;
  margin:32px auto 0;
  box-sizing:border-box;
  padding:11px 18px;
  background:rgba(255,255,255,0.06);
  border:1px solid #2a2a2a;
  border-radius:8px;
  color:#fff;
  font-family:var(--font-body,sans-serif);
  font-size:0.9rem;
  outline:none;
}

/* ── Responsive ── */
@media(max-width:600px){
  /* Hero */
  .bt-hero{padding:32px 16px 20px;}
  .bt-hero-title{font-size:4rem;}
  /* Themes grid — full width cards like index */
  /* #btThemesWrap est enfant de .bt-screen.active (display:flex). Son style
     inline margin:0 auto donne des marges horizontales AUTO → en contexte flex,
     l'élément ne s'étire plus et rétrécit à la largeur de son contenu (la carte
     s'adapte alors au texte). On neutralise : largeur pleine + marges à 0. */
  #btThemesWrap, .bt-themes-wrap{padding:0 0 80px 0 !important;max-width:100% !important;width:100% !important;margin:0 !important;align-self:stretch !important;box-sizing:border-box !important;}
  #btSearch{width:calc(100% - 24px) !important;margin-left:12px !important;margin-right:12px !important;}
  .themes-grid{padding:0 !important;margin:0;max-width:100%;grid-template-columns:1fr;gap:3px;}
  .bt-themes-section + .bt-themes-section{margin-top:3px;}
  .theme-card{min-height:180px;padding:28px 20px;border-radius:0;width:100%;}
  /* Sécurité forte spécificité : garantit la pleine largeur de la grille et des
     cartes, y compris quand la recherche n'affiche qu'un seul résultat. */
  #btThemesWrap .themes-grid{display:grid !important;grid-template-columns:1fr !important;width:100% !important;max-width:100% !important;margin:0 !important;justify-items:stretch !important;}
  #btThemesWrap .theme-card{width:100% !important;max-width:100% !important;box-sizing:border-box !important;justify-self:stretch !important;}
  /* Setup */
  .bt-setup{flex:none;padding:24px 16px 32px;}
  .bt-setup-title{font-size:2rem;}
  #btDurRow{flex-wrap:wrap;}
  #btDurRow .setup-opt{min-width:calc(50% - 4px);}
  /* Écran entier — pas de hauteur forcée sur mobile */
  .bt-screen{flex:none;}
  /* Game — compact pour tenir dans un petit écran */
  #btGameThemeName{font-size:1.3rem;margin-bottom:4px;}
  .bt-game{padding:10px 10px 16px;gap:10px;flex:none;width:100%;box-sizing:border-box;}
  .bt-player{padding:14px 14px;}
  .bt-cover.hidden::after{font-size:2.5rem;}
  .bt-waveform{height:28px;margin:8px 0;gap:3px;}
  .bt-timer{font-size:1.8rem;}
  .bt-play-btn{width:48px;height:48px;font-size:1.2rem;}
  .bt-score-badge{font-size:1.1rem;}
  .bt-answer-area{padding:14px 12px;}
  .bt-input{padding:11px 10px;font-size:16px;}  /* 16px prevents iOS auto-zoom */
  .bt-input-row{gap:6px;}
  .bt-input-row .btn{padding:10px 6px;font-size:0.7rem;letter-spacing:0.02em;}
  .bt-btn-group{flex:0 0 130px;gap:4px;}
  /* Score */
  .bt-score{flex:none;padding:40px 16px;}
  .bt-score-circle{width:130px;height:130px;}
  .bt-score-num{font-size:3rem;}
  .bt-score-msg{font-size:1.6rem;}
}
@media(max-width:400px){
  .bt-hero-title{font-size:3rem;}
  .bt-setup-title{font-size:1.7rem;}
  .bt-answer-area{padding:12px 10px;}
  .bt-waveform{gap:2px;}
  .bt-timer{font-size:1.5rem;}
  .bt-cover.hidden::after{font-size:2rem;}
}
.mb-list{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--purple-dim);border-radius:6px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.4);overflow:hidden;max-height:200px;overflow-y:auto;}
.mb-suggestion{padding:10px 14px;font-size:0.85rem;cursor:pointer;transition:background 0.15s;}
.mb-suggestion:hover{background:rgba(124,58,237,0.12);}