/* Keno: a 5x8 board of numbered tiles; picks glow blue, drawn numbers light gold, a hit is both (green). */
.play-keno::before { background: linear-gradient(135deg, rgba(56, 189, 248, 0.7), rgba(56, 189, 248, 0) 35%, rgba(255, 201, 64, 0) 65%, rgba(255, 201, 64, 0.5)); }
.keno-screen { align-content: start; gap: 12px; background: radial-gradient(120% 90% at 50% 0%, rgba(56, 189, 248, 0.16), transparent 60%), linear-gradient(180deg, #0c1228, #0a0819); }
.kgrid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(4px, 0.8vw, 8px); width: 100%; max-width: 520px; margin: 0 auto; }
.ktile {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: clamp(8px, 1.2vw, 12px); cursor: pointer;
  font: 800 clamp(12px, 1.5vw, 17px)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--mute);
  background: linear-gradient(180deg, #232a52, #171c3d); box-shadow: 0 3px 0 #10132b, 0 0 0 1px rgba(190, 180, 255, 0.14) inset;
  transition: transform 120ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease);
}
.ktile:not(:disabled):hover { transform: translateY(-2px); color: var(--ink); box-shadow: 0 5px 0 #10132b, 0 0 0 1px rgba(56, 189, 248, 0.6) inset, 0 0 16px -6px rgba(56, 189, 248, 0.8); }
.ktile:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #10132b, 0 0 0 1px rgba(56, 189, 248, 0.5) inset; }
.ktile:disabled { cursor: default; }
.ktile.is-pick { color: #fff; background: linear-gradient(180deg, #4cc7ff, #1d8fd6); box-shadow: 0 3px 0 #0d5a8a, 0 0 18px -4px rgba(56, 189, 248, 0.8); }
.ktile.is-drawn { color: #241500; background: linear-gradient(180deg, #ffe08a, #f0a500); box-shadow: 0 3px 0 #9a6200, 0 0 16px -4px rgba(255, 201, 64, 0.7); animation: k-pop 360ms var(--ease); }
.ktile.is-hit { color: #032514; background: radial-gradient(circle at 50% 35%, #8dffd0, #1fe08a 60%, #0b9d5e); box-shadow: 0 3px 0 #08301f, 0 0 24px -4px rgba(31, 224, 138, 0.9); animation: k-pop 420ms var(--ease); }
.ktile.is-miss { opacity: 0.55; }
.ktile.is-dim:not(.is-pick):not(.is-drawn):not(.is-hit) { opacity: 0.45; }
@keyframes k-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.1); } 100% { transform: none; } }
.k-table { display: flex; flex-wrap: wrap; gap: 6px; }
.kt {
  display: grid; gap: 1px; min-width: 56px; padding: 5px 9px; border-radius: 10px; text-align: center;
  background: var(--well); box-shadow: 0 0 0 1px var(--line-2) inset; font-size: 0.72rem; font-weight: 800; color: var(--mute);
}
.kt b { font: 800 0.85rem/1.2 var(--display); color: #d9d3ff; font-variant-numeric: tabular-nums; }
.kt.is-zero b { color: var(--dim); }
.kt.is-hit { background: rgba(31, 224, 138, 0.12); box-shadow: 0 0 0 2px var(--win) inset, 0 0 14px -4px var(--win); }
.kt.is-hit b { color: var(--win); }
.kt small { font-weight: 700; color: var(--dim); }
.play-keno .btn-line { min-height: 42px; }
.play-keno .action-btn { color: #04283a; background: linear-gradient(180deg, #8fdcff, #1d8fd6); box-shadow: 0 6px 0 #0d5a8a, 0 14px 30px -8px rgba(56, 189, 248, 0.75); }
.play-keno .action-btn:active:not([aria-disabled="true"]) { box-shadow: 0 2px 0 #0d5a8a, 0 6px 16px -8px rgba(56, 189, 248, 0.75); }
@media (max-width: 900px) { .play-keno .btn-line { order: 0; } }
@media (max-width: 560px) { .kgrid { gap: 4px; } }
/* polish: phones get a 5-wide board so every tile is a 44 px touch target (1-5, 6-10, ... reads naturally) */
@media (max-width: 480px) { .kgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 300px; } .ktile { font-size: 15px; } }