body { margin: 0; background: #070812; }
.ktown { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 26px 14px 128px; box-sizing: border-box; background: #070812 url('./assets/street.webp') center / cover no-repeat; min-height: 100%; }
.ktown::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,5,16,.62), rgba(4,5,16,.34) 40%, rgba(4,5,16,.7)); pointer-events: none; }

/* ---- top win plaque (the "128x" tablet in the reference) ---- */
.plaque { position: relative; z-index: 3; min-width: 132px; padding: 5px 22px 7px; text-align: center; border-radius: 9px; background: linear-gradient(180deg, #131c33, #0a1020); box-shadow: inset 0 0 0 2px #c9a227, inset 0 0 0 4px #060a16, 0 6px 18px rgba(0,0,0,.65); color: #ffd94d; font-family: 'Red Hat Display', system-ui, sans-serif; font-size: 24px; font-weight: 900; letter-spacing: .03em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,.8); transition: opacity .3s; }
.plaque.dim { opacity: .38; color: #aab4cc; box-shadow: inset 0 0 0 2px #3a4270, inset 0 0 0 4px #060a16, 0 6px 18px rgba(0,0,0,.65); }
.plaque.bump { animation: plaquebump .32s ease-out; }
@keyframes plaquebump { 0% { transform: scale(1); } 35% { transform: scale(1.13); } 100% { transform: scale(1); } }

/* ---- frame + lives rail ---- */
.framewrap { position: relative; z-index: 2; display: flex; align-items: stretch; gap: 10px; max-width: 100%; }
.frame { position: relative; padding: 12px 12px 10px; border-radius: 18px; background: linear-gradient(180deg, #182540, #0a1122); box-shadow: inset 0 0 0 2px #2e4d80, inset 0 0 0 5px #05080f, inset 0 1px 0 rgba(140,180,255,.25), 0 24px 60px rgba(0,0,0,.72); }
.frame::before { content: ''; position: absolute; top: 3px; left: 8%; right: 8%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(126,200,255,.75), transparent); pointer-events: none; }
.lives { width: 66px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(16,24,46,.94), rgba(8,12,26,.94)); box-shadow: inset 0 0 0 2px #2e4d80, inset 0 0 0 4px #05080f, 0 18px 44px rgba(0,0,0,.6); transition: opacity .3s, transform .3s; }
.lives[hidden] { display: none; }
.lv-title { color: #eef2fb; font-family: 'Red Hat Display', system-ui, sans-serif; font-size: 14px; font-weight: 900; letter-spacing: .12em; }
.lv-count { color: #ffd94d; font-family: 'Red Hat Display', system-ui, sans-serif; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.lv-lock { position: relative; width: 28px; height: 28px; color: #6b7690; opacity: .9; margin: 2px 0 4px; }
.lv-lock svg { width: 100%; height: 100%; display: block; }
.lv-lock::after { content: '🔒'; position: absolute; right: -10px; bottom: -5px; font-size: 10px; filter: none; }
.lv-lock.gone { display: none; }
.lv-hearts { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.heart { display: block; width: 30px; height: 30px; color: #ff2e4d; transition: color .25s, transform .25s; }
.heart svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 7px rgba(255,46,77,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.heart.off { color: #525c73; transform: scale(.9); }
.heart.off svg { filter: none; }
.heart.lose { animation: heartlose .55s ease-out; }
.heart.gain { animation: heartpop .45s ease-out; }
@keyframes heartlose { 0% { transform: translateX(0) scale(1); } 20% { transform: translateX(-4px) scale(1.15) rotate(-7deg); } 45% { transform: translateX(4px) scale(1.1) rotate(6deg); } 70% { transform: translateX(-3px); } 100% { transform: scale(.9); } }
@keyframes heartpop { 0% { transform: scale(.4); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }

.banner { position: relative; height: 22px; margin-bottom: 6px; font-family: 'Red Hat Display', 'Figtree', system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.85); text-align: center; color: rgba(224,232,255,.92); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid, .bgrid { position: relative; display: grid; gap: 5px; padding: 8px; border-radius: 13px; background: rgba(5, 7, 20, .93); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.06); }
.grid { --c: min(84px, (100cqi - 130px) / 5); grid-template-columns: repeat(5, var(--c)); }
.bgrid { --c: min(62px, (100cqi - 176px) / 7); grid-template-columns: repeat(7, var(--c)); grid-template-rows: repeat(5, var(--c)); grid-auto-flow: column; }
@media (max-width: 560px) { .grid { --c: min(84px, (100cqi - 64px) / 5); } .bgrid { --c: min(62px, (100cqi - 138px) / 7); } .lives { width: 46px; } .heart { width: 21px; height: 21px; } .lv-lock { width: 19px; height: 19px; } .lv-title { font-size: 10px; } .lv-count { font-size: 12px; } .ktown { padding-bottom: 208px; } }
.grid[hidden], .bgrid[hidden] { display: none; }
.col { position: relative; height: calc(var(--c) * 5); overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.cell { position: absolute; left: 0; top: 0; width: var(--c); height: var(--c); display: grid; place-items: center; transition: transform 300ms cubic-bezier(.25, 1.25, .35, 1), box-shadow 160ms, background 160ms, opacity 200ms, scale 200ms; border-radius: 9px; }
.cell img { width: 94%; height: 94%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.grid.spinning .cell img { animation: imgjitter .11s linear infinite alternate; }
@keyframes imgjitter { from { transform: translateY(-7%); } to { transform: translateY(7%); } }
.cell .val, .bcell .val { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); padding: 0 6px; border-radius: 99px; background: rgba(24, 4, 44, .88); box-shadow: inset 0 0 0 1px rgba(216, 164, 255, .75), 0 0 10px rgba(168, 85, 247, .45); color: #f3d5ff; font-family: 'Red Hat Display', system-ui, sans-serif; font-size: calc(var(--c) * .21); font-weight: 800; line-height: 1.5; pointer-events: none; white-space: nowrap; }
.cell .val { animation: valglow 1.7s ease-in-out infinite; }
@keyframes valglow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(216,164,255,.75), 0 0 7px rgba(168,85,247,.35); } 50% { box-shadow: inset 0 0 0 1px rgba(216,164,255,1), 0 0 16px rgba(168,85,247,.8); } }
.cell.won { background: rgba(255, 217, 77, .16); animation: wonpulse .45s ease-in-out infinite alternate; }
@keyframes wonpulse { from { box-shadow: inset 0 0 0 2px rgba(255,217,77,.75), 0 0 10px rgba(255,217,77,.25); } to { box-shadow: inset 0 0 0 2px rgba(255,217,77,1), 0 0 22px rgba(255,217,77,.55); } }
.cell.pop { animation: burst .3s ease-out forwards; }
@keyframes burst { 0% { scale: 1; opacity: 1; filter: brightness(1); } 40% { scale: 1.22; opacity: 1; filter: brightness(1.9); } 100% { scale: 1.3; opacity: 0; filter: brightness(2.2); } }
.cell.flash { background: rgba(216, 164, 255, .22); box-shadow: inset 0 0 0 2px rgba(216, 164, 255, .95), 0 0 18px rgba(168, 85, 247, .55); }
.cell.pather { background: rgba(126, 240, 226, .18); box-shadow: inset 0 0 0 2px rgba(126, 240, 226, .95), 0 0 20px rgba(45, 212, 191, .6); }
.cell.boost { animation: boostflash .45s ease-out; }
@keyframes boostflash { 0% { scale: 1; background: rgba(255,217,77,.1); } 40% { scale: 1.16; background: rgba(255,217,77,.38); box-shadow: inset 0 0 0 2px #ffd94d, 0 0 24px rgba(255,217,77,.7); } 100% { scale: 1; } }
.bcell { position: relative; width: var(--c); height: var(--c); display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); transition: box-shadow 160ms, background 160ms, scale 200ms; }
.bcell img { width: 94%; height: 94%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.bcell.locked { background: repeating-linear-gradient(45deg, rgba(16,12,30,.97) 0 8px, rgba(10,8,22,.97) 8px 16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 22px rgba(0,0,0,.85); }
.bcell.locked::after { content: '✕'; color: rgba(255,255,255,.28); font-size: calc(var(--c) * .34); font-weight: 700; }
.bcell.unlock { animation: unlockflash .6s ease-out; }
@keyframes unlockflash { 0% { background: rgba(126,240,226,.5); box-shadow: inset 0 0 0 2px #7ef0e2, 0 0 26px rgba(45,212,191,.8); scale: 1.1; } 100% { scale: 1; } }
.bcell.filler img { opacity: .38; filter: saturate(.6) drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.bcell.value { background: rgba(88, 28, 175, .16); box-shadow: inset 0 0 0 1px rgba(216, 164, 255, .4); }
.bcell.value .val { animation: valglow 1.7s ease-in-out infinite; }
.bcell.flash { background: rgba(216, 164, 255, .22); box-shadow: inset 0 0 0 2px rgba(216, 164, 255, .95), 0 0 18px rgba(168, 85, 247, .55); }
.bcell.new { animation: cellpop .34s ease-out; }
@keyframes cellpop { 0% { scale: .5; filter: brightness(2); } 55% { scale: 1.14; } 100% { scale: 1; filter: brightness(1); } }
.bcell.boost { animation: boostflash .45s ease-out; }

/* ---- reel spin strips + anticipation tease ---- */
.strip { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.strip .cell { position: relative; transition: none; }
.strip.landed .cell img { animation: landbounce .3s ease-out; }
@keyframes landbounce { 0% { transform: translateY(0); } 35% { transform: translateY(5%) scaleY(.95); } 100% { transform: translateY(0); } }
.framewrap.tease .frame { animation: teaseglow .75s ease-in-out infinite alternate; }
@keyframes teaseglow { from { box-shadow: inset 0 0 0 2px #2e4d80, inset 0 0 0 5px #05080f, 0 0 22px rgba(168,85,247,.35), 0 24px 60px rgba(0,0,0,.72); } to { box-shadow: inset 0 0 0 2px #a855f7, inset 0 0 0 5px #05080f, 0 0 46px rgba(168,85,247,.75), 0 24px 60px rgba(0,0,0,.72); } }
.framewrap.tease .cell:has(.val) img { filter: drop-shadow(0 0 12px rgba(216,164,255,.95)) drop-shadow(0 3px 5px rgba(0,0,0,.45)); animation: imgjitter .16s linear infinite alternate; }

/* ---- win amount in the centre of the slot ---- */
.centerwin { position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%); pointer-events: none; font-family: 'Red Hat Display', system-ui, sans-serif; font-size: clamp(36px, 8.5cqi, 60px); font-weight: 900; letter-spacing: .01em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 #0d1b33, 0 0 26px rgba(0,0,0,.65), 0 6px 30px rgba(0,0,0,.8); white-space: nowrap; }
.centerwin[hidden] { display: none; }
.centerwin.anim { animation: centerpop 1.05s cubic-bezier(.2, 1.2, .3, 1) forwards; }
@keyframes centerpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } 26% { transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56%) scale(1); } }

/* ---- TOTAL WIN summary screen ---- */
.summary { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px 84px; box-sizing: border-box; background: linear-gradient(180deg, rgba(5,6,16,.5), rgba(5,6,16,.9) 75%), url('./assets/street.webp') center / cover no-repeat; cursor: pointer; text-align: center; }
.summary[hidden] { display: none; }
.sum-cases { display: flex; gap: 6px; margin-bottom: 10px; animation: sumrise .5s ease-out backwards; }
.sum-cases img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(168,85,247,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.sum-cases img:nth-child(1), .sum-cases img:nth-child(5) { transform: translateY(10px); }
.sum-cases img:nth-child(2), .sum-cases img:nth-child(4) { transform: translateY(3px); }
.sum-title { font-family: 'Red Hat Display', system-ui, sans-serif; font-size: clamp(24px, 5cqi, 34px); font-weight: 900; letter-spacing: .14em; color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.85); animation: sumrise .5s .07s ease-out backwards; }
.sum-amt { font-family: 'Red Hat Display', system-ui, sans-serif; font-size: clamp(42px, 10cqi, 68px); font-weight: 900; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fffbe8, #ffe45e 42%, #f5b301 68%, #fff3b0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 20px rgba(245,179,1,.35)) drop-shadow(0 3px 6px rgba(0,0,0,.7)); animation: sumrise .5s .14s ease-out backwards; }
.sum-spins { font-family: 'Red Hat Display', system-ui, sans-serif; font-size: clamp(13px, 2.6cqi, 17px); font-weight: 800; letter-spacing: .18em; color: #eef2fb; text-shadow: 0 2px 10px rgba(0,0,0,.9); animation: sumrise .5s .21s ease-out backwards; }
.sum-click { position: absolute; left: 0; right: 0; bottom: 30px; font-family: 'Red Hat Display', system-ui, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .22em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.9); animation: sumblink 1.5s ease-in-out infinite; }
.sum-click .arr { display: inline-block; font-size: 12px; vertical-align: 2px; }
.sum-click .arr.flip { transform: scaleX(-1); }
@keyframes sumrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sumblink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---- big win overlay ---- */
.bigwin { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: radial-gradient(ellipse at center, rgba(6,4,18,.42), rgba(6,4,18,.78)); border-radius: 18px; cursor: pointer; }
.bigwin.t-gold { background: repeating-conic-gradient(from -8deg at 50% 58%, rgba(255,64,64,.14) 0deg 9deg, transparent 9deg 18deg), radial-gradient(ellipse at center, rgba(30,4,8,.5), rgba(16,2,6,.85)); }
.bigwin[hidden] { display: none; }
.bigwin span { font-family: 'Red Hat Display', system-ui, sans-serif; font-size: clamp(38px, 9cqi, 74px); font-weight: 900; font-style: italic; letter-spacing: .03em; background: linear-gradient(180deg, #fff3b0, #ffd94d 45%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(245,158,11,.45)); animation: bigzoomin .6s cubic-bezier(.2, 1.4, .3, 1); }
.bigwin.t-blue span { background: linear-gradient(180deg, #f2faff 4%, #8ec9ff 36%, #2f7bff 64%, #1749c9); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #0a1c44; paint-order: stroke fill; filter: drop-shadow(0 5px 0 rgba(5,14,40,.85)) drop-shadow(0 12px 28px rgba(47,123,255,.5)); }
.bigwin.t-gold span { background: linear-gradient(180deg, #fffbe8, #ffe45e 40%, #ff9d00 72%, #e25800); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #4a1502; paint-order: stroke fill; filter: drop-shadow(0 5px 0 rgba(50,10,0,.85)) drop-shadow(0 12px 30px rgba(255,90,0,.5)); }
.bigwin.t-violet { background: repeating-conic-gradient(from -8deg at 50% 58%, rgba(168,85,247,.13) 0deg 9deg, transparent 9deg 18deg), radial-gradient(ellipse at center, rgba(24,4,40,.5), rgba(10,2,20,.85)); }
.bigwin.t-violet span { background: linear-gradient(180deg, #fdf4ff 4%, #e9b8ff 36%, #b45cff 64%, #6d1fd1); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #2a0650; paint-order: stroke fill; filter: drop-shadow(0 5px 0 rgba(26,3,54,.85)) drop-shadow(0 12px 30px rgba(168,85,247,.55)); }
.bigwin.t-epic { background: repeating-conic-gradient(from -8deg at 50% 58%, rgba(255,46,120,.16) 0deg 9deg, transparent 9deg 18deg), radial-gradient(ellipse at center, rgba(34,2,16,.55), rgba(18,1,10,.88)); animation: epicshake .5s ease-in-out 2; }
.bigwin.t-epic span { font-size: clamp(44px, 10.5cqi, 86px); background: linear-gradient(180deg, #ffffff 2%, #ffd3ec 26%, #ff5ea8 52%, #e11d78 74%, #7c103f); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #3d0219; paint-order: stroke fill; filter: drop-shadow(0 5px 0 rgba(46,2,20,.9)) drop-shadow(0 14px 36px rgba(255,46,120,.65)); }
@keyframes epicshake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 1px); } }
.bigwin b { font-family: 'Red Hat Display', system-ui, sans-serif; font-size: clamp(20px, 4.5cqi, 34px); font-weight: 900; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.9); font-variant-numeric: tabular-nums; animation: bigzoomin .6s .08s cubic-bezier(.2, 1.4, .3, 1) backwards; }
@keyframes bigzoomin { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cell, .bcell, .heart, .strip, .centerwin, .sum-cases, .sum-title, .sum-amt, .sum-spins, .framewrap.tease .frame { transition: none; animation: none !important; } .grid.spinning .cell img { animation: none; } }