:root{
  --ap-bg: rgba(10,12,18,.86);
  --ap-border: rgba(255,255,255,.14);
  --ap-txt: rgba(255,255,255,.92);
  --ap-muted: rgba(255,255,255,.66);
}

/* Panel (Salon Jeu Arcade) */
#arcadePanel{
  display:none;
  margin: 10px 12px 0 12px;
  border: 1px solid var(--ap-border);
  background: var(--ap-bg);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

#arcadePanel.open{ display:block; }

#arcadePanel .ap-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#arcadePanel .ap-title{ font-weight: 800; letter-spacing:.2px; color: var(--ap-txt); }
#arcadePanel .ap-sub{ font-size: 12px; color: var(--ap-muted); }
#arcadePanel .ap-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }

#arcadePanel .ap-row{ display:flex; gap:10px; padding: 10px 12px; flex-wrap: wrap; }

#arcadePanel select, #arcadePanel button{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 10px;
  font-weight: 700;
}

/* Menu du jeu : fond jaune, texte noir + survol bleu */
#arcadePanel select{
  background: #ffd400;
  color: #000;
  text-shadow: none;
  border-color: rgba(0,0,0,.25);
}
#arcadePanel select:hover, #arcadePanel select:focus{
  background: #1e90ff;
  color: #000;
  outline: none;
}

/* Contrôle vitesse */
#arcadePanel .ap-speed{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
#arcadePanel .ap-speed .ap-speed-label{
  font-weight: 900;
  font-size: 12px;
  color: var(--ap-txt);
  opacity: .92;
}
#arcadePanel .ap-speed input[type="range"]{
  width: 140px;
}
#arcadePanel .ap-speed .ap-speed-val{
  font-weight: 900;
  min-width: 54px;
  text-align:right;
  color: var(--ap-txt);
}

#arcadePanel button{
  background: rgba(255,255,255,.08);
  color: var(--ap-txt);
}
#arcadePanel button{ cursor:pointer; }
#arcadePanel button:hover{ background: rgba(255,255,255,.12); }
#arcadePanel button.ap-danger{ border-color: rgba(255,80,80,.55); background: rgba(255,80,80,.10); }
#arcadePanel button.ap-danger:hover{ background: rgba(255,80,80,.18); }

#arcadePanel .ap-wrap{
  display:flex;
  gap:12px;
  padding: 0 12px 12px 12px;
  flex-wrap: wrap;
}

#arcadePanel .ap-canvas-wrap{
  flex: 1 1 420px;
  min-width: 280px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 30% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 400px at 90% 20%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72));
}

#arcadePanel canvas{
  width:100%;
  height:auto;
  display:block;
}

#arcadePanel .ap-side{
  flex: 0 0 260px;
  min-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  padding: 10px 12px;
  color: var(--ap-txt);
}

#arcadePanel .ap-kv{ display:flex; justify-content:space-between; gap:10px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
#arcadePanel .ap-kv:last-child{ border-bottom:0; }
#arcadePanel .ap-k{ color: var(--ap-muted); font-size: 12px; }
#arcadePanel .ap-v{ font-weight: 900; }

#arcadePanel .ap-help{ margin-top:10px; font-size: 12px; color: var(--ap-muted); line-height: 1.35; }

.ap-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 99999;
  background: rgba(10,10,14,.92);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.16);
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
  font-weight: 700;
}
.ap-toast.show{ opacity:1; transform: translateX(-50%) translateY(-6px); }