.keno-page {
  --keno-navy: #0c2132;
  --keno-control: #132c41;
  --keno-border: #31526a;
  --keno-muted: #9cb6cb;
  --keno-text: #eff7ff;
  --keno-gold: #f2cf83;
  width: min(100%, 1170px);
  margin-inline: auto;
  padding: 28px clamp(12px, 3vw, 28px) 36px;
  color: var(--keno-text);
  font-variant-numeric: tabular-nums;
}
.keno-back, .keno-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.keno-back { color: var(--keno-muted); font-size: 13px; }
.keno-back:hover { color: var(--keno-gold); }
.keno-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-block: 14px 18px;
}
.keno-eyebrow { color: var(--keno-gold); font-size: 11px; letter-spacing: .12em; }
.keno-heading h1 { font-size: clamp(32px, 5vw, 47px); line-height: 1.1; font-weight: 800; margin-top: 4px; }
.keno-heading > p { color: var(--keno-muted); font-size: 13px; margin-bottom: 4px; }
.keno-machine {
  display: grid;
  grid-template-columns: minmax(200px, 235px) minmax(0, 1fr);
  border: 1px solid var(--keno-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--keno-navy);
}
.keno-controls {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  background: var(--keno-control);
  border-right: 1px solid #29465b;
}
.keno-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: 28px;
  padding: 4px;
  background: #0b2132;
}
.keno-switch button { padding: 7px 6px; border-radius: 24px; font-size: 13px; font-weight: 700; color: var(--keno-muted); }
.keno-switch button[aria-pressed="true"] { background: #315470; color: #fff; }
.keno-wallet { display: grid; gap: 4px; padding: 10px 11px; margin-block: 3px; border: 1px solid #31526a; border-radius: 10px; background: #102537; }
.keno-wallet > span { font-size: 11px; color: var(--keno-muted); }
.keno-wallet > strong { font-size: 19px; color: var(--keno-gold); }
.keno-wallet > a { font-size: 12px; font-weight: 700; color: var(--keno-gold); }
.keno-controls label { display: flex; justify-content: space-between; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; }
.keno-controls label small { font-size: 10px; font-weight: 500; color: var(--keno-muted); }
.keno-controls :is(input[type="number"], select) {
  min-width: 0;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--keno-border);
  border-radius: 7px;
  background: #0b2132;
  color: var(--keno-text);
  font-size: 13px;
  color-scheme: dark;
}
.keno-bet { display: grid; grid-template-columns: minmax(0,1fr) 35px 35px; gap: 3px; }
.keno-bet button, .keno-pick-actions button, .keno-proof button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 5px;
  border-radius: 7px;
  background: #294861;
  color: var(--keno-text);
  font-size: 11px;
  font-weight: 700;
}
.keno-bet button:not(:disabled):hover, .keno-pick-actions button:not(:disabled):hover, .keno-proof button:hover { background: #365975; }
.keno-pick-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 5px; }
.keno-controls .keno-check { justify-content: flex-start; color: var(--keno-muted); margin-block: 3px; cursor: pointer; }
.keno-check input { accent-color: #0786f5; }
.keno-play {
  background: #167ee4;
  color: white;
  min-height: 43px;
  padding: 8px;
  border-radius: 8px;
  font-weight: 800;
}
.keno-play:hover:not(:disabled) { background: #238ff4; }
.keno-play.keno-stop { background: #8b3950; }
.keno-mobile-action { display: none; }
.keno-desktop-action { display: contents; }
.keno-live-feed { margin-top: 16px; }
.keno-controls :disabled { opacity: .53; cursor: default; }
.keno-notice { color: #ffd189; font-size: 12px; line-height: 1.5; }
.keno-board-area { min-width: 0; padding: clamp(10px, 2.8vw, 23px); }
.keno-board-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--keno-muted); font-size: 12px; margin-bottom: 12px; }
.keno-board-header span { display: inline-flex; align-items: center; gap: 4px; }
.keno-board-header strong { color: var(--keno-text); }
.keno-board-header .keno-hits { color: #83f4a4; font-weight: 800; }
.keno-grid-wrap { position: relative; }
.keno-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: clamp(4px,.8vw,9px); }
.keno-tile {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1.09;
  border-radius: clamp(5px,.7vw,9px);
  background: #294357;
  box-shadow: inset 0 -4px #172f42, inset 0 1px #ffffff10;
  color: #eef8ff;
  font-size: clamp(12px,1.9vw,21px);
  font-weight: 800;
  transition: background .15s, color .15s, transform .15s;
  touch-action: manipulation;
}
.keno-tile span { position: relative; z-index: 1; }
.keno-tile:not(:disabled):hover { transform: translateY(-2px); background: #3b5871; }
.keno-tile[aria-pressed="true"] { background: #842bd7; box-shadow: inset 0 -4px #541394, inset 0 1px #c68eff8c; }
.keno-tile[aria-pressed="true"]:not(:disabled):hover { background: #9a44ed; }
.keno-grid[data-full="true"] .keno-tile[aria-pressed="false"] { color: #aac0d0; }
.keno-grid .keno-tile[data-drawn="true"][data-hit="false"] {
  color: #88eaa4;
  background: #102a32;
  box-shadow: inset 0 -4px #0b1f2d, inset 0 0 0 1px #38684c;
  animation: keno-tile-reveal .25s ease-out both;
}
.keno-grid .keno-tile[data-hit="true"] {
  background: #1b623a;
  color: #efffee;
  box-shadow: inset 0 0 0 2px #b77aff, inset 0 -5px #174a2d, 0 0 14px #63e88240;
  animation: keno-tile-reveal .35s cubic-bezier(.2,.8,.35,1.3) both;
}
.keno-gem { position: absolute; width: 61%; height: 61%; color: #8af7a2; fill: #43b965; filter: drop-shadow(0 0 6px #43e77878); }
.keno-result {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  display: grid;
  gap: 2px;
  min-width: 115px;
  width: max-content;
  max-width: 85%;
  border: 1px solid #f2cf83;
  border-radius: 12px;
  padding: 9px 14px;
  background: #122a3df5;
  color: var(--keno-gold);
  text-align: center;
  pointer-events: none;
  box-shadow: 0 8px 24px #06141d9c;
  animation: keno-result-pop .3s cubic-bezier(.2,.8,.35,1.25) both;
}
.keno-result[data-win="true"] { color: #88f6a5; border-color: #6ee68e; }
.keno-result strong { font-size: clamp(20px,3vw,31px); line-height: 1.1; }
.keno-result span { font-size: 11px; font-weight: 700; }
.keno-payouts { display: grid; grid-template-columns: repeat(auto-fit,minmax(52px,1fr)); gap: 6px; margin-top: 17px; }
.keno-payout {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #1b3448;
  font-size: 11px;
}
.keno-payout strong { border-radius: 16px; background: #102537; padding: 3px 4px; font-size: clamp(10px,1vw,13px); }
.keno-payout span { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.keno-payout small { font-size: 9px; color: #b4cadd; }
.keno-payout[data-result="true"] { border-color: #69d985; background: #154332; color: #b0ffc4; }
.keno-empty, .keno-result-line, .keno-points-note { color: var(--keno-muted); text-align: center; font-size: 12px; }
.keno-empty { padding: 22px 0 7px; }
.keno-result-line { margin-top: 10px; min-height: 18px; }
.keno-points-note { margin-top: 16px; }
.keno-details { margin-top: 12px; border: 1px solid #31526a; border-radius: 10px; padding: 10px 12px; background: #10283a; color: var(--keno-muted); font-size: 12px; }
.keno-details summary { cursor: pointer; color: var(--keno-text); font-weight: 700; }
.keno-details summary svg { display: inline; vertical-align: middle; margin-right: 4px; color: var(--keno-gold); }
.keno-details table { width: 100%; margin-top: 8px; text-align: left; }
.keno-details :is(th,td) { padding: 5px 4px; border-bottom: 1px solid #31526a72; }
.keno-details th { color: var(--keno-text); }
.keno-fairness p { margin-block: 8px; line-height: 1.5; }
.keno-fairness code { display: block; color: var(--keno-gold); overflow-wrap: anywhere; margin-bottom: 5px; }
.keno-history { display: grid; gap: 4px; margin-top: 10px; }
.keno-history button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #19354b; border-radius: 6px; text-align: left; }
.keno-history button[aria-pressed="true"] { outline: 1px solid #d3ad65; color: var(--keno-text); }
.keno-proof { margin-top: 12px; }
.keno-proof button { padding: 7px 9px; }
.keno-page :is(button,a,input,select,summary):focus-visible { outline: 2px solid #f0cf82; outline-offset: 2px; }

@keyframes keno-tile-reveal {
  from { transform: scale(.82); opacity: .62; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes keno-result-pop {
  from { transform: translate(-50%,-50%) scale(.75); opacity: 0; }
  to { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
@media (max-width: 730px) {
  .keno-mobile-action { display: contents; }
  .keno-desktop-action { display: none; }
  .keno-heading { align-items: start; flex-direction: column; gap: 6px; }
  .keno-machine { display: flex; flex-direction: column-reverse; }
  .keno-controls { border-right: 0; border-top: 1px solid #29465b; }
  .keno-tile { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .keno-page *, .keno-page *::before, .keno-page *::after { animation: none !important; transition: none !important; }
}