/* Ball By Ball game page (public/ballbyball.php + js/ballbyball-game.js). Layout, colours and font sizes copied from the
   reference (dream444.win/ballByBall): dark teal headers, the animated gif banner with a round timer, and the eight Back
   boxes (runs = gold, 4 = green, 6 = periwinkle, wicket = red, extra = gold; locked with a dark overlay between balls). */
.bbbg{background:#eee;font-family:Tahoma,Helvetica,sans-serif;padding-bottom:12px}
/* title bar: BALL BY BALL + round id */
.bbbg-bar{display:flex;align-items:center;justify-content:space-between;height:35px;padding:0 12px;background:linear-gradient(-180deg,#2e4b5e 0%,#243a48 82%);color:#fff}
.bbbg-bar-title{font-size:16px;font-weight:700;letter-spacing:.5px}
.bbbg-bar-round{font-size:13px;color:#cfd8dd}
/* banner + round timer + reveal video */
.bbbg-banner{position:relative;width:100%;background:#fff;line-height:0;overflow:hidden}
.bbbg-banner-img{display:block;width:100%;height:auto}
.bbbg-banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .2s;pointer-events:none}
.bbbg.bbbg-reveal .bbbg-banner-video{opacity:1}
.bbbg-banner-reveal{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:3px 16px;background:rgba(0,0,0,.72);color:#ffd24d;font-size:15px;font-weight:700;border-radius:5px;line-height:1.2;opacity:0;transition:opacity .2s}
.bbbg.bbbg-reveal .bbbg-banner-reveal{opacity:1}
.bbbg-timer{position:absolute;top:8px;right:8px;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.bbbg-timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.bbbg-timer-bg{fill:#1e1e1e;stroke:rgba(255,255,255,.18);stroke-width:3}
.bbbg-timer-ring{fill:none;stroke:#4fd16a;stroke-width:3;stroke-linecap:round;stroke-dasharray:106.8;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear}
.bbbg-timer b{position:relative;color:#fff;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
/* market */
.bbbg-market{background:#fff}
.bbbg-market-title{display:flex;align-items:center;gap:6px;height:25px;padding:0 8px;background:linear-gradient(-180deg,#2e4b5e 0%,#243a48 82%);color:#fff;font-size:13px;font-weight:700}
.bbbg-i{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.bbbg-i svg{display:block;width:15px;height:15px}
.bbbg-i[hidden]{display:none}
.bbbg-cols{display:grid;grid-template-columns:1fr 1fr;background:#e9edf0;color:#3b5160;font-size:13px;font-weight:700;text-align:center}
.bbbg-cols span{padding:4px 0;border-left:1px solid #d7dee3}
.bbbg-cols span:first-child{border-left:0}
/* grid of outcome boxes: two columns */
.bbbg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.bbbg-loading{grid-column:1 / -1;padding:24px;text-align:center;color:#7e97a7;font-size:13px}
.bbbg-box{position:relative;display:flex;align-items:stretch;min-height:62px;padding:2px 0;border-radius:10px;overflow:hidden;color:#000;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.2);background:linear-gradient(#c9bf34,#f7eb4c,#c9bf34)}
.bbbg-box.bbbg-k-four{background:linear-gradient(#2dcd68,#98ffbe,#168940)}
.bbbg-box.bbbg-k-six{background:linear-gradient(#8b97ff,#a8bdff,#7173fc)}
.bbbg-box.bbbg-k-wicket{background:linear-gradient(#e7645a,#f68f87,#ff5043)}
.bbbg-box.bbbg-k-extra{background:linear-gradient(#c9bf34,#f7eb4c,#c9bf34)}
/* left 40% = odds (12/700) over stake (12/400); right 60% = label (15/800), dashed left divider */
.bbbg-od{flex:0 0 40%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bbbg-od b{font-size:12px;font-weight:700;line-height:1;margin-bottom:3px;color:#000}
.bbbg-od small{font-size:12px;font-weight:400;line-height:1;color:#000}
.bbbg-lab{flex:0 0 60%;display:flex;align-items:center;justify-content:center;padding:0 6px;border-left:3px dashed #000;font-size:15px;font-weight:800;line-height:22px;text-transform:uppercase;text-align:center}
/* suspended: full-box dark overlay + centred white lock (18px), like the reference */
.bbbg-box .bbbg-lock{display:none;position:absolute;inset:0;z-index:2;align-items:center;justify-content:center;background:rgba(0,0,0,.6);border-radius:10px}
.bbbg-box.bbbg-susp{cursor:not-allowed}
.bbbg-box.bbbg-susp .bbbg-lock{display:flex}
.bbbg-lock svg{height:18px;width:auto;fill:#fff}
/* scrolling stream message (marquee) */
.bbbg-marquee{background:#e9edf0;border-top:1px solid #d7dee3;border-bottom:1px solid #d7dee3}
.bbbg-marquee marquee{display:block;padding:4px 0;color:#2e4b5e;font-size:12px;font-weight:700}
/* recent result */
.bbbg-results{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;background:#1e1e1e;color:#fff}
.bbbg-results h5{flex:0 0 auto;margin:0;font-size:17px;font-weight:700;white-space:nowrap}
.bbbg-res-list{flex:1 1 auto;display:flex;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.bbbg-res-list::-webkit-scrollbar{display:none}
.bbbg-res-list li{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:35px;height:31px;border-radius:15px;font-size:14px;font-weight:700;color:#111;cursor:pointer;background:linear-gradient(#c9bf34,#f7eb4c,#c9bf34)}
.bbbg-res-list li.bbbg-k-four{background:linear-gradient(#2dcd68,#98ffbe,#168940)}
.bbbg-res-list li.bbbg-k-six{background:linear-gradient(#8b97ff,#a8bdff,#7173fc)}
.bbbg-res-list li.bbbg-k-wicket{background:linear-gradient(#e7645a,#f68f87,#ff5043);color:#fff}
.bbbg-res-list li.bbbg-k-extra{background:linear-gradient(#c9bf34,#f7eb4c,#c9bf34)}
/* modals (rules + result) */
.bbbg-modal{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(0,0,0,.55)}
.bbbg-modal[hidden]{display:none}
.bbbg-modal-box{width:100%;max-width:380px;max-height:88vh;display:flex;flex-direction:column;border-radius:12px;overflow:hidden}
.bbbg-rules{background:#d7f0d2;padding:10px}
.bbbg-rules-head{background:linear-gradient(-180deg,#2e4b5e 0%,#243a48 82%);color:#fff;border-radius:8px;padding:12px 14px}
.bbbg-rules-head h2{margin:0 0 4px;font-size:19px;font-weight:700}
.bbbg-rules-head p{margin:0;font-size:12px;line-height:1.35;color:#dfe7eb}
.bbbg-rules-sub{margin:10px 0;padding:9px;background:#ececec;border-radius:6px;text-align:center;font-size:14px;font-weight:700;color:#2e4b5e}
.bbbg-rules-list{overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.bbbg-rule{background:#fff;border-radius:8px;padding:10px 12px}
.bbbg-rule,.bbbg-disc{flex:none}
.bbbg-rule-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.bbbg-rule-top b{font-size:15px;font-weight:700;color:#1e1e1e}
.bbbg-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;font-size:13px;font-weight:700;color:#111;background:linear-gradient(#c9bf34,#f7eb4c,#c9bf34)}
.bbbg-badge.bbbg-k-four{background:linear-gradient(#2dcd68,#98ffbe,#168940)}
.bbbg-badge.bbbg-k-six{background:linear-gradient(#8b97ff,#a8bdff,#7173fc)}
.bbbg-badge.bbbg-k-wicket{background:linear-gradient(#e7645a,#f68f87,#ff5043);color:#fff}
.bbbg-badge.bbbg-k-extra{background:linear-gradient(#c9bf34,#f7eb4c,#c9bf34)}
.bbbg-rule p{margin:0;font-size:13px;line-height:1.35;color:#3b5160}
.bbbg-ok{margin-top:10px;align-self:center;min-width:180px;padding:9px 0;background:#fff;border:1px solid #bbb;border-radius:6px;font-size:15px;font-weight:700;color:#1e1e1e;cursor:pointer}
.bbbg-resmodal{background:#fff}
.bbbg-resmodal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:linear-gradient(-180deg,#2e4b5e 0%,#243a48 82%);color:#fff;font-size:15px;font-weight:700}
.bbbg-x{border:0;background:none;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.bbbg-resmodal-video{width:100%;max-height:60vh;background:#000;display:block}

/* second info icon (far right of the Runs bar) + Video & Scoreboard Disclaimer card in the rules popup */
.bbbg-i-right{margin-left:auto;color:#fff}
.bbbg-minmax{margin-left:auto;background:#1e1e1e;color:#fff;font-size:13px;font-weight:700;border-radius:6px;padding:3px 10px;white-space:nowrap;cursor:pointer}
.bbbg-minmax[hidden]{display:none}
.bbbg-disc{background:#fff;border-radius:8px;border-left:5px solid #243a48;padding:0 0 10px;overflow:hidden}
.bbbg-disc-head{margin-bottom:8px;padding:9px;background:#ececec;text-align:center;font-size:14px;font-weight:700;color:#2e4b5e}
.bbbg-disc p{margin:0 12px 7px;font-size:13px;line-height:1.35;color:#3b5160}
.bbbg-disc p:last-child{margin-bottom:0}

/* --- bet slip (opens below the tapped box; same layout as the reference) --- */
.bbbg-box.bbbg-sel{outline:3px solid #1e7fd6;outline-offset:-3px}
.bbbg-staked{position:absolute;top:2px;right:5px;z-index:3;background:rgba(0,0,0,.62);color:#fff;font-size:10px;font-weight:700;border-radius:8px;padding:0 6px;line-height:15px}
.bbbg-slip{grid-column:1 / -1;background:#cfe8cb;border-radius:8px;padding:8px}
.bbbg-slip-top{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.bbbg-step{display:flex;align-items:center;height:44px;background:#dde4e7;border-radius:6px;overflow:hidden}
.bbbg-step-stake{background:#fff;border:1px solid #cfd8dd}
.bbbg-step button{flex:0 0 44px;height:100%;border:0;background:none;color:#1e7fd6;font-size:24px;font-weight:700;line-height:1;cursor:pointer}
.bbbg-step-v{flex:1;text-align:center;font-size:16px;font-weight:700;color:#1e1e1e}
.bbbg-stake{flex:1;width:100%;min-width:0;border:0;background:none;text-align:center;font-size:16px;font-weight:700;color:#1e1e1e;outline:none}
.bbbg-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.bbbg-chip{height:36px;border:1px solid #c3c9ce;border-radius:5px;background:#fff;font-size:13px;font-weight:700;color:#1e1e1e;cursor:pointer}
.bbbg-chip:active{background:#eef1f3}
.bbbg-slip-msg{color:#c62828;font-size:12px;font-weight:700;text-align:center}
.bbbg-slip-msg:not(:empty){padding:0 0 7px}
.bbbg-slip-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bbbg-cancel{height:44px;border:1px solid #c3c9ce;border-radius:6px;background:#fff;font-size:15px;font-weight:700;color:#1e1e1e;cursor:pointer}
.bbbg-place{height:44px;border:0;border-radius:6px;background:#52635a;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.bbbg-place.active{background:#111}
.bbbg-place:disabled{opacity:.6}
/* ngx-toastr-style toasts (top-right): green success, red error — like the reference */
.bbbg-toasts{position:fixed;top:12px;right:12px;z-index:13000;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:86vw}
.bbbg-tst{display:flex;align-items:center;gap:10px;width:252px;max-width:86vw;padding:13px 14px;border-radius:4px;color:#fff;font-size:12px;font-weight:600;line-height:1.35;box-shadow:0 0 12px rgba(0,0,0,.4);opacity:0;transform:translateX(24px);transition:opacity .25s,transform .25s;pointer-events:auto}
.bbbg-tst.show{opacity:.96;transform:translateX(0)}
.bbbg-tst.ok{background:#51a351}
.bbbg-tst.err{background:#bd362f}
.bbbg-tst-ic{flex:0 0 auto;width:22px;height:22px}
.bbbg-tst-ic svg{width:22px;height:22px;display:block}
.bbbg-tst-msg{flex:1}