/* jeu.css — TRON Legacy in-game panel + boutons + FX (aucune logique modifiée) */

:root{
  --tron-cyan:   #2fe7ff;
  --tron-cyan-hi:#82f6ff;
  --tron-cyan-mid: rgba(130,245,255,.12);
  --tron-red:    #ff4d6a;
  --panel-a: rgba(6,12,18,.98);
  --panel-b: rgba(4,10,16,.98);
}

/* ============== PANEL — REWORK TRON ============== */
body.gl-tron #screen-game .game-panel{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  /* couches : base verre + arène (arcs), grille, scanlines, glow */
  background:
    /* arcs coniques façon arène (subtils) */
    radial-gradient(120% 140% at 50% 50%, rgba(24,180,220,.10) 0%, rgba(0,0,0,0) 60%),
    repeating-conic-gradient(from -20deg at 50% 50%,
      rgba(120,230,255,.10) 0 6deg, rgba(0,0,0,0) 6deg 12deg),
    /* grille douce */
    repeating-linear-gradient(90deg, rgba(120,220,255,.045) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg , rgba(120,220,255,.035) 0 1px, transparent 1px 14px),
    /* scanlines très fines */
    repeating-linear-gradient(180deg, rgba(255,255,255,.020) 0 1px, rgba(0,0,0,0) 1px 3px),
    /* halo de haut */
    radial-gradient(140% 180% at 50% -40%, rgba(39,233,255,.16), transparent 60%),
    linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid rgba(140,230,255,.26);
  box-shadow:
    0 50px 120px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 140px rgba(39,233,255,.10);
}

/* Liseré & profondeur */
body.gl-tron #screen-game .game-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 2px rgba(39,233,255,.18),
    inset 0 0 70px rgba(39,233,255,.12),
    inset 0 -40px 110px rgba(0,0,0,.35);
}

/* Reflet diagonal animé (balayage) */
body.gl-tron #screen-game .game-panel::after{
  content:""; position:absolute; inset:-20% -10%; pointer-events:none;
  background: linear-gradient(110deg,
      transparent 0%, rgba(120,220,255,.07) 46%, rgba(120,220,255,.22) 50%,
      rgba(120,220,255,.07) 54%, transparent 100%);
  transform: translateX(-120%);
  animation: tron-sweep 5.2s linear infinite;
  opacity:.9;
  mix-blend-mode: screen;
}
@keyframes tron-sweep { from{transform:translateX(-120%);} to{transform:translateX(120%);} }
@media (prefers-reduced-motion: reduce){
  body.gl-tron #screen-game .game-panel::after{ animation:none; opacity:.30; }
}

/* Canvas FX (anneaux/orbits/particules) */
body.gl-tron #screen-game canvas.gamefx{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; z-index:0;
}

/* ============== INPUTS & BOUTONS ============== */
body.gl-tron #screen-game .gl-input{
  border-radius: 14px;
  background: rgba(2,14,20,.65);
  color: #e9fbff;
  border: 1px solid rgba(120,220,255,.28);
  box-shadow: inset 0 0 0 1px rgba(39,233,255,.10), 0 12px 28px rgba(0,0,0,.5);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
body.gl-tron #screen-game .gl-input:focus{
  outline:none;
  border-color: rgba(39,233,255,.55);
  box-shadow: inset 0 0 0 1px rgba(39,233,255,.22), 0 0 0 3px rgba(39,233,255,.16), 0 20px 44px rgba(0,0,0,.55);
}

body.gl-tron #screen-game .gl-btn{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:14px; padding:10px 16px; font-weight:900; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.18);
  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;
}
body.gl-tron #screen-game .gl-btn:active{ transform: translateY(1px); }

body.gl-tron #screen-game .btn-blue{
  color:#012325;
  background:
    radial-gradient(140% 160% at 50% -60%, rgba(255,255,255,.60), transparent 60%),
    linear-gradient(180deg, #bafcff, #20cfe4);
}
body.gl-tron #screen-game .btn-red{
  color:#2a0601;
  background:
    radial-gradient(140% 160% at 50% -60%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, #ff9f7b, #ff4d6a);
}

/* ============== FEEDBACK FLASH (complété par le canvas FX) ============== */
body.gl-tron #screen-game .game-panel.flash-correct{
  animation: flash-correct .65s cubic-bezier(.2,.6,.2,1);
}
@keyframes flash-correct{
  0%  { filter:none; }
  12% { filter:brightness(1.15); }
  36% { filter:brightness(1.06); }
  100%{ filter:none; }
}
body.gl-tron #screen-game .game-panel.flash-death{
  animation: flash-death .72s cubic-bezier(.2,.6,.2,1);
}
@keyframes flash-death{
  0%  { filter:none; }
  12% { filter:brightness(1.18); }
  36% { filter:brightness(1.08); }
  100%{ filter:none; }
}

/* Mot affiché : petit pop */
body.gl-tron #screen-game .word-pop{
  animation: word-pop .22s cubic-bezier(.2,.9,.2,1);
}
@keyframes word-pop{
  0% { transform: translateY(2px) scale(.985); filter:blur(1.5px); opacity:.0;}
  100%{ transform: translateY(0)    scale(1);    filter:blur(0);     opacity:1;}
}