/* ============================================================
   Nebula NBL — L'Épreuve du Labyrinthe
   Esthétique : minimaliste cosmique · glauque futuriste subtil
   Vanilla CSS · pas de dépendance externe
   ============================================================ */

.lab-body{
  min-height:100vh;
  background:#02030a;
  background-image:
    radial-gradient(60% 50% at 10% 10%,rgba(124,245,255,.10),transparent 60%),
    radial-gradient(70% 60% at 90% 90%,rgba(255,69,90,.06),transparent 60%),
    radial-gradient(50% 40% at 50% 60%,rgba(181,148,255,.08),transparent 65%),
    url("assets/nebula-bg.webp");
  background-size:cover;
  background-attachment:fixed;
  color:#f6fbff;
  display:flex;flex-direction:column;align-items:center;
  padding:0 16px 80px;
  overflow-x:hidden;
}
.lab-body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02) 0,
      rgba(255,255,255,.02) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode:overlay;opacity:.5;
}

/* — Skip 1-clic top-right — */
.lab-skip{
  position:fixed;top:14px;right:14px;z-index:80;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px 9px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(8,14,34,.78);
  color:#dbe4ee;font-family:"InterNebula",ui-sans-serif,system-ui,sans-serif;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  cursor:pointer;backdrop-filter:blur(10px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s,color .3s;
}
.lab-skip svg{width:11px;height:11px;color:var(--gold,#ffd88a)}
.lab-skip:hover{transform:translateY(-1px);border-color:var(--gold,#ffd88a);color:#fff;background:rgba(255,216,138,.10)}
.lab-skip:focus-visible{outline:2px solid var(--gold,#ffd88a);outline-offset:3px}

/* — HUD top — */
.lab-hud{
  width:min(720px,100%);
  margin:18px auto 14px;
  padding:12px 18px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid rgba(124,245,255,.18);border-radius:18px;
  background:linear-gradient(160deg,rgba(8,14,34,.85),rgba(11,20,46,.72));
  box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  opacity:0;transform:translateY(-8px);
  transition:opacity .4s,transform .4s;
}
.lab-hud.is-visible{opacity:1;transform:none}
.lab-hud-brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}
.lab-brand{font-family:"InterNebula",sans-serif;font-weight:700;letter-spacing:.14em;font-size:.92rem}
.lab-brand strong{color:#7cf5ff;letter-spacing:.22em}
.lab-sub{font-family:"Cormorant",serif;font-style:italic;color:#b7c8d9;font-size:.78rem;letter-spacing:.05em;margin-top:1px}
.lab-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lab-stat{
  display:inline-flex;flex-direction:column;align-items:center;line-height:1;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.10);border-radius:12px;
  background:rgba(2,4,12,.55);min-width:48px;
}
.lab-stat-label{font-size:.62rem;letter-spacing:.18em;color:#94a4b8;font-weight:600;text-transform:uppercase}
.lab-stat-val{margin-top:3px;font-family:"InterNebula",sans-serif;font-weight:700;font-size:.92rem;color:#fff;font-variant-numeric:tabular-nums}
.lab-stat-keys .lab-stat-val{color:#ffd88a}
.lab-stat-time .lab-stat-val{color:#7cf5ff}
.lab-stat[data-flash="hit"]{animation:labFlashRed .5s ease}
.lab-stat[data-flash="gain"]{animation:labFlashGold .6s ease}
@keyframes labFlashRed{0%,100%{transform:scale(1)}50%{transform:scale(1.18);box-shadow:0 0 0 4px rgba(255,90,90,.4)}}
@keyframes labFlashGold{0%,100%{transform:scale(1)}50%{transform:scale(1.14);box-shadow:0 0 0 4px rgba(255,216,138,.45)}}

/* — Intro — */
.lab-intro{
  width:min(680px,100%);
  margin:30px auto 22px;
  padding:34px clamp(20px,4vw,42px);
  border:1px solid rgba(255,216,138,.26);border-radius:24px;
  background:linear-gradient(160deg,rgba(11,20,46,.92),rgba(8,14,34,.85));
  box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 50px rgba(255,216,138,.10);
  text-align:left;
  transition:opacity .5s,transform .5s;
}
.lab-intro.is-hidden{opacity:0;transform:translateY(-10px);pointer-events:none;height:0;padding:0;margin:0;overflow:hidden;border:0}
.lab-intro-inner{display:grid;gap:14px}
.lab-eyebrow{margin:0;color:#7cf5ff;text-transform:uppercase;font-size:.74rem;letter-spacing:.22em;font-weight:700}
.lab-title{
  margin:0;font-family:"Cormorant",serif;font-weight:700;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.05;color:#fff;
  text-shadow:0 0 38px rgba(124,245,255,.18);
}
.lab-lead{margin:0;color:#dbe4ee;font-size:1.02rem;line-height:1.65}
.lab-lead strong{color:#ffd88a}
.lab-lead em{color:#7cf5ff;font-style:italic}
.lab-controls-help{
  margin-top:6px;padding:14px 16px;
  border:1px dashed rgba(255,255,255,.16);border-radius:14px;
  background:rgba(2,4,12,.4);
  display:grid;gap:8px;
}
.lab-key-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.92rem;color:#b7c8d9}
.lab-key-row kbd{
  font-family:"InterNebula",sans-serif;font-weight:700;font-size:.78rem;
  padding:3px 8px;border:1px solid rgba(124,245,255,.32);border-radius:6px;
  background:rgba(124,245,255,.10);color:#fff;letter-spacing:.04em;
  min-width:24px;text-align:center;box-shadow:inset 0 -2px rgba(0,0,0,.4);
}
.lab-intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.lab-start{font-family:"InterNebula",sans-serif}
.lab-disclaimer{margin:8px 0 0;color:#94a4b8;font-size:.78rem;letter-spacing:.02em;line-height:1.5}
.lab-disclaimer em{color:#ffd88a;font-style:normal}

.lab-avatar-line{
  margin:14px 0 0;color:#7cf5ff;font-size:.92rem;display:inline-flex;align-items:center;gap:10px;
}
.lab-avatar-line strong{color:#ffd88a;font-family:"InterNebula",sans-serif;letter-spacing:.04em;font-weight:600}
.lab-avatar-clear{
  appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(2,4,12,.5);
  color:#94a4b8;width:24px;height:24px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;line-height:1;
  transition:color .2s,border-color .2s;
}
.lab-avatar-clear:hover{color:#ff9b8a;border-color:#ff9b8a}

/* — Stage / canvas frame — */
.lab-stage{
  position:relative;width:min(648px,100%);
  display:none;flex-direction:column;align-items:center;gap:16px;
}
.lab-stage.is-active{display:flex}
.lab-frame{
  position:relative;
  padding:14px;
  border:1px solid rgba(124,245,255,.28);border-radius:18px;
  background:linear-gradient(160deg,rgba(8,14,34,.92),rgba(2,4,12,.96));
  box-shadow:
    0 26px 60px rgba(0,0,0,.55),
    inset 0 0 40px rgba(124,245,255,.06),
    0 0 70px rgba(255,216,138,.04);
}
canvas#labCanvas{
  display:block;width:608px;max-width:80vmin;height:auto;aspect-ratio:1;
  border-radius:8px;
  background:#01020a;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  box-shadow:inset 0 0 0 1px rgba(124,245,255,.08);
}
.lab-corners{position:absolute;inset:0;pointer-events:none}
.lab-corner{position:absolute;width:22px;height:22px;border:1px solid rgba(255,216,138,.45)}
.lab-corner-tl{top:6px;left:6px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.lab-corner-tr{top:6px;right:6px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.lab-corner-bl{bottom:6px;left:6px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.lab-corner-br{bottom:6px;right:6px;border-left:0;border-top:0;border-radius:0 0 8px 0}

.lab-toast{
  position:absolute;left:50%;top:24px;transform:translate(-50%,-14px);
  margin:0;padding:8px 16px;border-radius:999px;
  background:rgba(2,4,12,.88);color:#fff;
  border:1px solid rgba(255,216,138,.45);font-size:.86rem;letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 20px rgba(255,216,138,.25);
  opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s;
  white-space:nowrap;max-width:90%;
}
.lab-toast.is-visible{opacity:1;transform:translate(-50%,0)}

.lab-pause{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  margin:0;padding:16px;border-radius:18px;
  background:rgba(2,4,12,.78);backdrop-filter:blur(6px);
  color:#fff;font-family:"Cormorant",serif;font-style:italic;font-size:1.4rem;letter-spacing:.04em;
  text-shadow:0 0 18px rgba(124,245,255,.4);
  pointer-events:none;
}
.lab-pause.is-visible{display:flex}

/* — D-pad mobile — */
.lab-dpad{
  display:none;
  grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:6px;
  margin-top:6px;user-select:none;
}
.dpad-btn{
  font-size:1rem;color:#dbe4ee;
  border:1px solid rgba(124,245,255,.32);border-radius:14px;
  background:rgba(8,14,34,.82);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s,background .15s,color .15s;
  touch-action:manipulation;
}
.dpad-btn:active,.dpad-btn[data-pressed="true"]{transform:scale(.92);background:rgba(124,245,255,.18);color:#fff}
.dpad-up{grid-column:2;grid-row:1}
.dpad-left{grid-column:1;grid-row:2}
.dpad-down{grid-column:2;grid-row:3}
.dpad-right{grid-column:3;grid-row:2}
@media(hover:none) and (pointer:coarse){
  .lab-dpad{display:grid}
}

/* — End overlay — */
.lab-end{
  position:fixed;inset:0;z-index:90;
  display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(2,4,12,.94);backdrop-filter:blur(12px);
}
.lab-end.is-open{display:flex}
.lab-end-card{
  width:min(540px,100%);
  padding:32px clamp(22px,4vw,38px);
  border:1px solid rgba(255,216,138,.36);border-radius:24px;
  background:linear-gradient(160deg,rgba(11,20,46,.96),rgba(8,14,34,.92));
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 70px rgba(255,216,138,.18);
  text-align:center;
  transform:scale(.94);transition:transform .35s;
}
.lab-end.is-open .lab-end-card{transform:scale(1)}
.lab-end-title{
  margin:8px 0 12px;font-family:"Cormorant",serif;font-weight:700;
  font-size:clamp(1.8rem,3.6vw,2.6rem);color:#fff;
  text-shadow:0 0 26px rgba(255,216,138,.25);
}
.lab-end[data-kind="defeat"] .lab-end-title{color:#ffb1b1;text-shadow:0 0 26px rgba(255,90,90,.30)}
.lab-end[data-kind="victory"] .lab-end-title{color:#ffd88a}
.lab-end-text{margin:0 0 18px;color:#dbe4ee;line-height:1.5}
.lab-end-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;
  margin:6px 0 22px;
}
.lab-end-stats > div{
  padding:10px 8px;border:1px solid rgba(255,255,255,.10);border-radius:12px;
  background:rgba(2,4,12,.55);
}
.lab-end-stats small{display:block;font-size:.66rem;letter-spacing:.18em;color:#94a4b8;text-transform:uppercase;margin-bottom:4px}
.lab-end-stats b{font-family:"InterNebula",sans-serif;font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums}

.lab-end-ether{
  margin:0 0 20px;padding:18px;
  border:1px solid rgba(255,216,138,.5);border-radius:18px;
  background:radial-gradient(circle at 30% 30%,rgba(255,216,138,.18),rgba(2,4,12,.5));
  text-align:left;
}
.lab-ether-title{
  margin:0 0 4px;font-family:"Cormorant",serif;font-weight:700;
  font-size:1.3rem;color:#ffd88a;
  text-shadow:0 0 20px rgba(255,216,138,.5);
}
.lab-ether-sub{margin:0 0 12px;color:#dbe4ee;font-size:.92rem}
.lab-ether-form{display:flex;gap:8px;flex-wrap:wrap}
.lab-ether-form input{
  flex:1;min-width:160px;min-height:42px;padding:0 14px;
  border:1px solid rgba(255,216,138,.4);border-radius:999px;
  background:rgba(2,4,12,.66);color:#fff;
  font-family:"InterNebula",sans-serif;font-size:.92rem;letter-spacing:.04em;
  text-transform:uppercase;
}
.lab-ether-form input:focus{outline:none;border-color:#ffd88a;box-shadow:0 0 0 4px rgba(255,216,138,.18)}
.lab-ether-form .button{min-height:42px;padding:0 18px;font-size:.86rem}
.lab-ether-status{margin:8px 0 0;min-height:1.2em;font-size:.86rem;color:#7cf5ff}
.lab-ether-status[data-state="won"]{color:#ffd88a;font-weight:600}
.lab-ether-status[data-state="lost"]{color:#ff9b8a}
.lab-ether-status[data-state="error"]{color:#ff9b8a}

.lab-end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* — Leaderboard hebdomadaire — */
.lab-leader{
  margin:0 0 18px;
  border:1px solid rgba(124,245,255,.22);border-radius:16px;
  background:rgba(2,4,12,.55);
  text-align:left;
}
.lab-leader > summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;cursor:pointer;list-style:none;
  font-family:"Cormorant",serif;font-size:1.15rem;font-weight:600;color:#fff;
}
.lab-leader > summary::-webkit-details-marker{display:none}
.lab-leader > summary svg{width:14px;height:14px;color:#7cf5ff;transition:transform .3s ease}
.lab-leader[open] > summary svg{transform:rotate(180deg);color:#ffd88a}
.lab-leader[open]{border-color:rgba(255,216,138,.32)}
.lab-leader-body{padding:0 18px 16px}
.lab-leader-meta{margin:0 0 10px;font-size:.78rem;color:#94a4b8;letter-spacing:.04em}
.lab-leader-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.lab-leader-list li{
  display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;
  padding:8px 10px;border:1px solid rgba(255,255,255,.06);border-radius:10px;
  background:rgba(8,14,34,.5);font-size:.86rem;align-items:center;
}
.lab-leader-list li:nth-child(1){border-color:rgba(255,216,138,.45);background:rgba(255,216,138,.08)}
.lab-leader-list li:nth-child(2){border-color:rgba(192,192,192,.32)}
.lab-leader-list li:nth-child(3){border-color:rgba(205,127,50,.32)}
.lab-leader-rank{font-family:"Cormorant",serif;font-weight:700;font-size:1.1rem;color:#ffd88a;text-align:center}
.lab-leader-list li:nth-child(n+2) .lab-leader-rank{color:#dbe4ee}
.lab-leader-code{font-family:"InterNebula",sans-serif;font-weight:600;color:#fff;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.lab-leader-code.anon{color:#94a4b8;font-weight:500}
.lab-leader-time{font-family:"InterNebula",sans-serif;font-variant-numeric:tabular-nums;color:#7cf5ff;font-weight:600}
.lab-leader-ether{font-size:.8rem;color:#ffd88a}
.lab-leader-empty{margin:8px 0 0;color:#94a4b8;font-style:italic;font-size:.88rem;text-align:center}

/* — Responsive — */
@media(max-width:720px){
  .lab-hud{gap:10px;padding:10px 12px}
  .lab-stats{gap:6px}
  .lab-stat{min-width:42px;padding:5px 8px}
  .lab-stat-label{font-size:.56rem}
  .lab-stat-val{font-size:.84rem}
  .lab-skip span{display:none}
  .lab-skip{padding:9px 11px}
  .lab-intro{padding:24px 18px;margin:18px auto 16px}
  .lab-controls-help{display:none}
  .lab-disclaimer{font-size:.74rem}
  canvas#labCanvas{max-width:92vmin}
}

@media(prefers-reduced-motion:reduce){
  .lab-hud,.lab-end-card,.lab-toast{transition:none;animation:none}
  .lab-stat[data-flash]{animation:none}
}