.kx.m-stage {
    --kx-ink: #060818;
    --kx-cyan: #6ee7ff;
    --kx-cyan-2: #b9f4ff;
    --kx-vio: #8d6bff;
    --kx-gold: #ffc94a;
    --kx-gold-2: #fff0b8;
    --kx-line: rgba(160,190,255,.14);
    container: kx / inline-size;
    isolation: isolate; overflow: hidden;
    padding: 18px 20px 20px; border-radius: 24px;
    background: var(--kx-ink);
    border-color: rgba(141,107,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 26px 60px -30px rgba(0,0,0,.95);
}
.kx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; overflow: hidden;
    background:
        radial-gradient(55% 40% at 82% 8%, rgba(141,107,255,.30), transparent 70%),
        radial-gradient(50% 45% at 10% 90%, rgba(40,190,230,.16), transparent 70%),
        radial-gradient(40% 30% at 45% 55%, rgba(255,120,190,.06), transparent 70%),
        linear-gradient(165deg, #0d0b2c, #070a1d 50%, #050716);
}

.kx-neb {
    position: absolute; left: 30%; top: -30%; width: 90%; aspect-ratio: 1.6;
    background: radial-gradient(closest-side, rgba(141,107,255,.18), rgba(110,231,255,.06) 55%, transparent);
    filter: blur(8px);
    animation: kxNeb 14s ease-in-out infinite alternate;
}
@keyframes kxNeb { to { transform: translate(-12%, 10%) scale(1.15) rotate(8deg); opacity: .7; } }

.kx-far, .kx-near { position: absolute; inset: -50% 0 0; }
.kx-far {
    opacity: .55;
    background-image:
        radial-gradient(1px 1px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 23% 67%, #cfe, transparent),
        radial-gradient(1px 1px at 41% 31%, #fff, transparent), radial-gradient(1px 1px at 57% 83%, #dde, transparent),
        radial-gradient(1px 1px at 72% 18%, #fff, transparent), radial-gradient(1px 1px at 89% 54%, #cdf, transparent),
        radial-gradient(1px 1px at 33% 94%, #fff, transparent), radial-gradient(1px 1px at 95% 88%, #fff, transparent);
    background-size: 260px 260px;
    animation: kxDrift 120s linear infinite;
}
.kx-near {
    opacity: .8;
    background-image:
        radial-gradient(1.6px 1.6px at 15% 40%, #fff, transparent), radial-gradient(1.4px 1.4px at 62% 12%, var(--kx-cyan-2), transparent),
        radial-gradient(1.8px 1.8px at 84% 70%, #ffe9b0, transparent), radial-gradient(1.4px 1.4px at 38% 78%, #fff, transparent);
    background-size: 420px 420px;
    animation: kxDrift 70s linear infinite, kxTw 4s ease-in-out infinite;
}
@keyframes kxDrift { to { transform: translateY(33.33%); } }
@keyframes kxTw { 50% { opacity: .45; } }

.kx-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
    margin-bottom: 14px;
}

.kx-scope {
    position: relative; width: 116px; aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center; align-content: center;
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(110,231,255,.14) 0 calc(50% + .5px), transparent 0),
        linear-gradient(0deg, transparent calc(50% - .5px), rgba(110,231,255,.14) 0 calc(50% + .5px), transparent 0),
        radial-gradient(circle, transparent 0 30%, rgba(110,231,255,.10) 30.5% 31.5%, transparent 32% 58%, rgba(110,231,255,.08) 58.5% 59.5%, transparent 60%),
        radial-gradient(circle at 35% 30%, #1a2058, #0a0d2a 70%);
    box-shadow: 0 0 0 5px rgba(12,14,40,.9), 0 0 0 6px rgba(141,107,255,.35), 0 0 32px -4px rgba(110,231,255,.35), inset 0 0 22px rgba(0,0,0,.7);
}
.kx-dial { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; }
.kx-dial path { fill: none; stroke: rgba(160,190,255,.18); stroke-width: 5; stroke-linecap: round; transition: stroke .25s; }
.kx-dial .rim { fill: none; stroke: none; }
.kx-dial path.on { stroke: var(--kx-cyan); filter: drop-shadow(0 0 3px rgba(110,231,255,.8)); }
.kx-dial path.hit { stroke: var(--kx-gold); filter: drop-shadow(0 0 4px rgba(255,201,74,.9)); }
.kx-sweep {
    position: absolute; inset: 0; border-radius: 50%; opacity: .35;
    background: conic-gradient(from 0deg, transparent 0 290deg, rgba(110,231,255,.05) 300deg, rgba(110,231,255,.55) 360deg);
    -webkit-mask: radial-gradient(circle, #000 68%, transparent 70%); mask: radial-gradient(circle, #000 68%, transparent 70%);
    animation: kxSweep 6s linear infinite;
}
.kx.is-drawing .kx-sweep { opacity: 1; animation-duration: 1.1s; }
@keyframes kxSweep { to { transform: rotate(360deg); } }
.kx-now {
    position: relative; z-index: 1;
    font-family: var(--f-display); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
    color: var(--kx-cyan-2); text-shadow: 0 0 14px rgba(110,231,255,.7);
    font-variant-numeric: tabular-nums;
}
.kx-now.hit { color: var(--kx-gold-2); text-shadow: 0 0 16px rgba(255,201,74,.9); }
.kx-now.flip { animation: kxFlip .34s var(--ease); }
@keyframes kxFlip { 0% { transform: scale(.4); opacity: 0; filter: blur(4px); } 60% { transform: scale(1.15); } }
.kx-step {
    position: relative; z-index: 1; margin-top: 4px;
    color: rgba(185,244,255,.6); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

.kx-read { min-width: 0; display: grid; gap: 10px; }
.kx-score { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.kx-score small { color: rgba(185,244,255,.55); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.kx-score b {
    font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: .9; letter-spacing: -.05em;
    color: #fff; font-variant-numeric: tabular-nums;
}
.kx-score b.bump { animation: kxBump .42s var(--ease); color: var(--kx-gold-2); }
@keyframes kxBump { 40% { transform: scale(1.3); text-shadow: 0 0 22px rgba(255,201,74,.9); } }
.kx-score > span { color: var(--muted); font-size: 13px; font-weight: 700; }
.kx-score em { font-style: normal; color: var(--text); }
.kx-mult {
    margin-left: auto; font-style: normal; font-family: var(--f-display); font-size: 17px; font-weight: 800;
    padding: 6px 12px; border-radius: 999px; color: var(--muted);
    background: rgba(160,190,255,.07); box-shadow: inset 0 0 0 1px var(--kx-line);
}
.kx-mult.idle { color: var(--kx-gold-2); font-size: 13px; }
.kx-mult.live { color: #2a1a00; background: linear-gradient(135deg, var(--kx-gold-2), var(--kx-gold) 55%, #f29a1f); box-shadow: 0 0 22px -4px rgba(255,201,74,.8); }

.kx-log { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.kx-log.is-20 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.kx-log u {
    text-decoration: none;
    height: 26px; border-radius: 8px; display: grid; place-items: center;
    background: rgba(160,190,255,.05); box-shadow: inset 0 0 0 1px rgba(160,190,255,.09);
}
.kx-log.is-20 u { height: 20px; border-radius: 6px; }
.kx-log i {
    font-style: normal; font-size: 12px; font-weight: 800; color: var(--kx-cyan-2);
    font-variant-numeric: tabular-nums; animation: kxIn .3s var(--ease);
}
.kx-log.is-20 i { font-size: 10.5px; }
.kx-log u:has(i) { background: rgba(110,231,255,.09); box-shadow: inset 0 0 0 1px rgba(110,231,255,.25); }
.kx-log u:has(i.hit) { background: linear-gradient(135deg, var(--kx-gold-2), var(--kx-gold)); box-shadow: 0 0 12px -2px rgba(255,201,74,.8); }
.kx-log i.hit { color: #3a2400; }
@keyframes kxIn { from { transform: translateY(-8px); opacity: 0; } }

.kx-lion { position: relative; width: 132px; height: 124px; margin: -8px -6px -14px 0; align-self: end; }
.kx-lion img {
    position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
    opacity: 0; transform: translateY(6px) scale(.94); transform-origin: 50% 100%;
    transition: opacity .25s, transform .35s var(--ease);
    -webkit-mask: linear-gradient(180deg, #000 72%, transparent 98%); mask: linear-gradient(180deg, #000 72%, transparent 98%);
}

.kx-lion::before {
    content: ''; position: absolute; left: 50%; top: 45%; width: 110%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(141,107,255,.28), transparent); pointer-events: none;
}
.kx-lion[data-pose="calm"] .p-calm, .kx-lion[data-pose="wow"] .p-wow, .kx-lion[data-pose="wild"] .p-wild { opacity: 1; transform: none; }
.kx-lion { animation: kxFloat 5s ease-in-out infinite; }
@keyframes kxFloat { 50% { transform: translateY(-4px); } }
.kx-lion.nod img { animation: kxNod .4s var(--ease); }
@keyframes kxNod { 45% { transform: scale(1.08) rotate(4deg); } }
.kx-lion.jump img { animation: kxJump .7s var(--ease); }
@keyframes kxJump { 35% { transform: translateY(-16px) scale(1.1); } 70% { transform: translateY(2px); } }
.kx-lion.shake img { animation: kxShake .5s ease; }
@keyframes kxShake { 25% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } }
.kx-say {

    position: absolute; left: 50%; bottom: 10px; z-index: 3;
    width: max-content; max-width: 150px; padding: 7px 11px; border-radius: 14px;
    background: rgba(233,246,255,.96); color: #121638; font-size: 11.5px; font-weight: 800; line-height: 1.2; text-align: center;
    box-shadow: 0 10px 22px -8px rgba(0,0,0,.9);
    opacity: 0; transform: translate(-50%, 8px) scale(.9); transform-origin: 50% 100%; pointer-events: none;
    transition: opacity .2s, transform .28s var(--ease);
}
.kx-say.win { background: linear-gradient(135deg, var(--kx-gold-2), var(--kx-gold)); color: #3a2400; }
.kx-say.on { opacity: 1; transform: translate(-50%, 0); }

.kx-body { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 14px; align-items: stretch; }
.kx-map {
    min-width: 0; padding: 12px 14px 16px; border-radius: 20px;
    background: radial-gradient(100% 80% at 50% 0%, rgba(141,107,255,.08), transparent 70%), rgba(8,10,32,.55);
    box-shadow: inset 0 0 0 1px rgba(141,107,255,.16), inset 0 20px 40px -30px rgba(110,231,255,.3);
}
.kx-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kx-bar .k { flex: 1; min-width: 0; color: rgba(185,244,255,.55); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kx-bar .k b { margin-left: 6px; color: var(--text); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.kx-bar .acts { flex: none; display: flex; gap: 6px; }
.kx-bar button {
    height: 32px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
    color: var(--kx-cyan-2); font: inherit; font-size: 12px; font-weight: 800;
    background: rgba(110,231,255,.08); box-shadow: inset 0 0 0 1px rgba(110,231,255,.22);
    transition: background .18s, color .18s, transform .18s var(--ease);
}
.kx-bar button:hover { background: rgba(110,231,255,.16); color: #fff; }
.kx-bar button:active { transform: scale(.95); }
.kx-bar button[data-keno-clear] { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--kx-line); }

.kx-sky { position: relative; }
.kx-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.kx-lines .pk { fill: none; stroke: rgba(110,231,255,.38); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; stroke-linejoin: round; animation: kxAnts 1.4s linear infinite; }
@keyframes kxAnts { to { stroke-dashoffset: -18; } }
.kx.is-drawing .kx-lines .pk, .kx-sky:has(.is-done) .kx-lines .pk { opacity: .3; }
.kx-lines .gd { fill: none; stroke: var(--kx-gold); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255,201,74,.9)); }
.kx-lines .gd.new { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: kxDraw .45s ease-out forwards; }
@keyframes kxDraw { to { stroke-dashoffset: 0; } }

.kx-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(var(--hc, 17), minmax(0, 1fr)); gap: 6px 0;
}
.kx-grid button {
    grid-column: span 2; position: relative;
    width: 100%; aspect-ratio: 1.12; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; color: rgba(200,215,255,.62);
    -webkit-tap-highlight-color: transparent;
}
.kx-grid button.sh { grid-column: 2 / span 2; }
.kx-grid.is-80 { gap: 3px 0; }

.kx-grid button::before {
    content: ''; position: absolute; left: 50%; top: 50%; height: 84%; aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 35% 30%, rgba(160,190,255,.12), rgba(20,24,64,.65) 70%);
    box-shadow: inset 0 0 0 1px rgba(160,190,255,.16), 0 4px 12px -6px rgba(0,0,0,.8);
    transition: background .2s, box-shadow .2s, transform .2s var(--ease);
}

.kx-grid button::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 40deg, rgba(185,244,255,.9) 45deg, transparent 50deg 130deg, rgba(185,244,255,.9) 135deg, transparent 140deg 220deg, rgba(185,244,255,.9) 225deg, transparent 230deg 310deg, rgba(185,244,255,.9) 315deg, transparent 320deg);
    -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 62%); mask: radial-gradient(circle, #000 0 20%, transparent 62%);
    transition: opacity .25s, transform .3s var(--ease);
}
.kx-grid button b {
    position: relative; z-index: 1; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
    transition: color .2s;
}
.kx-grid.is-80 button b { font-size: 11px; }
.kx-grid button:hover::before { box-shadow: inset 0 0 0 1.5px rgba(110,231,255,.55), 0 0 16px -4px rgba(110,231,255,.6); }
.kx-grid button:hover { color: #fff; }
.kx-grid button:active::before { transform: translate(-50%, -50%) scale(.9); }

.kx-grid button.on { color: #06142a; }
.kx-grid button.on::before {
    background: radial-gradient(circle at 38% 32%, #fff, var(--kx-cyan-2) 30%, var(--kx-cyan) 60%, #3aa3d6);
    box-shadow: 0 0 0 2px rgba(110,231,255,.25), 0 0 20px -2px rgba(110,231,255,.85);
    animation: kxPick .35s var(--ease);
}
.kx-grid button.on::after { opacity: .75; transform: translate(-50%, -50%) scale(1); animation: kxGlint 3.2s ease-in-out infinite; animation-delay: var(--tw, 0s); }
@keyframes kxPick { 0% { transform: translate(-50%, -50%) scale(.5); } 60% { transform: translate(-50%, -50%) scale(1.14); } }
@keyframes kxGlint { 50% { opacity: .25; transform: translate(-50%, -50%) scale(.85) rotate(20deg); } }

.kx-grid button.aim::before { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 5px rgba(110,231,255,.2), 0 0 22px rgba(110,231,255,.6); }

.kx-grid button.draw:not(.on) { color: rgba(255,255,255,.9); }
.kx-grid button.draw:not(.on)::before {
    background: radial-gradient(circle at 40% 35%, rgba(200,190,255,.5), rgba(90,80,170,.55) 55%, rgba(40,36,90,.8));
    box-shadow: inset 0 0 0 1px rgba(200,190,255,.4), inset 0 -4px 8px rgba(0,0,0,.35);
    animation: kxLand .4s var(--ease);
}
@keyframes kxLand { 0% { transform: translate(-50%, -50%) scale(1.3); filter: brightness(2); } }

.kx-grid button.hit { color: #3a2400; }
.kx-grid button.hit::before {
    background: radial-gradient(circle at 38% 32%, #fff, var(--kx-gold-2) 28%, var(--kx-gold) 60%, #e88a12);
    box-shadow: 0 0 0 2px rgba(255,201,74,.35), 0 0 28px 2px rgba(255,201,74,.75);
    animation: kxSun .5s var(--ease);
}
.kx-grid button.hit::after {
    opacity: 1; width: 150%;
    background: repeating-conic-gradient(from 0deg, rgba(255,220,120,.85) 0 6deg, transparent 6deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 32%, #000 34%, transparent 66%); mask: radial-gradient(circle, transparent 0 32%, #000 34%, transparent 66%);
    animation: kxRays 7s linear infinite;
}
@keyframes kxSun { 0% { transform: translate(-50%, -50%) scale(.6); } 55% { transform: translate(-50%, -50%) scale(1.25); } }
@keyframes kxRays { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.kx-grid button.miss { color: rgba(185,244,255,.7); }
.kx-grid button.miss::before { background: radial-gradient(circle at 38% 32%, rgba(110,231,255,.35), rgba(30,60,100,.6)); box-shadow: inset 0 0 0 1.5px rgba(110,231,255,.45); }
.kx-grid button.miss::after { opacity: 0; }

.kx-grid.is-done button:not(.on):not(.draw) { opacity: .45; }

.kx-scale {
    min-width: 0; display: flex; flex-direction: column; gap: 10px;
    padding: 14px 12px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,201,74,.07), rgba(141,107,255,.06) 60%, rgba(8,10,32,.5));
    box-shadow: inset 0 0 0 1px rgba(255,201,74,.14);
}
.kx-scale .eyebrow { color: rgba(255,230,160,.7); }
.kx-steps { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 0; }

.kx-steps:has(.kp)::before {
    content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, rgba(255,201,74,.5), rgba(110,231,255,.25));
}
.kx-steps .kp {
    position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 6px;
    padding: 6px 8px 6px 0; border-radius: 10px;
    transition: background .2s, box-shadow .2s;
}
.kx-steps .kp i {
    width: 10px; height: 10px; margin-left: 5px; border-radius: 50%;
    background: #141a44; box-shadow: inset 0 0 0 2px rgba(160,190,255,.35);
    transition: background .2s, box-shadow .2s, transform .2s var(--ease);
}
.kx-steps .kp small { display: grid; color: var(--muted); font-size: 11.5px; font-weight: 800; line-height: 1.15; }
.kx-steps .kp b { font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.kx-steps .kp:first-child b { color: var(--kx-gold-2); }
.kx-steps .kp.got i { background: var(--kx-cyan); box-shadow: 0 0 10px rgba(110,231,255,.8); }
.kx-steps .kp.now, .kx-steps .kp.hit { background: rgba(255,201,74,.14); box-shadow: inset 0 0 0 1px rgba(255,201,74,.45); }
.kx-steps .kp.now i, .kx-steps .kp.hit i { background: var(--kx-gold); box-shadow: 0 0 12px rgba(255,201,74,.95); transform: scale(1.35); }
.kx-steps .kp.now small, .kx-steps .kp.hit small { color: var(--kx-gold-2); }
.kx-steps .kp.hit { animation: kxStep .6s var(--ease); }
@keyframes kxStep { 40% { transform: scale(1.06); } }
.kx-empty { margin: auto 0; color: var(--faint); font-size: 11.5px; font-weight: 700; line-height: 1.45; text-align: center; }
.kx-top { color: var(--kx-gold-2); font-size: 11.5px; font-weight: 800; text-align: center; line-height: 1.3; }

.kx.is-win { box-shadow: inset 0 0 0 1px rgba(255,201,74,.35), 0 0 60px -20px rgba(255,201,74,.55), 0 26px 60px -30px rgba(0,0,0,.95); }

.kx-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.kx-comet {
    position: absolute; width: 0; height: 0;
}
.kx-comet::before {
    content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle, #fff 20%, var(--kx-cyan-2) 45%, rgba(110,231,255,0) 72%);
    box-shadow: 0 0 18px 6px rgba(110,231,255,.6);
}
.kx-comet::after {
    content: ''; position: absolute; right: 2px; top: -3px; width: 90px; height: 6px; border-radius: 6px;
    background: linear-gradient(90deg, transparent, rgba(110,231,255,.25) 40%, rgba(220,250,255,.95));
    filter: blur(.6px);
}
.kx-comet.hit::before { background: radial-gradient(circle, #fff 20%, var(--kx-gold-2) 45%, rgba(255,201,74,0) 72%); box-shadow: 0 0 20px 7px rgba(255,201,74,.65); }
.kx-comet.hit::after { background: linear-gradient(90deg, transparent, rgba(255,201,74,.3) 40%, rgba(255,245,210,.95)); }
.kx-ring {
    position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(200,190,255,.8);
    animation: kxRing .6s ease-out forwards;
}
.kx-ring.gold { box-shadow: inset 0 0 0 3px rgba(255,201,74,.95), 0 0 20px rgba(255,201,74,.6); }
@keyframes kxRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.kx-spark {
    position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
    background: var(--kx-gold-2); box-shadow: 0 0 8px var(--kx-gold);
    animation: kxSpark .7s ease-out forwards;
}
@keyframes kxSpark { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
.kx-fall {
    position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    background: var(--kx-gold-2);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 6px var(--kx-gold));
    animation: kxFall 1.3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes kxFall {
    0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
    15% { opacity: 1; }
    to { transform: translate(var(--x), calc(var(--y) + 60px)) scale(1) rotate(200deg); opacity: 0; }
}
.kx-float {
    position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
    font-family: var(--f-display); font-size: 22px; font-weight: 800; color: var(--kx-gold-2);
    text-shadow: 0 0 18px rgba(255,201,74,.9), 0 3px 0 rgba(0,0,0,.4);
    animation: kxUp 1.6s ease-out forwards;
}
@keyframes kxUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } to { opacity: 0; transform: translate(-50%, -190%); } }

.app[data-tint="keno"] {
    background:
        radial-gradient(900px 520px at 70% -10%, rgba(141,107,255,.16), transparent 62%),
        radial-gradient(700px 420px at 20% 110%, rgba(110,231,255,.07), transparent 62%),
        var(--screen);
}
body[data-page="keno"] .format-row .f.on,
body[data-page="keno"] .dock-rows .kn-opts .format-row .f.on {
    background: linear-gradient(135deg, #5fd8ff, #7a6bff 70%);
    box-shadow: 0 10px 22px -12px rgba(110,160,255,.9), inset 0 1px 0 rgba(255,255,255,.35);
}
body[data-page="keno"] .format-row .f.on small { color: rgba(255,255,255,.85); }
body[data-page="keno"] [data-keno-play].btn-acc {
    background: linear-gradient(120deg, #4fd2ff, #7b68ff 55%, #b35cff);
    box-shadow: 0 14px 30px -14px rgba(123,104,255,.95), inset 0 1px 0 rgba(255,255,255,.3);
}

html.is-lite .kx-neb, html.is-lite .kx-far, html.is-lite .kx-near,
html.is-lite .kx-lion, html.is-lite .kx-sweep,
html.is-lite .kx-grid button.on::after, html.is-lite .kx-grid button.hit::after,
html.is-lite .kx-lines .pk { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .kx-neb, .kx-far, .kx-near, .kx-lion, .kx-sweep, .kx-lines .pk,
    .kx-grid button::before, .kx-grid button::after { animation: none !important; }
}

@container kx (max-width: 640px) {
    .kx-body { grid-template-columns: minmax(0, 1fr); }
    .kx-scale { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 6px 10px; }
    .kx-scale .eyebrow { flex: none; }
    .kx-top { margin-left: auto; text-align: right; }
    .kx-steps {

        order: 3; flex: 1 1 100%; flex-direction: row; justify-content: flex-start; gap: 6px;
        overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px;
    }
    .kx-steps::-webkit-scrollbar { display: none; }
    .kx-steps:has(.kp)::before { content: none; }
    .kx-steps .kp { order: var(--k); flex: none; grid-template-columns: auto auto; gap: 2px 8px; padding: 6px 10px; background: rgba(160,190,255,.05); box-shadow: inset 0 0 0 1px var(--kx-line); }
    .kx-steps .kp i { display: none; }
    .kx-empty { margin: 0; text-align: left; }
    .kx-scope { width: 96px; }
    .kx-now { font-size: 30px; }
    .kx-lion { width: 104px; height: 100px; }
    .kx-score b { font-size: 32px; }
}
@container kx (max-width: 470px) {
    .kx-head { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding-right: 56px; }

    .kx-lion { position: absolute; right: 10px; top: 8px; width: 54px; height: 54px; margin: 0; border-radius: 50%; overflow: hidden;
        background: radial-gradient(circle at 50% 35%, #3a2a8a, #140f3a); box-shadow: 0 0 0 2px rgba(141,107,255,.45), 0 0 16px -2px rgba(141,107,255,.6); }
    .kx-lion img { width: 165%; max-width: none; height: auto; left: -26%; right: auto; top: 0; bottom: auto; -webkit-mask: none; mask: none; filter: none; }
    .kx-say { display: none; }
    .kx-mult { margin-left: 0; }
}

@media (max-width: 760px) {
    .kx.m-stage { padding: 12px 12px 14px; border-radius: 20px; }
    .kx-head { gap: 10px; margin-bottom: 10px; padding-right: 48px; }
    .kx-scope { width: 70px; box-shadow: 0 0 0 3px rgba(12,14,40,.9), 0 0 0 4px rgba(141,107,255,.35), 0 0 20px -4px rgba(110,231,255,.35), inset 0 0 14px rgba(0,0,0,.7); }
    .kx-dial path { stroke-width: 6; }
    .kx-now { font-size: 22px; }
    .kx-step { font-size: 8px; margin-top: 2px; letter-spacing: .08em; }
    .kx-read { gap: 7px; }
    .kx-score { gap: 6px; }
    .kx-score small { font-size: 9px; }
    .kx-score b { font-size: 26px; }
    .kx-score > span { font-size: 11.5px; }
    .kx-mult { font-size: 13px; padding: 4px 9px; }
    .kx-lion { width: 46px; height: 46px; right: 8px; top: 8px; }
    .kx-log { gap: 3px; }
    .kx-log u { height: 20px; border-radius: 6px; }
    .kx-log i { font-size: 10.5px; }
    .kx-log.is-20 u { height: 10px; border-radius: 4px; }
    .kx-log.is-20 i { font-size: 0; }

    .kx-body { gap: 10px; }
    .kx-map { padding: 8px 8px 10px; border-radius: 16px; }
    .kx-bar { margin-bottom: 6px; }
    .kx-bar .k { display: none; }
    .kx-bar .acts { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
    .kx-bar button { height: 32px; }
    .kx-grid { gap: 2px 0; }
    .kx-grid button b { font-size: 12.5px; }
    .kx-grid.is-80 button b { font-size: 10px; }
    .kx-grid button::before { height: 90%; }

    .kx-sky { width: min(100%, calc(var(--fit, 999px) * 1.8)); margin-inline: auto; }
    .kx-sky:has(.is-80) { width: min(100%, calc(var(--fit, 999px) * 1.34)); }
}