/* css/chips.css */

/* ── Chip individuelle ───────────────────────────────────────── */
.chip {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px dashed currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.5px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}
.chip:hover     { transform: scale(1.08); }
.chip--active   { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.12); }
.chip--unaffordable {
  opacity: 0.2;
  cursor: not-allowed;
  filter: grayscale(1);
  pointer-events: none;
}

/* ── Wrapper tray + flèches ──────────────────────────────────── */
.chip-tray-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  padding-bottom: var(--safe-bottom);   /* jetons au-dessus de l'indicateur d'accueil iOS ; 0 sinon */
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.chip-tray-arrow {
  position: absolute;
  top: 0;
  bottom: var(--safe-bottom);   /* ne descend pas dans la marge de l'indicateur d'accueil ; 0 sinon */
  z-index: 10;
  width: 32px;
  border: none;
  background: none;
  color: var(--text2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--transition);
}
.chip-tray-arrow:hover { color: var(--accent); }
.chip-tray-arrow--left {
  left: 0;
  background: linear-gradient(to right, var(--bg2) 55%, transparent);
}
.chip-tray-arrow--right {
  right: 0;
  background: linear-gradient(to left, var(--bg2) 55%, transparent);
}

/* ── Tray horizontal scrollable ──────────────────────────────── */
.chip-tray {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 36px; /* 36px de marge pour laisser place aux flèches */
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Firefox */
}
.chip-tray::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* ── Pile de chips sur le cercle de mise ─────────────────────── */
.chip-stack {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
}
.chip-stack .chip {
  position: absolute;
  left: 0;
  cursor: default;
}
.chip-stack .chip:hover { transform: none; }

/* Montant total inscrit sur la face du chip supérieur */
.chip-stack__total {
  position: absolute;
  left: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,1), 0 1px 4px rgba(0,0,0,.9);
  pointer-events: none;
  z-index: 5;
  letter-spacing: -.02em;
}

/* ── Cercle de mise ──────────────────────────────────────────── */
.bet-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(55, 230, 182, 0.4);
  background: rgba(55, 230, 182, 0.05);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition);
}
.bet-circle:hover { border-color: var(--accent); background: rgba(55, 230, 182, 0.1); }
.bet-circle.has-bet { border-color: var(--accent); }
.bet-circle--side { width: 60px; height: 60px; border-color: rgba(122,225,255,.3); background: rgba(122,225,255,.04); }
.bet-circle--side:hover { border-color: var(--cyan); }
.bet-circle--side.has-bet { border-color: var(--cyan); }

.bet-circle__label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}