/* Keno game. Everything is scoped to .keno / .keno-* so it can't affect the rest of the site. */

.keno {
  --k-bg: #14182e;
  --k-panel: #1f2547;
  --k-cell: #2d3561;
  --k-line: #3e4780;
  --k-pick: #f5a623;
  --k-drawn: #4a90e2;
  --k-hit: #2ecc71;
  --k-be: #ff3b3b;
  --k-text: #ecf0ff;
  --k-dark: #14182e;
  --k-accent: #ffd166;
  --k-warn: #ff8080;

  margin: 1rem 0 2rem; padding: 1rem;
  background: var(--k-bg); color: var(--k-text);
  border-radius: var(--radius, 8px); box-shadow: var(--shadow);
  color-scheme: dark;
}
.keno p { margin: 0; }
.keno :focus-visible { outline: 3px solid var(--k-accent); outline-offset: 2px; }

.keno-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: .5rem .75rem; margin-bottom: 1rem; background: var(--k-panel); border-radius: 6px;
  font-weight: 600;
}
.keno-jackpot { color: var(--k-accent); }

.keno-main { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) {
  .keno-main { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
}

/* ---------- Board ---------- */
.keno-drawinfo { font-weight: 600; text-align: center; margin-bottom: .5rem !important; min-height: 1.6em; }
.keno-board {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(.15rem, .8vw, .4rem);
  padding: clamp(.3rem, 1.2vw, .6rem); background: var(--k-panel); border-radius: 6px;
  max-width: 40rem; margin: 0 auto;
}
.keno-ball {
  aspect-ratio: 1; width: 100%; padding: 0; margin: 0;
  display: grid; place-items: center;
  font: 700 clamp(.7rem, 2.6vw, 1.05rem)/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: var(--k-text); background: var(--k-cell);
  border: 2px solid var(--k-line); border-radius: 50%; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.keno-ball:hover { border-color: var(--k-accent); }
.keno-ball.is-pick { background: var(--k-pick); color: var(--k-dark); }
.keno-ball.is-drawn { background: var(--k-drawn); }
.keno-ball.is-hit { background: var(--k-hit); color: var(--k-dark); }
.keno-ball.is-be { border: 4px solid var(--k-be); }

.keno-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .875rem; }
.keno-legend li { display: flex; align-items: center; gap: .35rem; }
.keno-swatch { width: .9rem; height: .9rem; border-radius: 50%; display: inline-block; }
.keno-swatch.is-pick { background: var(--k-pick); }
.keno-swatch.is-drawn { background: var(--k-drawn); }
.keno-swatch.is-hit { background: var(--k-hit); }
.keno-swatch.is-be { border: 3px solid var(--k-be); }

/* ---------- Panel ---------- */
.keno-panel { display: grid; gap: .6rem; padding: .9rem; background: var(--k-panel); border-radius: 6px; }
.keno-balance { font-size: 1.35rem; font-weight: 700; color: var(--k-hit); }
.keno-uncashed { color: var(--k-accent); font-weight: 600; font-size: .9375rem; }
.keno-uncashed:empty { display: none; }

.keno-group { border: 0; margin: 0; padding: 0; display: grid; gap: .3rem; }
.keno-group legend { padding: 0; margin-bottom: .3rem; color: var(--k-accent); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.keno-seg { display: flex; flex-wrap: wrap; gap: .25rem; }
.keno-seg label { position: relative; }
.keno-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.keno-seg span {
  display: grid; place-items: center; min-width: 2.6rem; min-height: 2.25rem; padding: 0 .35rem;
  background: var(--k-cell); border: 1px solid var(--k-line); border-radius: 5px; font-weight: 700; font-size: .9375rem;
}
.keno-seg input:checked + span { background: var(--k-pick); color: var(--k-dark); border-color: var(--k-pick); }
.keno-seg input:focus-visible + span { outline: 3px solid var(--k-accent); outline-offset: 2px; }

.keno-check { display: flex; align-items: center; gap: .5rem; min-height: 2rem; cursor: pointer; font-size: .9375rem; }
.keno-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--k-pick); }
.keno-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; }
.keno select {
  min-height: 2.25rem; padding: 0 .4rem; font: inherit;
  color: var(--k-text); background: var(--k-cell); border: 1px solid var(--k-line); border-radius: 5px;
}
.keno-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.keno-row--fill > * { flex: 1 1 0; }
.keno-small { font-size: .875rem; opacity: .9; }
.keno-cost { font-weight: 700; }
.keno-cost.is-over { color: var(--k-warn); }

.keno-btn {
  min-height: 2.5rem; padding: .3rem .8rem; font: 700 .9375rem/1.2 system-ui, sans-serif;
  color: var(--k-text); background: var(--k-cell); border: 1px solid var(--k-line); border-radius: 6px; cursor: pointer;
}
.keno-btn:hover:not(:disabled) { border-color: var(--k-accent); }
.keno-btn:disabled { opacity: .55; cursor: default; }
.keno-btn--buy { min-height: 3rem; font-size: 1.15rem; text-transform: uppercase; background: var(--k-pick); color: var(--k-dark); border-color: var(--k-pick); }
.keno-btn--draw { background: var(--k-hit); color: var(--k-dark); border-color: var(--k-hit); text-transform: uppercase; }
.keno-btn--auto { background: var(--k-drawn); color: var(--k-dark); border-color: var(--k-drawn); text-transform: uppercase; }
.keno-btn--small { min-height: 2rem; padding: .15rem .6rem; font-size: .8125rem; }
.keno-btn.is-urgent { background: var(--k-pick); color: var(--k-dark); border-color: var(--k-pick); }

.keno-message {
  min-height: 6.5rem; padding: .5rem .65rem; white-space: pre-line; font-size: .9375rem;
  background: var(--k-bg); border-radius: 5px;
}
.keno-message.is-win { color: var(--k-hit); }
.keno-message.is-error { color: var(--k-warn); }

/* ---------- Tabs and tables ---------- */
.keno-tabs { display: flex; gap: .25rem; margin-top: 1.25rem; border-bottom: 2px solid var(--k-panel); }
.keno-tabs [role="tab"] {
  min-height: 2.5rem; padding: .3rem 1rem; font: 700 .9375rem system-ui, sans-serif;
  color: var(--k-text); background: var(--k-panel); border: 0; border-radius: 6px 6px 0 0; cursor: pointer;
}
.keno-tabs [aria-selected="true"] { background: var(--k-cell); color: var(--k-accent); }
.keno-tabpanel { padding-top: .5rem; }
.keno-tabpanel .keno-row { margin-top: .5rem; }

.keno-table-wrap { overflow: auto; max-height: 18rem; border-radius: 5px; background: var(--k-cell); }
.keno-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.keno-table th, .keno-table td { padding: .3rem .55rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--k-line); }
.keno-table thead th { position: sticky; top: 0; background: var(--k-panel); color: var(--k-accent); }
.keno-table .keno-numbers { font-variant-numeric: tabular-nums; white-space: normal; min-width: 18rem; }
.keno-actions { display: flex; gap: .3rem; }
.keno-empty { opacity: .75; font-style: italic; }

/* ---------- Rules (normal site colors) ---------- */
.keno-rules ul { max-width: 45rem; padding-left: 1.25rem; }
.keno-rules li { margin-bottom: .4rem; }
.keno-paytables { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1rem 0; }
.keno-paytable { border-collapse: collapse; width: 100%; font-size: .875rem; background: var(--card); box-shadow: var(--shadow); }
.keno-paytable caption { text-align: left; font-weight: 700; padding: .3rem 0; color: var(--accent); }
.keno-paytable th, .keno-paytable td { padding: .2rem .5rem; border-bottom: 1px solid var(--line); text-align: right; }
.keno-paytable thead th { background: var(--accent); color: var(--accent-ink); }
.keno-paytable tbody th { text-align: center; }

/* Phones: less padding so the board gets more room. */
@media (max-width: 40rem) {
  .keno { padding: .5rem; margin-inline: -.5rem; }
  .keno-panel { padding: .65rem; }
  .keno-top { padding: .4rem .5rem; }
}