/* ===========================
   1000 Nœuds – styles.css
   (thème pirate + zones Bottes/Bataille/Nœuds + carrousel avatar FIXE)
   =========================== */

:root{
  --paper:      #0d0f14;
  --paper-2:    #121622;
  --ink:        #e6e6e6;
  --ink-dim:    #a6adbb;
  --line:       #1f2633;
  --shadow:     0 10px 26px rgba(0,0,0,.35);

  --primary:        #d4af37;
  --primary-soft:   rgba(212,175,55,.12);
  --accent:         #b38b2e;

  --success:        #16a34a;
  --danger:         #dc2626;

  --glass:      rgba(18,22,34,.72);
  --glass-weak: rgba(18,22,34,.55);

  --ease: cubic-bezier(.2,.9,.2,1);

  --mini-w: 58px;
  --mini-h: 80px;

  --radius: 14px;
  --gold: #d4af37;

  --stack-w: 86px;
  --stack-h: 118px;
}

@font-face{
  font-family: 'BalooLocal';
  src: url('/assets/fonts/Baloo2-Regular.ttf') format('truetype');
  font-display: swap;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: BalooLocal, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(212,175,55,.08), transparent 60%),
    url('/assets/bg/bg_pirate_1.jpg') center/cover fixed no-repeat, var(--paper);
}
body.theme-nay{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(212,175,55,.08), transparent 60%),
    url('/assets/bg/bg_pirate_2.jpg') center/cover fixed no-repeat, var(--paper);
}

#app{ max-width:1400px; margin:18px auto; padding:0 14px; }

/* Header */
.head-bar{
  display:flex; gap:8px; align-items:center;
  background:var(--glass); backdrop-filter: blur(8px);
  padding:10px; border-radius: var(--radius); border:1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.pill{
  padding:6px 10px;
  border-radius:999px;
  background: var(--primary-soft);
  border:1px solid var(--line);
  color: var(--ink);
  font-weight:800;
}
.spacer{ flex:1; }

/* Carrousel avatar (FIXE) */
.picker{ display:flex; align-items:center; gap:8px; }
#avImg{
  width:44px; height:44px;
  flex: 0 0 44px;
  border-radius:10px; border:1px solid var(--line);
  object-fit: cover; display:block;
  background:#0b1220;
}
.picker button{
  width:32px; height:32px; padding:0;
  border-radius:10px; border:1px solid var(--line);
  background:var(--glass-weak); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* Cards / blocs */
.card{ border-radius: var(--radius); padding:12px; }
.translucent{ background:var(--glass); border:1px solid var(--line); }

/* Buttons */
.btn{
  cursor:pointer; font-weight:900; color:#111827;
  background: linear-gradient(180deg, #f5d97a, #d4af37);
  border:1px solid #a9851e;
  border-radius:999px; padding:9px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .08s var(--ease), filter .08s var(--ease), opacity .08s var(--ease);
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0); }
.btn.ghost{
  background: linear-gradient(180deg, #1b2230, #111827);
  border-color: #2b3548;
  color:#e5e7eb;
}
.btn.primary{
  background: linear-gradient(180deg, #ffe394, #e6be4a);
  border-color: #c59a2a;
  color:#111827;
}
.btn.danger{
  background: linear-gradient(180deg, #fda4a4, #dc2626);
  border-color:#7f1d1d; color:#fff;
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Volume slider */
#volume,#volume2{
  -webkit-appearance: none;
  width: 140px; height: 12px;
  background: transparent; outline: none;
  margin: 0 8px; padding: 0;
}
#volume::-webkit-slider-runnable-track,
#volume2::-webkit-slider-runnable-track{
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, #2b3548, #c59a2a);
  border: 1px solid #374151;
}
#volume::-webkit-slider-thumb,
#volume2::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -4px;
  background: #111827; border-radius: 50%;
  border: 2px solid #d4af37;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Table layout */
.table-area{
  position:relative; min-height:70vh; margin-top:12px;
  display:grid; grid-template-areas:
    "c0 center c1"
    ".  center ."
    "c2 center c3";
  grid-template-columns: minmax(360px, 1fr) minmax(300px, 380px) minmax(360px, 1fr);
  grid-template-rows: auto 1fr auto;
  gap:14px;
}
.center-col{grid-area:center; display:flex; flex-direction:column; align-items:center; gap:12px}
.corner.c0{grid-area:c0}.corner.c1{grid-area:c1}.corner.c2{grid-area:c2}.corner.c3{grid-area:c3}
.corner{display:flex;justify-content:center;align-items:flex-start}

/* Joueurs */
.playerCard{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:10px;
  backdrop-filter: blur(6px);
  margin: 0 auto; width:100%;
  max-width: 520px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: box-shadow .12s var(--ease), transform .08s var(--ease);
  position: relative;
}
.playerCard.is-turn{
  box-shadow: 0 0 0 3px rgba(212,175,55,.45), 0 12px 28px rgba(212,175,55,.25);
  transform: translateY(-1px);
}
.playerCard .head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.playerCard .head img{width:28px;height:28px;border-radius:50%}
.playerCard .name{font-weight:900}
.score-badge{
  margin-left:auto;background:var(--primary-soft);border:1px solid var(--line);
  border-radius:999px;padding:3px 8px;font-weight:800;color: var(--primary)
}

.mini-hand{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mini-card{
  width: var(--mini-w); height: var(--mini-h);
  border-radius: 10px; border:1px solid var(--line);
  background:#0b1220; box-shadow: 0 4px 10px rgba(0,0,0,.35);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition: transform .08s var(--ease), box-shadow .12s var(--ease), outline-color .08s var(--ease);
}
.mini-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.45); cursor:pointer; }
.mini-card.selected{
  outline: 3px solid var(--gold);
  box-shadow: 0 8px 22px rgba(212,175,55,.45);
}

/* ZONES */
.zones{ display:grid; grid-template-columns: 140px 140px 1fr; gap:10px; align-items:start; }
.zone{
  background: var(--glass-weak);
  border:1px dashed #2b3548;
  border-radius:10px; padding:8px;
  min-height: calc(var(--stack-h) + 26px);
  display:flex; flex-direction:column; justify-content:flex-start;
  cursor:pointer;
}
.zone-title{ font-size:11px; color:var(--ink-dim); margin-bottom:6px; }

.stack{ position: relative; width: var(--stack-w); height: var(--stack-h); margin: 0 auto; }
.stack:empty::after{
  content:""; display:block; width: 100%; height: 100%;
  border-radius:12px; border:1px dashed #2b3548; background: rgba(0,0,0,.18);
}
.stack-card{
  position:absolute; top:0; left:0;
  width:var(--stack-w); height:var(--stack-h);
  border-radius:12px; border:1px solid var(--line);
  background:#0b1220; box-shadow: 0 6px 16px rgba(0,0,0,.45);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  z-index: calc(var(--i, 0));
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.stack-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.stack-card.tilt{ transform: rotate(-90deg) scale(1.03); box-shadow: 0 10px 26px rgba(212,175,55,.45); }

/* Piles (deck/défausse) */
.piles{ display:flex; gap:18px; align-items:flex-start; flex-wrap:nowrap; margin-top:6px; }
.pile{position:relative;text-align:center}
.pile-img{
  width:96px; height:132px; display:block;
  border-radius:12px; border:1px solid var(--line); background:#0b1220;
  box-shadow: var(--shadow);
}
.pile-img.deck{ background:url(/assets/cards/carte_dos.png) center/cover no-repeat; }
.pile-count{
  position:absolute;right:-8px;top:-8px;
  background:#0b1220;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:2px 6px;
  font-size:12px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.45)
}
.pile-title{font-size:12px;color:var(--ink-dim);margin-top:6px}

/* Badges */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--line); background:#0b1220; font-size:12px; font-weight:800; }
.badge.ok{ color:#22c55e; border-color:#14532d; background:#0a1b12; }
.badge.danger{ color:#f87171; border-color:#7f1d1d; background:#2b0f11; }

/* Bottes (mini & modal) */
.boot-mini{ width:24px; height:32px; border-radius:6px; border:1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.45); vertical-align:middle; }
.boots-open{ cursor:pointer; display:inline-flex; gap:4px; align-items:center; }

/* Chat etc. */
.chat{ width:100%; background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:8px; }
.chat-body{ max-height:200px; height:200px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.chat-input{ display:flex; gap:8px }
.chat-input input{ flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#0b1220; color:#ink }
.chat-msg{ display:flex; gap:8px; align-items:flex-start }
.chat-msg .avatar{ width:24px; height:24px; border-radius:50% }
.chat-msg .bubble{ background:#0b1220; border:1px solid var(--line); border-radius:10px; padding:8px; max-width:100% }
.small{ font-size:12px } .dim{ color: var(--ink-dim) } .big{ font-size:18px; font-weight:900 }

/* Public list hover */
.public-item{ transition: box-shadow .12s var(--ease), transform .08s var(--ease); }
.public-item:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.45); }

/* Modal (bottes) */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal-card{
  position:relative; z-index:1;
  width: min(92vw, 420px);
  background: var(--glass); border:1px solid var(--line);
  border-radius: 14px; padding: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.modal-head{ display:flex; align-items:center; gap:8px; }
.modal-x{
  margin-left:auto;
  width:32px; height:32px; border-radius:10px;
  border:1px solid var(--line); background:var(--glass-weak);
  color:var(--ink); cursor:pointer;
}
.boots-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
  margin-top:10px;
}
.boot-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px; border:1px solid var(--line); border-radius:10px; background:#0b1220;
}
.boot-item img{ width:60px; height:80px; border-radius:8px; border:1px solid var(--line); object-fit:cover; display:block; }
.boot-item .lbl{ font-size:12px; color:var(--ink-dim); text-align:center; }

@media (max-width: 900px){
  .table-area{
    grid-template-areas:
      "center"
      "c0"
      "c1"
      "c2"
      "c3";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .center-col{ order: -1; }
  :root{ --mini-w: 54px; --mini-h: 74px; }
}

/* (…tout le fichier identique à ta version précédente, sauf ajouts ci-dessous) */

/* === Ajout: slot vide pour la 7e carte === */
.mini-card.placeholder{
  background: transparent;
  border: 2px dashed #2b3548;
  box-shadow: none;
}

/* === Ajout: pastilles d’attaque en bas à droite === */
.attack-pills{
  position:absolute;
  right:10px; bottom:10px;
  display:flex; gap:6px; flex-wrap:wrap;
  justify-content:flex-end; max-width:42%;
  pointer-events:none;
}
.pill-att{
  padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800;
  border:1px solid var(--line); background:#0b1220; color:var(--ink);
}
.pill-att.pill-danger{
  color:#f87171; background:#2b0f11; border-color:#7f1d1d;
}