/* === bingo-caller.css === */
.bingo-caller { 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; }
.bingo-caller .bingo-caller-title { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: #F97316; }
.bingo-caller h2.bingo-caller-title, .bingo-caller h3.bingo-caller-title, .bingo-caller h4.bingo-caller-title { font-size: 12px; letter-spacing: 0.14em; }
.bingo-caller .bingo-caller-formats { display: flex; gap: 4px; margin: 0; padding: 4px; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 999px; }
.bingo-caller .bingo-caller-format { min-height: 36px; padding: 6px 14px; background: transparent; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; color: #94A3B8; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.bingo-caller .bingo-caller-format:hover { color: #ffffff; }
.bingo-caller .bingo-caller-format.is-active { background: rgba(249, 115, 22, 0.16); color: #ffffff; }
.bingo-caller .bingo-caller-format:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.bingo-caller .bingo-caller-board { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 320px; margin: 0; }
.bingo-caller .bingo-caller-ball { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 68px; width: 68px; height: 68px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #ffffff 0%, #F1F5F9 45%, #CBD5E1 100%); border: 5px solid #F97316; color: #0F172A; font-variant-numeric: tabular-nums; }
.bingo-caller .bingo-caller-ball-letter { font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.06em; }
.bingo-caller .bingo-caller-ball-number { font-size: 24px; font-weight: 800; line-height: 1.05; }
.bingo-caller .bingo-caller-ball.is-empty { background: #0F172A; border: 2px dashed rgba(148, 163, 184, 0.35); color: #64748B; }
.bingo-caller .bingo-caller-ball.is-empty .bingo-caller-ball-number { font-size: 20px; }
.bingo-caller .bingo-caller-ball-b { border-color: #3B82F6; }
.bingo-caller .bingo-caller-ball-i { border-color: #EF4444; }
.bingo-caller .bingo-caller-ball-n { border-color: #94A3B8; }
.bingo-caller .bingo-caller-ball-g { border-color: #4ADE80; }
.bingo-caller .bingo-caller-ball-o { border-color: #FBBF24; }
.bingo-caller .bingo-caller-ball.is-new { animation: bingoCallerPop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }
.bingo-caller .bingo-caller-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; }
.bingo-caller .bingo-caller-count { font-size: 14px; font-weight: 700; line-height: 1.3; color: #ffffff; font-variant-numeric: tabular-nums; }
.bingo-caller .bingo-caller-recent { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; margin: 0; }
.bingo-caller .bingo-caller-recent-ball { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; background: #1E293B; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; color: #CBD5E1; font-variant-numeric: tabular-nums; }
.bingo-caller .bingo-caller-recent-ball.is-hit { border-color: rgba(249, 115, 22, 0.6); color: #ffffff; }
.bingo-caller .bingo-caller-recent-empty { font-size: 13px; line-height: 2.15; color: #64748B; }
.bingo-caller .bingo-caller-card { display: grid; gap: 4px; width: 100%; max-width: 300px; margin: 0; padding: 10px; background: #0B1222; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 12px; }
.bingo-caller .bingo-caller-card-75 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bingo-caller .bingo-caller-card-90 { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; padding: 8px; }
.bingo-caller.is-75 .bingo-caller-card-90, .bingo-caller.is-90 .bingo-caller-card-75 { display: none; }
.bingo-caller .bingo-caller-head { display: flex; align-items: center; justify-content: center; height: 26px; font-size: 15px; font-weight: 800; line-height: 1; color: #F97316; }
.bingo-caller .bingo-caller-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-width: 0; margin: 0; background-color: #1E293B; border: 2px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 700; line-height: 1; color: #E2E8F0; font-variant-numeric: tabular-nums; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.bingo-caller .bingo-caller-card-90 .bingo-caller-cell { aspect-ratio: 3 / 4; border-radius: 5px; font-size: 13px; }
.bingo-caller .bingo-caller-cell-blank { background-color: rgba(30, 41, 59, 0.35); }
.bingo-caller .bingo-caller-cell-free { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.bingo-caller .bingo-caller-cell.is-daubed { background-color: #1E293B; background-image: radial-gradient(circle, rgba(249, 115, 22, 0.92) 0, rgba(249, 115, 22, 0.92) 56%, rgba(249, 115, 22, 0) 60%); color: #ffffff; }
.bingo-caller .bingo-caller-cell.is-latest { border-color: #ffffff; animation: bingoCallerDaub 0.4s ease-out both; }
.bingo-caller .bingo-caller-cell.is-complete { border-color: #4ADE80; }
.bingo-caller .bingo-caller-patterns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bingo-caller .bingo-caller-pattern { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #94A3B8; }
.bingo-caller .bingo-caller-pattern::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: #334155; }
.bingo-caller .bingo-caller-pattern.is-done { border-color: rgba(74, 222, 128, 0.55); color: #ffffff; }
.bingo-caller .bingo-caller-pattern.is-done::before { background: #4ADE80; }
.bingo-caller.is-75 .bingo-caller-pattern-90, .bingo-caller.is-90 .bingo-caller-pattern-75 { display: none; }
.bingo-caller .bingo-caller-status { min-height: 42px; margin: 0; max-width: 340px; font-size: 15px; line-height: 1.4; color: #CBD5E1; }
.bingo-caller .bingo-caller-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.bingo-caller .bingo-caller-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; 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; }
.bingo-caller .bingo-caller-button:hover { background-color: rgba(249, 115, 22, 0.12); border-color: #F97316; }
.bingo-caller .bingo-caller-button:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; }
.bingo-caller .bingo-caller-button:disabled { opacity: 0.45; cursor: not-allowed; }
.bingo-caller .bingo-caller-button-auto.is-active { background-color: rgba(249, 115, 22, 0.18); border-color: #F97316; }
.bingo-caller .bingo-caller-button-new { border-color: rgba(148, 163, 184, 0.35); }
.bingo-caller .bingo-caller-note { margin: 0; max-width: 360px; font-size: 13px; line-height: 1.5; color: #94A3B8; }
@keyframes bingoCallerPop { 0% { transform: translateY(-14px) scale(0.6); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes bingoCallerDaub { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bingo-caller .bingo-caller-ball.is-new, .bingo-caller .bingo-caller-cell.is-latest { animation: none; }
}
@media (min-width: 768px) {
  .bingo-caller { padding: 24px; gap: 18px; }
  .bingo-caller .bingo-caller-card { max-width: 320px; }
  .bingo-caller .bingo-caller-card-90 { max-width: 360px; }
  .bingo-caller .bingo-caller-board { max-width: 340px; }
}
@media (min-width: 1024px) {
  .bingo-caller .bingo-caller-card { max-width: 330px; }
  .bingo-caller .bingo-caller-card-90 { max-width: 380px; }
  .bingo-caller .bingo-caller-cell { font-size: 16px; }
  .bingo-caller .bingo-caller-card-90 .bingo-caller-cell { font-size: 14px; }
}

/* === bingo-format-explorer.css === */
.bingo-format-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; }
.bingo-format-explorer .bingo-format-explorer-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; }
.bingo-format-explorer .bingo-format-explorer-group { margin: 0; }
.bingo-format-explorer .bingo-format-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; }
.bingo-format-explorer .bingo-format-explorer-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bingo-format-explorer .bingo-format-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; }
.bingo-format-explorer .bingo-format-explorer-option:hover { border-color: rgba(249, 115, 22, 0.45); }
.bingo-format-explorer .bingo-format-explorer-option.is-active { background: rgba(249, 115, 22, 0.14); border-color: #F97316; color: #ffffff; }
.bingo-format-explorer .bingo-format-explorer-option-format.is-active { background: rgba(147, 197, 253, 0.12); border-color: #93C5FD; }
.bingo-format-explorer .bingo-format-explorer-option:focus-visible, .bingo-format-explorer .bingo-format-explorer-button:focus-visible, .bingo-format-explorer .bingo-format-explorer-range:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.bingo-format-explorer.is-75 .bingo-format-explorer-only-90, .bingo-format-explorer.is-90 .bingo-format-explorer-only-75 { display: none; }
.bingo-format-explorer .bingo-format-explorer-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; margin: 0; }
.bingo-format-explorer .bingo-format-explorer-layout { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 14px 12px; background: #0B1222; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 12px; }
.bingo-format-explorer .bingo-format-explorer-card { display: grid; gap: 4px; width: 100%; max-width: 280px; margin: 0; }
.bingo-format-explorer .bingo-format-explorer-card-75 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bingo-format-explorer .bingo-format-explorer-card-90 { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; max-width: 340px; }
.bingo-format-explorer .bingo-format-explorer-head { display: flex; align-items: center; justify-content: center; height: 24px; font-size: 14px; font-weight: 800; line-height: 1; color: #F97316; }
.bingo-format-explorer .bingo-format-explorer-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-width: 0; margin: 0; background: #1E293B; border: 2px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 700; line-height: 1; color: #CBD5E1; font-variant-numeric: tabular-nums; transition: background-color 0.2s, border-color 0.2s, opacity 0.2s; }
.bingo-format-explorer .bingo-format-explorer-card-90 .bingo-format-explorer-cell { aspect-ratio: 3 / 4; border-radius: 5px; font-size: 12px; }
.bingo-format-explorer .bingo-format-explorer-cell-blank { background: rgba(30, 41, 59, 0.35); }
.bingo-format-explorer .bingo-format-explorer-cell-free { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
.bingo-format-explorer .bingo-format-explorer-card.has-pattern .bingo-format-explorer-cell { opacity: 0.45; }
.bingo-format-explorer .bingo-format-explorer-card.has-pattern .bingo-format-explorer-cell-blank { opacity: 0.25; }
.bingo-format-explorer .bingo-format-explorer-card.has-pattern .bingo-format-explorer-cell.is-pattern { opacity: 1; background: rgba(249, 115, 22, 0.18); border-color: #F97316; color: #ffffff; }
.bingo-format-explorer .bingo-format-explorer-card.has-pattern .bingo-format-explorer-cell.is-pattern-alt { opacity: 1; border-color: rgba(147, 197, 253, 0.6); color: #ffffff; }
.bingo-format-explorer .bingo-format-explorer-layout-text { margin: 0; max-width: 360px; font-size: 14px; line-height: 1.55; color: #94A3B8; text-align: center; }
.bingo-format-explorer .bingo-format-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; }
.bingo-format-explorer .bingo-format-explorer-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #ffffff; }
.bingo-format-explorer h2.bingo-format-explorer-title, .bingo-format-explorer h3.bingo-format-explorer-title, .bingo-format-explorer h4.bingo-format-explorer-title { font-size: 19px; }
.bingo-format-explorer .bingo-format-explorer-text { margin: 0; font-size: 15px; line-height: 1.55; color: #CBD5E1; }
.bingo-format-explorer .bingo-format-explorer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bingo-format-explorer .bingo-format-explorer-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; margin: 0; padding: 10px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 10px; }
.bingo-format-explorer .bingo-format-explorer-stat-label { font-size: 12px; line-height: 1.35; color: #94A3B8; }
.bingo-format-explorer .bingo-format-explorer-stat-value { font-size: 20px; font-weight: 800; line-height: 1.1; color: #F97316; font-variant-numeric: tabular-nums; }
.bingo-format-explorer .bingo-format-explorer-chart { margin: 0; }
.bingo-format-explorer .bingo-format-explorer-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 0; padding: 0 0 2px; list-style: none; border-bottom: 1px solid rgba(148, 163, 184, 0.25); }
.bingo-format-explorer .bingo-format-explorer-bar { display: flex; align-items: flex-end; flex: 1 1 0; height: 100%; min-width: 0; margin: 0; }
.bingo-format-explorer .bingo-format-explorer-fill { display: block; width: 100%; height: 0; background: #93C5FD; border-radius: 3px 3px 0 0; transition: height 0.3s; }
.bingo-format-explorer .bingo-format-explorer-bar.is-median .bingo-format-explorer-fill { background: #F97316; }
.bingo-format-explorer .bingo-format-explorer-fill-h0 { height: 0%; } .bingo-format-explorer .bingo-format-explorer-fill-h1 { height: 5%; } .bingo-format-explorer .bingo-format-explorer-fill-h2 { height: 10%; } .bingo-format-explorer .bingo-format-explorer-fill-h3 { height: 15%; } .bingo-format-explorer .bingo-format-explorer-fill-h4 { height: 20%; } .bingo-format-explorer .bingo-format-explorer-fill-h5 { height: 25%; } .bingo-format-explorer .bingo-format-explorer-fill-h6 { height: 30%; } .bingo-format-explorer .bingo-format-explorer-fill-h7 { height: 35%; } .bingo-format-explorer .bingo-format-explorer-fill-h8 { height: 40%; } .bingo-format-explorer .bingo-format-explorer-fill-h9 { height: 45%; } .bingo-format-explorer .bingo-format-explorer-fill-h10 { height: 50%; } .bingo-format-explorer .bingo-format-explorer-fill-h11 { height: 55%; } .bingo-format-explorer .bingo-format-explorer-fill-h12 { height: 60%; } .bingo-format-explorer .bingo-format-explorer-fill-h13 { height: 65%; } .bingo-format-explorer .bingo-format-explorer-fill-h14 { height: 70%; } .bingo-format-explorer .bingo-format-explorer-fill-h15 { height: 75%; } .bingo-format-explorer .bingo-format-explorer-fill-h16 { height: 80%; } .bingo-format-explorer .bingo-format-explorer-fill-h17 { height: 85%; } .bingo-format-explorer .bingo-format-explorer-fill-h18 { height: 90%; } .bingo-format-explorer .bingo-format-explorer-fill-h19 { height: 95%; } .bingo-format-explorer .bingo-format-explorer-fill-h20 { height: 100%; }
.bingo-format-explorer .bingo-format-explorer-axis { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 12px; line-height: 1.3; color: #64748B; font-variant-numeric: tabular-nums; }
.bingo-format-explorer .bingo-format-explorer-caption { margin: 0; font-size: 13px; line-height: 1.5; color: #94A3B8; }
.bingo-format-explorer .bingo-format-explorer-button { align-self: flex-start; min-height: 40px; padding: 8px 16px; background: transparent; border: 1px solid rgba(249, 115, 22, 0.55); border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.2; color: #ffffff; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.bingo-format-explorer .bingo-format-explorer-button:hover { background-color: rgba(249, 115, 22, 0.12); border-color: #F97316; }
.bingo-format-explorer .bingo-format-explorer-room { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 12px; }
.bingo-format-explorer .bingo-format-explorer-room-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: #ffffff; }
.bingo-format-explorer h2.bingo-format-explorer-room-title, .bingo-format-explorer h3.bingo-format-explorer-room-title, .bingo-format-explorer h4.bingo-format-explorer-room-title { font-size: 17px; }
.bingo-format-explorer .bingo-format-explorer-control { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bingo-format-explorer .bingo-format-explorer-control-label { font-size: 15px; line-height: 1.5; color: #CBD5E1; }
.bingo-format-explorer .bingo-format-explorer-control-value { font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; }
.bingo-format-explorer .bingo-format-explorer-range { display: block; width: 100%; height: 28px; margin: 0; accent-color: #F97316; cursor: pointer; }
.bingo-format-explorer .bingo-format-explorer-room-result { margin: 0; font-size: 15px; line-height: 1.6; color: #CBD5E1; }
.bingo-format-explorer .bingo-format-explorer-room-result strong { font-weight: 800; color: #ffffff; }
.bingo-format-explorer .bingo-format-explorer-note { margin: 0; font-size: 14px; line-height: 1.6; color: #94A3B8; }
.bingo-format-explorer .bingo-format-explorer-action { display: contents; }
.bingo-format-explorer .bingo-format-explorer-field { display: contents; }
@media (prefers-reduced-motion: reduce) {
  .bingo-format-explorer .bingo-format-explorer-fill { transition: none; }
}
@media (min-width: 768px) {
  .bingo-format-explorer { gap: 24px; padding: 24px; }
  .bingo-format-explorer .bingo-format-explorer-stat-label { font-size: 13px; }
  .bingo-format-explorer .bingo-format-explorer-stat-value { font-size: 22px; }
  .bingo-format-explorer .bingo-format-explorer-bars { height: 150px; gap: 3px; }
  .bingo-format-explorer .bingo-format-explorer-card-90 .bingo-format-explorer-cell { font-size: 14px; }
}
@media (min-width: 1024px) {
  .bingo-format-explorer .bingo-format-explorer-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .bingo-format-explorer .bingo-format-explorer-layout { padding: 18px 14px; }
}

/* === bingo-room-odds.css === */
.bingo-room-odds { 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; }
.bingo-room-odds .bingo-room-odds-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #ffffff; }
.bingo-room-odds h2.bingo-room-odds-title, .bingo-room-odds h3.bingo-room-odds-title, .bingo-room-odds h4.bingo-room-odds-title { font-size: 17px; }
.bingo-room-odds .bingo-room-odds-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; margin: 0; }
.bingo-room-odds .bingo-room-odds-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; }
.bingo-room-odds .bingo-room-odds-control { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bingo-room-odds .bingo-room-odds-control-label { font-size: 15px; line-height: 1.5; color: #CBD5E1; }
.bingo-room-odds .bingo-room-odds-control-value { font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; }
.bingo-room-odds .bingo-room-odds-range { display: block; width: 100%; height: 28px; margin: 0; accent-color: #F97316; cursor: pointer; }
.bingo-room-odds .bingo-room-odds-group { margin: 0; }
.bingo-room-odds .bingo-room-odds-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; }
.bingo-room-odds .bingo-room-odds-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bingo-room-odds .bingo-room-odds-option { min-height: 40px; min-width: 64px; padding: 8px 12px; 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; font-variant-numeric: tabular-nums; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.bingo-room-odds .bingo-room-odds-option:hover { border-color: rgba(249, 115, 22, 0.45); }
.bingo-room-odds .bingo-room-odds-option.is-active { background: rgba(249, 115, 22, 0.14); border-color: #F97316; color: #ffffff; }
.bingo-room-odds .bingo-room-odds-option:focus-visible, .bingo-room-odds .bingo-room-odds-range:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.bingo-room-odds .bingo-room-odds-result { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 16px; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 12px; }
.bingo-room-odds .bingo-room-odds-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bingo-room-odds .bingo-room-odds-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; margin: 0; padding: 12px; background: #131A2E; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 10px; }
.bingo-room-odds .bingo-room-odds-stat-label { font-size: 13px; line-height: 1.4; color: #94A3B8; }
.bingo-room-odds .bingo-room-odds-stat-value { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #F97316; font-variant-numeric: tabular-nums; }
.bingo-room-odds .bingo-room-odds-stat-sub { font-size: 13px; line-height: 1.35; color: #CBD5E1; font-variant-numeric: tabular-nums; }
.bingo-room-odds .bingo-room-odds-summary { margin: 0; font-size: 15px; line-height: 1.6; color: #CBD5E1; }
.bingo-room-odds .bingo-room-odds-compares { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
.bingo-room-odds .bingo-room-odds-compare { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 16px; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 12px; }
.bingo-room-odds .bingo-room-odds-compare-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: #ffffff; }
.bingo-room-odds h3.bingo-room-odds-compare-title, .bingo-room-odds h4.bingo-room-odds-compare-title { font-size: 15px; }
.bingo-room-odds .bingo-room-odds-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bingo-room-odds .bingo-room-odds-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; margin: 0; }
.bingo-room-odds .bingo-room-odds-row-name { font-size: 14px; font-weight: 600; line-height: 1.4; color: #CBD5E1; }
.bingo-room-odds .bingo-room-odds-row-value { font-size: 14px; font-weight: 800; line-height: 1.3; color: #ffffff; text-align: right; font-variant-numeric: tabular-nums; }
.bingo-room-odds .bingo-room-odds-row-sub { display: block; margin: 2px 0 0; font-size: 12px; font-weight: 400; line-height: 1.35; color: #94A3B8; font-variant-numeric: tabular-nums; }
.bingo-room-odds .bingo-room-odds-bar { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; background: rgba(148, 163, 184, 0.12); border-radius: 999px; overflow: hidden; }
.bingo-room-odds .bingo-room-odds-fill { display: block; height: 100%; border-radius: 999px; background: #93C5FD; transition: width 0.3s; }
.bingo-room-odds .bingo-room-odds-fill-cost { background: #FBBF24; }
.bingo-room-odds .bingo-room-odds-fill-w0 { width: 0%; } .bingo-room-odds .bingo-room-odds-fill-w1 { width: 5%; } .bingo-room-odds .bingo-room-odds-fill-w2 { width: 10%; } .bingo-room-odds .bingo-room-odds-fill-w3 { width: 15%; } .bingo-room-odds .bingo-room-odds-fill-w4 { width: 20%; } .bingo-room-odds .bingo-room-odds-fill-w5 { width: 25%; } .bingo-room-odds .bingo-room-odds-fill-w6 { width: 30%; } .bingo-room-odds .bingo-room-odds-fill-w7 { width: 35%; } .bingo-room-odds .bingo-room-odds-fill-w8 { width: 40%; } .bingo-room-odds .bingo-room-odds-fill-w9 { width: 45%; } .bingo-room-odds .bingo-room-odds-fill-w10 { width: 50%; } .bingo-room-odds .bingo-room-odds-fill-w11 { width: 55%; } .bingo-room-odds .bingo-room-odds-fill-w12 { width: 60%; } .bingo-room-odds .bingo-room-odds-fill-w13 { width: 65%; } .bingo-room-odds .bingo-room-odds-fill-w14 { width: 70%; } .bingo-room-odds .bingo-room-odds-fill-w15 { width: 75%; } .bingo-room-odds .bingo-room-odds-fill-w16 { width: 80%; } .bingo-room-odds .bingo-room-odds-fill-w17 { width: 85%; } .bingo-room-odds .bingo-room-odds-fill-w18 { width: 90%; } .bingo-room-odds .bingo-room-odds-fill-w19 { width: 95%; } .bingo-room-odds .bingo-room-odds-fill-w20 { width: 100%; }
.bingo-room-odds .bingo-room-odds-fill-min { width: 1.5%; }
.bingo-room-odds .bingo-room-odds-row.is-current .bingo-room-odds-row-name { color: #ffffff; }
.bingo-room-odds .bingo-room-odds-row.is-current .bingo-room-odds-fill { background: #F97316; }
.bingo-room-odds .bingo-room-odds-note { margin: 0; font-size: 14px; line-height: 1.6; color: #94A3B8; }
.bingo-room-odds .bingo-room-odds-field { display: contents; }
@media (prefers-reduced-motion: reduce) {
  .bingo-room-odds .bingo-room-odds-fill { transition: none; }
}
@media (min-width: 768px) {
  .bingo-room-odds { gap: 24px; padding: 24px; }
  .bingo-room-odds .bingo-room-odds-title, .bingo-room-odds h2.bingo-room-odds-title, .bingo-room-odds h3.bingo-room-odds-title, .bingo-room-odds h4.bingo-room-odds-title { font-size: 19px; }
  .bingo-room-odds .bingo-room-odds-stat-value { font-size: 26px; }
  .bingo-room-odds .bingo-room-odds-row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 80px; gap: 14px; align-items: center; }
  .bingo-room-odds .bingo-room-odds-bar { grid-column: 2; grid-row: 1; height: 10px; }
}
@media (min-width: 1024px) {
  .bingo-room-odds .bingo-room-odds-main { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .bingo-room-odds .bingo-room-odds-compares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bingo-room-odds .bingo-room-odds-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
  .bingo-room-odds .bingo-room-odds-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; }
}
@media (min-width: 1200px) {
  .bingo-room-odds .bingo-room-odds-row { grid-template-columns: minmax(0, 236px) minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
  .bingo-room-odds .bingo-room-odds-bar { grid-column: 2; grid-row: 1; height: 10px; }
}