:root { --purple: #7057e8; }
body { background: radial-gradient(circle at 75% 0,#a88cf8 0,transparent 32%), linear-gradient(160deg,#6751d7 0 31%,#f3eaff 31% 100%); }
.mission { border: 1px solid rgba(255,255,255,.16); background: linear-gradient(135deg,rgba(35,25,84,.34),rgba(89,67,175,.25)); box-shadow: inset 0 1px rgba(255,255,255,.12); }
.scorebar { border: 1px solid rgba(255,255,255,.9); background: linear-gradient(180deg,#fff,rgba(255,255,255,.88)); box-shadow: 0 14px 36px rgba(48,31,104,.18), inset 0 1px #fff; }
.board { gap: 7px; border: 1px solid rgba(255,255,255,.28); background: linear-gradient(145deg,#2d2758,#201c43); box-shadow: 0 28px 60px rgba(32,24,76,.32), inset 0 0 0 5px rgba(255,255,255,.06); }
.gem { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.gem::before { display: none; }
.candy-sprite { display: block; width: 100%; height: 100%; background: url("assets/candy-atlas.png") no-repeat; background-size: 600% auto; background-position-y: center; filter: drop-shadow(0 5px 4px rgba(10,7,34,.34)); transform: scale(1.13); transition: transform .16s ease,filter .16s ease; }
.candy-0 { background-position-x: 0; }.candy-1 { background-position-x: 20%; }.candy-2 { background-position-x: 40%; }.candy-3 { background-position-x: 60%; }.candy-4 { background-position-x: 80%; }.candy-5 { background-position-x: 100%; }
.gem:hover .candy-sprite { transform: scale(1.19) translateY(-1px); filter: drop-shadow(0 7px 5px rgba(10,7,34,.4)); }
.gem.selected .candy-sprite { transform: scale(1.22); filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 10px #ffd970); }
.gem.clearing .candy-sprite { animation: candy-pop .22s ease forwards; }
@keyframes candy-pop { to { transform: scale(.2) rotate(18deg); opacity: 0; filter: brightness(1.7) drop-shadow(0 0 12px #fff); } }
.boosters button { border: 1px solid rgba(91,68,173,.12); background: linear-gradient(180deg,#fff,rgba(255,255,255,.72)); box-shadow: 0 8px 22px rgba(63,43,130,.1),inset 0 1px #fff; }
.boosters button:active { transform: translateY(2px); box-shadow: none; }
.header-actions button:first-child { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; }.header-actions button:first-child svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }.header-actions button:first-child svg path:first-child { fill: rgba(255,255,255,.18); }
.boosters button { min-width: 154px; padding: 8px 10px 8px 8px; border-radius: 17px; gap: 9px; }
.boosters button i { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: radial-gradient(circle at 35% 25%,#fff,#ece8ff 68%,#d5ccff); box-shadow: inset 0 1px #fff,0 4px 9px rgba(87,67,174,.16); }
.boosters button svg { width: 23px; height: 23px; fill: none; stroke: #6d5ae6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boosters b { font-size: 10px; }.boosters small { width: 22px; height: 22px; box-shadow: 0 3px 8px rgba(74,54,168,.24); }
@media(max-width:430px){.boosters button{min-width:132px}.boosters b{font-size:9px}}
@media(max-width:430px){.board{gap:5px}.gem{border-radius:12px}}