/* Keno's own look, on the game template (static/game.css styles the shell and the .gm-cell primitive): the forty
   numbers as cut cells (picked in gold, drawn as ivory balls, a hit ringed mint), the paytable row in the multiplier
   ladder (deep navy for nothing, navy steps, ivory, gold on top), and the random / clear cells beside it. */

.kn-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; }
.kn-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; width: min(100%, 740px); touch-action: none; user-select: none; -webkit-user-select: none; }
.kn-c { aspect-ratio: 1; }
.kn-c > i b { font: 800 clamp(18px, 2.2vw, 26px)/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-2); transition: color var(--t-hover); }
.kn-c:hover > i b { color: var(--ink); }
.kn-c:not(.rev):hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.kn-c:not(.rev):active { transform: scale(.95); }
.kn-c.pick { --lnc: var(--gold-line); }
.kn-c.pick > i b { color: var(--gold); }
.kn-c.wave { --lnc: var(--gold-line); }
.kn-stage.busy .kn-c, .gm.autoplaying .kn-c { cursor: default; }
.kn-stage.busy .kn-c:not(.rev):hover, .gm.autoplaying .kn-c:not(.rev):hover { --fill: var(--cell); --lnc: transparent; transform: none; }
.kn-stage.busy .kn-c.pick:not(.rev):hover, .gm.autoplaying .kn-c.pick:not(.rev):hover { --lnc: var(--gold-line); }
.kn-c.kn-dr { --fill: var(--well); --lnc: transparent; cursor: default; }
.kn-c.kn-dr.is-win { --lnc: var(--win); }
.kn-c.kn-out { --fill: var(--well); --lnc: rgb(216 165 72 / .45); }
.kn-c.kn-out > i b { color: var(--ink-3); }
.kn-c::before, .kn-c::after { transition: background-color .2s var(--e-out); }
.kn-ball { width: 74%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #0c152b;
  font: 800 clamp(17px, 2vw, 24px)/1 var(--f-num); font-variant-numeric: tabular-nums;
  background: radial-gradient(circle at 34% 30%, #fffaf0, var(--ivory) 58%, #b3a588); box-shadow: 0 3px 6px rgb(0 0 0 / .45); }
.kn-ball.miss { background: radial-gradient(circle at 34% 30%, rgb(255 250 240 / .55), rgb(243 234 214 / .55) 58%, rgb(179 165 136 / .55)); box-shadow: none; color: var(--ink); }
.kn-c.is-win .kn-ball { box-shadow: inset 0 0 0 2px var(--win), 0 3px 6px rgb(0 0 0 / .45); }
.kn-c.nudge { animation: kn-no .26s; }
@keyframes kn-no { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* the row under the board: random and clear, then the paytable */
.kn-row { display: flex; gap: 6px; width: min(100%, 740px); height: 52px; flex: none; }
.kn-tools { display: flex; gap: 6px; flex: none; }
.kn-t { width: 42px; height: 100%; --lnc: rgb(216 165 72 / .5); color: var(--gold); }
.kn-t:hover { --lnc: var(--gold-line); --fill: var(--cell-hi); }
.kn-t:active { transform: scale(.95); }
.kn-t > i svg { width: 20px; height: 20px; }
.kn-stage.busy .kn-t, .gm.autoplaying .kn-t { opacity: .4; cursor: default; pointer-events: none; }
.kn-pay { flex: 1; min-width: 0; display: flex; gap: 6px; }
.kn-pay.kn-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
.kn-p { --k: 8px; --fill: #1a2850; --lnc: var(--fill); position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; color: var(--ink); background: var(--lnc);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: background-color .15s, transform .16s var(--e-settle); }
.kn-p::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--k) - .6px) 0, 100% 0, 100% calc(100% - var(--k) + .6px), calc(100% - var(--k) + .6px) 100%, 0 100%, 0 calc(var(--k) - .6px)); }
.kn-p b { font: 800 17px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kn-p small { font: 600 13px/1 var(--f-ui); color: var(--ink-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.kn-p small::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ivory); }
.kn-p.r0 { --fill: #0b1430; } .kn-p.r0 b { color: var(--ink-3); }
.kn-p.r1 { --fill: #1a2850; }
.kn-p.r2 { --fill: #2c4180; }
.kn-p.r3 { --fill: #f3ead6; color: #0c152b; } .kn-p.r3 small { color: #3a4566; } .kn-p.r3 small::after { background: #0c152b; }
.kn-p.r4 { --fill: #f2b94a; color: var(--on-gold); } .kn-p.r4 small { color: #5a3d0a; } .kn-p.r4 small::after { background: var(--on-gold); }
.kn-p.lit { --lnc: var(--gold-line); }
.kn-p.r3.lit, .kn-p.r4.lit { --lnc: #b8862f; }
.kn-p.tease { transform: translateY(-3px); animation: kn-pulse .32s ease-in-out infinite alternate; }
@keyframes kn-pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.kn-p.fin.win { --lnc: var(--win); } .kn-p.fin.back { --lnc: var(--back); } .kn-p.fin.loss { --lnc: var(--loss); }
.kn-p.fin.stamp { --lnc: var(--gold); }
.kn-p.empty { --fill: var(--well); --lnc: var(--well); color: var(--ink-2); font: 500 13px var(--f-ui); flex: 1 1 auto; }

@media (max-width: 899px) {
  .gm[data-game="keno"] .gm-play { min-height: 0; }
  .kn-stage { gap: 8px; padding: 10px; }
  .kn-board { grid-template-columns: repeat(5, 56px); gap: 6px; width: auto; }
  .kn-c > i b { font-size: 22px; }
  .kn-ball { font-size: 21px; }
  .kn-row { width: 304px; height: 50px; }
  .kn-pay { overflow-x: auto; scrollbar-width: none; gap: 5px; }
  .kn-pay::-webkit-scrollbar { display: none; }
  .kn-p { flex: 0 0 58px; }
  .kn-p b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .kn-p.tease { animation: none; } }