/* Bingo: računari u redu gore, pozivač (kuglica, poslednje kuglice, šara), tabla sa 75 brojeva levo na širokom
   ekranu, kartice dole (polje je dugme, pokriveno = crveni krug kao od markera), rezultat igre preko sredine.
   TV ekran (G6): velika kuglica, tabla i igrači, kod za ulazak. Boje i dugmad iz base.css. */
.is-game .felt.bg{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.bg{--b:#2a6fc9;--i:#c23b3b;--n:#e0e0d8;--g:#2e9a5a;--o:#e39b1b}
.bg-wrap{position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px);padding:clamp(8px,1.4vw,16px)}

/* ---------- računari ---------- */
.bg-opps{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(4px,.8vw,10px);flex:none}
.bg-seat{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 12px;border-radius:999px;cursor:pointer;color:inherit;font:inherit;
  background:rgba(20,10,4,.5);border:1px solid rgba(212,176,106,.22);box-shadow:0 4px 10px rgba(0,0,0,.25);transition:border-color .2s,box-shadow .2s}
.bg-seat.close{border-color:rgba(240,212,145,.7)}
.bg-seat.claim{border-color:#ff8a7a;box-shadow:0 0 0 3px rgba(255,138,122,.3)}
.bg-nm{display:flex;align-items:baseline;gap:5px}
.bg-nm b{font:700 15px var(--sans);white-space:nowrap}
.bg-nm small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.bg-wins{color:var(--brass-hi);font-size:13px;letter-spacing:1px}
.bg-wins:empty{display:none}
.bg-need{font-size:13px;font-weight:700;color:var(--cream-2);white-space:nowrap}
.bg-need.hot{color:var(--brass-hi)}
.bg-say{padding:2px 10px;border-radius:12px;background:#b4232f;color:#fff;font-weight:800;font-size:14px;white-space:nowrap}

/* ---------- glavni deo ---------- */
.bg-main{flex:1;min-height:0;display:flex;gap:clamp(10px,1.6vw,22px);justify-content:center}
.bg-play{flex:1;min-width:0;max-width:1000px;display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px)}
.bg-board{display:none}
.felt.wide .bg-main > .bg-board{display:flex}

/* ---------- pozivač ---------- */
.bg-caller{position:relative;flex:none;display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);padding:8px clamp(8px,1.4vw,16px);border-radius:18px;
  background:rgba(20,10,4,.42);border:1px solid rgba(212,176,106,.2)}
.bg-now{flex:none;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.bg-ball{--c:var(--n);position:relative;display:inline-grid;place-items:center;align-content:center;width:var(--bs,clamp(64px,9vh,92px));aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),transparent 42%),var(--c);box-shadow:inset 0 -6px 10px rgba(0,0,0,.28),0 6px 14px rgba(0,0,0,.4)}
.bg-ball::before{content:"";position:absolute;inset:18%;border-radius:50%;background:#fffaf0;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.bg-ball small,.bg-ball b{position:relative;color:#1d1611;line-height:1;font-family:var(--sans)}
.bg-ball small{font-weight:800;font-size:calc(var(--bs,80px)*.16)}
.bg-ball b{font-weight:800;font-size:calc(var(--bs,80px)*.3);font-variant-numeric:tabular-nums}
.bg-ball[data-l="B"]{--c:var(--b)}.bg-ball[data-l="I"]{--c:var(--i)}.bg-ball[data-l="N"]{--c:#b9b9ad}.bg-ball[data-l="G"]{--c:var(--g)}.bg-ball[data-l="O"]{--c:var(--o)}
.bg-ball.none{--c:#6b5a45;opacity:.75}
.bg-now .bg-ball{--bs:clamp(64px,10vh,96px)}
.bg-ball.in{animation:bgin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bgin{from{transform:translateX(-80px) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
.bg-ball.sm{--bs:40px}
.bg-cinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bg-cnt{font-size:15px;font-weight:700;color:var(--cream-2);white-space:nowrap}
.bg-cnt b{font:800 20px/1 var(--sans);color:#fff3d6;font-variant-numeric:tabular-nums}
.bg-recent{display:flex;gap:6px;min-height:40px;overflow:hidden}
.bg-pat{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px 4px 6px;border-radius:12px;cursor:pointer;color:inherit;font:inherit;text-align:left;
  background:rgba(0,0,0,.25);border:1px solid rgba(212,176,106,.25)}
.bg-pat > span:last-child{display:flex;flex-direction:column}
.bg-pat small{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-3);white-space:nowrap}
.bg-pat b{font-size:15px;white-space:nowrap}
.bg-mini{display:grid;grid-template-columns:repeat(5,7px);gap:2px;padding:4px;border-radius:5px;background:#fbf6e8}
.bg-mini i{width:7px;height:7px;border-radius:2px;background:#e0d6bf}
.bg-mini i.on{background:#c23b3b}
.bg-mini i.alt{background:#e39b9b}
.bg-mini i.on.alt{background:#c23b3b}
/* automatsko zvanje: traka koja se skraćuje */
.bg-timer{position:absolute;left:16px;right:16px;bottom:4px;height:4px;border-radius:2px;background:rgba(240,212,145,.15);overflow:hidden}
.bg-timer::after{content:"";position:absolute;inset:0;background:var(--brass-hi);transform-origin:left;transform:scaleX(0)}
.bg-timer.on::after{animation:bgtime var(--ms) linear forwards}
@keyframes bgtime{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- kartice ---------- */
.bg-cards{--cs:44px;--cols:1;flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols),max-content);gap:10px;justify-content:center;align-content:center}
.bg-card{padding:calc(var(--cs)*.12);border-radius:calc(var(--cs)*.22);background:#fbf6e8;box-shadow:0 10px 24px rgba(0,0,0,.4);transition:box-shadow .3s}
.bg-card.won{box-shadow:0 0 0 4px var(--brass-hi),0 10px 24px rgba(0,0,0,.4)}
.bg-head{display:grid;grid-template-columns:repeat(5,var(--cs));gap:2px;margin-bottom:2px}
.bg-head span{display:grid;place-items:center;height:calc(var(--cs)*.62);border-radius:4px;background:#b81f2a;color:#fff;font:800 calc(var(--cs)*.42)/1 var(--sans)}
.bg-grid{display:grid;grid-template-columns:repeat(5,var(--cs));gap:2px}
.bg-c{position:relative;display:grid;place-items:center;width:var(--cs);height:var(--cs);padding:0;border:1px solid rgba(120,90,50,.25);border-radius:4px;background:#fffdf6;cursor:pointer;
  color:#1d1611;font:700 calc(var(--cs)*.44)/1 var(--sans);font-variant-numeric:tabular-nums}
.bg-c{isolation:isolate}
.bg-c::after{content:"";position:absolute;z-index:-1;inset:8%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ef5b5b,#c4222c);opacity:.85;transform:scale(0);transition:transform .15s}
.bg-c.dab::after{transform:scale(1)}
.bg-c.dab{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bg-c.free{color:#a7822f;display:flex;flex-direction:column;justify-content:center;gap:1px}
.bg-c.free svg{width:calc(var(--cs)*.42);height:calc(var(--cs)*.42)}
.bg-c.free small{font-size:calc(var(--cs)*.17);font-weight:800;letter-spacing:.04em}
.bg-c.free::after{transform:scale(1);background:radial-gradient(circle at 40% 35%,rgba(240,212,145,.5),rgba(201,162,78,.35))}
.bg-c.win{background:#ffe8a3}
.bg-c.hint{outline:3px solid var(--brass-hi);outline-offset:-3px;animation:bghint 1s ease-in-out infinite}
@keyframes bghint{50%{background:#fff1c2}}
.bg-c.lock{cursor:default}
.bg-c:focus-visible{outline:3px solid #1d3a63;outline-offset:-3px}
/* dugme Bingo! */
.btn.bg-bingo{font-family:var(--serif);font-style:italic;font-weight:700}
.btn.bg-bingo:not(:disabled){background:linear-gradient(180deg,#d93a44,#a51d27);border-color:#ff9b8f;color:#fff}

/* ---------- tabla sa 75 brojeva ---------- */
.bg-board{flex:none;flex-direction:column;justify-content:center;gap:4px;padding:10px;border-radius:16px;background:rgba(20,10,4,.42);border:1px solid rgba(212,176,106,.2)}
.bg-brow{display:grid;grid-template-columns:repeat(16,var(--bb,22px));gap:3px;align-items:center}
.bg-board .bg-bl{display:grid;place-items:center;height:var(--bb,22px);border-radius:5px;font:800 calc(var(--bb,22px)*.6)/1 var(--sans);color:#fff}
.bg-brow[data-l="B"] .bg-bl{background:var(--b)}.bg-brow[data-l="I"] .bg-bl{background:var(--i)}.bg-brow[data-l="N"] .bg-bl{background:#8a8a80}.bg-brow[data-l="G"] .bg-bl{background:var(--g)}.bg-brow[data-l="O"] .bg-bl{background:var(--o)}
.bg-brow span{display:grid;place-items:center;height:var(--bb,22px);border-radius:50%;font:700 calc(var(--bb,22px)*.48)/1 var(--sans);color:rgba(245,236,217,.4);font-variant-numeric:tabular-nums}
.bg-brow span.on{background:#fbf6e8;color:#1d1611}
.bg-brow span.now{background:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.35)}
/* široko: tabla stoji uspravno levo (kolone B-I-N-G-O po 15, kao tabla u sali) */
.felt.wide .bg-main > .bg-board{flex-direction:row;align-self:center;align-items:center;gap:5px}
.felt.wide .bg-main > .bg-board .bg-brow{display:flex;flex-direction:column;gap:2px}
.felt.wide .bg-main > .bg-board .bg-brow span,.felt.wide .bg-main > .bg-board .bg-bl{width:var(--bb)}
/* tabla u lampi (telefon) */
.bg-board.lampb{display:flex;--bb:min(19px,calc((100vw - 90px)/16));margin-top:10px;background:rgba(0,0,0,.25)}

/* ---------- rezultat igre ---------- */
.bg-res{position:absolute;left:50%;top:8px;translate:-50% 0;z-index:6;width:min(440px,calc(100% - 24px));max-height:calc(100% - 16px);overflow:auto;padding:12px 18px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(60,32,14,.97),rgba(30,16,7,.97));border:1px solid rgba(240,212,145,.5);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.bg-res.good{border-color:var(--brass-hi)}
.bg-rt{font:italic 700 clamp(20px,2.6vw,26px)/1.25 var(--serif);color:#fff3d6}
.bg-res.good .bg-rt{color:var(--brass-hi)}
.bg-rs{font-size:14px;font-weight:600;color:var(--cream-2);margin-top:4px}
.bg-score{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin-top:10px;font-size:14px;color:var(--cream-2)}
.bg-score b{color:#fff3d6}
.bg-score .me b{color:var(--brass-hi)}
.bg-wcard{--cs:26px;display:inline-block;margin-top:10px;padding:4px;border-radius:8px;background:#fbf6e8}
.bg-wcard .bg-c{cursor:default;font-size:12px;border-radius:3px}
.bg-wcard .bg-c.free{font-size:14px;color:#a7822f}
.bg-wcard .bg-c.win{background:#f0c0c0;color:#7a1218}

/* ---------- telefon ---------- */
@media (max-width:640px){
  /* računari u jednom redu koji se pomera prstom (do sedam) */
  .bg-opps{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
  .bg-opps[data-n="1"],.bg-opps[data-n="2"],.bg-opps[data-n="3"]{justify-content:center}
  .bg-seat{flex:none}
  .bg-caller{gap:8px;padding:6px 8px}
  .bg-now .bg-ball{--bs:clamp(56px,8vh,72px)}
  .bg-recent{gap:4px}
  .bg-ball.sm{--bs:36px}
  .bg-recent .bg-ball.sm:nth-child(n+3){display:none}
  .bg-pat small{display:none}
  .bg-pat b{font-size:13px;max-width:7em;white-space:normal;line-height:1.15}
  .bg-cnt{font-size:13px;white-space:normal}
  .bg-cnt b{font-size:18px}
  .bg-seat{padding:3px 9px;gap:6px}
  .bg-nm small{display:none}
}
@media (max-width:380px){
  .bg-recent{display:none}
}

/* ---------- TV ekran (G6) ---------- */
.is-tv .bg-tv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,3vh,36px);padding:clamp(12px,2vw,32px)}
.is-tv .bg-tvl{display:flex;align-items:center;gap:clamp(16px,3vw,48px);min-width:0}
.is-tv .bg-tvl .bg-opps{flex:1;min-width:0;align-content:center}
.is-tv .bg-caller{flex:none;background:none;border:0;padding:0}
.is-tv .bg-board{align-self:center}
.is-tv .bg-now .bg-ball{--bs:clamp(140px,30vh,300px)}
.is-tv .bg-cnt{font-size:clamp(18px,2.4vh,28px)}
.is-tv .bg-cnt b{font-size:clamp(28px,4vh,48px)}
.is-tv .bg-ball.sm{--bs:clamp(48px,7vh,80px)}
.is-tv .bg-recent{gap:12px;min-height:0}
.is-tv .bg-pat b{font-size:clamp(16px,2.2vh,26px)}
.is-tv .bg-mini{grid-template-columns:repeat(5,12px)}
.is-tv .bg-mini i{width:12px;height:12px}
.is-tv .bg-board{display:flex;--bb:clamp(22px,min(5.4vh,calc((100vw - 120px)/17)),60px)}
.is-tv .bg-opps{justify-content:flex-start}
.is-tv .bg-seat{min-height:48px;padding:6px 16px}
.is-tv .bg-nm b{font-size:clamp(15px,2vh,22px)}
.is-tv .bg-need{font-size:clamp(13px,1.7vh,18px)}
.is-tv .bg-res{width:min(560px,calc(100% - 24px))}
.tvlink a{color:var(--brass-hi);font-weight:700}