/* ============================================================================
   PLINKO – styles complets
   ========================================================================== */

/* ---------- Modale principale ---------- */
.plinko-modal {
  width: fit-content;
  /* mais on ne dépasse jamais 90% de la fenêtre */
  max-width: 90vw;
  /* conserve ta hauteur max et le scroll vertical */
  max-height: 95vh;
  overflow-y: auto;
  /* le reste inchangé */
  padding: 30px 35px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #16212e 0%, #1e2c3a 100%);
  /* … */
}
  
  /* ---------- Titre ---------- */
  .plinko-title{
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 15px;
    color: #4fbbff;
  }
  
  
  /* ---------- Wrapper (canvas + panneau) ---------- */
  .plinko-wrapper {
    overflow: visible;   /* on ne cache plus rien ici */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    /* flex: 1;  déjà en place */
  }
  
  /* ---------- Canvas ---------- */
  #plinkoCanvas {
    display: block;      /* on garde le block pour centrer */
  width: auto;         /* ← plus “100%” */
  height: auto;
  max-height: none;
  margin: 0 auto 20px;                  /* ratio conservé */
    background: #0d172c;
    border: 2px solid rgba(255,255,255,.07);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.38);
  }
  
  
  /* ---------- Panneau de contrôle ---------- */
  .plinko-panel{
    width: 100%;
    text-align: center;
    padding-top: 10px;
    line-height: 1.4;
  }
  
  .balance-line{
    margin-bottom: 10px;
    font-weight: 600;
    color: #fff;
  }
  
  /* ---------- Sélecteur de mise ---------- */
  .bet-selector{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .bet-btn{
    width: 32px; height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: #e0e0e0;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
  }
  .bet-btn:hover{
    background: rgba(79,187,255,.25);
    color: #fff;
    transform: translateY(-2px);
  }
  
  #betInput{
    width: 90px;
    text-align: center;
    padding: 8px 0;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #e0e0e0;
    font-weight: 600;
  }
  
  /* ---------- Indicateur de risque ---------- */
  .risk-indicator{margin: 6px 0 14px; font-weight: 600;}
  .risk-low   { color: #4CAF50; }
  .risk-medium{ color: #FF9800; }
  .risk-high  { color: #FF5252; }
  
  /* ---------- Bouton DROP ---------- */
  .drop-btn{
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(45deg,#4f7bff,#4fbbff);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
    box-shadow: 0 8px 22px rgba(79,187,255,.28);
  }
  .drop-btn:hover:not(:disabled){
    transform: translateY(-3px);
  }
  .drop-btn:disabled{
    opacity: .5;
    cursor: not-allowed;
  }
  
  /* ---------- Message gain / perte ---------- */
  .plinko-message{
    margin-top: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    opacity: 0;
    transition: opacity .4s;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  
  /* ---------- (Optionnel) Mieux rendre la bande multiplicateurs
       si elle est dessinée dans un div ou second canvas ---------- */
  #plinkoCanvas + canvas,
  .plinko-wrapper canvas + div{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
  }