/* Ludo Express – Styles pro */



.ludo-game-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.ludo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.ludo-room-info h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
}
.ludo-room-id { opacity:.85; font-size:.9rem; }

.ludo-game-status { display:flex; align-items:center; gap:12px; }
.ludo-status {
  padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem;
}
.ludo-status.waiting { background: rgba(255,193,7,.18); color:#ffc107; }
.ludo-status.playing { background: rgba(40,167,69,.18); color:#28a745; }
.ludo-status.ended   { background: rgba(220,53,69,.18); color:#dc3545; }

/* Layout principal */
.ludo-main { display:flex; gap:24px; padding:24px; min-height:0; }
.ludo-board-container { flex:1; display:flex; flex-direction:column; align-items:center; gap:18px; }

/* Canvas plateau */
#ludo-canvas {
  max-width: 100%;
  max-height: 680px;
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(0,0,0,.28);
  background: transparent; /* important : pas de fond sombre sous le board */
  user-select: none;
  cursor: default;
}

/* Timer */
.ludo-timer-section { width: 100%; max-width: 320px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.ludo-timer-bar { width:100%; height:8px; background: rgba(255,255,255,.25); border-radius: 999px; overflow:hidden; }
.ludo-timer-progress { height:100%; width:100%; background: linear-gradient(90deg,#2ecc71,#1abc9c); transition:width .12s linear; }
.ludo-timer-text { font-weight:700; opacity:.95; }

/* Sidebar */
.ludo-sidebar { width: 280px; display:flex; flex-direction:column; gap:16px; }
.ludo-players-panel, .ludo-events-panel, .ludo-dice-panel {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px;
}
.ludo-players-panel h4, .ludo-events-panel h4 { margin:0 0 10px 0; font-size:1.05rem; font-weight:800; }

.ludo-players-list { display:flex; flex-direction:column; gap:8px; }
.ludo-player-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:10px;
}
.ludo-player-turn { 
  outline:3px solid #28a745; 
  background: rgba(40,167,69,.25) !important; 
  box-shadow: 0 0 15px rgba(40,167,69,0.4);
  transform: scale(1.02);
  transition: all 0.2s ease;
}
.ludo-player-turn::before {
  content: "🎯";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.2rem;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}
.ludo-player-color { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); }
.ludo-player-name { font-weight:800; }
.ludo-player-status { opacity:.85; font-size:.85rem; }
.ludo-player-crown { margin-left:auto; font-size:1.2rem; }

/* Events */
.ludo-events-list { display:flex; flex-direction:column; gap:6px; max-height:210px; overflow:auto; }
.ludo-event-item { padding:6px 8px; border-radius:8px; background: rgba(255,255,255,.10); font-size:.9rem; }

/* Calques du plateau */
.ludo-board-container { position: relative; }
.ludo-board-wrap { 
  position: relative; 
  width: 100%; 
  height: auto;
  /* S'assurer que les enfants absolus sont bien positionnés */
  display: block;
}

/* Canvas du plateau (fond) */
#ludo-canvas {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 680px;
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(0,0,0,.28);
  background: transparent;
  z-index: 1;
}

/* Overlay vidéos */
#ludo-ui-overlay {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Canvas des pions (au-dessus des vidéos) */
#ludo-canvas-pieces {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; /* Laisser passer les clics au canvas du plateau */
  z-index: 10; /* Bien au-dessus des vidéos (z-index: 2) */
}

/* Vignettes vidéos */
#ludo-ui-overlay .ludo-video-zone{
  position:absolute; border-radius:8px; overflow:hidden; background:#000; box-shadow:none;
  pointer-events:none;
}
#ludo-ui-overlay .ludo-video-zone video{ width:100%; height:100%; object-fit:cover; }
#ludo-ui-overlay .ludo-video-badge{
  position:absolute; left:8px; bottom:8px; padding:4px 8px; font:700 12px/1 system-ui;
  color:#fff; background:rgba(0,0,0,.5); border-radius:999px; pointer-events:none;
}

/* --- Plateau : le carré fait 90% du canvas, centré.
   => marge = 5% tout autour
   => une case = 90% / 15 = 6%
   => la "maison" = 5 cases = 30%
   Rouge:  (0,0) => left/top = 5%
   Vert:  (10,10) => left/top = 5% + 10*6% = 65%
   On garde un petit PAD pour ne pas mordre le trait noir. */
:root{
  --pad: .4%;
}
/* chaque base = 6 cases → 6/15 = 40% du plateau = 0.9 * 40% = 36% du canvas */
#ludoVideoZone-red{
  left: 5%;   /* marge plateau (90%) centrée → 5% tout autour */
  top:  5%;
  width: 36%;
  height:36%;
}
#ludoVideoZone-green{
  left: 59%;  /* 5% + 9 cases * 6% = 5 + 54 = 59 */
  top:  59%;
  width: 36%;
  height:36%;
}

/* s'assure que la vidéo remplit le carré */
#ludo-ui-overlay .ludo-video-zone video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* (optionnel) masquer le bloc vidéo d'origine pendant la partie */
#videos.rv-videos-hidden{ visibility:hidden !important; }
.ludo-event-capture { background: rgba(220,53,69,.18); border-left:3px solid #dc3545; }
.ludo-event-extra   { background: rgba(255,193,7,.18); border-left:3px solid #ffc107; }
.ludo-event-win     { background: rgba(40,167,69,.18); border-left:3px solid #28a745; }

/* Actions / boutons */
.ludo-actions { display:flex; flex-direction:column; gap:8px; }
.ludo-btn { padding:10px 16px; border:none; border-radius:10px; font-weight:800; cursor:pointer; transition:.15s ease; }
.ludo-ready-btn { background:#28a745; color:#fff; }
.ludo-ready-btn:hover { filter:brightness(1.1); }
.ludo-quit-btn  { background:#dc3545; color:#fff; }
.ludo-report-btn{ background:#6c757d; color:#fff; }

/* Dé */
.ludo-dice-panel { text-align:center; }
.ludo-dice-container { display:flex; flex-direction:column; align-items:center; gap:10px; }
.ludo-dice {
  width:60px; height:60px; background:#ffffff; border:3px solid #202020; border-radius:12px;
  display:grid; place-items:center; box-shadow:0 4px 10px rgba(0,0,0,.3);
  position: relative;
}

.ludo-dice-face { 
  width:100%; 
  height:100%; 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  grid-template-rows:repeat(3,1fr); 
  gap:2px; 
  padding:6px; 
}
.ludo-dice-pip { 
  width:8px; 
  height:8px; 
  background:#000000; 
  border-radius:50%; 
  opacity:1; 
  margin:auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ludo-dice.rolling { animation:diceRoll .6s ease-in-out; }
@keyframes diceRoll {
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(90deg) scale(1.1)}
  50%{transform:rotate(180deg) scale(1.2)}
  75%{transform:rotate(270deg) scale(1.1)}
  100%{transform:rotate(360deg) scale(1)}
}
@keyframes diceBounce {
  0%{transform:scale(0.5); opacity:0}
  50%{transform:scale(1.2)}
  100%{transform:scale(1); opacity:1}
}

/* Classe pour appliquer l'animation bounce */
.ludo-dice-face.bounce {
  animation: diceBounce 0.5s ease-out;
}

/* Événements de capture améliorés */
.ludo-event-capture { 
  background: linear-gradient(135deg, #dc3545, #c82333) !important; 
  color: white !important;
  border-left: 4px solid #ff6b6b !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
  font-weight: 600 !important;
  animation: eventSlideIn 0.3s ease-out !important;
}

@keyframes eventSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Toasts */
.ludo-messages { position:fixed; top:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.ludo-message { padding:12px 14px; background:rgba(0,0,0,.85); border-radius:10px; font-weight:700; }

/* Responsive */
/* Styles responsifs améliorés */
@media (max-width: 900px) {
  .ludo-main { 
    flex-direction: column; 
    padding: 16px;
    gap: 16px;
  }
  
  .ludo-sidebar { 
    width: 100%; 
    order: -1; 
  }
  
  #ludo-canvas { 
    max-height: min(80vw, 420px); 
  }
  
  .ludo-header {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
  }
  
  .ludo-game-status {
    flex-direction: column;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .ludo-game-container {
    font-size: 14px;
  }
  
  .ludo-btn {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  
  .ludo-dice {
    width: 50px;
    height: 50px;
  }
}