.board-wrap { position: relative; width: calc(100% - .5rem); width: min(calc(100% - .5rem), 29rem, 58vh); width: var(--cascade-board-width); max-height: calc(100% - 1rem); aspect-ratio: 7 / 8; padding: .35rem; border-radius: 1.2rem; background: #11182d; box-shadow: 0 18px 60px rgba(0,0,0,.32); }
.danger-line { position: absolute; z-index: 2; top: calc(12.5% + .1rem); left: .15rem; right: .15rem; border-top: 2px dashed rgba(255,107,122,.65); filter: drop-shadow(0 0 5px rgba(255,107,122,.38)); pointer-events: none; animation: danger-pulse 1.5s ease-in-out infinite; }
.game-board { width: calc(100% - 1rem); height: calc(100% - 1rem); min-width: 0; min-height: 0; margin: auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: clamp(.2rem, .8vw, .38rem); overflow: visible; }
.bubble { align-self: center; justify-self: center; width: calc(100% - .2rem); height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; transition: transform .14s ease, filter .14s ease; }
.bubble:not(.empty) { box-shadow: inset 0 -5px rgba(0,0,0,.18), inset 0 3px rgba(255,255,255,.23); }
.bubble:not(.empty):hover { transform: scale(.9); }
.bubble:not(.empty):active { transform: scale(.78); }
.bubble.deal { animation: bubble-deal .32s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay); }
.bubble.rise { animation: bubble-rise .28s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay); }
.bubble.settle { animation: bubble-settle .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay); }
.bubble.popping { pointer-events: none; animation: bubble-pop .18s ease forwards; animation-delay: var(--pop-delay); }
.bubble.no-match { animation: no-match .24s ease; }
.bubble.empty { cursor: default; }
.bubble.c0 { background: #ff6577; }.bubble.c1 { background: #ffd34e; }.bubble.c2 { background: #70e1c5; }.bubble.c3 { background: #7fb4ff; }.bubble.c4 { background: #a98aff; }
.metric.center { text-align: center; }
@keyframes bubble-deal { from { opacity: 0; transform: translateY(18px) scale(.55); } }
@keyframes bubble-rise { from { transform: translateY(55%) scale(.86); opacity: .55; } }
@keyframes bubble-settle { 50% { transform: translateY(3px) scale(1.06); } }
@keyframes bubble-pop { 55% { transform: scale(1.18); filter: brightness(1.4); } to { transform: scale(.05); opacity: 0; } }
@keyframes no-match { 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
@keyframes danger-pulse { 50% { opacity: .45; } }