/* menus.css — TRON Legacy : panneaux profonds + grille + arène + scanlines + faisceaux
   + boutons bleus/rouges avec particules scanner.
   Scopé par body.gl-tron pour ne toucher que tes écrans de menu. */

:root{
  --tron-cyan:   #27e9ff;
  --tron-cyan-hi:#6af7ff;
  --tron-green:  #00ffa2;
  --tron-orange: #ff7b3d;
  --tron-red:    #ff3d6a;
  --glass-1: rgba(4,10,14,.86);
  --glass-2: rgba(2,6,10,.96);
}

/* ───────── PANNEAUX ───────── */
body.gl-tron .tron-panel{
  position:relative;
  border-radius: 22px;
  background:
    /* micro-grille */
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg , rgba(255,255,255,.015) 0 1px, transparent 1px 12px),
    radial-gradient(140% 120% at 50% -10%, rgba(39,233,255,.12), transparent 60%),
    linear-gradient(180deg, var(--glass-1), var(--glass-2));
  border: 1px solid rgba(120,220,255,.22);
  box-shadow:
    0 40px 90px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 100px rgba(39,233,255,.10);
  overflow:hidden;
  backdrop-filter: blur(2px);
}

/* coins lumineux + arène + scanlines + faisceau */
body.gl-tron .tron-panel::before,
body.gl-tron .tron-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
body.gl-tron .tron-panel::before{
  background:
    /* coins */
    radial-gradient(40px 40px at 20px 20px, rgba(39,233,255,.30), transparent 70%),
    radial-gradient(40px 40px at calc(100% - 20px) 20px, rgba(39,233,255,.30), transparent 70%),
    radial-gradient(40px 40px at 20px calc(100% - 20px), rgba(39,233,255,.30), transparent 70%),
    radial-gradient(40px 40px at calc(100% - 20px) calc(100% - 20px), rgba(39,233,255,.30), transparent 70%),
    /* arène + scanlines */
    radial-gradient(88% 42% at 50% -12%, rgba(39,233,255,.16), transparent 60%),
    repeating-linear-gradient(to bottom, rgba(39,233,255,.05), rgba(39,233,255,.05) 1px, transparent 1px, transparent 8px);
  mix-blend-mode: screen;
  opacity:.9;
}
body.gl-tron .tron-panel::after{
  background: linear-gradient(110deg, transparent 0%, rgba(39,233,255,.08) 46%, rgba(39,233,255,.22) 50%, rgba(39,233,255,.08) 54%, transparent 100%);
  transform: translateX(-130%);
  animation: tron-sweep 3.8s linear infinite;
  opacity:.85;
}
@keyframes tron-sweep { from{transform:translateX(-130%);} to{transform:translateX(130%);} }
@media (prefers-reduced-motion: reduce){ body.gl-tron .tron-panel::after{ animation:none; opacity:.25; } }

/* Titre sticky (visible pendant le scroll) */
body.gl-tron .gl-heading-stick{
  position: sticky; top: 0; z-index: 2;
  padding: 20px 22px 14px;
  background: linear-gradient(180deg, rgba(5,12,16,.92), rgba(5,12,16,.75), transparent);
  border-bottom: 1px solid rgba(120,220,255,.16);
  backdrop-filter: blur(1px);
}

/* Scroll interne + fade haut/bas qui suggère le scroll */
body.gl-tron .gl-scroll-container{
  overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-gutter: stable both-edges;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* Lignes de liste */
body.gl-tron .gl-item{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin: 14px 20px; padding: 16px 18px;
  border-radius: 16px;
  background: rgba(0,12,18,.58);
  border: 1px solid rgba(255,255,255,.06);
  color:#e9fbff;
  box-shadow: 0 14px 32px rgba(0,0,0,.55), inset 0 0 0 1px rgba(39,233,255,.06);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
body.gl-tron .gl-item:hover{
  transform: translateY(-1px);
  border-color: rgba(39,233,255,.32);
  box-shadow: 0 20px 40px rgba(0,0,0,.60), 0 0 22px rgba(39,233,255,.12);
}

/* Hub un peu plus massif */
body.gl-tron .gl-hub{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg , rgba(255,255,255,.015) 0 1px, transparent 1px 12px),
    radial-gradient(120% 110% at 50% -10%, rgba(39,233,255,.13), transparent 60%),
    linear-gradient(180deg, rgba(6,12,18,.88), rgba(3,8,14,.97));
  border:1px solid rgba(120,220,255,.24);
  box-shadow:0 42px 100px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 110px rgba(39,233,255,.11);
}

/* Scrollbars */
body.gl-tron .gl-scroll-container::-webkit-scrollbar{ width:12px; }
body.gl-tron .gl-scroll-container::-webkit-scrollbar-track{
  background: linear-gradient(180deg, rgba(0,24,30,.65), rgba(0,14,22,.85));
  border-radius:999px;
}
body.gl-tron .gl-scroll-container::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(39,233,255,.7), rgba(0,170,255,.7));
  border-radius:999px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 14px rgba(39,233,255,.28);
}
@supports (scrollbar-color: auto){
  body.gl-tron .gl-scroll-container{ scrollbar-color: rgba(39,233,255,.8) rgba(0,24,30,.7); scrollbar-width: thin; }
}

/* ───────── BOUTONS ───────── */
body.gl-tron .gl-btn{
  position:relative; overflow:hidden; isolation:isolate;
  appearance:none; cursor:pointer;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight:900; letter-spacing:.3px;
  color:#012325;
  border:1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.45);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
  background:
    radial-gradient(140% 160% at 50% -50%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, #7ef8ff, #13b4c6);
}
body.gl-tron .gl-btn:hover{ filter: brightness(1.06); }
body.gl-tron .gl-btn:active{ transform: translateY(1px) scale(.995); }
body.gl-tron .gl-btn:focus-visible{ outline:3px solid rgba(39,233,255,.55); outline-offset:2px; }

/* variantes */
body.gl-tron .btn-blue{
  color:#012325;
  background:
    radial-gradient(140% 160% at 50% -50%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(180deg, #a6fbff, #1fd0e2);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 12px 28px rgba(0,0,0,.45),
    0 0 24px rgba(39,233,255,.30);
}
body.gl-tron .btn-red{
  color:#2a0601;
  background:
    radial-gradient(140% 160% at 50% -50%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, #ff8d66, #ff3d6a);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.10),
    0 12px 28px rgba(0,0,0,.45),
    0 0 26px rgba(255,110,80,.35);
  border-color: rgba(255,150,120,.35);
}

/* Canvas overlay des particules */
body.gl-tron .gl-scanfx{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode: screen;
  z-index: 0; /* le texte reste au-dessus */
}