/* Reference Keno rows: outlined circular balls, compact headers, striped rows. */
.keno-panel { --keno-orange: oklch(70.5% .213 47.604); --keno-emerald: oklch(69.6% .17 162.48); --keno-violet: oklch(60.6% .25 292.717); }
.keno-panel .keno-group-0 { --keno-group: var(--keno-orange); --keno-group-text: oklch(64.6% .222 41.116); }
.keno-panel .keno-group-1 { --keno-group: var(--keno-emerald); --keno-group-text: oklch(59.6% .145 163.225); }
.keno-panel .keno-group-2 { --keno-group: var(--keno-violet); --keno-group-text: oklch(54.1% .281 293.009); }
.keno-rules { margin: 0 0 8px; padding: 8px 12px; border-radius: 6px; background: color-mix(in oklab, var(--soft) 40%, transparent); color: var(--muted); font-size: 12px; line-height: 1.625; }
.keno-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 0 12px 8px; font-size: 12px; line-height: 16px; }
.keno-legend > span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.keno-legend i { flex: 0 0 12px; height: 12px; border: 2px solid color-mix(in oklab, var(--keno-group) 50%, transparent); border-radius: 50%; background: color-mix(in oklab, var(--keno-group) 15%, transparent); }
.keno-row { position: relative; border-bottom: 1px solid color-mix(in oklab, var(--line) 20%, transparent); transition: background-color .15s; }
.keno-row:last-child { border-bottom: 0; }
.keno-row:nth-child(even) { background: color-mix(in oklab, var(--cyan) 3%, transparent); }
.keno-row:hover { background: color-mix(in oklab, var(--cyan) 6%, transparent); }
.keno-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 84px 10px 12px; }
.keno-row-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 20px; }
.keno-row-meta strong { font-family: var(--number-font); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.keno-row-meta time { color: var(--muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
.keno-result { display: flex; flex-shrink: 0; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; }
.keno-result-digits { font-family: var(--number-font); font-weight: 700; }
.keno-equals { color: var(--muted); }
.keno-result-sum { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 24px; padding: 0 4px; border-radius: 4px; background: var(--cyan); color: white; font-size: 12px; line-height: 16px; }
.keno-result-badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; border-radius: 4px; color: white; font-size: 10px; font-weight: 700; }
.keno-result-badge.is-red { background: var(--red); }
.keno-result-badge.is-blue { background: var(--badge-blue); }
.keno-ball-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px; }
.keno-panel .keno-number { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.keno-panel .keno-position { color: var(--keno-group-text, transparent); font-size: 9px; line-height: 1; }
.keno-ball { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid color-mix(in oklab, var(--keno-group, var(--line)) 50%, transparent); border-radius: 50%; background: color-mix(in oklab, var(--keno-group, var(--soft)) 15%, transparent); color: var(--keno-group-text, var(--muted)); font-size: 12px; font-weight: 600; line-height: 16px; }
.keno-group--1 .keno-ball { border-color: color-mix(in oklab, var(--line) 40%, transparent); background: color-mix(in oklab, var(--soft) 20%, transparent); }
.keno-details > summary { position: absolute; top: 12px; right: 12px; display: block; padding: 2px 8px; border-radius: 4px; color: var(--cyan); font-size: 11px; font-weight: 500; line-height: 16px; cursor: pointer; list-style: none; }
.keno-details > summary::-webkit-details-marker { display: none; }
.keno-details > summary:hover { background: color-mix(in oklab, var(--cyan) 10%, transparent); }
.keno-collapse-label, .keno-details[open] .keno-expand-label { display: none; }
.keno-details[open] .keno-collapse-label { display: inline; }
.keno-calculation { margin: 0 12px 10px; padding: 10px; border: 1px solid color-mix(in oklab, var(--line) 40%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--soft) 20%, transparent); }
.keno-calculation-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.keno-calculation-label { display: flex; align-items: center; gap: 6px; }
.keno-calculation-label > span { padding: 2px 6px; border-radius: 4px; background: color-mix(in oklab, var(--keno-group) 15%, transparent); color: var(--keno-group-text); font-size: 11px; font-weight: 700; line-height: 16px; }
.keno-calculation-label > small { color: var(--muted); font-size: 10px; }
.keno-calculation-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-family: var(--number-font); font-size: 12px; line-height: 16px; }
.keno-calculation-formula > b, .keno-calculation-total b { color: var(--keno-group-text); }
.keno-operator { margin: 0 2px; color: var(--muted); }
.keno-last-digit-label { margin: 0 4px; color: var(--muted); font-family: inherit; }
.keno-last-digit { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--keno-group); color: white; font-size: 11px; }
.keno-calculation-total { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding: 8px 12px; border-radius: 8px; background: color-mix(in oklab, var(--cyan) 10%, transparent); }
.keno-calculation-total > span { color: var(--muted); font-size: 12px; }
.keno-calculation-total > div { display: flex; align-items: center; gap: 2px; font-family: var(--number-font); font-size: 14px; font-weight: 700; }
.keno-calculation-total strong { color: var(--cyan); font-size: 18px; }
.keno-special { margin-top: 8px; color: var(--muted); font-size: 11px; text-align: center; }
@media (min-width: 640px) {
  .keno-panel .keno-position { font-size: 10px; }
  .keno-ball { width: 32px; height: 32px; font-size: 14px; line-height: 20px; }
  .keno-details > summary { font-size: 12px; }
  .keno-calculation { padding: 12px; }
  .keno-calculation-row { flex-direction: row; align-items: center; gap: 8px; }
  .keno-calculation-label > span { font-size: 12px; }
  .keno-calculation-label > small { font-size: 11px; }
  .keno-calculation-formula { font-size: 14px; line-height: 20px; }
  .keno-last-digit { width: 24px; height: 24px; font-size: 12px; }
  .keno-calculation-total > span { font-size: 14px; }
  .keno-calculation-total > div { font-size: 16px; }
  .keno-calculation-total strong { font-size: 20px; }
}
@media (max-width: 767px) {
  .keno-calculation-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 479px) {
  .keno-row-heading { flex-wrap: wrap; row-gap: 6px; padding-right: 12px; }
  .keno-row-meta { width: 100%; padding-right: 64px; flex-wrap: wrap; gap: 0 8px; }
  .keno-row-meta time { width: 100%; }
  .keno-result { margin-top: 0; }
  .keno-calculation-formula { column-gap: 2px; }
}