:root {
  --bg: #0d0f12;
  --bg-grid: #1a1f26;
  --green: #39ff14;        /* vert fluo nucléaire */
  --green-dim: #1f7a10;
  --node-bg: #11151a;
  --xbox: #107c10;
  --ink: #cfd8d3;
  --shadow: #000;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Press Start 2P', monospace;
  -webkit-font-smoothing: none;
  cursor: crosshair;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#board {
  position: fixed;
  inset: 0;
  display: block;
  image-rendering: pixelated;
  touch-action: none;
}

/* ---- Minimap ---- */
#minimap {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 220px;
  height: 150px;
  background: rgba(8, 10, 13, 0.82);
  border: 3px solid var(--green-dim);
  box-shadow: 0 0 0 2px #000, 0 0 14px rgba(57, 255, 20, 0.25);
  image-rendering: pixelated;
  cursor: pointer;
  z-index: 20;
}

/* ---- Astuce ---- */
#hint {
  position: fixed;
  top: 12px;
  left: 12px;
  color: var(--green-dim);
  font-size: 8px;
  letter-spacing: 1px;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
  z-index: 20;
}

/* ---- Éditeur de texte ---- */
#editor {
  position: fixed;
  display: none;
  z-index: 30;
  background: var(--node-bg);
  color: var(--green);
  border: 3px solid var(--green);
  outline: none;
  resize: none;
  overflow: hidden;
  padding: 8px;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.5;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.6);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.35);
  caret-color: var(--green);
}
#editor.show { display: block; }

/* Bouton de validation d'édition (surtout utile au tactile) */
#editDone {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 46;
  display: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #04130a;
  background: var(--green);
  border: 3px solid #04130a;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.5);
}
#editDone.show { display: block; }

/* ---- Menu radial (boutons ronds à icônes, déploiement en éventail) ---- */
.radial {
  position: fixed;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
}
.radial.hidden { display: none; }
.ritem {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--node-bg);
  border: 3px solid var(--c, #39ff14);
  color: var(--c, #39ff14);
  box-shadow: 0 0 12px var(--c, #39ff14);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 360ms cubic-bezier(0.935, 0, 0.34, 1.33), opacity 180ms ease, background 120ms, color 120ms;
}
.ritem svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px currentColor);
  pointer-events: none;
}
.ritem.show { opacity: 1; }
.ritem:hover, .ritem:active { background: var(--c, #39ff14); color: #04130a; }
.ritem-center { transition: transform 200ms ease, background 120ms, color 120ms; }
.ritem-center:hover { background: var(--c, #39ff14); color: #04130a; }

/* ---- Palette de couleurs ---- */
.palette {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  width: 116px;
  background: var(--node-bg);
  border: 3px solid var(--green);
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.3);
}
.palette.hidden { display: none; }
.palette .swatch {
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.palette .swatch:hover { transform: scale(1.18); }

/* ---- Popup image ---- */
#imgpopup {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 5, 0.9);
  cursor: zoom-out;
}
#imgpopup.show { display: flex; }
#imgpopup img {
  max-width: 92vw;
  max-height: 92vh;
  image-rendering: auto;
  border: 3px solid var(--green);
  box-shadow: 0 0 28px rgba(57, 255, 20, 0.4);
}

/* ---- Nom du board (haut centre) ---- */
#boardname {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  max-width: 70vw;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--green);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  outline: none;
}
#boardname.editable { cursor: text; }
#boardname.editable:hover { text-decoration: underline dotted; }
#boardname[contenteditable="true"] {
  background: var(--node-bg);
  border: 2px solid var(--green);
  padding: 4px 8px;
  overflow: visible;
}

/* ---- Indicateur de liaison active (haut centre) ---- */
#liaisonbadge {
  position: fixed;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  display: none;
  align-items: center;
  gap: 6px;
  max-width: 80vw;
  padding: 4px 6px 4px 10px;
  background: var(--node-bg);
  border: 2px solid var(--green-dim);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.25);
}
#liaisonbadge.show { display: flex; }
#liaisonbadge .lb-name {
  font-size: 9px; letter-spacing: 1px; color: var(--green);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; max-width: 60vw;
}
#liaisonbadge .lb-x {
  font-family: inherit; font-size: 10px; line-height: 1;
  color: #04130a; background: #fe4365; border: none; cursor: pointer;
  padding: 4px 7px;
}
#liaisonbadge .lb-x:hover { background: #ff5c79; }

/* ---- Sélecteur de board ---- */
#boardpicker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  width: min(360px, 88vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--node-bg);
  border: 3px solid var(--green);
  box-shadow: 0 0 22px rgba(57, 255, 20, 0.35);
  padding: 12px;
}
#boardpicker.hidden { display: none; }
#boardpicker .bp-title { font-size: 9px; color: var(--green-dim); margin-bottom: 10px; letter-spacing: 1px; }
#boardpicker .bp-new { display: flex; gap: 6px; margin-bottom: 10px; }
#boardpicker .bp-new input {
  flex: 1; min-width: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; padding: 9px;
  background: #0d0f12; color: var(--green);
  border: 2px solid var(--green-dim); outline: none;
}
#boardpicker .bp-row {
  display: block; width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; text-align: left;
  padding: 11px 10px; margin: 5px 0;
  background: #0d0f12; color: var(--green);
  border: 2px solid var(--green-dim); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#boardpicker .bp-row:hover, #boardpicker .bp-new button:hover { background: var(--green); color: #04130a; }
#boardpicker .bp-new button {
  font-family: 'Press Start 2P', monospace; font-size: 10px; padding: 9px 11px;
  background: #0d0f12; color: var(--green); border: 2px solid var(--green); cursor: pointer;
}
#boardpicker .bp-empty { font-size: 9px; color: var(--green-dim); padding: 8px 2px; }

/* ---- Indicateur de type de liaison ---- */
#netmode {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 20;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--green-dim);
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
#netmode.show { opacity: 1; }
#netmode.p2p { color: var(--green); text-shadow: 0 0 6px rgba(57, 255, 20, 0.5); }
#netmode.relay { color: #ff8c00; text-shadow: 0 0 6px rgba(255, 140, 0, 0.5); }

/* ---- Barre d'URL d'un lien focalisé ---- */
#linkbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(8px);
  z-index: 22;
  max-width: 86vw;
  padding: 10px 14px;
  font-size: 9px;
  letter-spacing: 1px;
  color: #04130a;
  background: var(--cyan, #00b7eb);
  border: 3px solid #04130a;
  box-shadow: 0 0 16px rgba(0, 183, 235, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
#linkbar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---- Toast de statut ---- */
#toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 47;
  padding: 10px 14px;
  background: var(--node-bg);
  color: var(--green);
  border: 3px solid var(--green);
  font-size: 9px;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.6);
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Adaptations tactiles (mobile) ---- */
@media (pointer: coarse) {
  body { cursor: default; }
  .ritem { width: 62px; height: 62px; }
  .ritem svg { width: 31px; height: 31px; }
  .palette { width: auto; gap: 9px; padding: 11px; }
  .palette .swatch { width: 34px; height: 34px; }
  #minimap { width: 150px; height: 104px; right: 8px; bottom: 8px; }
  #hint { font-size: 7px; }
}

/* ---- Bouton Paramètres (engrenage) ---- */
#settingsbtn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 23;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--node-bg);
  border: 3px solid var(--green);
  color: var(--green);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.35);
  cursor: pointer;
}
#settingsbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#settingsbtn:hover { background: var(--green); color: #04130a; }

/* Bouton micro (chat vocal), à droite de l'engrenage. */
#voicebtn {
  position: fixed; top: 10px; left: 58px; z-index: 23;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--node-bg); border: 3px solid var(--green); color: var(--green);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.35); cursor: pointer;
}
#voicebtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#voicebtn.hidden { display: none; }
#voicebtn.on { background: #fe4365; border-color: #fff; color: #fff; animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 8px rgba(254,67,101,0.5); } 50% { box-shadow: 0 0 18px rgba(254,67,101,0.9); } }

/* Bouton haut-parleur (écoute on/off), à droite du micro. */
#speakerbtn {
  position: fixed; top: 10px; left: 106px; z-index: 23;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--node-bg); border: 3px solid var(--green); color: var(--green);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.35); cursor: pointer;
}
#speakerbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#speakerbtn svg polygon { fill: currentColor; stroke: none; }
#speakerbtn.hidden { display: none; }
#speakerbtn .spk-off { display: none; }
#speakerbtn.off { color: #fe4365; border-color: #fe4365; }
#speakerbtn.off .spk-on { display: none; }
#speakerbtn.off .spk-off { display: inline; }

/* Bandeau "qui parle". */
#speakers {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 21;
  display: none; font-size: 9px; letter-spacing: 1px; color: #fff;
  background: #fe4365; border: 2px solid #fff; padding: 3px 9px;
  box-shadow: 0 0 10px rgba(254, 67, 101, 0.5);
  white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis;
}
#speakers.show { display: block; }

/* Décale l'astuce à droite des boutons. */
#hint { left: 154px; top: 22px; }

/* ---- Rectangle de sélection (marquee) ---- */
#marquee {
  position: fixed;
  z-index: 24;
  border: 2px dashed var(--green);
  background: rgba(57, 255, 20, 0.08);
  pointer-events: none;
  display: none;
}
#marquee.show { display: block; }

/* ---- Pie-menu : trait centre→doigt + halo ---- */
.radial-ray { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.radial-ray line { stroke-width: 4; stroke-linecap: round; opacity: 0.85; }
.radial-halo {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px;
  border-radius: 50%; border: 3px solid var(--green);
  background: rgba(57, 255, 20, 0.12);
  pointer-events: none; opacity: 0; transition: opacity 0.12s;
}

/* ---- Panneau Paramètres ---- */
#settings {
  position: fixed; top: 0; left: 0; height: 100%;
  width: min(340px, 86vw); z-index: 46;
  background: var(--node-bg);
  border-right: 3px solid var(--green);
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.6);
  padding: 14px; overflow-y: auto;
  font-size: 11px; color: var(--ink);
}
#settings.hidden { display: none; }
.set-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.set-title { color: var(--green); font-size: 12px; letter-spacing: 1px; }
.set-x { background: none; border: none; color: var(--green); font-size: 16px; cursor: pointer; }
.set-label { color: var(--green-dim); font-size: 9px; letter-spacing: 1px; margin: 14px 0 6px; text-transform: uppercase; }
.set-sub { color: var(--green-dim); font-size: 8px; margin: 8px 0 4px; }
.set-themes { display: flex; flex-direction: column; gap: 6px; }
.set-theme, .set-wide, .set-danger {
  font-family: inherit; font-size: 10px; text-align: left; padding: 10px;
  background: #0d0f12; color: var(--green); border: 2px solid var(--green-dim); cursor: pointer;
}
.set-theme.on { background: var(--green); color: #04130a; border-color: var(--green); }
.set-wide { display: block; width: 100%; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row { display: flex; align-items: center; gap: 10px; }
.set-btn { font-family: inherit; font-size: 14px; width: 38px; height: 34px; background: #0d0f12; color: var(--green); border: 2px solid var(--green); cursor: pointer; }
.set-val { min-width: 54px; text-align: center; color: var(--green); }
.set-empty { color: var(--green-dim); font-size: 9px; padding: 4px 0; }
.set-liaison { display: flex; gap: 4px; align-items: stretch; margin: 4px 0; }
.set-liaison-name {
  flex: 1; min-width: 0; font-family: inherit; font-size: 10px; text-align: left; padding: 9px;
  background: #0d0f12; color: var(--green); border: 2px solid var(--green-dim); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-liaison.on .set-liaison-name { border-color: var(--green); }
.set-mini { font-family: inherit; width: 34px; background: #0d0f12; color: var(--green); border: 2px solid var(--green-dim); cursor: pointer; }
.set-new { display: flex; gap: 6px; margin: 6px 0; }
.set-new input { flex: 1; min-width: 0; font-family: inherit; font-size: 10px; padding: 9px; background: #0d0f12; color: var(--green); border: 2px solid var(--green-dim); outline: none; }
.set-new button { font-family: inherit; font-size: 10px; padding: 9px; background: #0d0f12; color: var(--green); border: 2px solid var(--green); cursor: pointer; }
.set-danger { display: block; width: 100%; margin-top: 6px; color: #fe4365; border-color: #fe4365; }
.set-theme:hover, .set-wide:hover, .set-btn:hover, .set-mini:hover, .set-liaison-name:hover, .set-new button:hover { background: var(--green); color: #04130a; }
.set-danger:hover { background: #fe4365; color: #fff; }

/* ---- Thèmes clairs (police classique, pas de CRT) ---- */
.theme-classic, .theme-classic-dark { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: auto; }
.theme-classic #board, .theme-classic-dark #board { image-rendering: auto; }
.theme-classic #crt, .theme-classic-dark #crt { display: none; }
.theme-classic { background: #f4f5f0; cursor: default; }
.theme-classic #hint { color: #3a7d3a; text-shadow: none; }
.theme-classic #boardname { color: #1f9d2f; text-shadow: none; }
.theme-classic #netmode { color: #3a7d3a; }
.theme-classic #settingsbtn { background: #fff; border-color: #1f9d2f; color: #1f9d2f; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
.theme-classic-dark { background: #15171c; }

/* ---- Fenêtre d'enregistrement de mémo vocal ---- */
.recmodal {
  position: fixed; inset: 0; z-index: 49;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 5, 0.85);
}
.rec-card {
  background: var(--node-bg); border: 3px solid #fe4365;
  box-shadow: 0 0 24px rgba(254, 67, 101, 0.45);
  padding: 22px 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.rec-dot { width: 22px; height: 22px; border-radius: 50%; background: #fe4365; box-shadow: 0 0 12px #fe4365; animation: recpulse 1s ease-in-out infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
.rec-timer { font-family: 'Press Start 2P', monospace; font-size: 20px; color: var(--green); }
.rec-actions { display: flex; gap: 10px; }
.rec-actions button { font-family: inherit; font-size: 12px; padding: 13px 18px; cursor: pointer; border: 3px solid; }
.rec-stop { color: #fff; background: #fe4365; border-color: #fff; font-weight: bold; }
.rec-stop:hover { background: #ff5c79; }
.rec-cancel { color: #cfd8d3; background: #11151a; border-color: #cfd8d3; }
.rec-cancel:hover { background: #1a1f26; }

/* ---- Panneau debug (touche ²) ---- */
#debug {
  position: fixed;
  top: 60px;
  right: 12px;
  z-index: 48;
  display: none;
  width: 260px;
  padding: 12px;
  background: rgba(8, 10, 13, 0.96);
  border: 3px solid var(--green);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.35);
  font-family: 'Press Start 2P', monospace;
  color: var(--green);
}
#debug.show { display: block; }
#debug .dbg-head { font-size: 9px; letter-spacing: 1px; color: var(--green-dim); margin-bottom: 10px; }
#debug .dbg-row { margin: 8px 0; }
#debug .dbg-row label { display: block; font-size: 7px; color: var(--ink); margin-bottom: 3px; }
#debug .dbg-row input[type=range] { width: 78%; vertical-align: middle; accent-color: var(--green); }
#debug .dbg-val { font-size: 8px; margin-left: 6px; color: var(--green); }
#debug .dbg-reset {
  margin-top: 10px; width: 100%;
  font-family: inherit; font-size: 8px; padding: 8px;
  background: #0d0f12; color: var(--green); border: 2px solid var(--green); cursor: pointer;
}
#debug .dbg-reset:hover { background: var(--green); color: #04130a; }

/* ---- Lecteur YouTube inline (superposé au bloc) ---- */
#videoplayer {
  position: fixed;
  z-index: 47;
  background: #000;
  border: 2px solid var(--green);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  overflow: visible;
}
#videoplayer iframe { width: 100%; height: 100%; display: block; }
#videoplayer .vp-x {
  position: absolute;
  top: -14px; right: -14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #fe4365; color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}
#videoplayer .vp-x:hover { background: #ff5c79; }

/* ---- Scanlines CRT ---- */
#crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  mix-blend-mode: multiply;
}
#crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
}