/* Keno: board and control bar styles, scoped to .kb*. Linked from quick.html after quick.css.
   The board is a size container (.q-board): the 40 numbers keep square tiles sized from it (8x5 on wide boards, 5x8 on
   upright ones), with the ball tray above and the pay column beside them. Tiles stay 44px or larger at every size. */

/* Control bar: risk, Pick for me, Clear */
.kb-opts{display:flex;gap:4px;min-width:0;align-items:stretch}
.kb-risk{flex:1 1 auto;min-width:0}
.q-options .kb-risk{grid-template-columns:repeat(3,minmax(0,1fr))}
.kb-tool{flex:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:0;border-radius:10px;background:var(--felt-dark);color:var(--cream);font:600 14px/1 var(--ui)}
.kb-tool:hover:not(:disabled){background:#0b1f16}
.kb-tool svg{width:20px;height:20px;flex:none}
.kb-tool[data-quiet]{color:var(--cream-2);opacity:.6}
.kb-tool:disabled{opacity:.45}
@media (max-width:759px),(orientation:landscape) and (max-height:500px){.kb-tool span{display:none}.kb-tool{padding:0}}
@media (min-width:760px) and (min-height:501px){.q-options .kb-risk{grid-template-columns:repeat(3,minmax(104px,auto))}}

/* Board layout: tray on top, numbers and the pay column below */
.kb{--gap:5px;--tg:4px;--cols:8;--rows:5;--payw:clamp(84px,17cqw,190px);--trayh:clamp(30px,9cqh,62px);
  --t:min(calc((100cqh - var(--trayh) - var(--gap) - (var(--rows) - 1)*var(--tg))/var(--rows)),calc((100cqw - var(--payw) - var(--gap) - (var(--cols) - 1)*var(--tg))/var(--cols)));
  height:100%;display:grid;grid-template-columns:calc(var(--cols)*var(--t) + (var(--cols) - 1)*var(--tg)) var(--payw);grid-template-rows:var(--trayh) auto;
  grid-template-areas:"tray tray" "grid pay";column-gap:var(--gap);row-gap:var(--gap);justify-content:center;align-content:center}
@container (orientation:portrait){.kb{--cols:5;--rows:8;--payw:clamp(80px,24cqw,150px)}}
/* Short upright boards (a 360x640 phone): the tray gives its row to the numbers; the numbers light in draw order instead. */
@container (orientation:portrait) and (max-height:440px){.kb{--trayh:0px;row-gap:0}.kb-tray{display:none}}
@container (min-width:900px) and (min-height:520px){.kb{--gap:12px;--tg:6px;--payw:clamp(150px,17cqw,200px)}}

/* The tray: ten slots, filled left to right as the balls come out */
.kb-tray{grid-area:tray;display:grid;grid-template-columns:repeat(10,var(--trayh));gap:clamp(4px,1cqw,10px);justify-content:center;align-items:center;min-width:0}
.kb-slot{position:relative;width:var(--trayh);height:var(--trayh);border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center}
.kb-slot b{font:600 calc(var(--trayh)*.42)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.kb-slot:not([data-kind=empty]){background:radial-gradient(circle at 35% 30%,#fffaf0,var(--cream) 45%,#d9cfb8);color:var(--ink);box-shadow:0 3px 8px #0006}
.kb-slot[data-kind=hit]{box-shadow:0 0 0 3px var(--red),0 0 18px #e3b04b88,0 3px 8px #0006}

/* The numbers */
.kb-grid{grid-area:grid;display:grid;grid-template-columns:repeat(var(--cols),var(--t));grid-auto-rows:var(--t);gap:var(--tg);align-content:center;justify-content:center;min-height:0}
.kb-n{position:relative;width:100%;height:100%;padding:0;border:0;border-radius:calc(var(--t)*.18);background:#10291e99;display:grid;place-items:center;color:var(--cream-2);transition:background .15s,transform .15s var(--ease)}
.kb-n:hover:not([aria-disabled=true]){background:var(--felt-up);color:var(--cream)}
.kb-n[aria-disabled=true]{cursor:default}
.kb-disc{position:relative;display:grid;place-items:center;width:calc(var(--t)*.82);height:calc(var(--t)*.82);border-radius:50%;transition:transform .2s var(--pop)}
.kb-disc b{position:relative;z-index:1;font:600 calc(var(--t)*.36)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
/* Marked: a red chip with a striped cream edge */
.kb-n[data-kind=pick] .kb-disc,.kb-n[data-kind=hit] .kb-disc{background:radial-gradient(circle,var(--red) 0 60%,transparent 61%),repeating-conic-gradient(from 8deg,var(--cream) 0 14deg,var(--red) 14deg 45deg);color:var(--cream);box-shadow:0 2px 6px #0007}
.kb-n[data-kind=pick] .kb-disc::before,.kb-n[data-kind=hit] .kb-disc::before{content:'';position:absolute;inset:22%;border-radius:50%;box-shadow:0 0 0 1.5px #f2ead999}
.kb-n[data-kind=pick]:hover:not([aria-disabled=true]) .kb-disc{transform:scale(1.06)}
/* Drawn and not marked: a cream keno ball */
.kb-n[data-kind=ball] .kb-disc{background:radial-gradient(circle at 35% 30%,#fffaf0,var(--cream) 45%,#d4c9b0);color:var(--ink);box-shadow:0 3px 8px #0006}
/* A hit: the ball lands on the chip; gold glow under it */
.kb-n[data-kind=hit]{background:#e3b04b2e;box-shadow:inset 0 0 0 2px var(--bz-gold,#e3b04b)}
.kb-n[data-kind=hit] .kb-disc{background:radial-gradient(circle at 35% 30%,#fffaf0,var(--cream) 42%,#e6d7b4 58%,transparent 60%),repeating-conic-gradient(from 8deg,var(--cream) 0 14deg,var(--red) 14deg 45deg);color:var(--ink);box-shadow:0 0 0 2px var(--bz-gold,#e3b04b),0 0 22px #e3b04b99}
.kb-n[data-kind=hit] .kb-disc::before{inset:9%;box-shadow:none}
/* After a draw, marks that missed fade back; a stale draw (other marks or risk) fades all of it */
.kb[data-state=done] .kb-n[data-kind=pick] .kb-disc{opacity:.55}
.kb[data-state=stale] .kb-n:is([data-kind=ball],[data-kind=hit]) .kb-disc{opacity:.45;box-shadow:none}
.kb[data-state=stale] .kb-n[data-kind=hit]{background:#10291e99;box-shadow:none}
.kb[data-state=stale] .kb-slot{opacity:.45}
/* A ball landing: it drops in, rings once */
.kb-land .kb-disc,.kb-slot.kb-land{animation:kb-drop calc(.32s*var(--pace,1)) var(--pop) both}
.kb-n.kb-land::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--cream);animation:kb-ring calc(.45s*var(--pace,1)) var(--ease) both;pointer-events:none}
.kb-n[data-kind=hit].kb-land::after{box-shadow:0 0 0 3px var(--bz-gold,#e3b04b)}
@keyframes kb-drop{0%{transform:translateY(-38%) scale(.4);opacity:0}60%{transform:translateY(4%) scale(1.08);opacity:1}100%{transform:none}}
@keyframes kb-ring{0%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.18)}}

/* The pay column: the table for the marks and risk; the row reached lights as hits come in */
.kb-pay{grid-area:pay;min-height:0;display:flex;flex-direction:column;gap:6px;padding:8px 8px;border-radius:14px;background:#10291e80}
.kb-pay-head{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.kb-pay-title{font:400 12px/1.2 var(--ui);color:var(--cream-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-pay-count{font:600 18px/1.1 var(--serif);color:var(--cream);min-height:1.1em}
.kb-pay-rows{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;display:grid;grid-template-rows:repeat(var(--rows,6),minmax(0,30px));align-content:start;gap:2px}
.kb-pay-rows li{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:0;padding:0 8px;border-radius:8px;font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--cream);transition:background .2s,color .2s}
.kb-pay-rows li span{color:var(--cream-2);font:400 12px/1 var(--mono)}
.kb-pay-rows li i{font:400 12px/1 var(--ui);font-style:normal}
.kb-pay-rows li[data-part] b{color:var(--cream-2);font-weight:400}
.kb-pay-rows li[data-on]{background:var(--cream);color:var(--felt-deep);animation:q-pop calc(.26s*var(--pace,1)) var(--ease)}
.kb-pay-rows li[data-on] span,.kb-pay-rows li[data-on] b{color:var(--felt-deep)}
.kb-fair{flex:none;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:0;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--cream);font:600 13px/1 var(--ui)}
.kb-fair:hover{background:#f2ead914}
.kb-fair svg{width:20px;height:20px;flex:none}
@container (max-width:520px){.kb-pay{padding:6px 5px}.kb-pay-rows li{padding:0 5px;font-size:12.5px}.kb-pay-rows li i{display:none}.kb-pay-rows li span{font-size:11px}.kb-pay-count{font-size:16px}.kb-pay-title{font-size:11px;white-space:normal}.kb-fair span{display:none}}
@container (max-height:420px){.kb-pay-rows{grid-template-rows:repeat(var(--rows,6),minmax(0,24px))}.kb-pay-count{font-size:15px}}
@container (min-width:900px) and (min-height:520px){.kb-pay-rows li{font-size:16px;padding:0 12px}.kb-pay-rows li span{font-size:13px}.kb-pay-count{font-size:22px}.kb-pay-title{font-size:13.5px}}

/* The rules' wide table scrolls inside the menu, never the window */
.kb-scroll{overflow-x:auto}