body { margin: 0; background: #0a0714; }
.squares { --c: min(46px, (100cqi - 62px) / 7); container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 8px; box-sizing: border-box; background: #0a0714 url('./assets/street.webp') center / cover no-repeat; min-height: 100%; overflow: hidden; }
.squares::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,4,18,.66), rgba(7,4,18,.38) 42%, rgba(7,4,18,.72)); pointer-events: none; }
.topbar { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 22px; }
.banner { color: rgba(224,240,255,.92); font: 700 12px 'Red Hat Display', 'Figtree', system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.9); text-align: center; }
.hbtn { position: absolute; right: 2px; top: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,217,77,.55); background: rgba(10,7,20,.8); color: #ffd94d; font: 800 13px system-ui, sans-serif; cursor: pointer; }
.board { position: relative; }
.grid { position: relative; display: grid; grid-template-columns: repeat(7, var(--c)); gap: 3px; padding: 6px; border-radius: 14px; background: rgba(6,4,18,.88); box-shadow: inset 0 0 0 1px rgba(255,217,77,.25), 0 18px 44px rgba(0,0,0,.62); }
.cell { position: relative; width: var(--c); height: var(--c); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.cell img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.cell.fall { animation: fall 260ms ease-out backwards; }
@keyframes fall { 0% { transform: translateY(-14px); opacity: .3; } 100% { transform: translateY(0); opacity: 1; } }
.cell.won { box-shadow: inset 0 0 0 2px rgba(140,220,255,.95), 0 0 14px rgba(140,220,255,.5); background: rgba(140,220,255,.16); }
.cell.wonGold { box-shadow: inset 0 0 0 2px rgba(255,217,77,.98), 0 0 18px rgba(255,217,77,.65); background: rgba(255,217,77,.24); animation: pulse 480ms ease-in-out infinite alternate; }
.cell.touched { box-shadow: inset 0 0 0 3px #ffd94d, 0 0 22px rgba(255,217,77,.9); background: rgba(255,217,77,.4); }
.cell.scatwon { box-shadow: inset 0 0 0 2px rgba(255,150,60,.98), 0 0 18px rgba(255,150,60,.6); background: rgba(255,150,60,.25); }
.cell.boom { animation: boom 230ms ease-in forwards; }
@keyframes boom { 0% { transform: scale(1); filter: brightness(1.8); } 100% { transform: scale(.2); opacity: 0; } }
@keyframes pulse { 0% { filter: brightness(1); } 100% { filter: brightness(1.35); } }
.sq { position: absolute; z-index: 3; border: 3px solid #ffd94d; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 22px rgba(255,217,77,.55), inset 0 0 18px rgba(255,217,77,.18); pointer-events: none; transition: left 240ms ease, top 240ms ease, width 240ms ease, height 240ms ease; }
.sq-mult { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: linear-gradient(180deg, #ffe98a, #f5b301); color: #241a03; font: 900 12px system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.55); white-space: nowrap; }
.centrewin { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 16px; border-radius: 12px; background: rgba(5,3,14,.82); color: #ffd94d; font: 900 24px 'Red Hat Display', system-ui, sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,.8); pointer-events: none; }
.win { position: relative; height: 26px; color: #ffd94d; font: 800 20px 'Red Hat Display', 'Figtree', system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.card { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(4,2,12,.62); text-align: center; }
.card[hidden] { display: none; }
.card-tier { color: #ffd94d; font: 900 26px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .04em; text-shadow: 0 0 20px rgba(255,180,0,.8); }
.card-main { color: #fff; font: 900 30px 'Red Hat Display', system-ui, sans-serif; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.card-sub { color: #c9d6f2; font: 600 12px system-ui, sans-serif; letter-spacing: .05em; padding: 0 18px; }
/* --- three-box intro popup (platform requirement) --- */
.intro, .rules { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(3,2,10,.72); padding: 10px; box-sizing: border-box; }
.intro[hidden], .rules[hidden] { display: none; }
.intro-card, .rules-card { position: relative; width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; border-radius: 16px; background: #0d0919; box-shadow: inset 0 0 0 1px rgba(255,217,77,.4), 0 24px 60px rgba(0,0,0,.7); padding: 14px 16px 16px; box-sizing: border-box; text-align: center; }
.intro-x, .rules-x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.intro-logo { height: 30px; max-width: 70%; object-fit: contain; }
.intro-title { margin-top: 4px; color: #ffd94d; font: 900 19px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .14em; }
.intro-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.intro-box { border-radius: 12px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 10px 8px; }
.intro-art { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.intro-box-t { margin-top: 6px; color: #ffd94d; font: 800 12px system-ui, sans-serif; }
.intro-box-p { margin: 5px 0 0; color: #b9c4da; font: 500 11px/1.45 system-ui, sans-serif; }
.intro-check { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; color: #c9d6f2; font: 600 12.5px system-ui, sans-serif; cursor: pointer; }
.intro-go { margin-top: 10px; width: 100%; height: 44px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #ffe98a, #f5b301); color: #241a03; font: 900 16px system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; }
.rules-card { text-align: left; }
.rules-head { display: flex; justify-content: space-between; align-items: center; color: #fff; font: 800 15px system-ui, sans-serif; }
.rules-x { position: static; }
.rules-body { margin-top: 8px; color: #b9c4da; font: 500 12.5px/1.55 system-ui, sans-serif; }
.rules-body .paytab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rules-body .paytab th { text-align: left; color: #8fa0c0; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.rules-body .paytab td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.rules-body .paytab td img { width: 20px; height: 20px; object-fit: cover; border-radius: 5px; vertical-align: -6px; margin-right: 6px; }
.rules-foot { margin-top: 10px; text-align: center; }
.rules-intro { border: 1px solid rgba(255,217,77,.5); background: transparent; color: #ffd94d; border-radius: 8px; padding: 7px 14px; font: 700 12px system-ui, sans-serif; cursor: pointer; }
@media (max-width: 480px) { .intro-boxes { grid-template-columns: 1fr; } .intro-box { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; text-align: left; align-items: center; } .intro-box-p { grid-column: 2; } .intro-art { grid-row: span 2; } }
/* --- FX: lightning, sparks, combo, celebrations ----------------------- */
.fxlayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fxSvg { z-index: 5; overflow: visible; }
#fxCanvas { z-index: 6; }
.bolt { fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px currentColor); animation: boltfade .3s ease-out forwards; }
@keyframes boltfade { 0% { opacity: 1; } 30% { opacity: .35; } 55% { opacity: 1; } 100% { opacity: 0; } }
.cell.hitpop { animation: hitpop .34s cubic-bezier(.2, 2.2, .4, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes hitpop { 0% { transform: scale(.82); filter: brightness(2.3); } 55% { transform: scale(1.15); filter: brightness(1.65); } 100% { transform: scale(1); filter: brightness(1); } }
.cell.won { animation: crackle .28s linear 2; }
@keyframes crackle { 0%, 100% { filter: brightness(1.25); } 50% { filter: brightness(1.9); } }
.cell.fall { animation: fall .3s ease-out backwards; }
@keyframes fall { 0% { transform: translateY(-16px); opacity: .3; } 72% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
.cell.scatwon { animation: pulse 480ms ease-in-out infinite alternate; }
.ring { position: absolute; z-index: 6; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2.5px solid #fff; border-radius: 50%; pointer-events: none; animation: ringx .45s ease-out forwards; }
@keyframes ringx { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(3.1); opacity: 0; } }
.board.shake { animation: shk .24s linear; }
@keyframes shk { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2.5px, 1px); } 45% { transform: translate(2px, -1.5px); } 70% { transform: translate(-1.5px, -1px); } }
.board.thud { animation: thd .14s ease-out; }
@keyframes thd { 0% { transform: translateY(0); } 40% { transform: translateY(1.6px); } 100% { transform: translateY(0); } }
.grid.storm { animation: stormf .16s steps(2) infinite alternate; }
@keyframes stormf { from { filter: brightness(1); } to { filter: brightness(1.22); } }
.grid.anticip { animation: anticip 1s ease-in-out infinite alternate; }
@keyframes anticip { from { box-shadow: inset 0 0 0 1px rgba(255,217,77,.25), 0 18px 44px rgba(0,0,0,.62), 0 0 12px rgba(255,180,0,.25); } to { box-shadow: inset 0 0 0 2px rgba(255,217,77,.8), 0 18px 44px rgba(0,0,0,.62), 0 0 34px rgba(255,180,0,.65); } }
.sq.sqpulse { animation: sqpulse .3s ease-out; }
@keyframes sqpulse { 0% { filter: brightness(1); } 40% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
.sq.growing::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(115deg, transparent 30%, rgba(255,233,138,.6) 50%, transparent 70%); background-size: 250% 100%; animation: sweep .3s linear; pointer-events: none; }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.sq-mult.punch { animation: punch .3s cubic-bezier(.2, 2.4, .4, 1); }
@keyframes punch { 0% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.7); } 100% { transform: translateX(-50%) scale(1); } }
.combo { position: absolute; z-index: 7; top: 8px; left: 8px; padding: 4px 11px; border-radius: 999px; background: rgba(5,3,14,.87); font: 900 13px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .06em; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.combo[hidden] { display: none; }
.combo.show { animation: comboin .25s cubic-bezier(.2, 2.2, .4, 1); }
@keyframes comboin { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.combo[data-chain="2"] { color: #6ee7ff; box-shadow: 0 0 12px rgba(110,231,255,.45); }
.combo[data-chain="3"] { color: #b78cff; box-shadow: 0 0 14px rgba(183,140,255,.55); }
.combo[data-chain="4"] { color: #ffd94d; box-shadow: 0 0 16px rgba(255,217,77,.6); }
.combo[data-chain="5"] { color: #ff9a3d; box-shadow: 0 0 18px rgba(255,154,61,.7); }
.combo[data-chain="6"] { color: #ff4fd8; box-shadow: 0 0 20px rgba(255,79,216,.75); }
/* --- win-tier celebrations --- */
.celeb { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, rgba(3,2,10,.34), rgba(3,2,10,.78) 78%); }
.celeb[hidden] { display: none; }
.celeb.t1 { --c1: #aee6ff; --c2: #1f7fe0; --ray: rgba(87,200,255,.15); --glow: rgba(87,200,255,.85); }
.celeb.t2 { --c1: #e3ccff; --c2: #6a1fe0; --ray: rgba(183,140,255,.15); --glow: rgba(150,90,255,.9); }
.celeb.t3 { --c1: #fff3b0; --c2: #f5a301; --ray: rgba(255,217,77,.16); --glow: rgba(255,190,0,.9); }
.celeb.t4 { --c1: #ffc46b; --c2: #e63e00; --ray: rgba(255,110,26,.16); --glow: rgba(255,90,0,.95); }
.celeb.t5 { --c1: #ffe3fb; --c2: #ff2fb3; --ray: rgba(255,79,216,.17); --glow: rgba(255,47,179,.95); }
.celeb-rays { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(var(--ray) 0deg 11deg, transparent 11deg 23deg); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 64%); mask-image: radial-gradient(circle, #000 0%, transparent 64%); animation: rayspin 7s linear infinite; }
@keyframes rayspin { to { transform: rotate(360deg); } }
.celeb-canvas, .celeb-bolts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celeb-bolts { overflow: visible; }
.celeb-inner { position: relative; text-align: center; padding: 0 10px; }
.celeb-tier { font: 900 min(54px, 12.5cqi) 'Red Hat Display', system-ui, sans-serif; letter-spacing: .02em; line-height: 1.05; background: linear-gradient(180deg, #ffffff 5%, var(--c1) 45%, var(--c2) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px var(--glow)) drop-shadow(0 3px 7px rgba(0,0,0,.65)); }
.celeb.show .celeb-tier { animation: slam .38s cubic-bezier(.16, 1.4, .3, 1) backwards; }
@keyframes slam { 0% { transform: scale(3); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.celeb-amt { margin-top: 8px; color: #fff; font: 900 min(32px, 8cqi) 'Red Hat Display', system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px var(--glow), 0 2px 9px rgba(0,0,0,.8); }
.celeb-amt.landed { animation: punch2 .28s cubic-bezier(.2, 2.4, .4, 1); }
@keyframes punch2 { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.cshake-sm { animation: shk .26s linear 2; }
.cshake-md { animation: shk .26s linear 3; }
.cshake-lg { animation: shkbig .3s linear 3; }
.cshake-xl { animation: shkbig .3s linear 4; }
@keyframes shkbig { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-5px, 2px) rotate(-.3deg); } 45% { transform: translate(4.5px, -3px) rotate(.3deg); } 70% { transform: translate(-3.5px, -2px); } }
@media (prefers-reduced-motion: reduce) { .cell { transition: none; } .cell.fall, .cell.boom, .cell.wonGold { animation: none; } .sq { transition: none; } .cell.hitpop, .cell.won, .celeb-rays, .combo.show, .celeb.show .celeb-tier { animation: none; } }