/* styles/views/share-card.css
   Modale "Carte de partage" (fin d'arcade). Caisson métal sombre dans la
   DA pinboard ; l'aperçu est le canvas lui-même (cf. src/ui/share-card.js). */

.sc-overlay{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(4,7,12,.82); backdrop-filter:blur(10px);
  animation:fade-in .2s ease both;
}

.sc-modal{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:min(560px, 100%); max-height:94vh;
  padding:20px;
  border:1px solid #000; border-radius:6px;
  background:linear-gradient(180deg,#2a2d30 0%,#14171b 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
}

.sc-close{
  position:absolute; top:10px; right:12px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid #000; cursor:pointer;
  background:#1b1e22; color:rgba(245,241,230,.75);
  font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .12s ease;
}
.sc-close:hover{ background:#c13a2e; color:#fff; }

.sc-canvas-wrap{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; overflow:hidden;
}
.sc-canvas{
  display:block;
  max-height:62vh; max-width:100%;
  height:auto; width:auto;
  border-radius:3px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}

.sc-controls{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center;
  gap:12px; width:100%;
}

.sc-field{ display:flex; flex-direction:column; gap:4px; }
.sc-field-lbl{
  font-size:11px; font-weight:700; letter-spacing:2px;
  color:rgba(245,241,230,.55); text-transform:uppercase;
}
.sc-name{
  width:180px; padding:9px 12px;
  border:1.5px solid #0a0b0d; border-radius:3px;
  background:#f6f0dc; color:#1a1410;
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:14px; letter-spacing:1px; text-transform:uppercase;
}
.sc-name:focus{ outline:none; box-shadow:0 0 0 2px rgba(255,154,31,.5); }

.sc-formats{ display:flex; gap:0; border-radius:3px; overflow:hidden; border:1.5px solid #0a0b0d; }
.sc-fmt{
  appearance:none; cursor:pointer; border:none;
  padding:10px 16px;
  background:#1b1e22; color:rgba(245,241,230,.6);
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:800; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  transition:all .12s ease;
}
.sc-fmt + .sc-fmt{ border-left:1.5px solid #0a0b0d; }
.sc-fmt.is-on{ background:#f6f0dc; color:#14171b; }

.sc-dl{
  appearance:none; cursor:pointer;
  padding:11px 22px;
  border:1.5px solid #0a0b0d; border-radius:3px;
  background:linear-gradient(180deg,#3fb55a 0%,#1d7a36 55%,#0c4818 100%);
  color:#f5fff8; text-shadow:0 1px 0 rgba(0,0,0,.45);
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:800; font-size:13px; letter-spacing:1.6px; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.4);
  transition:all .12s ease;
}
.sc-dl:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.sc-dl:active{ transform:translateY(0); }

@media (max-width:520px){
  .sc-modal{ padding:14px; gap:12px; }
  .sc-canvas{ max-height:54vh; }
  .sc-controls{ gap:10px; }
  /* Champ nom fluide : il prend la place restante à côté des formats
   * au lieu d'un palier fixe qui débordait ou laissait un trou. */
  .sc-field{ flex:1 1 140px; min-width:0; }
  .sc-name{ width:100%; }
  .sc-dl{ width:100%; }
}