body { margin: 0; background: #070510; }
.ways { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 10px; box-sizing: border-box; background: #070510 url('./assets/street.webp') center / cover no-repeat; min-height: 100%; overflow: hidden; }
.ways::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,3,16,.62), rgba(5,3,16,.34) 42%, rgba(5,3,16,.68)); pointer-events: none; }
.banner, .win { position: relative; height: 22px; 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,.9); text-align: center; }
.banner { color: rgba(224,240,255,.92); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.win { color: #ffd94d; font-size: 20px; font-weight: 800; letter-spacing: .02em; min-height: 24px; }
.tour { position: relative; display: none; align-items: center; gap: 4px; height: 18px; }
.tour.on { display: flex; }
.tour .stop { min-width: 20px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgba(10,8,26,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #9fb4d8; font: 700 10px/16px system-ui, sans-serif; text-align: center; }
.tour .stop.done { color: #ffd94d; box-shadow: inset 0 0 0 1px rgba(255,217,77,.55); }
.tour .stop.now { background: #ff2e7e; color: #fff; box-shadow: 0 0 12px rgba(255,46,126,.75); }
.tour .mult { margin-left: 6px; padding: 1px 8px; border-radius: 8px; background: linear-gradient(180deg, #ffb03a, #f43f5e); color: #fff; font: 800 11px/16px system-ui, sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.grid { --c: min(78px, (100cqi - 52px) / 5); position: relative; display: grid; grid-template-columns: repeat(5, var(--c)); gap: 5px; padding: 9px; border-radius: 16px; background: rgba(6, 4, 18, .87); box-shadow: inset 0 0 0 1px rgba(255,80,180,.28), inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px rgba(255,46,126,.22), 0 18px 44px rgba(0,0,0,.62); }
.col { position: relative; height: calc(var(--c) * 4); overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.col.expanding { box-shadow: inset 0 0 0 2px rgba(255,217,77,.85), 0 0 18px rgba(255,217,77,.4); }
.cell { position: absolute; left: 0; top: 0; width: var(--c); height: var(--c); display: grid; place-items: center; transition: transform 250ms cubic-bezier(.3, .7, .3, 1), box-shadow 150ms, background 150ms; border-radius: 9px; }
.cell .glyph { font-size: calc(var(--c) * .52); line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); pointer-events: none; }
.cell img { width: 94%; height: 94%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); border-radius: 7px; }
.cell .hangul { font-family: 'Red Hat Display', system-ui, sans-serif; font-weight: 900; font-size: calc(var(--c) * .58); }
.cell.sH { background: rgba(255,46,126,.13); box-shadow: inset 0 0 0 1px rgba(255,46,126,.45); }
.cell.sH .hangul { color: #ff5ea8; text-shadow: 0 0 12px rgba(255,46,126,.9); }
.cell.sI { background: rgba(40,243,243,.10); box-shadow: inset 0 0 0 1px rgba(40,243,243,.4); }
.cell.sI .hangul { color: #4df3f3; text-shadow: 0 0 12px rgba(40,243,243,.9); }
.cell.sW { background: linear-gradient(180deg, rgba(255,176,58,.32), rgba(244,63,94,.32)); box-shadow: inset 0 0 0 2px rgba(255,217,77,.9); }
.cell .wildtxt { text-align: center; color: #ffd94d; font-family: 'Red Hat Display', system-ui, sans-serif; font-weight: 900; font-size: calc(var(--c) * .19); letter-spacing: 0; line-height: 1.1; text-shadow: 0 0 10px rgba(255,176,58,.95), 0 2px 4px rgba(0,0,0,.6); pointer-events: none; }
.cell .wildtxt small { display: block; font-size: calc(var(--c) * .14); letter-spacing: .18em; color: #fff; }
.cell.prewild { background: rgba(255,217,77,.07); }
.cell.prewild .glyph { color: rgba(255,217,77,.5); font-size: calc(var(--c) * .4); }
.cell.fillpop { animation: fillpop 260ms ease-out; }
@keyframes fillpop { 0% { transform: scale(.6) rotate(-4deg); filter: brightness(2.2); } 100% { transform: scale(1); filter: brightness(1); } }
.cell.won { background: rgba(255, 217, 77, .20); box-shadow: inset 0 0 0 2px rgba(255, 217, 77, .95), 0 0 16px rgba(255, 217, 77, .45); }
.cell.scatwon { background: rgba(255, 110, 60, .25); box-shadow: inset 0 0 0 2px rgba(255, 150, 60, .95), 0 0 18px rgba(255, 110, 60, .55); }
.intro, .bigwin { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4, 2, 12, .55); z-index: 5; }
.intro[hidden], .bigwin[hidden] { display: none; }
.intro-card { text-align: center; padding: 18px 26px; border-radius: 18px; background: rgba(8, 5, 22, .88); box-shadow: inset 0 0 0 1px rgba(255,150,60,.5), 0 0 34px rgba(255,110,60,.35); animation: fillpop 300ms ease-out; }
.intro-kicker { color: #ffb03a; font: 800 13px system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.intro-title { margin-top: 6px; color: #fff; font: 900 34px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .03em; text-shadow: 0 0 18px rgba(255,46,126,.85); }
.intro-sub { margin-top: 6px; color: #c9d6f2; font: 600 12px system-ui, sans-serif; letter-spacing: .06em; }
.bigwin { background: rgba(4, 2, 12, .38); pointer-events: none; }
.bigwin-tier { text-align: center; color: #ffd94d; font: 900 40px 'Red Hat Display', system-ui, sans-serif; letter-spacing: .04em; text-shadow: 0 0 22px rgba(255,176,58,.95), 0 3px 8px rgba(0,0,0,.7); animation: fillpop 320ms ease-out; }
.bigwin-amt { text-align: center; color: #fff; font: 800 26px system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { .cell { transition: none; } .cell.fillpop, .intro-card, .bigwin-tier { animation: none; } }