.horses-wrap{
  width:100%;
  display:grid;
  gap:14px;
}

.horses-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:#fffa85;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 12px;
}

.horses-setup,
.horses-info{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.horses-setup label{
  font-weight:900;
  text-transform:uppercase;
  font-size:.82rem;
}

.horses-setup select,
.horse-name-field input{
  border:2px solid var(--line);
  border-radius:10px;
  background:white;
  color:var(--line);
  padding:8px 10px;
  font-weight:900;
}

.horses-btn,
.horses-roll{
  border:2px solid var(--line);
  border-radius:12px;
  background:#ffd32a;
  color:var(--line);
  box-shadow:3px 3px 0 var(--line);
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
  font-size:.86rem;
}

.horses-btn.primary{ background:#2ed573; }
.horses-btn.danger{ background:#ff4757; color:white; }

.horses-pill{
  background:white;
  border:2px solid var(--line);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--line);
  padding:7px 10px;
  font-weight:900;
  font-size:.86rem;
}

.horses-names{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.horse-name-field{
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px;
  display:grid;
  gap:6px;
}

.horse-name-field label{
  font-weight:900;
  text-transform:uppercase;
  font-size:.82rem;
}

.horse-name-field.red{background:#ff7675}
.horse-name-field.blue{background:#74b9ff}
.horse-name-field.green{background:#55efc4}
.horse-name-field.yellow{background:#ffeaa7}

.horse-name-field input{ width:100%; }

.horses-message{
  min-height:46px;
  text-align:center;
  font-size:.98rem;
  font-weight:900;
  color:#111;
  background:#fffa85;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.horses-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:18px;
  align-items:start;
}

.horses-side{
  display:grid;
  gap:12px;
}

.horses-dice-box{
  display:grid;
  gap:12px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--line);
  padding:14px;
  justify-items:center;
}

.horses-roll{
  width:100%;
  min-height:54px;
  font-size:1rem;
  background:#ff4757;
  color:white;
}

.horses-roll:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.horses-score-panel{
  display:grid;
  gap:10px;
}

.horses-score{
  background:white;
  border:3px solid var(--line);
  border-radius:15px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px;
  font-weight:900;
}

.horses-score small{
  opacity:.8;
  font-weight:900;
}

.horses-score.active{
  outline:4px solid #ff4757;
}

.horses-score.red{background:#ff7675}
.horses-score.blue{background:#74b9ff}
.horses-score.green{background:#55efc4}
.horses-score.yellow{background:#ffeaa7}

.horses-rules{
  display:grid;
  gap:6px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:15px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px;
  font-weight:900;
  font-size:.85rem;
}

.horses-rules span{
  background:#fff8e7;
  border:2px solid var(--line);
  border-radius:9px;
  padding:6px 8px;
}

/* Plateau clair comme ton image */
.horses-board-stage{
  position:relative;
  width:min(74vh,72vw,640px);
  aspect-ratio:1 / 1;
  margin:0 auto;
  perspective:900px;
}

.horses-board{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(15,1fr);
  grid-template-rows:repeat(15,1fr);
  background:#f5efcf;
  border:6px solid var(--line);
  border-radius:18px;
  box-shadow:10px 10px 0 var(--line);
  overflow:hidden;
  position:relative;
}

.horses-cell{
  border:0;
  background:#f5efcf;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.horses-cell.empty{
  background:#f5efcf;
}

.horses-cell.path{
  border-radius:50%;
  border:2px solid #111;
  margin:2px;
}

.horses-cell.path.zone-yellow{ background:#f2c300; }
.horses-cell.path.zone-blue{ background:#30d4db; }
.horses-cell.path.zone-red{ background:#ff4b2b; }
.horses-cell.path.zone-green{ background:#b7ef16; }

.horses-cell.safe{
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.45);
}

.horses-cell.safe::before{
  content:"★";
  font-size:.9rem;
  color:#111;
  opacity:.95;
  z-index:1;
}

.horses-cell.home-red,
.horses-cell.home-blue,
.horses-cell.home-green,
.horses-cell.home-yellow{
  margin:0;
  border-radius:0;
}

.horses-cell.home-red{ background:#f78a72; }
.horses-cell.home-blue{ background:#93dce0; }
.horses-cell.home-green{ background:#c6f72c; }
.horses-cell.home-yellow{ background:#f0dc84; }

.horses-cell.home-red::before,
.horses-cell.home-blue::before,
.horses-cell.home-green::before,
.horses-cell.home-yellow::before{
  content:"";
  position:absolute;
  inset:14%;
  border:4px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.22);
}

.horses-cell.finish-red,
.horses-cell.finish-blue,
.horses-cell.finish-green,
.horses-cell.finish-yellow{
  margin:2px;
  border:2px solid #111;
  border-radius:8px;
  font-weight:900;
}

.horses-cell.finish-red{ background:#ff8a73; }
.horses-cell.finish-blue{ background:#8fdadd; }
.horses-cell.finish-green{ background:#b8ef24; }
.horses-cell.finish-yellow{ background:#ecd77d; }

.horses-cell[class*="finish-"]::after{
  content:attr(data-step);
  position:absolute;
  font-size:.82rem;
  font-weight:900;
  color:#111;
  z-index:1;
}

.horses-board .horses-cell:nth-child(113){
  background:conic-gradient(#ff8a73 0 25%, #8fdadd 0 50%, #b8ef24 0 75%, #ecd77d 0);
  border:2px solid #111;
}

.horses-board .horses-cell:nth-child(113)::before{
  content:"🏆";
  font-size:1.2rem;
  z-index:2;
}

.horse-token{
  position:absolute;
  width:70%;
  height:70%;
  border-radius:50%;
  border:3px solid var(--line);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  font-weight:900;
  cursor:pointer;
  z-index:5;
  transition:.12s ease;
}

.horse-token:hover{
  transform:scale(1.08);
}

.horse-token.playable{
  animation:horsePulse .45s ease-in-out infinite alternate;
  outline:3px solid white;
}

@keyframes horsePulse{
  from{transform:scale(1)}
  to{transform:scale(1.16)}
}

.horse-token.red{background:#ff4757;color:white}
.horse-token.blue{background:#0984e3;color:white}
.horse-token.green{background:#2ed573;color:#111}
.horse-token.yellow{background:#ffd32a;color:#111}

/* Vrai dé 3D */
.horses-dice-wrap{
  --dice-color:#ffffff;
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:76px;
  transform:translate(-50%,-50%);
  z-index:30;
  pointer-events:none;
  transform-style:preserve-3d;
}

.horses-dice-wrap.player-red{ --dice-color:#ff6b6b; }
.horses-dice-wrap.player-blue{ --dice-color:#59c7ff; }
.horses-dice-wrap.player-green{ --dice-color:#7eed70; }
.horses-dice-wrap.player-yellow{ --dice-color:#ffd85a; }
.horses-dice-wrap.neutral{ --dice-color:#ffffff; }

.horses-dice-cube{
  position:relative;
  width:76px;
  height:76px;
  transform-style:preserve-3d;
  transition:transform .35s ease-out;
}

.dice-face{
  position:absolute;
  inset:0;
  border:3px solid #111;
  border-radius:14px;
  background:var(--dice-color);
  box-shadow:0 0 0 2px rgba(255,255,255,.35) inset, 4px 4px 0 rgba(0,0,0,.28);
}

.face-1{ transform:translateZ(38px); }
.face-6{ transform:rotateY(180deg) translateZ(38px); }
.face-3{ transform:rotateY(90deg) translateZ(38px); }
.face-4{ transform:rotateY(-90deg) translateZ(38px); }
.face-2{ transform:rotateX(90deg) translateZ(38px); }
.face-5{ transform:rotateX(-90deg) translateZ(38px); }

.horses-dice-cube.show-1{ transform:rotateX(0deg) rotateY(0deg); }
.horses-dice-cube.show-2{ transform:rotateX(-90deg) rotateY(0deg); }
.horses-dice-cube.show-3{ transform:rotateX(0deg) rotateY(-90deg); }
.horses-dice-cube.show-4{ transform:rotateX(0deg) rotateY(90deg); }
.horses-dice-cube.show-5{ transform:rotateX(90deg) rotateY(0deg); }
.horses-dice-cube.show-6{ transform:rotateX(0deg) rotateY(180deg); }

.horses-dice-wrap.rolling{
  animation:horsesDiceDrop .6s linear infinite;
}

.horses-dice-cube.rolling{
  animation:horsesDiceSpin .6s linear infinite;
}

.horses-dice-wrap.landed{
  animation:horsesDiceLand .35s ease-out;
}

@keyframes horsesDiceDrop{
  0%   { transform:translate(-50%,-180%) scale(.88); }
  40%  { transform:translate(-46%,-95%) scale(1.02); }
  70%  { transform:translate(-55%,-55%) scale(.98); }
  100% { transform:translate(-50%,-50%) scale(1.03); }
}

@keyframes horsesDiceSpin{
  0%   { transform:rotateX(0deg) rotateY(0deg); }
  25%  { transform:rotateX(180deg) rotateY(90deg); }
  50%  { transform:rotateX(270deg) rotateY(180deg); }
  75%  { transform:rotateX(360deg) rotateY(270deg); }
  100% { transform:rotateX(540deg) rotateY(360deg); }
}

@keyframes horsesDiceLand{
  0%   { transform:translate(-50%,-120%) scale(.8); }
  65%  { transform:translate(-50%,-44%) scale(1.08); }
  100% { transform:translate(-50%,-50%) scale(1); }
}

/* Pips */
.pip{
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#111;
}

.pip.tl{ top:12px; left:12px; }
.pip.tr{ top:12px; right:12px; }
.pip.bl{ bottom:12px; left:12px; }
.pip.br{ bottom:12px; right:12px; }
.pip.c{ top:50%; left:50%; transform:translate(-50%,-50%); }
.pip.ml{ top:50%; left:12px; transform:translateY(-50%); }
.pip.mr{ top:50%; right:12px; transform:translateY(-50%); }

.game-frame{
  padding:14px !important;
}

@media(max-width:980px){
  .horses-layout{
    grid-template-columns:1fr;
  }

  .horses-side{
    order:2;
  }

  .horses-board-stage{
    order:1;
    width:min(92vw,640px);
  }

  .horses-score-panel,
  .horses-names{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .horses-score-panel,
  .horses-names{
    grid-template-columns:1fr;
  }

  .horse-token{
    border-width:2px;
    font-size:.7rem;
  }

  .horses-dice-wrap,
  .horses-dice-cube{
    width:62px;
    height:62px;
  }

  .face-1{ transform:translateZ(31px); }
  .face-6{ transform:rotateY(180deg) translateZ(31px); }
  .face-3{ transform:rotateY(90deg) translateZ(31px); }
  .face-4{ transform:rotateY(-90deg) translateZ(31px); }
  .face-2{ transform:rotateX(90deg) translateZ(31px); }
  .face-5{ transform:rotateX(-90deg) translateZ(31px); }

  .pip{
    width:9px;
    height:9px;
  }
}