/* ============================================================
   Écran Plateau
   ============================================================ */
.cp-root{ padding: 20px 16px 24px; }

.cp-board-wrap{ position: relative; z-index: 2; width: min(94vw, 380px); }
.cp-board{
  position: relative; width: 100%; aspect-ratio: 1/1;
  background: radial-gradient(circle at 50% 45%, #16224a, #0a1230 75%);
  border-radius: 14px; border: 2px solid rgba(242,193,78,0.5);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.4);
}

.cp-row-top, .cp-row-bottom{ position: absolute; left: 0; right: 0; height: calc(100%/9); display: flex; }
.cp-row-top{ top: 0; }
.cp-row-bottom{ bottom: 0; left: calc(100%/9); right: 0; }
.cp-col-left, .cp-col-right{ position: absolute; top: calc(100%/9); bottom: 0; width: calc(100%/9); display: flex; flex-direction: column; }
.cp-col-left{ left: 0; }
.cp-col-right{ right: 0; bottom: calc(100%/9); }

.cp-cell{
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  border: 1px solid rgba(6,10,26,0.55); position: relative;
}
.cp-cell.savoirs{ background: var(--savoirs-bg); color: var(--savoirs-ink); }
.cp-cell.culture{ background: var(--culture-bg); color: var(--culture-ink); }
.cp-cell.sport{ background: var(--sport-bg); color: var(--sport-ink); }
.cp-cell.sante{ background: var(--sante-bg); color: var(--sante-ink); }
.cp-cell.clash{ background: var(--clash-bg); color: var(--clash-ink); }
.cp-cell.active{ outline: 2px solid #fff; outline-offset: -2px; filter: brightness(1.15); }
.cp-cell--landed{ animation: cp-cell-pulse .7s ease; }
@keyframes cp-cell-pulse{
  0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  35%{ transform: scale(1.18); box-shadow: 0 0 14px 4px rgba(255,255,255,0.55); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.cp-center{
  position: absolute; inset: calc(100%/9); border-radius: 12px;
  background: radial-gradient(circle at 50% 45%, rgba(242,193,78,0.14), transparent 60%), linear-gradient(160deg, #12183c, #0a1230);
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: auto auto auto;
  align-items: center; justify-items: center; gap: 4px 2px; padding: 8px;
  border: 1px solid rgba(242,193,78,0.35);
}
.cp-legend-item{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.cp-legend-icon{
  width: 15vw; height: 15vw; max-width: 46px; max-height: 46px; min-width: 34px; min-height: 34px;
  border-radius: 10px; display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.cp-legend-icon svg{ width: 62%; height: 62%; }
.cp-legend-icon.savoirs{ background: var(--savoirs-bg); color: var(--savoirs-ink); }
.cp-legend-icon.culture{ background: var(--culture-bg); color: var(--culture-ink); }
.cp-legend-icon.sport{ background: var(--sport-bg); color: var(--sport-ink); }
.cp-legend-icon.sante{ background: var(--sante-bg); color: var(--sante-ink); }
.cp-legend-icon.clash{ background: var(--clash-bg); color: var(--clash-ink); }
.cp-legend-label{ font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.03em; color: var(--ink); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.cp-legend-savoirs{ grid-column: 2; grid-row: 1; }
.cp-legend-clash{ grid-column: 1; grid-row: 2; }
.cp-legend-culture{ grid-column: 3; grid-row: 2; }
.cp-legend-sante{ grid-column: 1; grid-row: 3; }
.cp-legend-sport{ grid-column: 3; grid-row: 3; }

.cp-center-core{ grid-column: 2; grid-row: 2; display:flex; flex-direction:column; align-items:center; gap:3px; position: relative; }
.cp-center-glow{ position: absolute; width: 120%; aspect-ratio: 1/1; border-radius: 50%; background: radial-gradient(circle, rgba(242,193,78,0.35), transparent 70%); filter: blur(6px); z-index: 0; }
.cp-center-mark{ display:flex; align-items:center; gap:1px; position: relative; z-index: 1; }
.cp-center-mark .c{ font-size: clamp(26px,9.5vw,38px); }
.cp-center-bolt{ width: 15px; height: 26px; }
.cp-center-tag{ font-size: 7.5px; letter-spacing: 0.08em; color: var(--gold-soft); text-transform: uppercase; text-align: center; opacity: 0.9; position: relative; z-index: 1; }

.cp-pawn{
  position: absolute; width: calc(100%/9 * 0.55); aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, #b6842a);
  box-shadow: 0 3px 8px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.5);
  transition: left .28s cubic-bezier(.4,1.6,.6,1), top .28s cubic-bezier(.4,1.6,.6,1);
  z-index: 3;
}

.cp-dice-row{ position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; margin: 18px 0 8px; }
.cp-dice{
  width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(160deg, #fff, #d8dce8);
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  padding: 9px; gap: 3px; box-shadow: 0 8px 18px rgba(0,0,0,0.4); transition: transform .5s ease;
}
.cp-dice.rolling{ animation: cp-shake .5s ease; }
@keyframes cp-shake{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(-15deg);} 75%{transform:rotate(15deg);} }
.cp-pip{ width: 100%; height: 100%; border-radius: 50%; background: #16224a; opacity: 0; }

.cp-roll-btn{ font-size: 15px; padding: 14px 22px; }

.cp-players{ position: relative; z-index: 2; width: 100%; max-width: 420px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cp-player{ display: flex; align-items: center; gap: 10px; }
.cp-player-dot{ width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.cp-player-name{ font-size: 12.5px; font-weight: 700; width: 74px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-player-level{ font-size: 9px; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; font-weight: 700; flex: none; }
.cp-player-bar{ flex: 1; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; position: relative; }
.cp-player-fill{ height: 100%; border-radius: 999px; transition: width .4s ease; }
.cp-player-score{ font-size: 11.5px; color: var(--muted); width: 34px; text-align: right; flex: none; }
.cp-player.current .cp-player-name{ color: var(--gold-soft); }
.cp-player.current{ background: rgba(255,255,255,0.05); border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }

.cp-footer{ position: relative; z-index: 2; margin-top: 16px; font-size: 10.5px; color: var(--muted); text-align: center; max-width: 360px; }