/* --- DEBUT BLOC C1 : Variables & reset --- */
:root{
  --bg:#0e101a; --panel:#141827; --ink:#e8ecff;
  --muted:#a9b0d3; --accent:#8aa3ff; --ok:#3da6ff55;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#0e101a; color:var(--ink);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial
}
/* --- FIN BLOC C1 --- */

/* --- DEBUT BLOC C2 : Layout & composants --- */
.app{
  max-width:1400px; margin:24px auto; padding:0 16px;
  display:grid; grid-template-columns:460px 1fr; gap:16px
}
.panel{
  background:#141827; border:1px solid #2b3557;
  border-radius:16px; padding:16px
}
h1{font-size:18px; margin:0 0 8px}
h2{font-size:13px; margin:14px 0 6px; color:var(--muted)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.btn{
  border:1px solid #2a3354; background:#0e1430; color:var(--ink);
  padding:10px 12px; border-radius:10px; cursor:pointer
}
select,input{
  width:100%; padding:10px 12px; background:#0f1324; color:var(--ink);
  border:1px solid #2a3354; border-radius:10px
}
.hint{font-size:12px; color:var(--muted)}
.pill{
  display:inline-block; padding:4px 8px; border-radius:999px;
  font-size:11px; background:#0e1430; border:1px solid #2a3354; color:var(--muted)
}
pre.err{
  white-space:pre-wrap; background:#0f1324; border:1px solid #2a3354;
  border-radius:8px; padding:8px; color:#ffb3b3
}
.players{display:grid; gap:6px; margin-top:6px}
.playerRow{display:flex; align-items:center; gap:8px; font-size:13px}
.badge{width:14px; height:14px; border-radius:50%; display:inline-block; border:2px solid #0003}
/* --- FIN BLOC C2 --- */

/* --- DEBUT BLOC C3 : Aperçu & rotation --- */
.preview { display:grid; gap:8px; align-items:center; justify-items:start; margin-bottom:8px }
.preview-frame{ position:relative; width:144px; height:144px }
.preview img { width:144px; height:144px; object-fit:cover; transform-origin:50% 50% }
.preview-meta { font-size:12px; color:var(--muted) }
.warn { font-size:12px; color:#ffb3b3 }
.rotBtns{ display:flex; gap:8px; margin-bottom:6px }
.rotBtn{
  width:32px; height:32px; border-radius:50%;
  border:1px solid #2a3354; background:#0e1430; color:var(--ink);
  cursor:pointer; font-size:18px;
}
.rotBtn:hover{ border-color:#3a4580 }
/* --- FIN BLOC C3 --- */

/* --- DEBUT BLOC C4bis : Plateau dynamique --- */
.board-wrap{
  overflow:auto; border-radius:12px; border:1px solid #2b3557;
  background:#0c1124; padding:12px;
}
.board{
  display:grid; gap:2px;        /* taille pilotée par JS avec gridTemplateColumns/Rows */
}
.cell{
  width:144px; height:144px; background:#0f1324; border:1px solid #222a49;
  border-radius:8px; position:relative; display:grid; place-items:center;
  color:#7f8bb0; font-size:12px; cursor:pointer; overflow:hidden;
}
.cell:hover{outline:2px solid #2f3b73}
.cell.active{outline:2px solid var(--accent)}
.coord{position:absolute; top:4px; left:6px; font-size:11px; color:#98a2d1}
.tile-img{width:100%; height:100%; object-fit:cover; transform-origin:50% 50%}
/* --- FIN BLOC C4bis --- */

/* --- DEBUT BLOC C5 : Surbrillance des cases jouables --- */
.cell.playable::after{
  content:""; position:absolute; inset:2px; border-radius:8px;
  box-shadow: 0 0 0 3px var(--ok) inset, 0 0 12px 2px #3da6ff33;
  pointer-events:none;
}
/* --- FIN BLOC C5 --- */

/* --- DEBUT BLOC C6 : Meeple centré + badge sur la tuile --- */
.meeple{
  position:absolute; width:48px; height:48px;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; filter:drop-shadow(0 2px 2px #000a);
}
.meepleBadge{
  position:absolute; width:14px; height:14px;
  left:50%; bottom:10px; transform:translateX(-50%);
  border-radius:50%; border:2px solid #0007;
}
/* --- FIN BLOC C6 --- */

/* --- DEBUT BLOC C7 : Meeple tray (stock du joueur courant) --- */
.meepleTray{
  display:flex; flex-wrap:wrap; gap:8px; padding:6px 0
}
.meepleToken{
  width:40px; height:40px; border-radius:8px;
  background:#101735; border:1px solid #2a3354; position:relative;
  display:grid; place-items:center; cursor:pointer;
}
.meepleToken img{ width:28px; height:28px; object-fit:contain }
.meepleToken.empty{ opacity:0.35; filter:grayscale(1); cursor:not-allowed }
.meepleToken .dot{
  position:absolute; bottom:4px; right:4px;
  width:10px; height:10px; border-radius:50%; border:2px solid #0007;
}
/* Curseur quand un meeple est "en main" */
body.cursor-meeple{
  cursor: url('meeple.png') 24 24, pointer;
}
/* --- FIN BLOC C7 --- */