/* QUIZ'EM ALL v2.2.0 — CONSOLE VIP HOLOGRAPHIQUE du Blind Test (couche 100 % additive)
   Habille #btPlayerBox / #btPlayBtn / #btSkipBtn / #btPlayerStatus sans toucher à leur HTML ni à leurs IDs.
   Les éléments .btc-* sont injectés par src/ui/bt-console.js (aria-hidden, décoratifs).
   Animations : transform / opacity uniquement. Respecte prefers-reduced-motion. */

/* ---------- Châssis de la platine ---------- */
#btPlayerBox.btc-console{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  padding:16px 14px 14px;margin-bottom:18px;border-radius:20px;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(244,201,93,.16),transparent 55%),
    linear-gradient(165deg,#23262d 0%,#14161b 48%,#1b1e24 100%) !important;
  border:1px solid rgba(255,233,168,.55) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.55),
    0 0 32px rgba(244,201,93,.16),
    inset 0 1px 0 rgba(255,241,189,.5),
    inset 0 -3px 10px rgba(0,0,0,.6);
}
/* Vis de platine (4 coins) */
#btPlayerBox.btc-console::before{
  content:"";position:absolute;inset:7px;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 5px 5px,#e9d9a4 0 1.5px,#7a5a1a 2.5px,transparent 3.5px) top left/10px 10px no-repeat,
    radial-gradient(circle at 5px 5px,#e9d9a4 0 1.5px,#7a5a1a 2.5px,transparent 3.5px) top right/10px 10px no-repeat,
    radial-gradient(circle at 5px 5px,#e9d9a4 0 1.5px,#7a5a1a 2.5px,transparent 3.5px) bottom left/10px 10px no-repeat,
    radial-gradient(circle at 5px 5px,#e9d9a4 0 1.5px,#7a5a1a 2.5px,transparent 3.5px) bottom right/10px 10px no-repeat;
}
/* Balayage holographique : visible seulement pendant la lecture */
#btPlayerBox.btc-console::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,233,168,.16) 50%,transparent 62%);
  transform:translateX(-120%);
}
#btPlayerBox.btc-console.btc-live{border-color:rgba(255,233,168,.85) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.55),0 0 42px rgba(244,201,93,.34),0 0 70px rgba(255,77,26,.12),inset 0 1px 0 rgba(255,241,189,.6),inset 0 -3px 10px rgba(0,0,0,.6) !important}
#btPlayerBox.btc-console.btc-live::after{opacity:1;animation:btcSweep 4.2s ease-in-out infinite}
@keyframes btcSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
#btPlayerBox.btc-console.btc-tense{border-color:rgba(255,138,61,.9) !important}

/* ---------- Écran : chrono circulaire + visualiseur ---------- */
.btc-deck{position:relative;z-index:3;flex:1 1 100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.btc-ring{position:relative;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#1d2027,#090a0d 70%);
  box-shadow:0 8px 20px rgba(0,0,0,.6),inset 0 2px 8px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,233,168,.2)}
.btc-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.btc-ring-bg{fill:none;stroke:rgba(138,146,158,.2);stroke-width:7}
.btc-ring-fg{fill:none;stroke:url(#btcGoldGrad);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:276.46;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(244,201,93,.65))}
.btc-time{position:relative;font:800 1.9rem/1 'Rajdhani',sans-serif;color:var(--v2-gold-hi,#ffe9a8);
  text-shadow:0 0 14px rgba(244,201,93,.5);font-variant-numeric:tabular-nums}
.btc-time small{display:block;margin-top:3px;text-align:center;font:600 .6rem 'Rajdhani',sans-serif;letter-spacing:.08em;color:var(--v2-steel,#8a929e)}
/* Sous tension (≤ 8 s) : magma + vibration ; critique (≤ 3 s) : pulsation rapide */
.btc-console.btc-tense .btc-ring-fg{stroke:url(#btcMagmaGrad);filter:drop-shadow(0 0 8px rgba(255,77,26,.85))}
.btc-console.btc-tense .btc-time{color:#ffd0b0;text-shadow:0 0 16px rgba(255,77,26,.8)}
.btc-console.btc-tense .btc-ring{animation:btcTremble .22s linear infinite;box-shadow:0 8px 20px rgba(0,0,0,.6),0 0 22px rgba(255,77,26,.45),inset 0 2px 8px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,138,61,.5)}
.btc-console.btc-critical .btc-ring{animation:btcTremble .12s linear infinite,btcHeart .5s ease-in-out infinite}
@keyframes btcTremble{0%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}
@keyframes btcHeart{0%,100%{opacity:1}50%{opacity:.78}}

.btc-viz-wrap{position:relative;height:104px;border-radius:14px;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,rgba(255,233,168,.045) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(8,9,12,.92),rgba(20,13,8,.92));
  border:1px solid rgba(244,201,93,.35);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5),0 0 18px rgba(244,201,93,.12)}
.btc-viz{display:block;width:100%;height:100%}
.btc-viz-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%)}

/* ---------- Statut ---------- */
#btPlayerBox.btc-console .bt-player-status{position:relative;z-index:3;flex:1 1 100%;text-align:center;order:3;
  color:#d8dce3;font-size:.9rem;text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* ---------- Contrôles « specular » ---------- */
#btPlayerBox.btc-console #btPlayBtn,#btPlayerBox.btc-console #btSkipBtn{position:relative;z-index:3}
#btPlayBtn.bt-btn-play{
  min-height:52px;border-radius:16px !important;padding:12px 26px;font-size:1.08rem;color:#1a1305 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.65) 0,rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#fff1bd 0%,#f4c95d 42%,#b8862b 64%,#e9bd57 100%) !important;
  border:1px solid rgba(255,248,214,.9) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  box-shadow:0 10px 22px rgba(120,84,12,.55),0 2px 0 #7a5a1a,inset 0 1px 0 #fff,inset 0 -3px 6px rgba(120,84,12,.45) !important;
  transition:transform .1s ease,box-shadow .15s ease;
}
#btPlayBtn.bt-btn-play:active{transform:translateY(2px);box-shadow:0 4px 10px rgba(120,84,12,.5),0 0 0 #7a5a1a,inset 0 2px 6px rgba(120,84,12,.5) !important}
/* Anneau lumineux pulsant autour du bouton pendant la lecture (remplace btPulse) */
#btPlayBtn.bt-btn-play.is-playing{animation:none !important}
#btPlayBtn.bt-btn-play.is-playing::after{content:"";position:absolute;inset:-5px;border-radius:20px;pointer-events:none;
  border:2px solid rgba(255,233,168,.9);box-shadow:0 0 18px rgba(244,201,93,.8),inset 0 0 12px rgba(244,201,93,.4);
  animation:btcRing 1.5s ease-out infinite}
.btc-console.btc-tense #btPlayBtn.bt-btn-play.is-playing::after{border-color:rgba(255,138,61,.95);box-shadow:0 0 20px rgba(255,77,26,.85),inset 0 0 12px rgba(255,77,26,.4);animation-duration:.8s}
@keyframes btcRing{0%{transform:scale(.97);opacity:.95}100%{transform:scale(1.14);opacity:0}}

#btSkipBtn.bt-btn{
  min-height:44px;border-radius:14px !important;color:#eef0f4 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 48%),linear-gradient(180deg,#3a3f49,#1b1e24 60%,#2a2e36) !important;
  border:1px solid rgba(190,198,210,.55) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.55),0 2px 0 #0b0c0f,inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 5px rgba(0,0,0,.5) !important;
}
#btSkipBtn.bt-btn:hover:not(:disabled){border-color:rgba(255,233,168,.8) !important}
#btSkipBtn.bt-btn:active{transform:translateY(2px);box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 2px 5px rgba(0,0,0,.6) !important}

@media (max-width:640px){
  .btc-deck{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .btc-ring{width:84px;height:84px}
  .btc-time{font-size:1.5rem}
  .btc-viz-wrap{height:84px}
  #btPlayBtn.bt-btn-play{width:100%}
  #btSkipBtn.bt-btn{width:100%;white-space:normal;line-height:1.25}
}
@media (prefers-reduced-motion:reduce){
  #btPlayerBox.btc-console.btc-live::after,#btPlayBtn.bt-btn-play.is-playing::after,
  .btc-console.btc-tense .btc-ring,.btc-console.btc-critical .btc-ring{animation:none !important}
  #btPlayBtn.bt-btn-play.is-playing::after{opacity:.8}
}