/* Darts, the Basketball Shootout and Checkers (public/js/games/darts-view.js, basketball-view.js, checkers-view.js). */
.match.g-darts, .match.g-darts_clock { background: #0A0F1E; }
.match.g-basketball { background: #070B16; }
.match.g-checkers { background: #0A0F1E; }
.match.g-basketball .clock, .match.g-checkers .clock.hide { visibility: hidden; }
.match.g-basketball .status.theirs { color: var(--gold); }
.g-darts .play-wrap, .g-darts_clock .play-wrap, .g-basketball .play-wrap { padding: 0; }

/* the darts variant switch on the game screen */
.variant-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.variant-row button { background: var(--card2); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; text-align: left; min-width: 0; }
.variant-row button b { display: block; font-family: Sora, sans-serif; font-size: 14px; }
.variant-row button span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.variant-row button.on { border-color: var(--gold); background: var(--card3); }

/* mode heroes */
.mode-hero.hero-darts, .mode-hero.hero-darts_clock { background: radial-gradient(ellipse at 72% 40%, #22305A, #0E1530 70%); }
.h-dartboard { position: absolute; right: 30px; top: 22px; width: 160px; height: 160px; border-radius: 50%; background: repeating-conic-gradient(from -9deg, #1F1D1B 0 18deg, #EFE3C6 18deg 36deg); box-shadow: 0 0 0 12px #121212, 0 16px 40px rgba(0,0,0,.45); }
.h-dartboard::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: repeating-conic-gradient(from -9deg, #CF2F2A 0 18deg, #1C8A4E 18deg 36deg); -webkit-mask: radial-gradient(circle, transparent 0 66px, #000 66px 76px, transparent 76px); mask: radial-gradient(circle, transparent 0 66px, #000 66px 76px, transparent 76px); }
.h-dartboard i { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -9deg, #CF2F2A 0 18deg, #1C8A4E 18deg 36deg); -webkit-mask: radial-gradient(circle, transparent 0 40px, #000 40px 46px, transparent 46px); mask: radial-gradient(circle, transparent 0 40px, #000 40px 46px, transparent 46px); }
.h-dartboard b { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #CF2F2A; box-shadow: 0 0 0 5px #1C8A4E; }
.h-dart { position: absolute; right: 92px; top: 70px; width: 70px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #D9DEE8 0 18%, #9AA3BF 18% 62%, #F5B83D 62%); transform: rotate(-28deg); transform-origin: 0 50%; box-shadow: 0 6px 10px rgba(0,0,0,.4); }
.mode-hero.hero-basketball { background: linear-gradient(#070B16, #16213F 62%, #B9844E 62%, #D3A06A); }
.h-backboard { position: absolute; right: 50px; top: 24px; width: 150px; height: 96px; border-radius: 6px; background: linear-gradient(135deg, #FFFFFF, #D7DDEA); border: 2px solid #9AA3BF; }
.h-backboard i { position: absolute; left: 52px; bottom: 6px; width: 46px; height: 38px; border: 3px solid #E2463B; }
.h-rim { position: absolute; right: 88px; top: 126px; width: 74px; height: 14px; border-radius: 50%; border: 4px solid #E2702C; }
.h-bball { position: absolute; right: 24px; top: 150px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #F7A55A, #E2702C 60%, #9A4513); box-shadow: inset 0 0 0 1.5px rgba(58,26,6,.5), 0 10px 18px rgba(0,0,0,.35); }
.mode-hero.hero-checkers { background: #1B2440; }
.h-board.ck { opacity: .55; }
.h-ck { position: absolute; width: 78px; height: 78px; border-radius: 50%; box-shadow: 0 12px 22px rgba(0,0,0,.45); }
.h-ck.a { right: 120px; top: 70px; background: radial-gradient(circle at 40% 35%, #F0645A, #C8322B 70%, #8E1E19); box-shadow: inset 0 0 0 10px rgba(142,30,25,.35), 0 12px 22px rgba(0,0,0,.45); }
.h-ck.b { right: 40px; top: 40px; background: radial-gradient(circle at 40% 35%, #FFFFFF, #EDE6D6 70%, #BDB39C); box-shadow: inset 0 0 0 10px rgba(181,171,147,.45), 0 12px 22px rgba(0,0,0,.45); }

/* darts */
.darts-wrap, .bb-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.darts-svg, .bb-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.darts-svg .d-nums { font: 800 30px Sora, sans-serif; fill: #E9EDF8; }
.darts-svg .d-hint { font: 600 14px Inter, sans-serif; fill: #9AA3BF; }
.darts-svg .d-pop { font: 800 22px Sora, sans-serif; }
.darts-svg .d-ban { font: 800 40px Sora, sans-serif; }
.darts-svg .d-bans { font: 600 15px Inter, sans-serif; fill: #9AA3BF; }
.darts-svg #dBoard, .darts-svg #dStuck, .darts-svg #dPop, .darts-svg #dBanner, .darts-svg #dFly, .darts-svg #dHand, .darts-svg #dSight, .darts-svg .d-hint { pointer-events: none; }
.darts-svg.mine { cursor: crosshair; }
.darts-svg .d-thunk { animation: dThunk .22s ease-out; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes dThunk { 0% { opacity: .6; } 100% { opacity: 1; } }
.dv-ctl { display: flex; align-items: center; gap: 10px; width: 100%; }
.dv-visit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-slots { display: flex; gap: 6px; }
.dv-slot { min-width: 48px; height: 38px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 14px Sora, sans-serif; color: var(--muted); }
.dv-slot.hit { color: var(--text); border-color: var(--line2); }
.dv-slot.nil { color: var(--dim); }
.dv-slot.bad { color: #FF8A80; border-color: var(--red); }
.dv-visit > b { font: 800 22px Sora, sans-serif; color: var(--gold); min-width: 30px; }
.dv-co { width: 100%; font-size: 12px; color: var(--green); font-weight: 600; }
.dv-chips { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.dv-chips button { background: var(--card); border: 1px solid var(--line2); border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: 12px; color: var(--text); min-width: 70px; }
.dv-chips button:disabled { opacity: .45; }
.gctl.off .dv-slot { opacity: 1; }
.hud .dots.dv-dots { align-items: center; }
.hud .dots.dv-dots em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; font-weight: 700; }
.hud .pl.right .dots.dv-dots { flex-direction: row-reverse; }
.hud .pl.right .dots.dv-dots em { margin: 0 4px 0 0; }

/* basketball */
.bb-svg .bb-led { font: 800 26px Sora, sans-serif; fill: #FF5A4E; font-variant-numeric: tabular-nums; }
.bb-svg .bb-led.low { fill: #FF8A80; }
.bb-svg .bb-ot { font: 800 11px Sora, sans-serif; fill: #F5B83D; letter-spacing: 1.5px; }
.bb-svg .bb-word { font: 800 22px Sora, sans-serif; letter-spacing: .5px; }
.bb-svg .bb-spot { font: 600 14px Inter, sans-serif; fill: #E9EDF8; opacity: .8; }
.bb-svg * { pointer-events: none; }
.bb-svg { cursor: grab; }
.bb-ctl { display: flex; align-items: center; gap: 12px; width: 100%; }
.bb-tip { flex: 1; font-size: 13px; color: var(--muted); line-height: 1.4; }
.hud .dots.bb-dots i { width: 9px; height: 9px; }

/* checkers */
.ck-svg .pc { cursor: pointer; }
.ck-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: #0B1122; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 8px 18px; font: 800 15px Sora, sans-serif; pointer-events: none; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.ck-banner[hidden] { display: none; }
.ck-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 500; text-align: center; white-space: normal; }
.ck-hud { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--muted); font-weight: 600; }
.hud .pl.right .ck-hud { flex-direction: row-reverse; }
.ck-chip { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ck-chip.r { background: #C8322B; box-shadow: inset 0 0 0 2px #8E1E19; }
.ck-chip.w { background: #EDE6D6; box-shadow: inset 0 0 0 2px #B5AB93; }

@media (min-width: 900px) {
  .dv-slot { min-width: 60px; height: 44px; font-size: 16px; }
  .dv-chips { flex-direction: row; }
  .bb-tip { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .darts-svg .d-thunk { animation: none; } }