.kn-wrap{padding:8px 4px 38px;color:#e9eaf8}.kn-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.kn-wrap h1{font-size:clamp(30px,5vw,58px);letter-spacing:-.05em;margin:8px 0 10px}.kn-wrap h1 span{color:#b0a0ff}.kn-muted{color:#a1a7c4}.kn-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;margin:22px 0}.kn-cell{border:1px solid #35394e;background:#232737;color:#d9ddf0;border-radius:12px;aspect-ratio:1/1;min-width:0;font-weight:800;font-size:clamp(14px,2vw,22px);cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}.kn-cell:hover:not(:disabled){transform:translateY(-3px);border-color:#9d85ff}.kn-cell.picked{background:linear-gradient(125deg,#3a49ad,#6276ec);color:white;border-color:#97a6ff}.kn-cell.drawn{background:#858b9e;color:#10131e}.kn-cell.hit{background:#159e7e;border-color:#6af6bd;box-shadow:0 0 22px #43e6ab70;animation:kn-pop .35s ease}.kn-cell:disabled{cursor:default}.kn-card{border:1px solid #36384f;background:linear-gradient(155deg,#191e31,#111525);border-radius:20px;padding:20px;margin-top:18px}.kn-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.kn-btn{border:1px solid #524b79;background:#292640;color:#eee8ff;border-radius:11px;padding:12px 17px;cursor:pointer;font-weight:750}.kn-btn:hover:not(:disabled){background:#43396b}.kn-btn.primary{background:linear-gradient(110deg,#7865ed,#a17fff);color:#fff}.kn-btn:disabled{opacity:.44;cursor:not-allowed}.kn-modes{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}.kn-modes button.active{background:#715dc5;border-color:#bcb0ff}.kn-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(255px,.8fr);gap:18px}.kn-pill{display:inline-block;padding:6px 11px;border-radius:50px;background:#2d294b;color:#baaafd;font-size:12px;font-weight:750}.kn-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.kn-stat{padding:13px;border:1px solid #353750;border-radius:12px}.kn-stat b{display:block;font-size:23px;color:#fff;margin-top:4px}.kn-result{min-height:40px;font-weight:700;color:#d1c5ff}.kn-history{max-height:220px;overflow:auto}.kn-history-item{padding:10px 0;border-bottom:1px solid #32354a;display:flex;justify-content:space-between;gap:10px}.kn-table{width:100%;border-collapse:collapse;font-size:13px}.kn-table th,.kn-table td{border-bottom:1px solid #393d56;text-align:left;padding:8px 5px}.kn-table td:last-child{text-align:right}.kn-seed{overflow-wrap:anywhere;color:#a9a2d5;font-family:monospace;font-size:11px}.kn-input{background:#101420;color:#eee;border:1px solid #47445f;border-radius:9px;padding:11px;width:100%;box-sizing:border-box}.kn-verify-good{color:#70f5c5}.kn-verify-bad{color:#ff8b9b}@keyframes kn-pop{0%{transform:scale(.8)}60%{transform:scale(1.1)}100%{transform:scale(1)}}@media(max-width:950px){.kn-layout{grid-template-columns:1fr}}@media(max-width:480px){.kn-grid{gap:4px}.kn-cell{border-radius:7px}.kn-card{padding:13px}.kn-btn{padding:10px 11px}}

/* ===== V31 Keno (Moonclutch dark palette + green accent) ===== */
.kx{--bg:#0D0F13;--pn:#191D24;--hv:#242932;--ln:#2A2F38;--tx:#F2F3F5;--mu:#949BA6;--gr:#3FB950;--gr2:#2E9E5B;--rd:#E5534B;color:var(--tx);display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start;max-width:1120px;margin:0 auto}
.kx button,.kx input{font:inherit}.kx button{cursor:pointer}
.kx-panel{display:grid;gap:10px;padding:14px;background:var(--pn);border:1px solid var(--ln);border-radius:10px}
.kx-tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;background:#12151B;border-radius:8px}
.kx-tabs button{height:34px;border:0;border-radius:6px;background:transparent;color:var(--mu);font-weight:800;font-size:13px}.kx-tabs button.on{background:var(--hv);color:var(--tx)}
.kx-lab{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--mu);margin-bottom:-4px}
.kx-panel .mb-bet{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;background:transparent;border:0;border-radius:0;max-width:none}
.kx-panel .mb-bet label{flex-basis:100%;font-size:11px;letter-spacing:.06em;margin-bottom:-2px}
.kx-panel .mb-bet input{flex:1 1 90px;width:auto;min-width:0;height:36px;background:#12151B;border:1px solid var(--ln);border-radius:7px;font-size:15px}
.kx-panel .mb-bet button{min-width:36px;height:36px;padding:0 9px;background:var(--hv);border:1px solid var(--ln);border-radius:7px;font-size:12px}
.kx-panel .mb-bet-bal{margin-left:0;flex-basis:100%;font-size:12px}.kx-panel .mb-bet-bal strong{font-size:14px}.kx-panel .mb-bet-result{flex-basis:100%;font-size:12px}.kx-panel .mb-bet-result:empty{display:none}
.kx-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.kx-modes button{height:34px;border:1px solid var(--ln);background:#12151B;color:var(--mu);border-radius:7px;font-weight:800;font-size:12px;letter-spacing:.03em}.kx-modes button.on{background:var(--hv);color:var(--tx);border-color:var(--gr)}
.kx-count{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mu)}.kx-count b{color:var(--tx);font-size:14px;font-variant-numeric:tabular-nums}
.kx-row{display:flex;gap:6px}.kx-row .kx-btn{flex:1}
.kx-btn{height:36px;padding:0 12px;border:1px solid var(--ln);background:var(--hv);color:var(--tx);border-radius:7px;font-weight:700;font-size:13px}.kx-btn:hover:not(:disabled){border-color:var(--gr)}.kx-btn.sm{flex:none;min-width:42px;padding:0 8px}.kx-btn.ic{flex:none;width:34px;padding:0}
.kx button:disabled,.kx input:disabled{opacity:.45;cursor:not-allowed}
.kx-autoset{display:none;gap:6px}.kx[data-tab="auto"] .kx-autoset{display:grid}
.kx-autoset input{flex:1;min-width:0;height:36px;padding:0 10px;background:#12151B;border:1px solid var(--ln);border-radius:7px;color:var(--tx)}
.kx-go{height:44px;border:0;border-radius:8px;background:var(--gr);color:#07140b;font-weight:800;letter-spacing:.05em;font-size:14px}.kx-go:hover:not(:disabled){filter:brightness(1.08)}.kx-go.stop{background:var(--rd);color:#fff}
.kx-prog{min-height:16px;font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--gr);font-variant-numeric:tabular-nums}.kx-prog:empty{display:none}
.kx-info{font-size:11px;line-height:1.45;color:var(--mu)}
.kx-sound{display:flex;align-items:center;gap:8px}.kx-sound input{flex:1;min-width:0;accent-color:var(--gr);height:4px}.kx-link{font-size:11px;color:var(--mu);text-decoration:none;white-space:nowrap}.kx-link:hover{color:var(--tx)}
.kx-play{display:grid;gap:10px;min-width:0;padding:14px;background:var(--pn);border:1px solid var(--ln);border-radius:10px}
.kx-stage{position:relative}
.kx-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.kx-cell{aspect-ratio:1/1;min-width:0;padding:0;border:1px solid transparent;border-radius:8px;background:#2A2F38;color:var(--tx);font-weight:800;font-size:clamp(13px,1.9vw,19px);font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,transform .15s}
.kx-cell:hover:not(:disabled){background:#343a46}
.kx-cell.picked{background:var(--gr2);border-color:#6fe39a;color:#fff;animation:kxsel .15s ease-out}
.kx-cell.miss{background:#14171c;color:#d0645e;border-color:#2a1c1c}
.kx-cell.hit{background:var(--gr);border-color:#fff;color:#06130a;box-shadow:0 0 0 2px #3fb95066}
.kx-cell.new{animation:kxpulse .38s ease-out}
.kx-cell:disabled{cursor:default}
@keyframes kxsel{from{transform:scale(.9)}to{transform:scale(1)}}@keyframes kxpulse{0%{transform:scale(.85)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
.kx-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;display:grid;justify-items:center;gap:1px;min-width:120px;padding:9px 18px;background:#0c1d13;border:1px solid var(--gr);border-radius:9px;box-shadow:0 6px 18px #0008;z-index:3}
.kx-pop small{font-size:11px;font-weight:800;letter-spacing:.07em;color:#a7e8bb}.kx-pop b{font-size:26px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}.kx-pop em{font-style:normal;font-size:12px;color:var(--gr);font-weight:700}
.kx-pop.in{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .16s ease-out,transform .16s ease-out}.kx-pop.out{opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .3s ease-in,transform .3s ease-in}
.kx-hitline{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--mu)}.kx-hitline #kxHits{font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums}.kx-msg{text-align:right;min-width:0}
.kx-strip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.kx-cat{flex:1 0 66px;display:grid;justify-items:center;gap:1px;padding:7px 4px;background:#12151B;border:1px solid var(--ln);border-radius:7px}
.kx-cat .h{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:13px}.kx-cat .h i{width:9px;height:9px;border-radius:3px;background:#2A2F38}.kx-cat.pos .h i{background:var(--gr2)}
.kx-cat b{font-size:13px;color:var(--mu);font-variant-numeric:tabular-nums}.kx-cat.pos b{color:var(--tx)}.kx-cat small{font-size:10px;color:#6c7380;font-variant-numeric:tabular-nums}
.kx-cat.on{background:#10261a;border-color:var(--gr)}.kx-cat.on b{color:#fff}.kx-cat.on .h i{background:var(--gr)}
.kx-empty{width:100%;padding:12px;text-align:center;font-size:12px;color:var(--mu);background:#12151B;border:1px dashed var(--ln);border-radius:7px}
.kx-fair{margin:0;font-size:11px;color:var(--mu);overflow-wrap:anywhere;font-family:ui-monospace,monospace}.kx-fair a{color:var(--gr)}.kx-fair .id{color:var(--tx)}
.kx-hist{display:grid;gap:3px}.kx-hh{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--mu)}
.kx-hi{display:flex;gap:10px;justify-content:space-between;font-size:12px;padding:5px 8px;background:#12151B;border-radius:6px}.kx-hi .w{color:var(--gr);font-weight:700}.kx-hi a{color:var(--mu);text-decoration:none}.kx-hi a:hover{color:var(--tx)}
@media (max-width:860px){.kx{grid-template-columns:1fr}.kx-panel{order:2}.kx-play{order:1;padding:10px}.kx-grid{gap:4px}.kx-cell{border-radius:6px;font-size:clamp(12px,3.6vw,16px)}.kx-pop{padding:7px 14px;min-width:104px}.kx-pop b{font-size:22px}.kx-msg{text-align:left}.kx-hitline{flex-direction:column;gap:2px}}
@media (prefers-reduced-motion:reduce){.kx-cell,.kx-cell.new,.kx-cell.picked,.kx-pop.in,.kx-pop.out{animation:none;transition:none}}
.kx-panel .mb-bet [data-q="clear"]{display:none}
.pf-detail{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:10px 0;font-size:13px}.pf-detail dt{color:#949BA6}.pf-detail dd{margin:0;overflow-wrap:anywhere}

/* ===== V50 Keno polish (Degen-style layout, Moonclutch palette): one card, control panel left, board + result line right ===== */
#app .kx{gap:0;max-width:1240px;background:var(--pn);border:1px solid var(--ln);border-radius:14px;overflow:hidden;align-items:stretch;grid-template-columns:340px minmax(0,1fr)}
#app .kx-panel{gap:14px;padding:22px 20px;background:#14171d;border:0;border-right:1px solid var(--ln);border-radius:0;align-content:start}
#app .kx-play{gap:16px;padding:26px 28px 22px;background:transparent;border:0;border-radius:0}
#app .kx-tabs{padding:4px;background:#0f1115;border-radius:999px}
#app .kx-tabs button{height:38px;border-radius:999px;font-size:14px;transition:background .15s,color .15s}
#app .kx-tabs button.on{background:#262b34;color:var(--tx);box-shadow:0 1px 0 #0006}
#app .kx-lab,#app .kx-panel .mb-bet label{font-size:13px;font-weight:600;letter-spacing:0;color:var(--mu);text-transform:none;margin:0}
#app .kx-lab label{font-weight:600}
#app .kx-panel .mb-bet{gap:8px;align-items:center;position:relative}
#app .kx-panel .mb-bet input{flex:1 1 100px;height:46px;padding:0 12px 0 40px;background:#0f1115 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.500' fill='%23E8B04B'/%3E%3Cpath d='M13.500 6.500A5.500 5.500 0 1 0 17.500 14 4.500 4.500 0 0 1 13.500 6.500z' fill='%23fff6dd'/%3E%3C/svg%3E") 12px 50%/20px no-repeat;border-radius:10px;font-weight:700;font-size:16px}
#app .kx-panel .mb-bet button{height:34px;min-width:44px;border-radius:7px;font-weight:700;background:#262b34}
#app .kx-panel .mb-bet label{flex-basis:100%}
#app .kx-tiles{display:flex;align-items:center;gap:14px}
#app .kx-tiles b{min-width:48px;font-size:15px;font-variant-numeric:tabular-nums}
#app .kx-tiles input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;border-radius:99px;background:#262b34;outline:none;accent-color:var(--gr)}
#app .kx-tiles input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:0;cursor:pointer;box-shadow:0 0 0 3px #ffffff22;transition:box-shadow .15s}
#app .kx-tiles input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;cursor:pointer}
#app .kx-tiles input[type=range]:hover::-webkit-slider-thumb,#app .kx-tiles input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px #3fb95044}
#app .kx-field{display:grid;gap:8px}
#app .kx-sel{position:relative}
#app .kx-sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg);pointer-events:none}
#app .kx-sel select{width:100%;height:48px;padding:0 40px 0 16px;background:#0f1115;border:1px solid var(--ln);border-radius:10px;color:var(--tx);font-weight:700;font-size:15px;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .15s}
#app .kx-sel select:hover:not(:disabled),#app .kx-sel select:focus-visible{border-color:var(--gr);outline:none}
#app .kx-rc{gap:10px}
#app .kx-rc .kx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:10px;background:#262b34;border-color:transparent;font-size:15px;font-weight:700;transition:background .15s,transform .1s}
#app .kx-rc .kx-btn:hover:not(:disabled){background:#2f3540}
#app .kx-rc .kx-btn:active:not(:disabled){transform:scale(.98)}
#app .kx-go{height:56px;border-radius:10px;background:#1fd46a;color:#04170c;font-size:16px;font-weight:800;letter-spacing:.01em;text-transform:none;transition:filter .15s,transform .1s,box-shadow .15s}
#app .kx-go:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 0 0 3px #1fd46a33}
#app .kx-go:active:not(:disabled){transform:scale(.99)}
#app .kx-go:disabled{background:#1a5a38;color:#6fa688}
#app .kx-go.stop{background:var(--rd);color:#fff}
#app .kx-grid{gap:12px}
#app .kx-cell{border-radius:10px;background:#242932;border:0;color:#fff;font-size:clamp(18px,2.4vw,30px);font-weight:800;box-shadow:inset 0 -2px 0 #0003;transition:background .15s,color .15s,transform .12s,box-shadow .15s}
#app .kx-cell:hover:not(:disabled){background:#2f3540;transform:translateY(-1px)}
#app .kx-cell:active:not(:disabled){transform:scale(.97)}
#app .kx-cell.picked{background:#0f5a31;color:#27f27a;box-shadow:inset 0 0 0 1px #1fd46a55;animation:kxsel .15s ease-out}
#app .kx-cell.hit{background:#17a653;color:#fff;box-shadow:0 0 0 2px #27f27a88,0 0 22px #1fd46a55;border:0}
#app .kx-cell.miss{background:#242932;color:#ffffff59;border:0}
#app .kx-cell.miss.new{color:#fff}
#app .kx-tipwrap{position:relative;margin-top:2px}
#app .kx-strip{gap:0;padding:0;background:#12151b;border:1px solid var(--ln);border-radius:12px;overflow-x:auto;scrollbar-width:none}
#app .kx-strip::-webkit-scrollbar{display:none}
#app .kx-cat{flex:1 0 74px;gap:4px;padding:14px 6px 12px;background:transparent;border:0;border-radius:0;color:inherit;position:relative;transition:background .15s}
#app .kx-cat+.kx-cat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:#2a2f38}
#app .kx-cat .h{gap:7px;font-size:15px;color:#fff}
#app .kx-cat .h svg{color:#8b919c}
#app .kx-cat.pos .h svg{color:#8b919c}
#app .kx-cat b{font-size:15px;font-weight:600;color:#8b919c}
#app .kx-cat.pos b{color:#c9ced6}
#app .kx-cat:hover,#app .kx-cat.tip,#app .kx-cat:focus-visible{background:#1c2027;outline:none}
#app .kx-cat:first-child{border-radius:12px 0 0 12px}
#app .kx-cat:last-child{border-radius:0 12px 12px 0}
#app .kx-cat.on{background:#10261a}
#app .kx-cat.on .h svg{color:#27f27a}
#app .kx-cat.on b{color:#fff}
#app .kx-tip{position:absolute;left:0;right:0;bottom:calc(100% + 12px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px 16px 16px;background:#16191f;border:1px solid var(--ln);border-radius:12px;box-shadow:0 10px 30px #0009;z-index:4;animation:kxtip .14s ease-out}
#app .kx-tip[hidden]{display:none}
#app .kx-tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-7px;width:12px;height:12px;margin-left:-6px;background:#16191f;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);transform:rotate(45deg)}
#app .kx-tf{display:grid;gap:8px;min-width:0}
#app .kx-tf label{font-size:13px;font-weight:600;color:var(--mu)}
#app .kx-tv{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 14px;background:#0f1115;border:1px solid #20242c;border-radius:10px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;min-width:0}
#app .kx-tv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .kx-tv i{font-style:normal;color:var(--mu);flex:none}
#app .kx-tv .kx-coin{color:#E8B04B;margin-right:2px}
#app .kx-tv#kxTipProfit{justify-content:flex-start;gap:8px}
@keyframes kxtip{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#app .kx-hitline{padding:0 2px}
@media (max-width:1100px){#app .kx{grid-template-columns:300px minmax(0,1fr)}
#app .kx-play{padding:20px}
#app .kx-grid{gap:9px}
}
@media (max-width:860px){#app .kx{grid-template-columns:1fr;border-radius:12px}
#app .kx-panel{order:2;border-right:0;border-top:1px solid var(--ln);padding:16px}
#app .kx-play{order:1;padding:14px 12px}
#app .kx-grid{gap:6px}
#app .kx-cell{border-radius:8px;font-size:clamp(14px,4.6vw,22px)}
#app .kx-tip{grid-template-columns:1fr;gap:8px;padding:12px;bottom:calc(100% + 10px)}
#app .kx-tf{grid-template-columns:96px 1fr;align-items:center}
#app .kx-tv{height:38px}
#app .kx-cat{flex:1 0 62px;padding:12px 4px 10px}
#app .kx-go{height:52px}
}
@media (prefers-reduced-motion:reduce){#app .kx-tip,#app .kx-cell,#app .kx-go,#app .kx-cat{animation:none;transition:none}
}


#app .kx .kx-panel .mb-bet input{height:46px!important;padding:0 12px 0 42px!important;text-align:left!important;background-color:#0f1115!important;border:1px solid var(--ln)!important;border-radius:10px!important;font-weight:700;font-size:16px}
#app .kx .kx-panel .mb-bet input:focus-visible{border-color:var(--gr)!important;outline:none}
#app .kx .kx-tiles input[type=range]{-webkit-appearance:none!important;appearance:none!important;flex:1;width:auto!important;height:6px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:99px!important;background:linear-gradient(90deg,#1fd46a var(--p,0%),#262b34 var(--p,0%))!important;box-shadow:none!important}
#app .kx .kx-tipwrap{margin-top:84px}
#app .kx .kx-tip{padding:10px 14px 12px;gap:12px}
#app .kx .kx-tv{height:38px;padding:0 12px;font-size:14px}
#app .kx .kx-tf{gap:6px}
@media (max-width:860px){#app .kx .kx-tipwrap{margin-top:8px}#app .kx .kx-tf{grid-template-columns:96px 1fr}}
#app .kx .kx-play{background:#101318}
#app .kx .kx-stage{container-type:inline-size}
#app .kx .kx-cell{font-size:clamp(14px,4.4cqw,30px);border-radius:clamp(7px,1.8cqw,12px)}
#app .kx .kx-grid{gap:clamp(6px,1.6cqw,14px)}
#app .kx .kx-tv{padding:0 10px;font-size:13px}#app .kx .kx-tv span{overflow:visible;text-overflow:clip}
#app .kx .kx-strip{background:#16191f}
#app .kx .kx-panel .mb-bet input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23E8B04B'/%3E%3Cpath d='M13.5 6.5A5.5 5.5 0 1 0 17.5 14 4.5 4.5 0 0 1 13.5 6.5z' fill='%23fff6dd'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:12px 50%!important;background-size:20px!important}
@media (max-width:860px){#app .kx .kx-play{padding:12px 8px}#app .kx .kx-grid{gap:5px}}

/* V51 speed selector */
#app .kx-spd .kx-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#12151B;border:1px solid #2A2F38;border-radius:10px;padding:3px}
#app .kx-spd .kx-seg button{height:34px;border:0;border-radius:8px;background:transparent;color:#949BA6;font:700 12px/1 MoonInter,system-ui,sans-serif;cursor:pointer;transition:background .15s,color .15s}
#app .kx-spd .kx-seg button:hover{color:#F2F3F5;background:#242932}
#app .kx-spd .kx-seg button.on{background:#F5B84D;color:#0D0F13}

/* V52 – closer to Degen: tighter board→strip spacing, Degen-style tiles/buttons (radius, soft shadow, inset highlight) */
#app .kx .kx-play{align-content:start;gap:18px}
#app .kx .kx-tipwrap{margin-top:14px}
#app .kx .kx-cell{border-radius:6px;font-weight:700;background:#242932;box-shadow:0 2px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);transition:background .12s,transform .08s,box-shadow .12s}
#app .kx .kx-cell:hover:not(:disabled){background:#2d333d}
#app .kx .kx-cell:active:not(:disabled){transform:scale(.96)}
#app .kx .kx-cell.picked{background:#0F5A31;color:#27F27A;box-shadow:0 2px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(90,255,159,.15)}
#app .kx .kx-go{border-radius:8px;box-shadow:0 2px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
#app .kx .kx-rc .kx-btn{border-radius:8px;box-shadow:0 2px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
#app .kx .kx-panel .mb-bet button{border-radius:6px;box-shadow:0 2px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07)}
#app .kx .kx-panel{background:#12151B}
@media (max-width:860px){#app .kx .kx-cell{border-radius:5px}}

/* V53 – fix: with 10 picked numbers the 11-cell multiplier strip forced the single mobile column wider than the screen (board "zoomed in") */
#app .kx .kx-play,#app .kx .kx-stage,#app .kx .kx-tipwrap{min-width:0;max-width:100%}
#app .kx .kx-play{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){#app .kx{grid-template-columns:minmax(0,1fr)}}
#app .kx .kx-grid,.kx-cell{touch-action:manipulation}
#app .kx .kx-strip{max-width:100%}

/* V53 – hit animation: a diamond pops out of the tile (Degen-style pop + ring burst), number steps aside */
#app .kx .kx-cell{position:relative;overflow:visible}
#app .kx .kx-cell .kx-gem{position:absolute;inset:14%;width:72%;height:72%;margin:auto;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(23,201,100,.55));transform-origin:50% 55%}
#app .kx .kx-cell.hit{background:#0F5A31;color:transparent;box-shadow:0 2px 2px rgba(0,0,0,.25),inset 0 0 0 1px rgba(39,242,122,.55),0 0 18px rgba(31,212,106,.35)}
#app .kx .kx-cell.hit .kx-gem{animation:kxGemPop .5s cubic-bezier(.2,1.5,.4,1) both}
#app .kx .kx-cell.hit::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(39,242,122,.8);pointer-events:none;opacity:0}
#app .kx .kx-cell.hit.new::after{animation:kxRing .55s ease-out}
#app .kx .kx-cell.hit.new{animation:kxHitPulse .45s ease-out}
#app .kx .kx-cell.miss.new{animation:kxMissFlash .32s ease-out}
@keyframes kxGemPop{0%{transform:scale(0) rotate(-24deg);opacity:0}55%{transform:scale(1.28) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes kxRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes kxHitPulse{0%{transform:scale(1);filter:brightness(1)}30%{transform:scale(1.14);filter:brightness(1.35)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes kxMissFlash{0%{background:#3a414d}100%{background:#242932}}
@media (prefers-reduced-motion:reduce){#app .kx .kx-cell.hit .kx-gem,#app .kx .kx-cell.hit.new::after,#app .kx .kx-cell.hit.new,#app .kx .kx-cell.miss.new{animation:none}}

/* V53b – animation copied from Degen's keno (read from their CSS): board scale-up on bet, gem text scale-in 0.3 s + 1 s green glow border on win,
   lost drawn number: red digit, 50 % opacity, tile shrinks away, 1 s red blurred flash */
#app .kx .kx-cell{isolation:isolate}
#app .kx .kx-grid.kx-start .kx-cell{animation:kxScaleUp .3s ease both}
@keyframes kxScaleUp{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes kxGlowFlash{0%,100%{opacity:0}20%{opacity:.5}}
@keyframes kxShrinkAway{0%,99%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
#app .kx .kx-cell.hit::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(39,242,122,.8);opacity:0;pointer-events:none}
#app .kx .kx-cell.hit.new::before{animation:kxRing .55s ease-out}
#app .kx .kx-cell.hit::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid #00FF6A;opacity:0;pointer-events:none}
#app .kx .kx-cell.hit.new::after{animation:kxGlowFlash 1s ease both}
#app .kx .kx-cell.hit .kx-gem{animation:kxGemPop .3s cubic-bezier(.2,1.6,.4,1) both}
#app .kx .kx-cell.miss{background:rgba(36,41,50,.25);color:#E34D59;opacity:.55;box-shadow:inset 0 1px 0 rgba(42,47,56,.25),0 2px 2px rgba(0,0,0,.2)}
#app .kx .kx-cell.miss::before{content:"";position:absolute;left:35%;top:35%;width:30%;aspect-ratio:1;border-radius:50%;background:#E34D59;filter:blur(16px);opacity:0;z-index:3;pointer-events:none}
#app .kx .kx-cell.miss.new::before{animation:kxGlowFlash 1s ease both}
#app .kx .kx-cell.miss::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#242932;box-shadow:inset 0 1px 0 #2A2F38,0 2px 2px rgba(0,0,0,.25);z-index:-1;opacity:0;pointer-events:none}
#app .kx .kx-cell.miss.new::after{opacity:1;animation:kxShrinkAway .3s ease forwards}
#app .kx .kx-cell.miss.new{animation:none;color:#E34D59}
@media (prefers-reduced-motion:reduce){#app .kx .kx-grid.kx-start .kx-cell,#app .kx .kx-cell.hit.new::after,#app .kx .kx-cell.hit.new::before,#app .kx .kx-cell.miss.new::before,#app .kx .kx-cell.miss.new::after{animation:none}}

/* V53c – emerald-cut gem sits BEHIND the number (as on Degen); number turns dark green on a hit */
#app .kx .kx-cell .kx-gem{inset:6%;width:88%;height:88%;z-index:-1}
#app .kx .kx-cell.hit{color:#00401B;font-weight:800}

/* V67 – Degen tile finish: 4px radius, #212127 tile, 700 weight; hint text identical to Degen */
#app .kx .kx-cell{border-radius:4px;background:#212127;font-weight:700;box-shadow:none}
@media (max-width:860px){#app .kx .kx-cell{border-radius:4px}}