.board { position: relative; }
.board.shake { animation: board-shake .22s ease; }
.board.combo { animation: combo-glow .32s ease; }
.gem { animation: gem-drop .22s cubic-bezier(.2, .85, .35, 1.2); }
.particle { position: absolute; z-index: 5; width: 9px; height: 9px; border-radius: 3px; background: var(--particle, #ffd566); pointer-events: none; animation: candy-burst .55s ease-out forwards; }
.result-card { position: relative; animation: result-pop .42s cubic-bezier(.2, .9, .25, 1.2); }
@keyframes gem-drop { from { opacity: .25; transform: translateY(-18px) scale(.82); } }
@keyframes candy-burst { to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(180deg) scale(.2); } }
@keyframes board-shake { 25% { transform: translateX(-7px); } 60% { transform: translateX(6px); } 85% { transform: translateX(-3px); } }
@keyframes combo-glow { 50% { box-shadow: 0 0 0 7px rgba(255,213,102,.35), 0 30px 70px rgba(46,32,92,.25); } }
@keyframes result-pop { from { opacity: 0; transform: scale(.7) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .board, .gem, .particle, .result-card { animation: none !important; } }
.boosters { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.boosters button { position: relative; display: flex; align-items: center; gap: 7px; min-width: 105px; padding: 9px 13px; border: 1px solid rgba(109,90,230,.16); border-radius: 13px; color: #554b6d; background: rgba(255,255,255,.7); font-weight: 800; cursor: pointer; }
.boosters span { color: #6d5ae6; font-size: 18px; }.boosters b { font-size: 11px; }.boosters small { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #6d5ae6; font-size: 9px; }
.gem-shape { display: block; width: 48%; height: 48%; margin: auto; background: rgba(255,255,255,.94); filter: drop-shadow(0 2px 0 rgba(0,0,0,.12)); }.g0 .gem-shape { border-radius: 50%; }.g1 .gem-shape { transform: rotate(45deg); border-radius: 18%; }.g2 .gem-shape { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 93%,50% 71%,21% 93%,32% 56%,2% 35%,39% 35%); }.g3 .gem-shape { border-radius: 18%; }.g4 .gem-shape { clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }.g5 .gem-shape { clip-path: polygon(50% 88%,8% 48%,8% 25%,22% 10%,40% 10%,50% 22%,60% 10%,78% 10%,92% 25%,92% 48%); }
.line-icon { position: relative; width: 18px; height: 18px; display: inline-block; }.hint-icon::before { content: ""; position: absolute; inset: 2px; border: 2px solid #6d5ae6; transform: rotate(45deg); }.hint-icon::after { content: ""; position: absolute; width: 4px; height: 4px; left: 7px; top: 7px; border-radius: 50%; background: #6d5ae6; }.shuffle-icon { border: 2px solid #6d5ae6; border-left-color: transparent; border-radius: 50%; }.shuffle-icon::after { content: ""; position: absolute; right: -3px; top: -2px; border: 4px solid transparent; border-left-color: #6d5ae6; transform: rotate(-35deg); }
.result-icon::before,.result-icon::after { content: ""; position: absolute; background: #fff; }.result-icon.success::before { width: 28px; height: 13px; border-left: 5px solid #fff; border-bottom: 5px solid #fff; background: transparent; transform: rotate(-45deg) translate(-2px,1px); }.result-icon.retry::before { width: 26px; height: 26px; border: 5px solid #fff; border-left-color: transparent; border-radius: 50%; background: transparent; }.result-icon.retry::after { width: 0; height: 0; right: 13px; top: 13px; background: transparent; border: 7px solid transparent; border-top-color: #fff; transform: rotate(25deg); }
.gem.suggest { animation: suggest-gem .7s ease-in-out 3; outline: 4px solid #fff; }
@keyframes suggest-gem { 50% { transform: scale(1.13); filter: brightness(1.25); } }