/* styles/theme/pinboard/game.css
 * ══════════════════════════════════════════════════════════════════
 * VIEW GAME (Bon Trajet / Arcade) — habillage RATP
 *   · Fond mural carrelé atténué (le board doit rester lisible)
 *   · Game-bar en bandeau noir façon caisson DIP + étiquettes Dymo
 *   · Station-card en mini-plaque blanche émaillée (reprise de mp-plate
 *     mais compacte, typo condensée métro)
 *   · Line-circle en vraie pastille RATP (bordure fine + drop-shadow)
 *   · Action-bar : boutons en .dip-btn (cohérence avec la trace view)
 *
 * Préfixe : scopé à `#view-game.pinboard-theme`.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Bouton SORTIE flottant de la vue game ──────────────────
 * Le header game-bar ayant été retiré, le bouton retour est posé
 * en absolute top-left directement sur #view-game (même position
 * que dans mode-config / lobby / trace). */
#view-game #gameLeaveBtn.mc-back{
  position:absolute !important;
  top:16px !important; left:16px !important;
  z-index:100 !important;
}

/* ─── Toolbar d'alignement du board (↕ ↔ ⚙) ──────────────────
 * Placée juste SOUS le bouton SORTIE pour éviter le chevauchement.
 * On lui applique aussi la DA caisson métal noir du chrome unifié
 * pour qu'elle soit cohérente avec le reste de la vue. */
#view-game.pinboard-theme .board-toolbar{
  top:64px !important;            /* 16 SORTIE + 36 h + 12 gap */
  left:16px !important;
  z-index:90 !important;
  background:linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border:1.5px solid #3a3a3a !important;
  border-radius:3px !important;
  box-shadow:
    0 3px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding:3px !important;
}
#view-game.pinboard-theme .board-tool-btn{
  color:#d8d3c4 !important;
  border-radius:2px !important;
  background:transparent !important;
  transition:background .12s ease, color .12s ease;
}
#view-game.pinboard-theme .board-tool-btn:hover{
  color:#ff9a1f !important;
  background:#242424 !important;
}
#view-game.pinboard-theme .board-tool-btn.overlap-glow{
  color:#ffc700 !important;
  background:rgba(255,199,0,.18) !important;
  border:1px solid #ffc700 !important;
}
/* Light mode : carte papier crème + encre bleu RATP. */
html[data-theme="light"] #view-game.pinboard-theme .board-toolbar{
  background:linear-gradient(180deg, #ffffff 0%, #f8f6f0 100%) !important;
  border-color:rgba(0,0,0,.2) !important;
  box-shadow:0 2px 4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html[data-theme="light"] #view-game.pinboard-theme .board-tool-btn{ color:#1a2d52 !important; }
html[data-theme="light"] #view-game.pinboard-theme .board-tool-btn:hover{
  color:#003f7a !important; background:#fff !important;
}
html[data-theme="light"] #view-game.pinboard-theme .board-tool-btn.overlap-glow{
  color:#b8651c !important; background:rgba(255,154,31,.22) !important; border-color:#ff9a1f !important;
}

/* ─── HUD top-center retiré ───────────────────────────────
 * Info-card bas-gauche (info-card.css) remplace entièrement le
 * bandeau afficheur. Les éléments legacy #round / #stats / etc.
 * restent dans le DOM (hidden) pour ne pas casser les bindings JS,
 * mais la .game-hud elle-même n'est plus utilisée. */
#view-game.pinboard-theme .game-hud{ display:none !important; }
/* Liseret jaune en bas, comme les afficheurs de quai authentiques */
#view-game.pinboard-theme .game-hud::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px;
  height:4px; background:#ffc700;
  border-radius:0 0 2px 2px;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}

/* Cellule : label + valeur empilés verticalement */
#view-game.pinboard-theme .gh-cell{
  display:flex; flex-direction:column; justify-content:center;
  gap:2px;
  padding:4px 6px;
}
#view-game.pinboard-theme .gh-lbl{
  font-size:8px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#8a857a;
  line-height:1;
  font-weight:700;
}
#view-game.pinboard-theme .gh-val{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:800; font-size:16px;
  letter-spacing:1px;
  color:#f8f6f0;
  line-height:1;
}
/* Valeurs monumentales en dot-matrix orange (round + stats) */
#view-game.pinboard-theme .gh-val.gh-matrix{
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
  color:#ff9a1f;
  text-shadow:0 0 6px rgba(255,154,31,.7), 0 0 12px rgba(255,154,31,.25);
  font-size:15px; letter-spacing:1.5px;
}
#view-game.pinboard-theme .gh-val.gh-matrix b{
  font-weight:inherit;
  color:inherit;
}

/* Séparateur vertical fin entre 2 cellules */
#view-game.pinboard-theme .gh-sep{
  width:1px;
  background:linear-gradient(180deg,
    transparent 15%,
    rgba(255,255,255,.22) 35%,
    rgba(255,255,255,.22) 65%,
    transparent 85%);
  margin:0 2px;
}

/* Mode-pill : pastille émail type nom de ligne */
#view-game.pinboard-theme .game-hud .mode-pill{
  display:inline-flex; align-items:center;
  padding:2px 10px;
  height:20px;
  background:#f8f6f0;
  color:#003f7a;
  border:none;
  border-radius:999px;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:800; font-size:11px;
  letter-spacing:1.4px; text-transform:uppercase;
  box-shadow:
    0 1px 2px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.5);
  line-height:1;
}

/* Zone présences joueurs (multi) : rendu par game-wire.js dans
 * #hudCenter. On neutralise le séparateur `game-bar-sep` intégré
 * par le JS et on style les badges. */
#view-game.pinboard-theme .gh-presences{
  display:flex; align-items:center;
  margin-left:8px;
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.18);
  gap:6px;
}
#view-game.pinboard-theme .gh-presences:empty{
  display:none;
}
#view-game.pinboard-theme .game-hud .game-bar-sep{ display:none; }
#view-game.pinboard-theme .presence-badges{
  display:inline-flex; align-items:center; gap:6px;
}
#view-game.pinboard-theme .presence-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px;
  height:20px;
  background:#141414;
  border:1px solid #3a3a3a;
  border-radius:999px;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:700; font-size:10px;
  letter-spacing:1px; text-transform:uppercase;
  color:#d8d3c4;
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#view-game.pinboard-theme .presence-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:#ff9a1f;
  box-shadow:0 0 4px rgba(255,154,31,.6);
}
#view-game.pinboard-theme .presence-badge.done{
  color:#9be09d;
  border-color:#3b6e3f;
}
#view-game.pinboard-theme .presence-badge.done .dot{
  background:#3fb55a;
  box-shadow:0 0 4px rgba(63,181,90,.7);
}
#view-game.pinboard-theme .presence-badge.me{
  color:#fff3da;
  border-color:#ffc700;
  box-shadow:0 0 0 1px rgba(255,199,0,.35);
}
#view-game.pinboard-theme .presence-badge.offline{
  opacity:.4;
  filter:grayscale(.8);
}

/* Responsive : sur mobile, compact et hide labels si trop étroit */
@media (max-width: 720px){
  #view-game.pinboard-theme .game-hud{
    height:34px;
    padding:0 8px;
    gap:4px;
  }
  #view-game.pinboard-theme .gh-cell{ padding:4px 4px; }
  #view-game.pinboard-theme .gh-lbl{ font-size:7px; letter-spacing:1.2px; }
  #view-game.pinboard-theme .gh-val{ font-size:13px; }
  #view-game.pinboard-theme .gh-val.gh-matrix{ font-size:13px; }
  #view-game.pinboard-theme .game-hud .mode-pill{ font-size:9px; padding:2px 6px; }
  #view-game.pinboard-theme .gh-presences{
    display:none;               /* masqué en mobile, multi uniquement */
  }
}

/* ─── Fond mural carrelé (pas de dot-grid) ────────────────────── */
#view-game.pinboard-theme{
  --tile-w: 40px;
  --tile-h: 20px;
  --tile-white: #f8f6f0;
  --tile-white-grout: rgba(60,55,45,.18);
  --tile-blue: #003f7a;
  --tile-blue-grout: rgba(245,241,230,.38);
}
#view-game.pinboard-theme .board{
  background-color:var(--tile-white);
  background-image:
    repeating-linear-gradient(0deg,
      var(--tile-white-grout) 0 1px,
      rgba(255,255,255,.25)   1px 2px,
      transparent             2px var(--tile-h)),
    repeating-linear-gradient(90deg,
      var(--tile-white-grout) 0 1px,
      transparent 1px var(--tile-w));
  background-size:auto, auto !important;      /* override 28x28 dot-grid hérité de .board */
  background-attachment:fixed, fixed;
  background-repeat:repeat, repeat;
}
html[data-theme="dark"] #view-game.pinboard-theme{
  --tile-white: #1f2228;
  --tile-white-grout: rgba(0,0,0,.55);
}
html[data-theme="dark"] #view-game.pinboard-theme .board{
  background-image:
    repeating-linear-gradient(0deg,
      var(--tile-white-grout) 0 1px,
      rgba(255,255,255,.05)   1px 2px,
      transparent             2px var(--tile-h)),
    repeating-linear-gradient(90deg,
      var(--tile-white-grout) 0 1px,
      transparent 1px var(--tile-w));
  background-size:auto, auto !important;
}

/* ─── GAME BAR : bandeau DIP caisson noir avec étiquettes Dymo ── */
#view-game.pinboard-theme .game-bar{
  padding:10px 16px !important;
  background:linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-bottom:1.5px solid #0a0a0a;
  box-shadow:
    0 3px 8px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.4);
  font-family:'Barlow Condensed','Barlow','Archivo Narrow',sans-serif;
  color:#d8d3c4;
  letter-spacing:2px;
}
/* Liseret jaune sous la barre façon afficheur de quai */
#view-game.pinboard-theme .game-bar::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px;
  height:4px; background:#ffc700;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
#view-game.pinboard-theme .game-bar{ position:relative; }

#view-game.pinboard-theme .brand-home{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 12px;
  background:#141414;
  color:#e6dfce !important;
  border:1.5px solid #3a3a3a;
  border-radius:2px;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:700; font-size:12px;
  letter-spacing:2.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.7), 0 -1px 0 rgba(255,255,255,.15);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.55);
  transition:filter .15s ease;
}
#view-game.pinboard-theme .brand-home:hover{
  filter:brightness(1.2);
  background:#141414;              /* ne pas surcolorer */
  color:#ff9a1f !important;
}

#view-game.pinboard-theme .game-bar-center{
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
  font-size:13px; letter-spacing:2px;
  color:#ff9a1f;
  text-shadow:0 0 6px rgba(255,154,31,.6);
  text-transform:uppercase;
}
#view-game.pinboard-theme .game-bar-round,
#view-game.pinboard-theme .game-bar-stats{ color:inherit; }
#view-game.pinboard-theme .game-bar b{ color:#fff3da; font-weight:800; }
#view-game.pinboard-theme .game-bar-sep{ color:rgba(216,211,196,.4); margin:0 8px; }

#view-game.pinboard-theme .mode-pill{
  display:inline-block;
  padding:3px 10px;
  background:#f8f6f0;
  color:#003f7a;
  border:none; border-radius:999px;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:800; font-size:11px;
  letter-spacing:1.8px; text-transform:uppercase;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* ─── STATION-CARDS : plaques de station authentiques du métro
 *     parisien (cf. refs "Commerce", "Place d'Italie", "Saint-Lazare",
 *     "Quatre-Septembre", "Charles de Gaulle Étoile").
 *
 * Caractéristiques observées sur les vraies plaques émaillées :
 *   · fond bleu marine UNI (pas de carrelage à l'intérieur)
 *   · ratio largeur/hauteur ~5:1, horizontale
 *   · liseret blanc fin en bordure intérieure
 *   · typo Parisine-like (sans-serif moderne, casse naturelle, PAS
 *     en capitales — "Commerce" pas "COMMERCE")
 *   · aucun autre texte que le nom (pas de "MÉTRO", pas de "DÉPART",
 *     pas de mode)
 *   · léger reflet émail + ombre portée */
#view-game.pinboard-theme .station-card{
  /* PAS de position ici — .board-node applique déjà position:absolute. */
  display:flex; align-items:center; justify-content:center;
  min-width:220px; width:max-content; max-width:360px;
  min-height:60px;
  padding:12px 28px;
  border:none; border-radius:2px;
  color:#ffffff;
  /* Fond : bleu marine authentique RATP, gradient vertical très
   * léger pour suggérer l'émail sans casser l'uni. */
  background:
    linear-gradient(180deg,
      #0f3875 0%,
      #0a2d5e 55%,
      #082649 100%);
  box-shadow:
    /* liseret blanc intérieur fin (pas une rangée de tuiles) */
    inset 0 0 0 1.5px rgba(255,255,255,.88),
    /* joint sombre entre liseret et bleu */
    inset 0 0 0 2.5px rgba(0,0,0,.35),
    /* reflet émail haut */
    inset 0 3px 8px rgba(255,255,255,.08),
    /* ombre émail bas */
    inset 0 -3px 8px rgba(0,0,0,.32),
    /* ombre portée sur le mur */
    0 6px 14px rgba(0,0,0,.4);
  transition:filter .15s ease, box-shadow .2s ease;
}
#view-game.pinboard-theme .station-card:hover{
  filter:brightness(1.06);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.88),
    inset 0 0 0 2.5px rgba(0,0,0,.45),
    inset 0 3px 8px rgba(255,255,255,.08),
    inset 0 -3px 8px rgba(0,0,0,.32),
    0 10px 22px rgba(0,0,0,.55);
}
#view-game.pinboard-theme .station-card.dragging{ filter:brightness(1.1); }
#view-game.pinboard-theme .station-card.ghost{ opacity:.72; }

/* ── Corps interne : uniquement le nom de la station, centré V+H.
 *     Les labels "MÉTRO / RER" et "DÉPART / ARRIVÉE / CORRESPONDANCE"
 *     sont masqués — comme sur les vraies plaques, seul le nom de
 *     station figure sur l'émail. ─── */
#view-game.pinboard-theme .station-card-body{
  position:static !important;
  display:flex;
  align-items:center; justify-content:center;
  width:100%;
}
/* Masqués : pas de mode, pas de tag rôle */
#view-game.pinboard-theme .station-card-mode,
#view-game.pinboard-theme .station-card-tag{
  display:none !important;
}
/* Nom de la station : typo Parisine-like (sans-serif humaniste,
 * poids moyen, casse naturelle telle qu'écrite dans le dataset —
 * "Saint-Lazare", "Place d'Italie", pas "SAINT-LAZARE"). */
#view-game.pinboard-theme .station-card-name{
  font-family:'Oswald','Barlow Semi Condensed','Barlow','Archivo',sans-serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:.2px;
  text-transform:none;           /* casse naturelle */
  color:#ffffff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 0 6px rgba(0,0,0,.25);
  text-align:center; line-height:1.1;
  /* Permettre le wrap des noms longs plutôt qu'étirer la plaque. */
  white-space:normal;
  max-width:320px;
  overflow-wrap:break-word; word-break:keep-all;
}
#view-game.pinboard-theme .station-card-name.empty{
  font-style:italic; opacity:.6;
  font-weight:400;
  letter-spacing:.2px;
}
#view-game.pinboard-theme .station-card-name.interactive:hover{
  text-decoration:underline; text-decoration-style:dashed;
  text-decoration-color:#ffc700; text-underline-offset:4px;
  color:#ffffff;
}

/* ─── LINE-CIRCLES : pastille RATP nette ──────────────────────── */
#view-game.pinboard-theme .line-circle{
  background:#f8f6f0;
  border:2px solid #1a1b1c;
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.15),
    inset 0 2px 4px rgba(255,255,255,.6),
    0 4px 10px rgba(0,0,0,.35);
  color:#1a1b1c;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:800;
  transition:filter .15s ease, box-shadow .2s ease;
}
#view-game.pinboard-theme .line-circle:hover{
  filter:brightness(1.05);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.15),
    inset 0 2px 4px rgba(255,255,255,.6),
    0 6px 14px rgba(0,0,0,.45);
}
#view-game.pinboard-theme .line-circle .dash{
  color:rgba(0,0,0,.3);
  font-size:22px; font-weight:800;
}

/* ─── JOKER ARCADE — wrapper au-dessus de la station ─────────
 * Le wrapper contient 2 états :
 *   · .ac-joker-btn      (idle)    : "★ Joker · N" — capsule jaune
 *   · .ac-joker-confirm  (pending) : [Confirmer ★] [×]
 * Le wrapper est posé en -36px + lui-même a un pseudo-bridge invisible
 * de 12px qui relie à la card → la souris peut transiter sans couper
 * le hover, et ce même au-dessus du bord supérieur de la card. */
#view-game.pinboard-theme .station-card .ac-joker-wrap{
  position:absolute;
  top:-40px; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:5;
}
/* Pont invisible entre le wrapper et la card : la souris peut
 * passer par-dessus sans perdre le hover parent. */
#view-game.pinboard-theme .station-card .ac-joker-wrap::after{
  content:'';
  position:absolute;
  left:-12px; right:-12px;
  bottom:-14px;
  height:16px;
  pointer-events:auto;      /* capte le hover pour maintenir affichage */
}
/* Affichage : au hover de la card OU du wrapper/bouton lui-même */
#view-game.pinboard-theme .station-card:hover > .ac-joker-wrap,
#view-game.pinboard-theme .station-card .ac-joker-wrap:hover,
#view-game.pinboard-theme .station-card .ac-joker-wrap:focus-within{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(2px);
}

/* Bouton "Joker · N" (idle) et "Confirmer" partagent le style capsule
 * jaune RATP (.dip-btn.warn en version mini). */
#view-game.pinboard-theme .station-card .ac-joker-btn,
#view-game.pinboard-theme .station-card .ac-joker-ok{
  padding:5px 12px;
  background:linear-gradient(180deg, #ffd43a 0%, #c59a13 100%);
  color:#0a0805;
  border:1.5px solid #6b4e09;
  border-radius:3px;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:800; font-size:11px;
  letter-spacing:1.4px; text-transform:uppercase;
  white-space:nowrap;
  box-shadow:
    0 3px 6px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.25);
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
}
#view-game.pinboard-theme .station-card .ac-joker-btn:hover,
#view-game.pinboard-theme .station-card .ac-joker-ok:hover{
  filter:brightness(1.08);
}
#view-game.pinboard-theme .station-card .ac-joker-btn:active,
#view-game.pinboard-theme .station-card .ac-joker-ok:active{
  transform:translateY(1px);
  filter:brightness(.95);
}
#view-game.pinboard-theme .station-card .ac-joker-star{
  display:inline-block;
  margin-right:3px;
  color:#6b4e09;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* État confirm : 2 boutons côte à côte, Confirmer + × annuler */
#view-game.pinboard-theme .station-card .ac-joker-confirm{
  display:flex; align-items:center; gap:4px;
}
#view-game.pinboard-theme .station-card .ac-joker-confirm[hidden]{
  display:none;
}
#view-game.pinboard-theme .station-card .ac-joker-ok{
  background:linear-gradient(180deg, #3fb55a 0%, #1d7a36 100%);
  color:#fff3da;
  border:1.5px solid #0b3f1c;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#view-game.pinboard-theme .station-card .ac-joker-ok .ac-joker-star{
  color:#fff3da;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#view-game.pinboard-theme .station-card .ac-joker-cancel{
  width:22px; height:22px;
  padding:0;
  background:#1a1a1a;
  color:#d8d3c4;
  border:1.5px solid #3a3a3a;
  border-radius:3px;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:800; font-size:14px;
  line-height:1;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
#view-game.pinboard-theme .station-card .ac-joker-cancel:hover{
  background:#242424;
}

/* ─── REVEAL : chips des lignes SOUS la station ───────────
 * Uniquement les pastilles rondes, sans container. Posé en absolute
 * pour flotter sous la plaque sans perturber le flex interne. */
#view-game.pinboard-theme .station-card .ac-joker-reveal{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  max-width:260px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  z-index:4;
  pointer-events:none;
}
#view-game.pinboard-theme .ac-joker-line-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:11px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.35);
  line-height:1;
}

/* ─── Connecteurs SVG : reprise accent orange discret ──────── */
#view-game.pinboard-theme .board-link{
  stroke:rgba(0,0,0,.35);
  stroke-dasharray:6,4;
}
html[data-theme="dark"] #view-game.pinboard-theme .board-link{
  stroke:rgba(255,255,255,.35);
}
#view-game.pinboard-theme .board-link.hover{
  stroke:#ff9a1f;
  stroke-opacity:.9;
}
@keyframes link-shimmer-ratp{
  0%,100%{stroke-opacity:.3}
  50%    {stroke-opacity:.9}
}
#view-game.pinboard-theme .board-link.empty{
  animation:link-shimmer-ratp 1.8s ease-in-out infinite;
}

#view-game.pinboard-theme .conn-add-btn.visible{
  background:#f8f6f0;
  color:#1a1b1c;
  border:1px dashed #1a1b1c;
}
#view-game.pinboard-theme .conn-add-btn.visible:hover{
  border-style:solid;
  border-color:#ff9a1f;
  color:#ff9a1f;
  box-shadow:0 0 10px rgba(255,154,31,.3);
  background:#fff;
}

/* ─── ACTION-BAR : panneau métal brossé avec boutons encastrés ─
 * Même plaque que la .trace-actions (handoff §02). Les 4 vis sont
 * rendues en background-image (4 radial-gradients) + grain brossé. */
#view-game.pinboard-theme .action-bar.in-board{
  padding:18px 20px 20px !important;
  gap:14px !important;
  border:1px solid #4a463d !important;
  border-radius:2px !important;
  background:none !important;  /* reset */
  background-image:
    radial-gradient(circle at 10px 10px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 10px) 10px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at 10px calc(100% - 10px), #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #8b8679 0%, #4a463d 55%, transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 1px,
      transparent 1px 2px),
    linear-gradient(180deg, #d4cfc1 0%, #aaa498 50%, #7e796d 100%) !important;
  background-size:10px 10px, 10px 10px, 10px 10px, 10px 10px, auto, auto !important;
  background-position:5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), 0 0, 0 0 !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.55),
    inset 0  2px 0 rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.4) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Toggle theme du game-bar : compact, cohérent */
#view-game.pinboard-theme .theme-toggle-bar{
  /* styles dans chrome-unified — rien à override */
}