/* KENO: .kn-* classes only (legacy .keno-/.ktile rules in games.css never apply).
   Stake-style layout: Manual/Auto tabs, risk segments, Autopick / Clear Table, Place Bet pinned at the bottom;
   stage = sound/turbo icons + recent results, 8x5 key-style board, two-row payout bar. */
.kn-game{
  --kn-stage:#0b1530; --kn-cell:#14203d; --kn-cell-2:#192749; --kn-line:#ffffff12;
  --kn-tile-a:#33416a; --kn-tile-b:#2b3860; --kn-tile-edge:#1a2443; --kn-tile-txt:#e3e9fb;
  --kn-pick-a:#6158f5; --kn-pick-b:#4b41e0; --kn-pick-edge:#2f27a3;
  --kn-violet:linear-gradient(180deg,#6d61ff,#5146e8)
}

/* ---------- control panel ---------- */
.kn-ctrl .kn-mode{margin-bottom:18px;border-radius:99px;padding:4px}
.kn-ctrl .kn-mode button{height:38px;border-radius:99px;font-size:15px}
.kn-ctrl .kn-mode button.on{background:var(--control-hi);box-shadow:inset 0 1px 0 #ffffff1a}
.kn-ctrl .kn-risk button{font-size:14px;padding:0 4px}
.kn-ctrl .kn-risk button.on{background:var(--kn-violet);color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 4px 14px -6px #5b50f0}
.kn-autobox .lbl{margin-top:16px}
.kn-anrow input{font-size:16px}
.kn-anrow button{padding:0 10px}
.kn-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kn-tools .btn{height:46px;font-size:15px;padding:0 8px;gap:7px}
.kn-tools .ic{width:16px;height:16px}
.kn-ctrl #kn-btn{margin-top:auto;height:54px;font-size:17px}
.kn-ctrl .kn-tools{margin-bottom:18px}
#kn-pc{transition:color .2s}
#kn-pc.flash{animation:kn-flash .6s}
@keyframes kn-flash{0%,60%{color:var(--gold)}100%{color:var(--text)}}

/* ---------- stage ---------- */
.kn-stage{display:flex;flex-direction:column;gap:14px;padding:16px 24px 74px;
  background:radial-gradient(ellipse 90% 70% at 50% 45%,#10204a 0,var(--kn-stage) 60%,#081026 100%)}
.kn-top{flex:none;display:flex;align-items:center;gap:8px;height:36px;min-width:0}
.kn-ib{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:#ffffff0a;color:var(--dim);cursor:pointer;transition:color .15s,background .15s}
.kn-ib .ic{width:18px;height:18px}
.kn-ib:hover{color:var(--text);background:#ffffff14}
.kn-ib.on{color:var(--text)}
#kn-turbo.on{color:var(--gold);background:#ffc94a1a}
.kn-ib:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kn-hc{flex:none;display:flex;align-items:baseline;gap:5px;height:36px;padding:0 12px;border-radius:8px;background:#ffffff0a;line-height:36px}
.kn-hc b{font-size:15px;font-weight:800}
.kn-hc small{font-size:12.5px;font-weight:700;color:var(--muted)}
.kn-stage.drawing .kn-hc{box-shadow:inset 0 0 0 1px #6d61ff88}
.kn-recent{margin-left:auto;flex:1;min-width:0;display:flex;justify-content:flex-end;gap:6px;overflow:hidden}
.kn-rc{flex:none;height:30px;min-width:52px;padding:0 9px;border-radius:99px;display:grid;place-items:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  background:#1a2647;color:#8da0c6;box-shadow:inset 0 0 0 1px #ffffff0d}
.kn-rc.w{background:var(--win);color:#03261a;box-shadow:none}
.kn-rc.new{animation:kn-rc .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes kn-rc{0%{transform:translateX(16px) scale(.7);opacity:0}100%{transform:none;opacity:1}}

/* 8 x 5 board: sized from the free space so the keys stay near-square */
.kn-wrap{flex:1;min-height:0;display:grid;place-items:center;container-type:size}
.kn-board{width:min(100cqw,calc(100cqh * 1.62));aspect-ratio:1.62;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:clamp(6px,1.5cqh,12px)}
.kn-t{position:relative;min-height:0;border:0;padding:0 0 4px;border-radius:10px;cursor:pointer;color:var(--kn-tile-txt);font-size:clamp(17px,6.2cqh,28px);font-weight:800;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--kn-tile-a),var(--kn-tile-b));
  box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -5px 0 var(--kn-tile-edge);transition:background .15s,box-shadow .15s,opacity .15s,color .15s,transform .08s;-webkit-tap-highlight-color:transparent}
.kn-n{position:relative;z-index:1}
@media (hover:hover){ .kn-t:not(:disabled):not(.sel):hover{background:linear-gradient(180deg,#3d4c7a,#33416c);transform:translateY(-1px)} }
.kn-t:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -2px 0 var(--kn-tile-edge)}
.kn-t:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.kn-t:disabled{cursor:default}
.kn-stage:not(.drawing):not(.done) .kn-t.full:not(.sel):not(.drawn){opacity:.5}
.kn-t.full:not(.sel){cursor:not-allowed}
/* picked: vivid violet key */
.kn-t.sel{color:#fff;background:linear-gradient(180deg,var(--kn-pick-a),var(--kn-pick-b));box-shadow:inset 0 1px 0 #ffffff50,inset 0 -5px 0 var(--kn-pick-edge),0 6px 18px -8px #5b50f0}
.kn-t.sel:not(:disabled):active{box-shadow:inset 0 1px 0 #ffffff50,inset 0 -2px 0 var(--kn-pick-edge)}
/* Drawn, not picked: sunken tile with a clean number. */
.kn-t.drawn:not(.sel){color:#aebbe0;background:#0d1530;box-shadow:inset 0 0 0 2px #46547f,inset 0 3px 8px #000a;padding:0}
/* Hit = picked and drawn: solid green tile. */
.kn-t.hit{color:#052a1d;background:#2bdc92;
  box-shadow:inset 0 1px 0 #abffda,inset 0 -5px 0 #179561,0 0 22px -3px #2fe08fcc}
/* after the draw: picked numbers that missed fade back so the hits read first */
.kn-t.sel.miss{opacity:.5}
.kn-t.pop{animation:kn-pop .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes kn-pop{0%{transform:scale(.84)}100%{transform:scale(1)}}

/* ---------- payout bar: multiplier row + hit-count row, synced with picks + risk ---------- */
.kn-pay{flex:none;display:grid;grid-template-columns:repeat(var(--cols,11),minmax(0,1fr));row-gap:0;scrollbar-width:thin}
.kn-pay.empty{display:flex;justify-content:center;align-items:center;height:86px;border-radius:10px;background:var(--kn-cell)}
.kn-pay-empty{color:var(--muted);font-size:15px;font-weight:600}
.kn-pc{min-width:0;display:flex;flex-direction:column;gap:8px}
.kn-pc b{margin:0 3px;padding:9px 2px;border-radius:8px;background:var(--kn-cell-2);text-align:center;font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff;
  transition:background .12s,color .12s}
.kn-pc small{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 2px;background:var(--kn-cell);border-left:1px solid var(--kn-line);
  font-size:13px;font-weight:800;color:#c9d4ee;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .12s}
.kn-pc:first-child small{border-left:0;border-radius:10px 0 0 10px}
.kn-pc:last-child small{border-radius:0 10px 10px 0}
.kn-gem{flex:none;width:9px;height:11px;clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);background:linear-gradient(160deg,#b9ffdf,#2fe08f 50%,#15a964)}
.kn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kn-pc.zero b{color:#7d8db3}
.kn-pc.part b{color:#cfd9ee}
.kn-pc.live b{background:var(--kn-violet);color:#fff}
.kn-pc.live small{background:#2a2a78;color:#fff}
.kn-pc.won b{background:var(--win);color:#03281a}
.kn-pc.won small{background:#134535;color:#b6ffdc}
.kn-pc.even b{background:var(--control-hi)}
.kn-pc.even small{background:#1d2c52;color:#fff}
.kn-pc.lost b{background:#3a1424;color:#ff9aab;box-shadow:inset 0 0 0 1px var(--lose)}
.kn-pc.lost small{background:#2a1222;color:#ffc2cc}
.kn-stage .outcome{bottom:16px}

@media (max-width:1200px){ .kn-stage{padding:14px 16px 72px} .kn-pc b{font-size:13.5px;margin:0 2px} .kn-pc small{font-size:12px;gap:4px} .kn-rc{min-width:46px;font-size:12px;padding:0 7px} }

/* ---------- phones / narrow: stacked; board sized by width, payout bar scrolls sideways ---------- */
@media (max-width:900px){
  .kn-stage{height:auto;padding:12px 12px 70px;gap:12px}
  .kn-wrap{container-type:normal;display:block}
  .kn-board{width:100%;aspect-ratio:auto;grid-template-rows:none;gap:6px}
  .kn-t{aspect-ratio:1;font-size:clamp(15px,4.6vw,22px);border-radius:8px;padding-bottom:3px;box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -4px 0 var(--kn-tile-edge)}
  .kn-t.sel{box-shadow:inset 0 1px 0 #ffffff50,inset 0 -4px 0 var(--kn-pick-edge)}
  .kn-t.hit{box-shadow:inset 0 1px 0 #abffda,inset 0 -4px 0 #179561,0 0 14px -3px #2fe08fcc}
  .kn-top{height:32px;gap:6px}
  .kn-ib,.kn-hc{height:32px}
  .kn-ib{width:32px}
  .kn-hc{line-height:32px;padding:0 9px}
  .kn-hc small{display:none}
  .kn-rc{height:26px;min-width:0;padding:0 7px;font-size:11.5px}
  .kn-pay{overflow-x:auto;grid-template-columns:repeat(var(--cols,11),minmax(50px,1fr));padding-bottom:4px;overscroll-behavior-x:contain}
  .kn-pay.empty{height:70px}
  .kn-pc b{font-size:13px;padding:8px 2px}
  .kn-pc small{font-size:12px;padding:8px 2px}
  .kn-ctrl .kn-mode{margin-bottom:14px}
  .kn-stage .outcome{max-width:calc(100% - 20px);gap:8px;padding:8px 14px 8px 10px;font-size:16px}
  .kn-stage .outcome .det{overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:13px}
}
@media (prefers-reduced-motion: reduce){ .kn-t,.kn-pc b,.kn-pc small{transition:none} .kn-rc.new,.kn-t.pop{animation:none} }