/* ========= Helpers ========= */
*{ box-sizing:border-box }

:root{
  --bg:#0b1220; --card:#0f172a; --stroke:#1f2937; --muted:#94a3b8; --text:#e5e7eb;
  --violet:#7c3aed; --violet2:#5b21b6; --danger:#b91c1c; --green:#16a34a;
}

body{
  margin:0;
  background:#0b1220 url("/assets/bg/night.jpg") center / cover no-repeat fixed;
  color:var(--text);
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
body.theme-day{ background:#f3f4f6 url("/assets/bg/day.jpg") center / cover no-repeat fixed; color:#111827; }

.app{ max-width:1400px; margin:18px auto; padding:0 12px }

/* ===== Topbar ===== */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.brand{ display:flex; align-items:center; gap:10px }
.brand img{ height:42px; border-radius:10px; border:1px solid var(--stroke); padding:4px; background:#0b1220 }
.title{ font-weight:800 }
.muted{ opacity:.8 }
.small{ font-size:12px }
.tiny{ font-size:11px }
.top-actions{ display:flex; gap:8px; align-items:center }
.top-actions input[type="range"]{ width:150px }

/* ===== Panels / cards ===== */
.panel{ background:var(--card); border:1px solid var(--stroke); border-radius:12px; overflow:hidden }
.panel-body{ padding:12px }
.panel-foot{ padding:10px; border-top:1px solid var(--stroke); display:flex; justify-content:flex-end }
.card{ background:#0b1220; border:1px solid var(--stroke); border-radius:12px; padding:12px }
.row{ display:flex; align-items:center }
.row.gap{ gap:8px }
.row.between{ justify-content:space-between }
.row.right{ justify-content:flex-end }
.col{ display:flex; flex-direction:column }
.stack{ display:flex; flex-direction:column; gap:6px }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.grow{ flex:1 }
input,button{ padding:8px 10px; border-radius:10px; border:1px solid var(--stroke); background:#111827; color:var(--text) }
button{ cursor:pointer }
button.primary{ background:linear-gradient(180deg,var(--violet),var(--violet2)); border-color:#6d28d9; color:#efe9ff }
button.primary:hover{ filter:brightness(1.08) }
button.soft{ background:#111827 }
button.danger{ background:linear-gradient(180deg,#dc2626,#991b1b); border-color:#b91c1c; color:#ffeaea }
button.sm{ padding:6px 8px; font-size:12px; border-radius:8px }
button.xl{ padding:16px 18px; font-size:20px; border-radius:12px }

/* ===== Avatar picker (réduit) ===== */
.picker{ display:flex; align-items:center; gap:6px }
.picker img{ height:48px; width:48px; object-fit:cover; border-radius:12px; border:1px solid var(--stroke); background:#0b1220 }
.picker button{ height:28px; min-width:28px; padding:0 6px; border-radius:8px }

/* ===== List ===== */
.list .listrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px; border:1px solid var(--stroke); border-radius:10px; background:#0b1220; margin-top:8px
}

/* ===== Status strip ===== */
.status-strip{
  display:flex; align-items:center; justify-content:space-between;
  background:#0b1220; border:1px solid var(--stroke); border-radius:10px; padding:8px; margin-bottom:10px
}

/* ===== Players row (4 slots fixes) ===== */
.players-row{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:12px;
}
.slot{
  display:flex; align-items:center; gap:10px;
  background:#0b1220; border:1px solid var(--stroke); border-radius:12px; padding:8px; position:relative;
}
.slot.empty{ opacity:.6 }
.slot-avatar{ width:40px; height:40px; border-radius:10px; border:1px solid var(--stroke); object-fit:cover; background:#111827 }
.slot-info{ display:flex; flex-direction:column; }
.slot-name{ font-weight:700; display:flex; align-items:center; gap:6px }
.slot-bubble{ font-size:12px; opacity:.9 }
.slot-one{
  position:absolute; right:8px; top:8px; background:#1e3a8a; color:#c7d2fe; border:1px solid #4338ca;
  padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700;
}
/* Stars (scores de manche) */
.slot-stars{ display:flex; gap:2px; line-height:1; }
.slot-stars .star{ color:#475569; font-size:12px }
.slot-stars .star.on{ color:#eab308 }

/* ===== Centre: piles ===== */
.center-one{
  display:flex; align-items:flex-end; justify-content:center; gap:24px; margin:8px 0 6px;
}
.pile{ display:flex; flex-direction:column; align-items:center; gap:6px }
.pilebtn{
  background:#0b1220; border:1px solid var(--stroke); border-radius:12px; padding:6px; position:relative;
}
.pilebtn img{ width:140px; height:210px; border-radius:10px; display:block; object-fit:contain; background:#0c1323 }
.pilecount{
  position:absolute; right:6px; bottom:6px; background:#111827; border:1px solid var(--stroke);
  padding:1px 6px; border-radius:999px; font-size:12px; opacity:.9;
}

/* Indicateurs droite (sens / couleur) */
.table-indicators{ display:flex; flex-direction:column; gap:8px; align-items:center }
.dir-indicator{
  font-size:28px; font-weight:800; padding:6px 10px; border:1px solid var(--stroke); border-radius:10px; background:#0b1220;
}
.color-indicator{ width:18px; height:18px; border-radius:999px; border:2px solid #111827 }

/* ===== ONE button ===== */
.one-row{ display:flex; justify-content:center; margin:6px 0 12px }
.onebtn{
  font-weight:900; font-size:22px; letter-spacing:.6px;
  background:linear-gradient(180deg,#22c55e,#16a34a); border-color:#15803d; color:#eafff0;
}

/* ===== Main du joueur ===== */
.hand-strip{ background:#0b1220; border:1px solid var(--stroke); border-radius:12px; padding:8px }
.hand-grid{ display:flex; gap:8px; flex-wrap:wrap }
.handcard{
  width:110px; height:165px; border-radius:10px; border:1px solid var(--stroke); background:#0c1323; object-fit:contain;
}
.handcard.sel{ outline:3px solid #7c3aed }
.handcard.dragging{ opacity:.6 }

/* ===== Chat ===== */
.chat{ background:#0b1220; border:1px solid var(--stroke); border-radius:12px; padding:10px; margin-top:12px }
.chat-head{ font-weight:700; margin-bottom:6px }
.chat-body{ max-height:180px; overflow:auto; display:flex; flex-direction:column; gap:8px }
.chat-input{ display:flex; gap:8px; margin-top:8px }
.chat-input input{ flex:1 }
.chatrow{ display:flex; gap:8px }
.chatrow img{ width:22px; height:22px; border-radius:50% }
.chatrow .bubble{ background:#111827; border:1px solid var(--stroke); border-radius:10px; padding:8px; max-width:100% }

/* ===== Modals ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:50 }
.modal .overlay{ position:absolute; inset:0; background:rgba(2,6,23,.6) }
.sheet{ position:relative; background:var(--card); border:1px solid var(--stroke); border-radius:12px; min-width:340px; max-width:96vw; padding:12px; z-index:1 }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.grid-animals{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.pick-color{ padding:12px; border-radius:12px; border:1px solid var(--stroke); background:#111827 }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; top:12px; transform:translateX(-50%);
  background:#111827; border:1px solid var(--stroke); border-radius:12px; padding:10px 14px;
  z-index:60; box-shadow:0 6px 18px rgba(0,0,0,.4)
}
.toast.good{ border-color:#166534 }
.toast.bad{ border-color:#7f1d1d }

/* Slot du joueur dont c'est le tour */
.slot.turn{
  box-shadow: 0 0 0 2px #7c3aed, inset 0 0 12px rgba(124,58,237,.35);
  border-color: #6d28d9;
}

/* ===== Responsive ===== */
@media (max-width:980px){
  .players-row{ grid-template-columns:1fr 1fr }
  .handcard{ width:96px; height:144px }
}
@media (max-width:640px){
  .players-row{ grid-template-columns:1fr }
  .handcard{ width:84px; height:126px }
  .pilebtn img{ width:120px; height:180px }
}