/* === roulette-wheel.css === */
.roulette-wheel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 20px 16px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 16px; text-align: center; }
.roulette-wheel .roulette-wheel-title { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: #F97316; }
.roulette-wheel h2.roulette-wheel-title, .roulette-wheel h3.roulette-wheel-title, .roulette-wheel h4.roulette-wheel-title { font-size: 12px; letter-spacing: 0.14em; }
.roulette-wheel .roulette-wheel-stage { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; margin: 0; }
.roulette-wheel .roulette-wheel-image { display: block; width: 100%; height: 100%; }
.roulette-wheel .roulette-wheel-image.is-spinning { animation: rouletteWheelTurn 3.4s cubic-bezier(0.2, 0.65, 0.3, 1) both; }
.roulette-wheel .roulette-wheel-ball-track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.roulette-wheel .roulette-wheel-ball-track.is-spinning { animation: rouletteBallOrbit 3.4s cubic-bezier(0.15, 0.6, 0.25, 1) both; }
.roulette-wheel .roulette-wheel-ball { position: absolute; top: 11.9%; left: 48%; width: 4%; height: 4%; border-radius: 999px; background: radial-gradient(circle at 35% 35%, #ffffff 0%, #E2E8F0 55%, #94A3B8 100%); box-shadow: 0 0 6px rgba(255, 255, 255, 0.55); }
.roulette-wheel .roulette-wheel-ball-track.is-idle .roulette-wheel-ball { opacity: 0; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-0 { rotate: 0.000deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-1 { rotate: 9.730deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-2 { rotate: 19.459deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-3 { rotate: 29.189deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-4 { rotate: 38.919deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-5 { rotate: 48.649deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-6 { rotate: 58.378deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-7 { rotate: 68.108deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-8 { rotate: 77.838deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-9 { rotate: 87.568deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-10 { rotate: 97.297deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-11 { rotate: 107.027deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-12 { rotate: 116.757deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-13 { rotate: 126.486deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-14 { rotate: 136.216deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-15 { rotate: 145.946deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-16 { rotate: 155.676deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-17 { rotate: 165.405deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-18 { rotate: 175.135deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-19 { rotate: 184.865deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-20 { rotate: 194.595deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-21 { rotate: 204.324deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-22 { rotate: 214.054deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-23 { rotate: 223.784deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-24 { rotate: 233.514deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-25 { rotate: 243.243deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-26 { rotate: 252.973deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-27 { rotate: 262.703deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-28 { rotate: 272.432deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-29 { rotate: 282.162deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-30 { rotate: 291.892deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-31 { rotate: 301.622deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-32 { rotate: 311.351deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-33 { rotate: 321.081deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-34 { rotate: 330.811deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-35 { rotate: 340.541deg; }
.roulette-wheel .roulette-wheel-ball-track.roulette-wheel-land-36 { rotate: 350.270deg; }
.roulette-wheel .roulette-wheel-result { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; margin: 0; font-size: 15px; line-height: 1.4; color: #CBD5E1; }
.roulette-wheel .roulette-wheel-number { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; font-size: 18px; font-weight: 800; color: #ffffff; background: #273549; font-variant-numeric: tabular-nums; }
.roulette-wheel .roulette-wheel-number.is-empty { display: none; }
.roulette-wheel .roulette-wheel-number-red { background: #B91C1C; }
.roulette-wheel .roulette-wheel-number-black { background: #0F172A; border: 1px solid rgba(203, 213, 225, 0.35); }
.roulette-wheel .roulette-wheel-number-green { background: #15803D; }
.roulette-wheel .roulette-wheel-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; background: transparent; border: 1px solid rgba(249, 115, 22, 0.55); border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.2; color: #ffffff; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.roulette-wheel .roulette-wheel-button:hover { background-color: rgba(249, 115, 22, 0.12); border-color: #F97316; }
.roulette-wheel .roulette-wheel-button:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.roulette-wheel .roulette-wheel-button:disabled { opacity: 0.5; cursor: wait; }
.roulette-wheel .roulette-wheel-note { margin: 0; max-width: 360px; font-size: 13px; line-height: 1.5; color: #94A3B8; }
@keyframes rouletteWheelTurn { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
@keyframes rouletteBallOrbit { from { transform: rotate(-1800deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .roulette-wheel .roulette-wheel-image.is-spinning, .roulette-wheel .roulette-wheel-ball-track.is-spinning { animation: none; }
}
@media (min-width: 768px) {
  .roulette-wheel { padding: 24px; gap: 18px; }
  .roulette-wheel .roulette-wheel-stage { max-width: 320px; }
}
@media (min-width: 1024px) {
  .roulette-wheel .roulette-wheel-stage { max-width: 340px; }
}

/* === bet-explorer.css === */
.bet-explorer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 0 40px; padding: 16px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 14px; }
.bet-explorer .bet-explorer-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bet-explorer .bet-explorer-group { margin: 0; }
.bet-explorer .bet-explorer-group-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: #64748B; }
.bet-explorer .bet-explorer-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bet-explorer .bet-explorer-option { min-height: 40px; padding: 8px 14px; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; color: #CBD5E1; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.bet-explorer .bet-explorer-option:hover { border-color: rgba(249, 115, 22, 0.45); }
.bet-explorer .bet-explorer-option.is-active { background: rgba(249, 115, 22, 0.14); border-color: #F97316; color: #ffffff; }
.bet-explorer .bet-explorer-option:disabled { opacity: 0.4; cursor: not-allowed; }
.bet-explorer .bet-explorer-option:disabled:hover { border-color: rgba(148, 163, 184, 0.18); }
.bet-explorer .bet-explorer-option-european.is-active { background: rgba(147, 197, 253, 0.12); border-color: #93C5FD; }
.bet-explorer .bet-explorer-option-american.is-active { background: rgba(251, 191, 36, 0.12); border-color: #FBBF24; }
.bet-explorer .bet-explorer-option:focus-visible, .bet-explorer .bet-explorer-cell:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.bet-explorer .bet-explorer-hint { margin: 0; font-size: 14px; line-height: 1.5; color: #94A3B8; }
.bet-explorer .bet-explorer-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); grid-template-areas: ". . zero" "outside dozens numbers" ". . columns"; gap: 4px; min-width: 0; margin: 0; padding: 10px; background: #0E2A22; border: 1px solid rgba(74, 222, 128, 0.22); border-radius: 12px; }
.bet-explorer .bet-explorer-zeros { grid-area: zero; display: flex; gap: 4px; }
.bet-explorer .bet-explorer-numbers { grid-area: numbers; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.bet-explorer .bet-explorer-dozens { grid-area: dozens; display: flex; flex-direction: column; gap: 4px; }
.bet-explorer .bet-explorer-outside { grid-area: outside; display: flex; flex-direction: column; gap: 4px; }
.bet-explorer .bet-explorer-columns { grid-area: columns; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.bet-explorer .bet-explorer-zeros .bet-explorer-cell, .bet-explorer .bet-explorer-dozens .bet-explorer-cell, .bet-explorer .bet-explorer-outside .bet-explorer-cell { flex: 1 1 0; }
.bet-explorer .bet-explorer-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 36px; margin: 0; padding: 4px; background: transparent; border: 1px solid rgba(203, 213, 225, 0.30); border-radius: 6px; font-size: 14px; font-weight: 700; line-height: 1.15; color: #ffffff; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; transition: opacity 0.2s, box-shadow 0.2s, background-color 0.2s; }
.bet-explorer .bet-explorer-cell:hover { box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.70); }
.bet-explorer .bet-explorer-cell-red { background: #B91C1C; }
.bet-explorer .bet-explorer-cell-black { background: #0F172A; }
.bet-explorer .bet-explorer-cell-green { background: #15803D; }
.bet-explorer .bet-explorer-cell-outside { font-size: 13px; font-weight: 600; color: #E2E8F0; }
.bet-explorer .bet-explorer-cell-double { display: none; }
.bet-explorer.is-american .bet-explorer-cell-double { display: flex; }
.bet-explorer .bet-explorer-table.has-selection .bet-explorer-cell { opacity: 0.42; }
.bet-explorer .bet-explorer-table.has-selection .bet-explorer-cell.is-covered, .bet-explorer .bet-explorer-table.has-selection .bet-explorer-cell.is-selected { opacity: 1; }
.bet-explorer .bet-explorer-cell.is-covered { position: relative; z-index: 1; box-shadow: 0 0 0 2px #F97316, 0 0 14px rgba(249, 115, 22, 0.55); }
.bet-explorer .bet-explorer-cell.is-selected { background-color: rgba(249, 115, 22, 0.22); box-shadow: 0 0 0 2px #F97316; color: #ffffff; }
.bet-explorer .bet-explorer-cell-red.is-selected { background-color: #B91C1C; }
.bet-explorer .bet-explorer-cell-black.is-selected { background-color: #0F172A; }
.bet-explorer .bet-explorer-result { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 18px; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 12px; }
.bet-explorer .bet-explorer-result-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #ffffff; }
.bet-explorer h2.bet-explorer-result-title, .bet-explorer h3.bet-explorer-result-title, .bet-explorer h4.bet-explorer-result-title { font-size: 19px; }
.bet-explorer .bet-explorer-result-covers { margin: 0; font-size: 15px; line-height: 1.55; color: #CBD5E1; }
.bet-explorer .bet-explorer-payout { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.bet-explorer .bet-explorer-payout-value { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #F97316; font-variant-numeric: tabular-nums; }
.bet-explorer .bet-explorer-payout-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748B; }
.bet-explorer .bet-explorer-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bet-explorer .bet-explorer-stat { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 10px; transition: border-color 0.2s; }
.bet-explorer .bet-explorer-stat-european.is-current { border-color: rgba(147, 197, 253, 0.55); }
.bet-explorer .bet-explorer-stat-american.is-current { border-color: rgba(251, 191, 36, 0.55); }
.bet-explorer .bet-explorer-stat-wheel { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
.bet-explorer .bet-explorer-stat-european .bet-explorer-stat-wheel { color: #93C5FD; }
.bet-explorer .bet-explorer-stat-american .bet-explorer-stat-wheel { color: #FBBF24; }
.bet-explorer .bet-explorer-stat-row { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.bet-explorer .bet-explorer-stat-label { font-size: 12px; line-height: 1.3; color: #64748B; }
.bet-explorer .bet-explorer-stat-value { font-size: 15px; font-weight: 700; line-height: 1.35; color: #ffffff; font-variant-numeric: tabular-nums; }
.bet-explorer .bet-explorer-result-note { margin: 0; font-size: 14px; line-height: 1.6; color: #94A3B8; }
.bet-explorer .bet-explorer-result-note.is-alert { padding: 10px 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.20); border-radius: 8px; color: #E2E8F0; }
@media (min-width: 768px) {
  .bet-explorer { gap: 22px; margin: 0 0 56px; padding: 22px; }
  .bet-explorer .bet-explorer-table { grid-template-columns: minmax(0, 1fr) minmax(0, 12fr) minmax(0, 1fr); grid-template-areas: "zero numbers columns" ". dozens ." ". outside ."; padding: 14px; }
  .bet-explorer .bet-explorer-zeros { flex-direction: column; }
  .bet-explorer .bet-explorer-numbers { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-flow: column dense; }
  .bet-explorer .bet-explorer-numbers .bet-explorer-cell:nth-child(3n+1) { grid-row: 3; }
  .bet-explorer .bet-explorer-numbers .bet-explorer-cell:nth-child(3n+2) { grid-row: 2; }
  .bet-explorer .bet-explorer-numbers .bet-explorer-cell:nth-child(3n) { grid-row: 1; }
  .bet-explorer .bet-explorer-columns { display: flex; flex-direction: column-reverse; }
  .bet-explorer .bet-explorer-columns .bet-explorer-cell { flex: 1 1 0; }
  .bet-explorer .bet-explorer-dozens { flex-direction: row; }
  .bet-explorer .bet-explorer-outside { flex-direction: row; }
  .bet-explorer .bet-explorer-cell { min-height: 44px; font-size: 15px; }
  .bet-explorer .bet-explorer-cell-outside { font-size: 14px; }
  .bet-explorer .bet-explorer-result { padding: 20px; }
  .bet-explorer .bet-explorer-result-title, .bet-explorer h2.bet-explorer-result-title, .bet-explorer h3.bet-explorer-result-title, .bet-explorer h4.bet-explorer-result-title { font-size: 21px; }
  .bet-explorer .bet-explorer-stat-value { font-size: 16px; }
}
@media (min-width: 1024px) {
  .bet-explorer { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "controls result" "table result"; align-items: start; gap: 22px 24px; padding: 24px; }
  .bet-explorer .bet-explorer-controls { grid-area: controls; }
  .bet-explorer .bet-explorer-table { grid-area: table; }
  .bet-explorer .bet-explorer-result { grid-area: result; }
  .bet-explorer .bet-explorer-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .bet-explorer .bet-explorer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
