html[data-bingo="afl"] { --bga: #dc2626; --bga-ink: #ffffff; --bga-lite: #fca5a5; --bga-dark: #991b1b; --bga-deep: #2a1012; --bga-rgb: 220, 38, 38; }
html[data-bingo="epl"] { --bga: #7c3aed; --bga-ink: #ffffff; --bga-lite: #c4b5fd; --bga-dark: #4c1d95; --bga-deep: #1d1233; --bga-rgb: 124, 58, 237; }
html[data-bingo="nfl"] { --bga: #2563eb; --bga-ink: #ffffff; --bga-lite: #93c5fd; --bga-dark: #1e40af; --bga-deep: #0f1a33; --bga-rgb: 37, 99, 235; }
html[data-bingo="nba"] { --bga: #f97316; --bga-ink: #1f0d02; --bga-lite: #fb923c; --bga-dark: #c2410c; --bga-deep: #2b170a; --bga-rgb: 249, 115, 22; }
body[data-mode="bingo"] { --mode: var(--bga); --mode-rgb: var(--bga-rgb); } 
#screen-bingo { background: radial-gradient(120% 420px at 50% 0%, rgba(var(--bga-rgb), .2), transparent 75%); }
#screen-bingo .wrap { max-width: 560px; margin: 0 auto; padding: 8px 14px 40px; }
#screen-bingo .btn-primary { background: var(--bga); color: var(--bga-ink); }
#screen-bingo .btn-primary:disabled { background: #26262f; color: #8b8ba0; }
#screen-bingo .btn-res-again { background: var(--bga); color: var(--bga-ink); }
#screen-bingo .btn-res-mode { color: var(--bga-lite); border-color: var(--bga-lite); }
@media (hover: hover) { #screen-bingo .btn-res-mode:hover { background: rgba(var(--bga-rgb), .12); } }
#screen-bingo .btn-decide-lock { border-color: var(--bga-lite); background: var(--bga-deep); }
#screen-bingo .btn-decide-lock .lock-fill { background: linear-gradient(90deg, var(--bga-lite), var(--bga) 55%, var(--bga-dark)); }
#screen-bingo .btn-decide-lock .btn-decide-lbl { color: var(--bga-lite); }
#screen-bingo .btn-decide-lock .lock-secs { color: #fff; }
#screen-bingo .panel-title { color: var(--bga-lite); }
.bg-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; font: 900 13px/1 var(--font); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }


.bg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.bg-tile { position: relative; display: block; width: 100%; aspect-ratio: 5 / 3.6; min-height: 50px; padding: 0; overflow: hidden; border-radius: 12px; border: 0; background: #1c1c2e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 3px 10px rgba(0, 0, 0, .35); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; color: #fff; font: inherit; }
.bg-kit { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-tname { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 4px 5px; background: linear-gradient(180deg, transparent, rgba(4, 6, 10, .82) 55%); font: 800 12px/1.1 var(--font);
  letter-spacing: .1px; text-align: center; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.bg-tile.is-open:active { transform: scale(.96); }
@media (hover: hover) { .bg-tile.is-open:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 6px 16px rgba(0, 0, 0, .45); } }
.bg-tile.is-filled { cursor: default; box-shadow: inset 0 0 0 2.5px #4ade80, 0 0 12px rgba(34, 197, 94, .4), 0 3px 10px rgba(0, 0, 0, .35); }
.bg-tile.is-filled .bg-kit { filter: saturate(.45) brightness(.55); }

.bg-tile.is-filled::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 197, 94, .58), rgba(21, 128, 61, .48)); pointer-events: none; }
.bg-tile.is-filled .bg-tname { z-index: 1; color: #dcfce7; background: linear-gradient(180deg, transparent, rgba(5, 30, 14, .85) 55%); }
.bg-fill { position: absolute; z-index: 1; inset: 0 0 16px; display: grid; place-content: center; justify-items: center; gap: 1px; padding: 0 4px; }
.bg-fill i { font-style: normal; font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.bg-fill b { max-width: 100%; padding: 2px 5px; border-radius: 5px; background: rgba(5, 30, 14, .78); font: 900 12px/1.1 var(--font); text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.bg-fill b.is-wrap { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.02; }
.bg-tile.is-wild::after { background: linear-gradient(180deg, rgba(244, 114, 182, .3), rgba(163, 230, 53, .25)); }
.bg-tile.is-wild .bg-fill b { color: #fbcfe8; }

.bg-tile.is-hint { z-index: 2; transform: scale(1.04); box-shadow: inset 0 0 0 3px #a5f3fc, 0 0 0 3px #22d3ee, 0 0 24px 4px rgba(34, 211, 238, .75); animation: bgHint 1s ease-in-out infinite; }
.bg-tile.is-hint .bg-tname { color: #ecfeff; }
.bg-hint-eye { position: absolute; z-index: 2; top: 3px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 2px #083344, 0 2px 6px rgba(0, 0, 0, .5); font-size: 12px; line-height: 1; }
.bg-grid.has-hint .bg-tile:not(.is-hint) { filter: brightness(.32) saturate(.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

.bg-grid.is-picking .bg-tile.is-open { box-shadow: inset 0 0 0 3px #d9f99d, 0 0 16px rgba(163, 230, 53, .55); }
.bg-grid.is-picking .bg-tile:not(.is-open) { opacity: .45; }
.bg-tile.is-good { z-index: 2; animation: bgPop .42s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: inset 0 0 0 3px #86efac, 0 0 26px rgba(34, 197, 94, .85); }
.bg-tile.is-bad { animation: bgShake .45s ease both; box-shadow: inset 0 0 0 3px var(--bad), 0 0 22px rgba(248, 113, 113, .6); }
.bg-grid.is-still .bg-tile { cursor: default; aspect-ratio: 5 / 3.4; }
@keyframes bgHint { 0%, 100% { box-shadow: inset 0 0 0 3px #a5f3fc, 0 0 0 3px #22d3ee, 0 0 14px 2px rgba(34, 211, 238, .55); } 50% { box-shadow: inset 0 0 0 3px #ecfeff, 0 0 0 4px #67e8f9, 0 0 30px 8px rgba(34, 211, 238, .9); } }
@keyframes bgPop { 0% { transform: scale(.82); } 55% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes bgShake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }


.bg-pin { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 20; margin: 0 -14px 10px; padding: 6px 14px 10px; background: linear-gradient(180deg, #0a0a0f 85%, rgba(10, 10, 15, 0)); }
html.cg-in-game .bg-pin { top: var(--cg-bar-h, 112px); }
.bg-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.bg-lives { display: inline-flex; gap: 2px; font-size: 15px; line-height: 1; }
.bg-lives i { font-style: normal; }
.bg-lives .is-off { opacity: .28; filter: grayscale(1); }
.bg-count { font: 900 13px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; } .bg-count b { font-size: 20px; color: #fff; }
.bg-time { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 800 13px/1 var(--font); }
.bg-time i { font-style: normal; font-size: 12px; } .bg-time b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.bg-card { position: relative; display: grid; justify-items: center; gap: 4px; min-height: 76px; padding: 12px 14px; border-radius: 16px; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(var(--bga-rgb), .14), transparent 60%), linear-gradient(180deg, var(--card2), var(--card)); border: 1.5px solid rgba(var(--bga-rgb), .55); }
.bg-card.is-new { animation: bgIn .28s ease both; }
.bg-card-name { font: 900 22px/1.12 var(--font); color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.bg-card-sub { font: 700 13px/1.25 var(--font); color: var(--muted); }
.bg-card.is-good { border-color: var(--good); }
.bg-card.is-bad { border-color: var(--bad); }
.bg-note { margin: 7px 0 0; padding: 7px 10px; border-radius: 12px; text-align: center; font: 700 12.5px/1.35 var(--font); text-wrap: balance; }
.bg-note.is-pick { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; background: rgba(163, 230, 53, .1); color: #ecfccb; border: 1px solid rgba(163, 230, 53, .45); }
.bg-x { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .25); color: #fff; font: 800 12px/1 var(--font); cursor: pointer; }
.bg-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.bg-act { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 48px; padding: 6px 4px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: #fff; cursor: pointer; touch-action: manipulation; font: inherit; }
.bg-act span { font: 900 12.5px/1.1 var(--font); white-space: nowrap; }
.bg-act small { font: 800 10px/1 var(--font); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bg-act:disabled { opacity: .45; cursor: default; }
.bg-act.is-rr { border-color: #0f766e; background: linear-gradient(160deg, rgba(20, 184, 166, .22), rgba(20, 184, 166, .06)); } .bg-act.is-rr small { color: #5eead4; }
.bg-act.is-rv { border-color: #6d28d9; background: linear-gradient(160deg, rgba(139, 92, 246, .22), rgba(139, 92, 246, .06)); } .bg-act.is-rv small { color: #c4b5fd; }
.bg-act.is-wild { border-color: #65a30d; background: linear-gradient(160deg, rgba(163, 230, 53, .22), rgba(163, 230, 53, .05)); } .bg-act.is-wild small { color: #d9f99d; }
.bg-act.is-wild.is-on { border-color: #d9f99d; box-shadow: 0 0 0 2px rgba(217, 249, 157, .35); }
@keyframes bgIn { from { transform: translateY(6px); opacity: .2; } to { transform: none; opacity: 1; } }
@media (max-width: 360px) {
  #screen-bingo .wrap { padding-left: 12px; padding-right: 12px; }
  .bg-pin { margin: 0 -12px 8px; padding: 4px 12px 8px; }
  .bg-grid { gap: 6px; }
  .bg-tname { font-size: 11px; }
  .bg-card { min-height: 60px; padding: 8px 10px; } .bg-card-name { font-size: 19px; }
  .bg-act { min-height: 42px; } .bg-act span { font-size: 11.5px; }
  .bg-tile { aspect-ratio: 5 / 3.4; }
}
@media (prefers-reduced-motion: reduce) { .bg-tile.is-hint, .bg-tile.is-good, .bg-tile.is-bad, .bg-card.is-new, .bg-sheet-in { animation: none; } }


.bg-start { display: grid; gap: 14px; text-align: center; }
.bg-logo { margin: 0; font: 900 clamp(34px, 10vw, 46px)/1 var(--font); letter-spacing: -.5px; text-transform: uppercase; color: #fff; }
.bg-logo span { color: var(--bga-lite); }
.bg-demo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: min(196px, 52vw); margin: 0 auto; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--bga-rgb), .3); transform: rotate(-2deg); }
.bg-mini { position: relative; aspect-ratio: 5 / 4; border-radius: 5px; overflow: hidden; }
.bg-mini.is-filled .bg-kit { filter: saturate(.45) brightness(.55); }
.bg-mini.is-filled::after { content: ''; position: absolute; inset: 0; background: rgba(34, 197, 94, .55); }
.bg-mini i { z-index: 1; }
.bg-mini i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.bg-lede { margin: 0; color: var(--muted); font: 600 15px/1.45 var(--font); text-wrap: balance; } .bg-lede b { color: #fff; }
.bg-best { margin: -4px 0 0; font: 800 13px/1.35 var(--font); color: var(--bga-lite); text-wrap: balance; }
.bg-play { width: 100%; padding: 16px; border-radius: 14px; font: 900 16px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; }
.bg-play i { font-style: normal; font-size: 12px; margin-left: 6px; }
.bg-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bg-rules li { display: grid; justify-items: center; gap: 5px; padding: 10px 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font: 700 11.5px/1.3 var(--font); color: #d6d6e4; text-wrap: balance; }
.bg-rules i { font-style: normal; font-size: 18px; }
.bg-link { margin-top: 0; }


.bg-out { display: grid; gap: 12px; text-align: center; }
.bg-out-h { font: 900 28px/1 var(--font); color: #fff; text-transform: uppercase; }
.bg-out-why { margin: 0; color: var(--muted); font: 600 14.5px/1.4 var(--font); text-wrap: balance; }
.bg-decide { text-align: center; }
.bg-decide .decision p { margin: 4px 0 0; text-wrap: balance; }
.bg-decide .btn-row { margin: 14px 0 2px; }
.bg-res { display: grid; gap: 12px; }
.bg-hero { display: grid; justify-items: center; gap: 4px; padding: 18px 14px 16px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--bga-rgb), .14), transparent 60%), linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); }
.bg-hero.is-won { border-color: rgba(var(--bga-rgb), .7); background: radial-gradient(120% 90% at 50% 0%, rgba(var(--bga-rgb), .3), transparent 62%), linear-gradient(180deg, var(--card2), var(--card)); }
.bg-hero-k { font: 900 12px/1.2 var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.bg-hero-n { font: 900 76px/1 var(--font); color: #fff; letter-spacing: -2px; font-variant-numeric: tabular-nums; animation: ouPop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.bg-hero-n small { font-size: 32px; letter-spacing: 0; color: var(--muted); }
.bg-hero-s { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font: 800 13px/1.2 var(--font); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.bg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-stats span { display: grid; gap: 4px; justify-items: center; padding: 11px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.bg-stats b { font: 900 19px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bg-stats small { font: 800 10.5px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.bg-acts-res { margin: 2px 0 0; }
.bg-yours .bg-grid { gap: 6px; }


@media (min-width: 900px) {
  #screen-bingo .wrap.bg-v-play { max-width: 1040px; display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  #screen-bingo .wrap.bg-v-play .bg-head { grid-column: 1 / -1; }
  .bg-v-play .bg-pin { top: calc(78px + env(safe-area-inset-top, 0px)); margin: 0; padding: 0; background: none; }
  html.cg-in-game .bg-v-play .bg-pin { top: calc(var(--cg-bar-h, 64px) + 16px); }
  .bg-v-play .bg-card { min-height: 150px; align-content: center; } .bg-v-play .bg-card-name { font-size: 28px; }
  .bg-v-play .bg-acts { grid-template-columns: 1fr; } .bg-v-play .bg-act { grid-auto-flow: column; justify-content: space-between; padding: 10px 14px; }
  .bg-v-play .bg-grid { gap: 10px; } .bg-v-play .bg-tname { font-size: 14px; } .bg-v-play .bg-fill b { font-size: 15px; } .bg-v-play .bg-fill i { font-size: 22px; }
}


@media (max-height: 720px) and (max-width: 899px) {
  .bg-head { margin: 0 0 4px; }
  .bg-head .ou-back { width: 32px; height: 32px; font-size: 15px; }
  .bg-pin { padding-top: 4px; padding-bottom: 6px; }
  .bg-status { margin-bottom: 5px; }
  .bg-lives { font-size: 13px; } .bg-count b { font-size: 17px; }
  .bg-card { min-height: 58px; padding: 7px 10px; gap: 2px; } .bg-card-name { font-size: 18px; } .bg-card-sub { font-size: 12px; }
  .bg-note { margin-top: 5px; padding: 5px 8px; font-size: 12px; }
  .bg-acts { margin-top: 6px; gap: 6px; } .bg-act { min-height: 40px; padding: 4px; }
  .bg-grid { gap: 5px; } .bg-tile { aspect-ratio: 5 / 3.05; min-height: 44px; } .bg-tname { padding: 8px 3px 3px; font-size: 11px; }
  .bg-fill { inset: 0 0 13px; } .bg-fill i { font-size: 13px; } .bg-fill b { font-size: 11px; padding: 1px 4px; }
}

@media (max-height: 660px) and (max-width: 899px) {
  .bg-card { min-height: 50px; padding: 5px 10px; } .bg-card-name { font-size: 17px; } .bg-card-sub { font-size: 11.5px; }
  .bg-act { min-height: 36px; padding: 3px; } .bg-act span { font-size: 11px; } .bg-act small { font-size: 9px; }
  .bg-tile { aspect-ratio: 5 / 2.8; min-height: 40px; } .bg-grid { gap: 4px; }
}



.bg-sheet { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(4, 6, 10, .55); }
.bg-sheet .btn-primary { background: var(--bga); color: var(--bga-ink); }
.bg-sheet .btn-decide-lock { border-color: var(--bga-lite); background: var(--bga-deep); }
.bg-sheet .btn-decide-lock .lock-fill { background: linear-gradient(90deg, var(--bga-lite), var(--bga) 55%, var(--bga-dark)); }
.bg-sheet .btn-decide-lock .btn-decide-lbl { color: var(--bga-lite); }
.bg-sheet .btn-decide-lock .lock-secs { color: #fff; }
.bg-sheet-in { width: min(560px, 100%); max-height: calc(100% - 24px); margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0; border: 1.5px solid var(--line); border-bottom: 0; background: linear-gradient(180deg, #15161d, #0b0b0f 70%); text-align: center; box-shadow: 0 -12px 40px rgba(0, 0, 0, .55);
  animation: bgUp .22s cubic-bezier(.2, .9, .3, 1) both; }
.bg-sheet.is-good .bg-sheet-in { border-color: rgba(34, 197, 94, .7); background: radial-gradient(120% 70% at 50% 0%, rgba(34, 197, 94, .26), transparent 65%), linear-gradient(180deg, #15161d, #0b0b0f 70%); }
.bg-sheet.is-bad .bg-sheet-in, .bg-sheet.is-nofit .bg-sheet-in { border-color: rgba(248, 113, 113, .55); background: radial-gradient(120% 70% at 50% 0%, rgba(248, 113, 113, .2), transparent 65%), linear-gradient(180deg, #1a1012, #0b0b0d 70%); }
.bg-pop-h { margin: 0; font: 900 26px/1.1 var(--font); color: #fff; text-wrap: balance; }
.bg-sheet.is-good .bg-pop-h { color: #86efac; } .bg-sheet.is-bad .bg-pop-h, .bg-sheet.is-nofit .bg-pop-h { color: #fecaca; }
.bg-sheet.is-good .bg-pop-h { animation: bgPop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.bg-pop-who { display: grid; gap: 2px; margin: 10px 0 0; } .bg-pop-who b { font: 900 20px/1.15 var(--font); color: #fff; text-wrap: balance; } .bg-pop-who small { font: 700 13px/1.3 var(--font); color: var(--muted); }
.bg-pop-line { margin: 8px 0 0; font: 700 14.5px/1.4 var(--font); color: #e5e7eb; text-wrap: balance; }
.bg-pop-lives { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; } .bg-pop-lives b { font: 900 13px/1 var(--font); letter-spacing: .4px; text-transform: uppercase; color: #fecaca; }
.bg-teams-h { margin: 16px 0 8px; font: 900 11.5px/1 var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.bg-teams { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.bg-team { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 88px; padding: 8px 10px 7px; border-radius: 12px; background: var(--tb); color: var(--tt);
  box-shadow: inset 0 -4px 0 var(--tf), 0 2px 8px rgba(0, 0, 0, .4); }
.bg-team b { font: 900 13px/1.1 var(--font); white-space: nowrap; }
.bg-team em { padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font: 900 9.5px/1.2 var(--font); font-style: normal; letter-spacing: .6px; text-transform: uppercase; }
.bg-team.is-open { outline: 3px solid var(--bga-lite); outline-offset: 2px; } .bg-team.is-open em { background: var(--bga); color: var(--bga-ink); }
.bg-team.is-placed { outline: 3px solid #4ade80; outline-offset: 2px; } .bg-team.is-placed em { background: #14532d; color: #bbf7d0; }
.bg-team.is-filled { opacity: .62; }
.bg-offer-rr { width: 100%; max-width: 360px; margin: 14px auto 0; grid-auto-flow: column; justify-content: space-between; padding: 10px 16px; min-height: 52px; }
.bg-offer-rr span { font-size: 15px; } .bg-offer-rr small { font-size: 11px; }
.bg-sheet-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(11, 11, 15, 0), #0b0b0f 32%); pointer-events: none; }
.bg-sheet-foot .bg-next { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 6px; width: min(528px, 100%); min-height: 56px; margin: 0 auto; border-radius: 14px; font: 900 16px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; }
.bg-sheet-foot .bg-next i { font-style: normal; font-size: 12px; }
.bg-sheet-foot .btn-decide-lock { position: relative; overflow: hidden; }
@keyframes bgUp { from { transform: translateY(24px); opacity: .3; } to { transform: none; opacity: 1; } }




.bg-grid { grid-template-columns: repeat(var(--bg-cols, 4), minmax(0, 1fr)); }
.bg-demo { grid-template-columns: repeat(var(--bg-cols, 4), 1fr); }
.bg-grid[data-tiles="18"] .bg-tile { aspect-ratio: 5 / 3.1; } .bg-grid[data-tiles="18"] .bg-tname { font-size: 13px; }
.bg-grid[data-tiles="20"] .bg-tile { aspect-ratio: 5 / 3.6; }
.bg-grid[data-tiles="30"] { gap: 5px; } .bg-grid[data-tiles="30"] .bg-tile { aspect-ratio: 5 / 4.4; min-height: 46px; border-radius: 10px; }
.bg-grid[data-tiles="30"] .bg-tname { padding: 10px 2px 4px; font-size: 10.5px; } .bg-grid[data-tiles="30"] .bg-fill b { font-size: 10px; padding: 1px 3px; } .bg-grid[data-tiles="30"] .bg-fill i { font-size: 13px; }
.bg-grid[data-tiles="32"] { gap: 5px; } .bg-grid[data-tiles="32"] .bg-tile { aspect-ratio: 5 / 2.9; min-height: 44px; border-radius: 10px; }
.bg-grid[data-tiles="32"] .bg-tname { padding: 8px 3px 3px; font-size: 11.5px; } .bg-grid[data-tiles="32"] .bg-fill { inset: 0 0 14px; grid-auto-flow: column; gap: 3px; } .bg-grid[data-tiles="32"] .bg-fill i { font-size: 12px; } .bg-grid[data-tiles="32"] .bg-fill b { font-size: 11px; }
.bg-demo:has(.bg-mini:nth-child(29)) { width: min(220px, 56vw); }
@media (max-height: 760px) and (max-width: 899px) {
  .bg-grid[data-tiles="32"] .bg-tile { aspect-ratio: 5 / 2.5; min-height: 38px; } .bg-grid[data-tiles="32"] .bg-tname { font-size: 10.5px; }
  .bg-grid[data-tiles="30"] .bg-tile { aspect-ratio: 5 / 3.8; min-height: 40px; }
  .bg-grid[data-tiles="18"] .bg-tile { aspect-ratio: 5 / 2.7; }
}
@media (min-width: 900px) {
  .bg-v-play .bg-grid[data-tiles="30"] .bg-tname, .bg-v-play .bg-grid[data-tiles="32"] .bg-tname { font-size: 12.5px; }
  .bg-v-play .bg-grid[data-tiles="30"] .bg-fill b, .bg-v-play .bg-grid[data-tiles="32"] .bg-fill b { font-size: 12px; }
}


.bg-heart { display: inline-block; width: 19px; height: 17px; vertical-align: middle; }
.bg-heart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bg-heart path { transform-box: fill-box; }
.bg-heart .hl { transform-origin: 100% 100%; } .bg-heart .hr { transform-origin: 0 100%; }
.bg-heart .hf { fill: #ef4444; stroke: #fca5a5; stroke-width: .6; }
.bg-heart.is-on .hl, .bg-heart.is-on .hr, .bg-heart.is-off .hf, .bg-heart.is-lost .hf { display: none; }
.bg-heart.is-on svg { filter: drop-shadow(0 1px 3px rgba(239, 68, 68, .55)); }
.bg-heart.is-off .hl, .bg-heart.is-off .hr { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .32); stroke-width: 1.3; stroke-linejoin: round; }
.bg-heart.is-lost svg { animation: bgHeartHit .55s ease both; }
.bg-heart.is-lost .hl { animation: bgHeartL .75s .15s cubic-bezier(.3, .7, .3, 1) both; }
.bg-heart.is-lost .hr { animation: bgHeartR .75s .15s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes bgHeartHit { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes bgHeartL { 0% { fill: #ef4444; stroke: #fca5a5; stroke-width: .6; transform: none; } 45% { fill: #ef4444; transform: translate(-2px, -1px) rotate(-14deg); }
  100% { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .32); stroke-width: 1.3; transform: translate(-1.2px, .6px) rotate(-9deg); } }
@keyframes bgHeartR { 0% { fill: #ef4444; stroke: #fca5a5; stroke-width: .6; transform: none; } 45% { fill: #ef4444; transform: translate(2px, -1px) rotate(14deg); }
  100% { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .32); stroke-width: 1.3; transform: translate(1.2px, .6px) rotate(9deg); } }
.bg-lives { gap: 4px; align-items: center; }
.bg-lives.is-big .bg-heart { width: 30px; height: 27px; }
.bg-rules .bg-heart { width: 22px; height: 20px; }
.btn-decide-lbl .bg-heart { width: 18px; height: 16px; margin-right: 2px; }
.ou-rw-s .bg-heart { width: 22px; height: 20px; margin-right: 4px; }
.bg-hero-k .bg-heart { width: 15px; height: 14px; margin: -2px 2px 0 0; }

.bg-sheet-in { padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #14151d, #0b0b10 70%); overflow-x: hidden; }
.bg-sheet.is-good .bg-sheet-in { border-color: rgba(74, 222, 128, .55); background: linear-gradient(180deg, #14151d, #0b0b10 70%); }
.bg-sheet.is-bad .bg-sheet-in, .bg-sheet.is-nofit .bg-sheet-in { border-color: rgba(248, 113, 113, .5); background: linear-gradient(180deg, #14151d, #0b0b10 70%); }
.bg-pop-band { position: relative; display: grid; justify-items: center; align-content: end; gap: 6px; min-height: 132px; padding: 22px 16px 16px; overflow: hidden;
  background: var(--cb, #3b0d12); border-radius: 21px 21px 0 0; }
.bg-pop-band.is-plain { background: radial-gradient(120% 120% at 50% 0%, #7f1d1d, #2a0b10 70%); }
.bg-pop-band .bg-kit { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; }
.bg-pop-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 14, .2), rgba(8, 9, 14, .62) 48%, rgba(20, 21, 29, .97)); }
.bg-pop-band > :not(.bg-kit) { position: relative; z-index: 1; }
.bg-pop-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2), 0 10px 26px rgba(0, 0, 0, .55);
  animation: bgBadge .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bg-pop-badge svg { width: 30px; height: 30px; overflow: visible; }
.bg-pop-badge.is-good { background: linear-gradient(180deg, #22c55e, #15803d); }
.bg-pop-badge.is-bad, .bg-pop-badge.is-nofit, .bg-pop-badge.is-over { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.bg-pop-badge.is-over svg { width: 32px; height: 29px; }
.bg-pop-badge.is-over path { transform-box: fill-box; }
.bg-pop-badge.is-over .hl { transform-origin: 100% 100%; animation: bgOverL .7s .35s ease both; } .bg-pop-badge.is-over .hr { transform-origin: 0 100%; animation: bgOverR .7s .35s ease both; }
@keyframes bgOverL { to { transform: translate(-1.5px, .5px) rotate(-12deg); } } @keyframes bgOverR { to { transform: translate(1.5px, .5px) rotate(12deg); } }
@keyframes bgBadge { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.bg-sheet .bg-pop-h { margin: 4px 0 0; font: 900 31px/1 var(--font); letter-spacing: .4px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); animation: none; }
.bg-sheet.is-good .bg-pop-h { color: #fff; } .bg-sheet.is-bad .bg-pop-h, .bg-sheet.is-nofit .bg-pop-h { color: #fff; }
.bg-pop-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; font: 900 11.5px/1 var(--font); letter-spacing: 1px; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(4px); }
.bg-pop-chip.is-bad, .bg-pop-chip.is-nofit, .bg-pop-chip.is-over { background: #dc2626; border-color: #fca5a5; box-shadow: 0 4px 14px rgba(220, 38, 38, .45); }
.bg-pop-chip.is-good { background: #15803d; border-color: #86efac; }
.bg-pop-body { padding: 4px 16px 0; }
.bg-pop-who { margin: 8px 0 0; }
.bg-pop-lives { margin: 12px 0 0; gap: 10px; }
.bg-pop-lives b { color: #fecaca; }
.bg-over-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.bg-over-stats span { display: grid; gap: 5px; justify-items: center; padding: 12px 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.bg-over-stats b { font: 900 24px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; } .bg-over-stats b small { font-size: 14px; color: var(--muted); }
.bg-over-stats em { font: 800 10.5px/1 var(--font); font-style: normal; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.bg-over-offer { margin: 14px 0 0; font: 700 14px/1.4 var(--font); color: #e5e7eb; text-wrap: balance; }
.bg-over-see { margin: 8px auto 0; }
.bg-over-foot { display: grid; grid-template-columns: minmax(0, 264px) minmax(0, 264px); justify-content: center; gap: 10px; } 
.bg-over-foot .btn { width: 100%; min-height: 58px; margin: 0; pointer-events: auto; border-radius: 14px; }
.bg-sheet .bg-over-rib { position: relative; overflow: hidden; display: grid; align-content: center; justify-items: center; gap: 3px; border: 1.5px solid #f472b6; background: #2a1022; }
.bg-sheet .bg-over-rib .lock-fill { background: linear-gradient(90deg, rgba(244, 114, 182, .55), rgba(219, 39, 119, .45)); }
.bg-sheet .bg-over-rib .btn-decide-lbl { position: relative; z-index: 1; padding: 0; background: none; box-shadow: none; color: #fff; font: 900 14px/1 var(--font); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.bg-sheet .bg-over-rib small { position: relative; z-index: 1; font: 800 10.5px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; color: #fbcfe8; }
.bg-over-again { font: 900 15px/1 var(--font); letter-spacing: .5px; text-transform: uppercase; }
@media (max-width: 360px) { .bg-over-stats b { font-size: 20px; } .bg-sheet .bg-over-rib .btn-decide-lbl { font-size: 12.5px; } .bg-sheet .bg-pop-h { font-size: 27px; } .bg-pop-band { min-height: 118px; } }
@media (prefers-reduced-motion: reduce) { .bg-heart.is-lost svg, .bg-heart.is-lost .hl, .bg-heart.is-lost .hr, .bg-pop-badge, .bg-pop-badge.is-over .hl, .bg-pop-badge.is-over .hr { animation: none; }
  .bg-heart.is-lost .hl, .bg-heart.is-lost .hr { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .32); stroke-width: 1.3; } }

html.cg-in-game .bg-sheet-in { max-height: calc(100% - var(--cg-bar-h, 112px) - 8px); }
.bg-over-again { white-space: nowrap; }
@media (max-width: 380px) { .bg-over-again { font-size: 13.5px; letter-spacing: .2px; } .bg-over-foot { gap: 8px; } }
@media (max-height: 700px) {
  .bg-pop-band { min-height: 104px; padding: 16px 14px 12px; gap: 4px; }
  .bg-pop-badge { width: 44px; height: 44px; } .bg-pop-badge svg { width: 24px; height: 24px; }
  .bg-sheet .bg-pop-h { font-size: 25px; }
  .bg-pop-who { margin-top: 4px; } .bg-pop-who b { font-size: 18px; } .bg-pop-line { margin-top: 5px; font-size: 13.5px; }
  .bg-pop-lives { margin-top: 8px; } .bg-lives.is-big .bg-heart { width: 25px; height: 22px; }
  .bg-over-stats { margin-top: 10px; } .bg-over-stats span { padding: 8px 4px; } .bg-over-stats b { font-size: 19px; }
  .bg-teams-h { margin: 10px 0 6px; } .bg-team { min-width: 76px; padding: 6px 8px 5px; } .bg-team b { font-size: 12px; }
  .bg-over-offer { display: none; } .bg-over-see { margin-top: 10px; }
  .bg-sheet-foot .bg-next, .bg-over-foot .btn { min-height: 50px; }
}

.bg-play, .bg-start .bg-link, .bg-logo { text-wrap: balance; }

@media (max-height: 700px) and (max-width: 899px) {
  #bgRoot.bg-n32 .bg-card, #bgRoot.bg-n18 .bg-card { min-height: 50px; padding: 5px 10px; gap: 2px; }
  #bgRoot.bg-n32 .bg-card-name, #bgRoot.bg-n18 .bg-card-name { font-size: 17px; } #bgRoot.bg-n32 .bg-card-sub, #bgRoot.bg-n18 .bg-card-sub { font-size: 11.5px; }
  #bgRoot.bg-n32 .bg-act, #bgRoot.bg-n18 .bg-act { min-height: 36px; padding: 3px; }
  .bg-grid[data-tiles="32"] { gap: 4px; } .bg-grid[data-tiles="32"] .bg-tile { aspect-ratio: 5 / 2.35; min-height: 38px; }
  .bg-grid[data-tiles="18"] .bg-tile { aspect-ratio: 5 / 2.3; }
}