/* styles/theme/pinboard/dip.css
 * ══════════════════════════════════════════════════════════════════
 * BOUTONS INDUSTRIELS — rectangles encastrés dans métal brossé
 * (handoff "New Paris" §02, buttons.jsx → RectButton + ButtonsPanel).
 *
 * Chaque bouton est rendu comme un CAP rectangulaire qui s'enfonce
 * dans un TROU sombre creusé dans la plaque métal. L'état "disabled"
 * désature et assombrit ; l'état "pressed" enfonce le cap.
 *
 * Préfixe exclusif : .dip-* (garde-fou pour éviter les collisions).
 * Utilisé sur :
 *   - trace : #traceClear / #traceValidate / #traceNext / #traceScoreNext
 *   - game  : #showAnswer / #abandon / #submit / #reset
 *   - lobby : #lvStart (CTA host) via dip-btn
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Tokens couleurs caps (calqués sur le handoff) ───────────── */
.pinboard-theme .dip-btn{
  /* palette par défaut = black disabled */
  --cap-hi:   #3a3d42;
  --cap-mid:  #1a1d20;
  --cap-lo:   #050608;
  --cap-spec: #5a5e64;
  --cap-edge: #0a0b0d;
  --cap-text: #e6e6e6;
  --cap-shadow-txt: 0 1px 0 rgba(0,0,0,.6);
}
.pinboard-theme .dip-btn.primary{
  /* vert signal = CTA valider (toujours cliquable, toujours vert) */
  --cap-hi:   #3fb55a;
  --cap-mid:  #1d7a36;
  --cap-lo:   #0a3a18;
  --cap-spec: #8ae29d;
  --cap-edge: #0b3f1c;
  --cap-text: #ffffff;
  --cap-shadow-txt: 0 1px 0 rgba(0,0,0,.5);
}
.pinboard-theme .dip-btn.danger{
  /* rouge RATP = abandonner (texte blanc pur, contraste max) */
  --cap-hi:   #d9533f;
  --cap-mid:  #9a2418;
  --cap-lo:   #3a0d06;
  --cap-spec: #ff8872;
  --cap-edge: #5a1a10;
  --cap-text: #ffffff;
  --cap-shadow-txt: 0 1px 0 rgba(0,0,0,.6);
}
.pinboard-theme .dip-btn.ghost,
.pinboard-theme .dip-btn.next{
  /* bleu signal = action secondaire (nouvelle ligne, afficher réponse) */
  --cap-hi:   #4e87c2;
  --cap-mid:  #164a82;
  --cap-lo:   #061a34;
  --cap-spec: #7fb0db;
  --cap-edge: #0a2a54;
  --cap-text: #f4f7fb;
  --cap-shadow-txt: 0 1px 0 rgba(0,0,0,.55);
}
.pinboard-theme .dip-btn.warn{
  /* orange signalisation = effacer / avertissement. Texte blanc pur
   * pour contraste max sur cap orange (palette cohérente avec le
   * handoff M5 #FF7E2E + ambre handoff #d96b2b). */
  --cap-hi:   #ff9850;
  --cap-mid:  #d96b2b;
  --cap-lo:   #7a3308;
  --cap-spec: #ffc695;
  --cap-edge: #6b2807;
  --cap-text: #ffffff;
  --cap-shadow-txt: 0 1px 0 rgba(0,0,0,.55);
  font-weight:800;
}

/* ─── TROU DANS LE MÉTAL ───
 * L'élément .dip-btn lui-même est le RENFONCEMENT : sombre, ombré
 * intérieurement en 4 directions. Le cap est rendu via ::before
 * pour que les contraintes HTML/JS (texte direct dans le bouton)
 * fonctionnent sans wrapper supplémentaire. */
.pinboard-theme .dip-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  /* Dimensions 10% plus compactes vs la V1 (150×58 → 135×52). */
  width:135px; height:52px;
  padding:4px;
  border:1px solid #000;
  border-radius:2px;
  background:linear-gradient(180deg, #14171b 0%, #0a0c0f 55%, #1a1d21 100%);
  box-shadow:
    inset 0  3px 6px rgba(0,0,0,.95),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset  2px 0 4px rgba(0,0,0,.6),
    inset -2px 0 4px rgba(0,0,0,.6);
  cursor:pointer;
  font-family:'Oswald','Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:700; font-size:13px;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--cap-text);
  text-shadow:var(--cap-shadow-txt);
  box-sizing:border-box;
  isolation:isolate;                  /* contient les pseudo-éléments */
  transition:filter .12s ease, transform .12s ease;
}

/* ─── CAP (le bouton lui-même) ───
 * Rendu via ::before pour qu'il prenne toute la zone interne du
 * renfoncement, et pour laisser le texte direct du bouton visible
 * par-dessus. Le reflet radial est CONCENTRÉ en haut (ellipse fine,
 * 15% de hauteur) pour ne pas écraser le texte au centre du cap. */
.pinboard-theme .dip-btn::before{
  content:'';
  position:absolute; inset:4px;       /* même que le padding */
  border-radius:2px;
  background:
    /* grain plastique moulé (turbulence SVG claire) en multiply */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='58'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    /* petits éclats sombres aux coins (usure de la peinture) */
    radial-gradient(circle at 4% 20%, rgba(0,0,0,.5) 0 1.2px, transparent 2px),
    radial-gradient(circle at 95% 12%, rgba(0,0,0,.45) 0 1.3px, transparent 2px),
    radial-gradient(circle at 7% 88%, rgba(0,0,0,.45) 0 1.2px, transparent 2px),
    radial-gradient(circle at 92% 92%, rgba(0,0,0,.5) 0 1.4px, transparent 2px),
    /* micro-rayures verticales style métal brossé, très subtiles */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 3px),
    /* chanfrein biseauté : highlight net en haut + shadow net en bas */
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      transparent 8%,
      transparent 92%,
      rgba(0,0,0,.35) 100%),
    /* reflet spéculaire fin en haut du cap */
    radial-gradient(ellipse 50% 18% at 50% 10%, var(--cap-spec) 0%, transparent 65%),
    /* base : gradient vertical du cap (hi → mid → lo) */
    linear-gradient(180deg, var(--cap-hi) 0%, var(--cap-mid) 55%, var(--cap-lo) 100%) !important;
  background-blend-mode:multiply, normal, normal, normal, normal, overlay, normal, normal;
  box-shadow:
    /* arête supérieure biseautée (chanfrein) */
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 2px 2px rgba(255,255,255,.18),
    /* bord inférieur sombre (ombre interne) */
    inset 0 -2px 2px rgba(0,0,0,.55),
    inset 0 -5px 10px rgba(0,0,0,.4),
    /* arêtes latérales qui marquent l'épaisseur du cap */
    inset  1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(0,0,0,.4),
    /* relief externe : cap qui sort du trou */
    0 3px 0 var(--cap-edge),
    0 5px 8px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.08);
  /* Override du shine .btn.primary::before (components/button.css) :
   * cap STATIQUE, zéro animation. Spéc (0,2,1) > (0,2,0) + ordre. */
  transform:none;
  transition:transform .12s ease, box-shadow .12s ease;
  animation:none;
  z-index:-1;
}
/* Stacking : le .dip-btn crée son propre contexte (isolation), le
 * ::before part à z:-1 (sous), le texte en flow normal est AU-DESSUS.
 * Text-shadow renforcé pour détacher du cap. */
.pinboard-theme .dip-btn{
  z-index:0;
  text-shadow:
    var(--cap-shadow-txt, 0 1px 0 rgba(0,0,0,.55)),
    0 0 6px rgba(0,0,0,.3) !important;
}

/* Couche d'usure au-dessus du cap : scratches fins + éclats aux
 * 4 coins (comme sur les vrais boutons industriels usés). Placé
 * via ::after pour passer AU-DESSUS du cap mais sous le texte. */
.pinboard-theme .dip-btn::after{
  content:'';
  position:absolute; inset:4px;
  pointer-events:none;
  border-radius:2px;
  opacity:.32;
  background-image:
    /* scratches diagonaux aléatoires, 2 angles pour un motif irrégulier */
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.18) 0 1px,
      transparent 1px 9px,
      rgba(255,255,255,.1)  9px 10px,
      transparent 10px 17px),
    repeating-linear-gradient(75deg,
      rgba(255,255,255,.12) 0 1px,
      transparent 1px 22px),
    /* quelques scratches sombres (éraflures profondes) */
    repeating-linear-gradient(100deg,
      rgba(0,0,0,.18) 0 1px,
      transparent 1px 34px);
  mix-blend-mode:overlay;
  z-index:0;
}

/* ─── ÉTATS ───
 * Pas d'effet de hover : les boutons ont un seul état visuel stable.
 * Seul le clic (:active) enfonce le cap, puis il revient aussitôt.
 * Les règles .btn:hover / .btn.primary:hover héritées de components/
 * button.css sont explicitement NEUTRALISÉES ici pour éviter le
 * changement de couleur cyan au survol. */
.pinboard-theme .dip-btn:hover,
.pinboard-theme .dip-btn.primary:hover,
.pinboard-theme .dip-btn.ghost:hover,
.pinboard-theme .dip-btn.danger:hover{
  background:linear-gradient(180deg, #14171b 0%, #0a0c0f 55%, #1a1d21 100%) !important;
  border-color:#000 !important;
  filter:none !important;
  transform:none !important;
}
.pinboard-theme .dip-btn:hover::before,
.pinboard-theme .dip-btn.primary:hover::before,
.pinboard-theme .dip-btn.ghost:hover::before,
.pinboard-theme .dip-btn.danger:hover::before{
  transform:none !important;
  filter:none !important;
  animation:none !important;
}

.pinboard-theme .dip-btn:active::before{
  transform:translateY(2px);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,.5),
    inset 0  3px 5px rgba(0,0,0,.55),
    0 1px 0 var(--cap-edge),
    0 2px 4px rgba(0,0,0,.4);
}
/* .on = toggled state (ex: lobby ready confirmé) : même rendu que
 * pressed, persistant tant que la classe est active. */
.pinboard-theme .dip-btn.on::before{
  transform:translateY(2px);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,.5),
    inset 0  3px 5px rgba(0,0,0,.55),
    0 1px 0 var(--cap-edge),
    0 2px 4px rgba(0,0,0,.4);
}

/* Disabled : bouton visible mais grisé/désaturé, non-cliquable.
 * Le cap s'enfonce comme pressed + filter saturation/brightness pour
 * le distinguer visuellement. Le texte reste lisible en gris clair. */
.pinboard-theme .dip-btn[disabled]{
  --cap-hi:   #3a3d42;
  --cap-mid:  #1a1d20;
  --cap-lo:   #050608;
  --cap-spec: #5a5e64;
  --cap-edge: #0a0b0d;
  --cap-text: #7a7d82;
  cursor:not-allowed;
  pointer-events:none;
}
.pinboard-theme .dip-btn[disabled]::before{
  filter:saturate(.25) brightness(.85);
  transform:translateY(2px);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,.5),
    inset 0  3px 5px rgba(0,0,0,.55),
    0 1px 0 var(--cap-edge),
    0 2px 4px rgba(0,0,0,.4);
}
/* `[hidden]` reste `display:none` (c'est l'attribut standard pour
 * masquer un élément). Les boutons de la trace-actions ne sont jamais
 * hidden : ils utilisent `disabled` pour l'état inactif. */
.pinboard-theme .dip-btn[hidden]{ display:none !important; }

/* ─── PANNEAU MÉTAL BROSSÉ ───
 * L'.action-bar / .trace-actions qui CONTIENT les boutons devient
 * une plaque métal brossé avec 4 vis aux coins. Géré directement
 * par les styles de game/trace (on ajoute juste les vis via pseudo
 * si nécessaire). Ici on pose juste les variables de base.
 *
 * Variante .dip-panel = plaque métal SANS boutons (utilisée par
 * d'autres composants éventuels — ne sert plus pour le brief trace
 * qui est maintenant en console machine). */
.pinboard-theme .dip-panel{
  position:relative;
  padding:18px 20px;
  border-radius:2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 1px,
      transparent 1px 2px),
    linear-gradient(180deg, #d4cfc1 0%, #aaa498 50%, #7e796d 100%);
  border:1px solid #4a463d;
  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);
  color:#0a1420;
}

/* ─── VIS (coins de plaques / caissons) ─────────────────────── */
.pinboard-theme .dip-screw{
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    #8b8679 0%, #4a463d 70%, #2a2721 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.2),
    0 1px 1px rgba(0,0,0,.4);
  pointer-events:none;
}
.pinboard-theme .dip-screw::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(45deg,
    transparent 45%,
    rgba(0,0,0,.7) 45% 55%,
    transparent 55%);
  border-radius:50%;
  mix-blend-mode:multiply;
}
.pinboard-theme .dip-screw.tl{ top:5px;    left:5px;  }
.pinboard-theme .dip-screw.tr{ top:5px;    right:5px; }
.pinboard-theme .dip-screw.bl{ bottom:5px; left:5px;  }
.pinboard-theme .dip-screw.br{ bottom:5px; right:5px; }

/* ─── LABEL DYMO (conservée pour compat legacy — peu utilisée) */
.pinboard-theme .dip-dymo{
  display:inline-block;
  padding:4px 10px;
  background:#141414;
  color:#e6dfce;
  border-radius:2px;
  font-family:'Barlow Condensed','Barlow','Archivo Narrow',sans-serif;
  font-weight:700; font-size:11px;
  letter-spacing:2.2px; text-transform:uppercase; line-height:1.2;
  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),
    0 1px 0 rgba(0,0,0,.35);
}