/* FozzBET 365 — The Club Screen
   Pub gaming-lounge Keno board turned on one man. Loud, dense, bevelled,
   tabular. Everything selectable is a cell; everything selected glows. */

@font-face{font-family:'Archivo Black';src:url('../fonts/archivoblack-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow SC';src:url('../fonts/barlowsc-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow SC';src:url('../fonts/barlowsc-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Cond';src:url('../fonts/barlowcond-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --void:#050a1a;
  --panel:#0b1430;
  --panel-hi:#132048;
  --line:#22305e;
  --mag:#ff2d78;
  --cyan:#12e0ff;
  --gold:#ffc21a;
  --green:#25e07a;
  --red:#ff4d4d;
  --txt:#eaf0ff;
  --dim:#8394c4;
  --dimmer:#5a6899;

  --disp:'Archivo Black',Impact,'Arial Black',sans-serif;
  --ui:'Barlow SC','Barlow Semi Condensed',system-ui,sans-serif;
  --num:'Barlow Cond','Barlow Condensed',var(--ui);

  --gut:clamp(10px,2.2vw,20px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--txt);
  font-family:var(--ui);font-size:clamp(15px,.95rem+.2vw,17px);line-height:1.4;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 50% at 50% -8%,rgba(255,45,120,.16),transparent 70%),
    radial-gradient(60% 45% at 100% 100%,rgba(18,224,255,.10),transparent 70%)
}
button{font:inherit}

/* ── gate ─────────────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--gut);background:var(--void)}
.gate[hidden]{display:none}
.gate__panel{
  width:min(460px,100%);text-align:center;background:var(--panel);
  border:1px solid var(--line);border-top:4px solid var(--mag);
  padding:clamp(26px,6vw,44px);position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 30px 70px rgba(0,0,0,.6)
}
.gate__eye{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.28em;
  font-size:.66rem;color:var(--cyan);margin:0 0 1.1em}
.gate__h,.logo{font-family:var(--disp);letter-spacing:-.02em;line-height:.9}
.gate__h{font-size:clamp(2.1rem,9vw,3rem);margin:0}
.gate__h span{color:var(--mag)}
.gate__h b{color:var(--gold);font-weight:400;margin-left:.1em}
.gate__sub{color:var(--dim);margin:.9em 0 1.9em;font-size:1rem}
.gate__form{display:grid;gap:.5rem;text-align:left}
.gate__lab{font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--dim)}
/* The input is a cell like every other cell on this board: one weight of rule
   all the way round, and the colour arrives on focus rather than sitting as a
   permanent accent edge. */
.gate__in{
  font-family:var(--num);font-size:1.5rem;letter-spacing:.06em;color:var(--txt);
  background:var(--void);border:1px solid var(--line);
  padding:.45em .6em;width:100%;outline:0;border-radius:0;transition:border-color .14s,box-shadow .14s
}
.gate__in:focus{border-color:var(--cyan);box-shadow:0 0 18px rgba(18,224,255,.26)}
.gate__err{color:var(--red);font-size:.9rem;margin:.1em 0 0;font-weight:700}
.gate__foot{margin:2em 0 0;color:var(--dimmer);font-size:.76rem}

.btn{
  border:0;cursor:pointer;font-family:var(--ui);font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;font-size:.82rem;padding:.9em 1em;
  border-radius:0;color:var(--void);transition:filter .14s,transform .08s
}
.btn:active{transform:translateY(1px)}
.btn--go{background:var(--mag);color:#fff;margin-top:.5rem}
.btn--go:hover{filter:brightness(1.14)}

/* ── top bar ──────────────────────────────────────────────────────────── */
.app{position:relative;z-index:1}
.app[hidden]{display:none}
.top{
  display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap;
  padding:.7em var(--gut);background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border-bottom:2px solid var(--mag)
}
.logo{font-size:clamp(1.15rem,3.6vw,1.5rem)}
.logo span{color:var(--mag)}
.logo b{color:var(--gold);font-weight:400;margin-left:.08em}
.tag{display:block;font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.16em;margin-top:.2em}
.top__meta{display:flex;align-items:center;gap:1em;flex-wrap:wrap;font-size:.8rem;color:var(--dim);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.top__meta b{font-family:var(--num);font-size:1.25rem;color:var(--txt);letter-spacing:.02em;margin-left:.3em}
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.3em .7em;font-size:.68rem;
  letter-spacing:.16em;background:var(--red);color:#fff}
.chip--live i{width:.45em;height:.45em;border-radius:50%;background:#fff;animation:blip 1.4s steps(1,end) infinite}
@keyframes blip{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* ── result strip ─────────────────────────────────────────────────────── */
.strip{display:flex;align-items:center;gap:1em;flex-wrap:wrap;
  padding:.6em var(--gut);background:#00040f;border-bottom:1px solid var(--line)}
.strip__lab,.strip__note{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--dimmer);font-weight:700}
.strip__note{color:var(--red)}
.strip__balls{display:flex;gap:.4em;flex-wrap:wrap}
.ball{
  width:2em;height:2em;border-radius:50%;display:grid;place-items:center;
  font-family:var(--num);font-size:1.05rem;background:#1a1030;color:var(--red);
  border:2px solid var(--red);box-shadow:0 0 12px rgba(255,77,77,.28)
}

/* ── ticker ───────────────────────────────────────────────────────────── */
.ticker{overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line)}
.ticker__track{display:flex;gap:3em;white-space:nowrap;padding:.5em 0;animation:roll 58s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{font-size:.86rem;color:var(--dim)}
.tk b{color:var(--txt);font-weight:500}
.tk time{font-family:var(--num);color:var(--cyan);margin-right:.5em;font-size:1rem}
.tk--hot b{color:var(--gold)}
.tk--out b{color:var(--red)}

/* ── layout ───────────────────────────────────────────────────────────── */
/* Every track is minmax(0,…), never a bare 1fr. A bare 1fr carries an `auto`
   minimum, which lets a grid item's min-content push the column wider than its
   container — that blew the board out to 667px inside a 360px viewport and
   pushed the price column off-screen. min-width:0 on the items is the other
   half of the same fix. */
.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gut);padding:var(--gut);
  align-items:start;max-width:1500px;margin:0 auto}
@media(min-width:760px){.wrap{grid-template-columns:170px minmax(0,1fr)}}
@media(min-width:1120px){.wrap{grid-template-columns:180px minmax(0,1fr) 320px}}
.wrap > *{min-width:0}

/* ── rail ─────────────────────────────────────────────────────────────── */
.rail ul{list-style:none;margin:0;padding:0;display:flex;gap:.35em;overflow-x:auto;
  scrollbar-width:none;padding-bottom:.3em}
.rail ul::-webkit-scrollbar{display:none}
@media(min-width:760px){.rail ul{display:block;overflow:visible}.rail{position:sticky;top:var(--gut)}}
.rail button{
  width:100%;text-align:left;background:var(--panel);color:var(--dim);border:1px solid var(--line);
  padding:.7em .8em;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;
  cursor:pointer;white-space:nowrap;margin-bottom:.3em;border-left:3px solid transparent;
  min-height:44px   /* touch target floor — tablets use this rail too */
}
.rail button:hover{color:var(--txt);background:var(--panel-hi)}
.rail button[aria-current="true"]{color:var(--void);background:var(--cyan);border-color:var(--cyan);font-weight:700}
.rail .n{float:right;opacity:.6;font-family:var(--num);font-size:.95rem}

/* ── board ────────────────────────────────────────────────────────────── */
.grp{margin-bottom:1.6em}
.grp__h{
  display:flex;align-items:baseline;gap:.7em;margin:0 0 .55em;
  font-family:var(--disp);font-size:clamp(1rem,3vw,1.22rem);text-transform:uppercase;letter-spacing:.01em
}
.grp__h em{font-style:normal;color:var(--mag)}
.grp__sub{color:var(--dim);font-size:.82rem;margin:-.35em 0 .8em;max-width:70ch}

.cells{display:grid;gap:.42em;grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1400px){.cells{grid-template-columns:repeat(3,minmax(0,1fr))}}

.cell{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8em;min-width:0;
  background:var(--panel);border:1px solid var(--line);
  border-top:1px solid rgba(255,255,255,.07);
  padding:.68em .75em;cursor:pointer;text-align:left;color:var(--txt);
  transition:background .13s,border-color .13s,transform .08s
}
.cell:hover{background:var(--panel-hi);border-color:var(--cyan)}
.cell:active{transform:translateY(1px)}
.cell > span:first-child{min-width:0}
.cell__n{display:block;font-size:.96rem;line-height:1.28;overflow-wrap:anywhere}
.cell__note{display:block;color:var(--dim);font-size:.78rem;margin-top:.2em;font-style:italic}
.cell__o{
  font-family:var(--num);font-size:1.45rem;color:var(--gold);
  min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums
}
.cell[aria-pressed="true"]{
  background:linear-gradient(180deg,#2a0f3f,#1a0a2e);border-color:var(--mag);
  box-shadow:0 0 0 1px var(--mag),0 0 20px rgba(255,45,120,.32)
}
.cell[aria-pressed="true"] .cell__o{color:var(--mag)}
.cell[disabled]{opacity:.42;cursor:not-allowed}
.cell[disabled]:hover{background:var(--panel);border-color:var(--line)}
.sus{
  display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);border:1px solid currentColor;padding:.08em .35em;margin-left:.5em
}

/* ── slip ─────────────────────────────────────────────────────────────── */
.slip{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--gold)}
@media(min-width:1120px){.slip{position:sticky;top:var(--gut)}}
.slip__hd{display:flex;justify-content:space-between;align-items:baseline;
  padding:.8em .9em;border-bottom:1px solid var(--line)}
.slip__hd h2{font-family:var(--disp);font-size:1.05rem;margin:0;text-transform:uppercase}
.slip__count{font-family:var(--num);font-size:1.1rem;color:var(--cyan)}
.slip__legs{list-style:none;margin:0;padding:.6em .9em;display:grid;gap:.55em;
  max-height:min(42vh,340px);overflow-y:auto}
.slip__empty{color:var(--dimmer);font-size:.88rem;line-height:1.5}
.leg{display:grid;grid-template-columns:1fr auto auto;gap:.55em;align-items:baseline;
  padding-bottom:.55em;border-bottom:1px dashed var(--line)}
.leg:last-child{border-bottom:0;padding-bottom:0}
.leg__n{font-size:.86rem;line-height:1.3}
.leg__o{font-family:var(--num);font-size:1.15rem;color:var(--gold)}
.leg__x{background:0;border:0;color:var(--dimmer);cursor:pointer;font-size:1.1em;line-height:1;padding:0 .1em}
.leg__x:hover{color:var(--red)}
.slip__calc{padding:.8em .9em 1em;border-top:1px solid var(--line);background:#00040f}
.slip__row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4em;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:700}
.slip__row b{font-family:var(--num);font-size:1.3rem;color:var(--txt);letter-spacing:0}
.slip__odds{color:var(--gold)!important;font-size:1.7rem!important}
.slip__row--big b{font-size:1.6rem;color:var(--green)}
.btn--place{background:var(--gold);width:100%;margin-top:.5em}
.btn--place:hover{filter:brightness(1.1)}
.btn--clear{background:transparent;color:var(--dim);border:1px solid var(--line);width:100%;margin-top:.4em}
.btn--clear:hover{color:var(--txt);border-color:var(--dim)}
.slip__note{min-height:2.4em;margin:.7em 0 0;color:var(--mag);font-size:.88rem;font-weight:500;line-height:1.4}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{padding:2.2em var(--gut) 3em;border-top:1px solid var(--line);background:#00040f;
  color:var(--dimmer);font-size:.8rem;margin-top:1.5em}
.foot p{margin:0 0 .5em;max-width:78ch}
.foot__lead{color:var(--dim);font-weight:700}
.foot__fozz{color:var(--mag);font-weight:700}
.foot__help{margin-top:1em}
.foot a{color:var(--cyan)}

.slip__close{display:none}

/* ─────────────────────────────────────────────────────────────────────────
   PHONE / TABLET  (below the three-column breakpoint)
   The slip stops being a column and becomes a docked bar that expands into a
   sheet. Stranding the multi below the footer on a phone would mean never
   seeing your own ticket while you scroll the board.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:1119px){

  .slip{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    border:0;border-top:3px solid var(--gold);
    max-height:min(82vh,620px);display:flex;flex-direction:column;
    transform:translateY(101%);transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:0 -18px 44px rgba(0,0,0,.62);
    padding-bottom:env(safe-area-inset-bottom,0)
  }
  .slip.is-open{transform:translateY(0)}
  .slip__hd{position:relative;padding-right:2.8em;flex:0 0 auto}
  .slip__close{
    display:block;position:absolute;right:.5em;top:50%;translate:0 -50%;
    background:0;border:0;color:var(--dim);font-size:1.7rem;line-height:1;
    padding:.1em .35em;cursor:pointer
  }
  .slip__close:hover{color:var(--txt)}
  .slip__legs{flex:1 1 auto;max-height:none;min-height:0}
  .slip__calc{flex:0 0 auto}

  .scrim{position:fixed;inset:0;z-index:69;background:rgba(2,4,12,.72);border:0}
  .scrim[hidden]{display:none}

  .slipbar{
    position:fixed;left:0;right:0;bottom:0;z-index:68;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9em;
    width:100%;padding:.85em 1em calc(.85em + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,var(--panel-hi),var(--panel));
    border:0;border-top:3px solid var(--gold);cursor:pointer;text-align:left;
    color:var(--txt);box-shadow:0 -12px 30px rgba(0,0,0,.5)
  }
  .slipbar[hidden]{display:none}
  .slipbar__l{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:700}
  .slipbar__l b{font-family:var(--num);font-size:1.35rem;color:var(--cyan);margin-right:.25em}
  .slipbar__m{font-family:var(--num);font-size:1.55rem;color:var(--gold);text-align:right}
  .slipbar__cta{
    background:var(--gold);color:var(--void);font-weight:700;font-size:.74rem;
    text-transform:uppercase;letter-spacing:.12em;padding:.7em .9em;white-space:nowrap
  }
  /* keep the footer clear of the docked bar */
  .app.has-legs .foot{padding-bottom:6.5em}
}

/* ─────────────────────────────────────────────────────────────────────────
   PHONE  (single column board, scrolling market rail)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:759px){

  .top{padding:.6em var(--gut);gap:.5em}
  .top__brand{min-width:0}
  .logo{font-size:1.22rem}
  .tag{font-size:.6rem;letter-spacing:.13em}
  .top__meta{gap:.7em;font-size:.66rem;letter-spacing:.08em;width:100%;
    justify-content:space-between;border-top:1px solid var(--line);padding-top:.5em}
  .top__meta b{font-size:1.05rem;margin-left:.2em}
  .chip{padding:.26em .55em;font-size:.6rem}

  /* result strip scrolls rather than wrapping into a second row */
  .strip{gap:.6em;padding:.5em var(--gut);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip__lab{flex:0 0 auto}
  .strip__balls{flex-wrap:nowrap;flex:0 0 auto}
  .ball{flex:0 0 auto}
  .ball{width:1.75em;height:1.75em;font-size:.92rem;border-width:1.5px}
  .strip__note{flex:0 0 auto;white-space:nowrap}

  .tk{font-size:.8rem}

  /* rail becomes a snapping chip row */
  .rail{margin:0 calc(var(--gut)*-1);padding:0 var(--gut)}
  .rail ul{gap:.4em;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .rail li{scroll-snap-align:start}
  .rail button{
    width:auto;margin-bottom:0;padding:.6em .85em;font-size:.7rem;
    border-left:1px solid var(--line);min-height:44px
  }
  .rail button[aria-current="true"]{border-color:var(--cyan)}
  .rail .n{float:none;margin-left:.5em}

  .grp{margin-bottom:1.5em}
  .grp__h{flex-wrap:wrap;gap:.4em;font-size:1.02rem}
  .grp__sub{font-size:.8rem}

  /* one column, taller touch targets, price never wraps under the name */
  .cells{gap:.4em}
  .cell{padding:.8em .8em;min-height:56px;gap:.7em}
  .cell__n{font-size:.94rem}
  .cell__note{font-size:.76rem}
  .cell__o{font-size:1.35rem;min-width:2.4em}

  .foot{font-size:.76rem;padding:1.8em var(--gut) 2.4em}
}

/* very narrow — keep the price on the same line as the market name */
@media (max-width:359px){
  :root{--gut:9px}
  .cell{padding:.7em .6em;gap:.5em}
  .cell__n{font-size:.88rem}
  .cell__o{font-size:1.2rem;min-width:2.2em}
  .slipbar{gap:.55em;padding-left:.7em;padding-right:.7em}
  .slipbar__cta{padding:.6em .6em;font-size:.66rem}
  .logo{font-size:1.08rem}
}

@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}.chip--live i{animation:none}
  .slip{transition:none}
  *{transition:none!important}
}