body { margin: 0; background: #08141a; }
.cluster { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 12px; box-sizing: border-box; background: #0a1620 url('./assets/nightscape.webp') center / cover no-repeat; min-height: 100%; }
.banner, .win { height: 22px; font: 700 15px/22px 'Red Hat Display', 'Figtree', system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.banner { color: #c4f4f1; font-size: 13px; }
.win { color: #FDDC73; font-size: 17px; }
.grid { --c: min(84px, (100cqi - 40px) / 6); position: relative; display: grid; grid-template-columns: repeat(6, var(--c)); gap: 4px; padding: 8px; border-radius: 14px; background: rgba(4, 12, 18, .82); box-shadow: inset 0 0 0 1px rgba(40, 243, 243, .35), 0 10px 34px rgba(0,0,0,.55); }
.col { position: relative; height: calc(var(--c) * 5); overflow: hidden; border-radius: 8px; background: rgba(11, 31, 40, .88); }
.cell { position: absolute; left: 0; top: 0; width: var(--c); height: var(--c); display: grid; place-items: center; transition: transform 260ms cubic-bezier(.3, .7, .3, 1), box-shadow 160ms; border-radius: 8px; }
.cell img { width: 94%; height: 94%; object-fit: contain; pointer-events: none; }
.cell.won { background: rgba(253, 220, 115, .22); box-shadow: inset 0 0 0 2px #FDDC73, 0 0 14px rgba(253, 220, 115, .55); }
@media (prefers-reduced-motion: reduce) { .cell { transition: none; } }