/* =========================================================
   Classic Games — style pixel / néon
   Palette : nuit violette, néon cyan, magenta, or, vert CRT
   ========================================================= */
:root{
  --night:      #0a0820;
  --night-deep: #06041a;
  --panel:      #150f33;
  --panel-2:    #1c1442;
  --line:       #6b3fd4;
  --line-soft:  #3a2470;
  --cyan:       #4fd6ff;
  --magenta:    #ff5fd2;
  --gold:       #ffc93c;
  --green:      #4ecb5c;
  --green-dark: #2d8b3a;
  --ink:        #cfc6f5;
  --ink-dim:    #8d84bd;

  --display: "Press Start 2P", "Courier New", monospace;
  --body:    "VT323", "Courier New", monospace;

  --r: 10px;
}

*{ box-sizing: border-box; }

html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  background:
    radial-gradient(120% 70% at 50% 0%, #241553 0%, var(--night) 55%, var(--night-deep) 100%);
  color: var(--ink);
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.45;
  image-rendering: pixelated;
  overflow-x: hidden;
}

/* ---------- étoiles ---------- */
.stars{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 14%, #fff, transparent),
    radial-gradient(1px 1px at 28% 32%, #ffe9a8, transparent),
    radial-gradient(1px 1px at 45% 8%,  #fff, transparent),
    radial-gradient(1px 1px at 63% 26%, #bcefff, transparent),
    radial-gradient(1px 1px at 78% 12%, #fff, transparent),
    radial-gradient(1px 1px at 88% 30%, #ffc9f2, transparent),
    radial-gradient(1px 1px at 8%  40%, #fff, transparent),
    radial-gradient(1px 1px at 55% 44%, #fff, transparent);
  opacity: .85;
  animation: twinkle 4s steps(2) infinite;
}
@keyframes twinkle{ 50%{ opacity:.45; } }

/* ---------- route néon en fond ---------- */
.bg{
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.veil{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,8,32,0) 0%,
    rgba(10,8,32,.10) 46%,
    rgba(10,8,32,.38) 72%,
    rgba(6,4,26,.52) 100%);
}

/* ---------- hero ---------- */
.hero{
  position: relative; z-index:1;
  text-align:center;
  padding: 48px 16px 34px;
}
.hero__title{
  font-family: var(--display);
  font-size: clamp(32px, 9vw, 88px);
  letter-spacing: .06em;
  margin: 0;
  color: #ff9a2e;
  text-shadow:
     4px 4px 0 #7a2c00,
     0 0 22px rgba(255,140,30,.65),
     0 0 46px rgba(255,90,0,.35);
}
.hero__sub{
  font-family: var(--display);
  font-size: clamp(10px, 2.2vw, 17px);
  color: var(--magenta);
  letter-spacing: .18em;
  margin: 18px 0 26px;
}
.invader{
  width:18px; height:14px; display:inline-block;
  background: var(--magenta);
  clip-path: polygon(20% 0,80% 0,80% 20%,100% 20%,100% 70%,80% 70%,80% 100%,60% 100%,60% 80%,40% 80%,40% 100%,20% 100%,20% 70%,0 70%,0 20%,20% 20%);
}
/* ---------- layout ---------- */
.wrap{
  position:relative; z-index:1;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

.panel{
  background: linear-gradient(180deg, rgba(28,20,66,.42), rgba(21,15,51,.52));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 0 0 2px #0b0724, 0 8px 30px rgba(0,0,0,.55);
}

/* ---------- challenge ---------- */
.gate{
  display:flex; justify-content:center; align-items:center;
  gap:26px; flex-wrap:wrap;
  padding:22px;
  width: fit-content; max-width: 100%;
  margin: 8px auto 52px;
}
.gate__board{ position:relative; }
#board{
  display:block;
  background: rgba(10,7,38,.55);
  border: 2px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(107,63,212,.25);
  touch-action: none;
}
.gate__overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(8,5,26,.55);
  border-radius:6px;
}
.gate__overlay.is-hidden{ display:none; }

.gate__side{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.side__next{
  background: rgba(10,7,38,.55); border:2px solid var(--line); border-radius:6px;
  padding:8px; display:flex; justify-content:center;
}
#next{ display:block; }

.counter{
  margin:0; font-family: var(--display); font-size:15px;
  color: var(--gold); letter-spacing:.06em;
}
.counter__sep{ color: var(--line); margin:0 8px; }
.counter--time{ font-size:11px; color: var(--ink-dim); }

/* ---------- bouton son ---------- */
.sound{
  --sc: var(--cyan);
  display:flex; align-items:center; justify-content:center;
  width:100%; min-width:76px; height:34px; cursor:pointer; padding:0;
  background: rgba(10,7,38,.55);
  border:2px solid var(--line-soft); border-radius:6px;
  transition: border-color .15s steps(2), box-shadow .15s steps(2);
}
.sound:hover{ border-color: var(--sc); }
.sound:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

/* l'icone est faite de deux pseudo-elements : deux barres, ou un triangle */
.sound__icon{
  display:flex; align-items:center; justify-content:center;
  gap:4px; height:14px;
}
.sound__icon::before,
.sound__icon::after{ content:""; display:block; }

/* --- musique en cours : icone pause, deux barres --- */
.sound[aria-pressed="true"]{
  border-color: var(--sc);
  box-shadow: 0 0 12px rgba(79,214,255,.28);
}
.sound[aria-pressed="true"] .sound__icon::before,
.sound[aria-pressed="true"] .sound__icon::after{
  width:4px; height:14px; background: var(--sc);
}

/* --- musique coupee : icone lecture, un triangle --- */
.sound[aria-pressed="false"]{ --sc: var(--line); }
.sound[aria-pressed="false"] .sound__icon{ gap:0; }
.sound[aria-pressed="false"] .sound__icon::before{
  width:0; height:0; margin-left:3px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--sc);
}
.sound[aria-pressed="false"] .sound__icon::after{ display:none; }

/* ---------- boutons ---------- */
.btn{
  font-family: var(--display); font-size:12px; letter-spacing:.06em;
  border:0; border-radius:6px; padding:14px 16px; cursor:pointer;
  color:#08210c;
  background: linear-gradient(180deg, #6ee07a, var(--green) 55%, var(--green-dark));
  box-shadow: 0 4px 0 #1c5c26, 0 0 18px rgba(78,203,92,.35);
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
.btn:hover{ transform: translateY(2px); box-shadow: 0 2px 0 #1c5c26, 0 0 22px rgba(78,203,92,.5); }
.btn:active{ transform: translateY(4px); box-shadow: 0 0 0 #1c5c26; }
.btn:focus-visible{ outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn--play{ font-size:24px; padding:18px 30px; line-height:1; }
/* ---------- fichiers ---------- */
.cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:22px;
}
.card{
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:2px solid var(--line); border-radius: var(--r);
  box-shadow: 0 0 0 2px #0b0724, 0 8px 26px rgba(0,0,0,.5);
  overflow:hidden;
}
.card__cover{
  aspect-ratio: 16/10; background:#120c30; position:relative;
  display:grid; place-items:center; overflow:hidden;
  border-bottom:2px solid var(--line-soft);
}
.card__cover img{ width:100%; height:100%; object-fit:cover; image-rendering: pixelated; }
.card__glyph{
  font-family: var(--display); font-size: 40px; color:#fff;
  text-shadow: 3px 3px 0 var(--line), 0 0 22px rgba(79,214,255,.5);
}
.card__body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card__name{ font-family: var(--display); font-size:14px; color:#fff; margin:0; line-height:1.5; }
.card__desc{ margin:0; color: var(--ink); flex:1; }
.card__meta{
  display:flex; flex-wrap:wrap;
  border:2px solid var(--line-soft); border-radius:6px; overflow:hidden;
}
.card__meta span{
  flex:1; min-width:90px; text-align:center; padding:8px 6px;
  font-size:18px; color: var(--ink-dim);
  border-right:2px solid var(--line-soft);
}
.card__meta span:last-child{ border-right:0; }
.card__dl{ display:block; text-align:center; text-decoration:none; }
.card.is-locked .card__dl{
  pointer-events:none;
  color: var(--ink-dim);
  background: linear-gradient(180deg, #2a2350, #1e1940);
  box-shadow: 0 4px 0 #14102c;
}
.card__dl-i{ font-size: 14px; }

/* ---------- pad tactile ---------- */
.pad{
  display:none; gap:10px; justify-content:center; margin-top:22px;
}
.pad button{
  font-family: var(--display); font-size:16px; color: var(--cyan);
  background: var(--panel-2); border:2px solid var(--line);
  border-radius:8px; width:60px; height:56px; cursor:pointer;
}
.pad button:active{ background: var(--line-soft); }

/* ---------- footer ---------- */
.foot{
  position:relative; z-index:1; text-align:center;
  padding: 26px 16px 46px;
  font-family: var(--display); font-size:10px; letter-spacing:.08em;
  color: var(--line);
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}
.foot .heart{ color: var(--magenta); font-size:16px; }
.foot .sep{ color: var(--line-soft); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .pad{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}