.game-board.is-grabbing {
  cursor: grabbing;
}

.game-board.is-grabbing .brick-cell:not(.is-dragging-line):not(.color-empty) {
  opacity: 0.52;
  filter: saturate(0.72) brightness(0.72);
}

.game-board.is-grabbing .brick-cell.color-empty {
  opacity: 1;
  filter: none;
}

.brick-cell.is-dragging-line,
.editor-cell.is-dragging-line {
  z-index: 10;
  filter: saturate(1.12) brightness(1.1);
  box-shadow:
    inset 2px 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -5px 2px rgba(0, 0, 0, 0.15),
    0 5px var(--brick-rim),
    0 12px 14px rgba(0, 0, 0, 0.72);
  transform: translate(var(--drag-x), var(--drag-y)) scale(1.025);
  transition-property: filter, box-shadow, opacity;
  transition-duration: 80ms;
}

.brick-cell.is-dragging-line::after,
.editor-cell.is-dragging-line::after {
  box-shadow: inset 0 0 0 2px #c8e9ff, 0 0 15px 2px var(--accent-glow);
}

.brick-cell.is-projected-hit::after,
.brick-cell.is-hint-hit::after {
  box-shadow: inset 0 0 0 3px #fff8bd, 0 0 20px 5px rgba(255, 214, 64, 0.72);
}

.brick-cell.is-hint {
  z-index: 8;
  animation: hint-pulse 0.75s ease-in-out infinite alternate;
}

.brick-cell.is-hint::after {
  box-shadow: inset 0 0 0 3px #80caff, 0 0 18px 4px var(--accent-glow);
}

.brick-cell.is-match:not(.is-hint):not(.is-dragging-line)::after {
  box-shadow: inset 0 0 0 1px rgba(157, 255, 166, 0.16);
}

.game-board[data-commit-axis] .brick-cell.is-commit-line {
  animation: cell-refresh var(--refresh-duration, 0.2s) var(--line-delay, 0ms) cubic-bezier(0.18, 0.82, 0.22, 1.12) both;
}

.brick-cell.is-new-match {
  animation: new-match 0.3s var(--match-delay, 0ms) var(--ease-brick) both;
}

/* Strategic board states: the symbol is printed on the plate, not floating UI. */
.brick-cell[data-special]::after,
.editor-cell[data-special]::after {
  z-index: 4;
  inset: 17%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 28%;
  color: #fff;
  background: rgba(5,12,23,.38);
  box-shadow: inset 0 1px rgba(255,255,255,.28),0 1px 3px rgba(0,0,0,.3);
  font-size: clamp(7px,1.05vw,13px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.brick-cell[data-special="lock"]::after,.editor-cell[data-special="lock"]::after { content: "▣"; border-color: #b9ddff; color: #dff1ff; }
.brick-cell[data-special="boost"]::after,.editor-cell[data-special="boost"]::after { content: "ϟ"; border-color: #ffe57a; color: #fff0a8; }
.brick-cell[data-special="wild"]::after,.editor-cell[data-special="wild"]::after { content: "W"; border-color: #fff; color: #fff; background: conic-gradient(from 45deg,rgba(240,68,68,.82),rgba(255,214,50,.82),rgba(85,214,90,.82),rgba(37,140,244,.82),rgba(169,90,245,.82),rgba(240,68,68,.82)); }
.brick-cell[data-special="link"]::after,.editor-cell[data-special="link"]::after { content: "∞"; border-color: #d0b3ff; color: #eadcff; }
.brick-cell.is-special-active,.editor-cell.is-special-active { z-index: 9; }
.brick-cell.is-special-activated,.editor-cell.is-special-activated { animation: special-activate .5s var(--ease-brick) both; }
.brick-cell[data-special="boost"].is-boost-ready::after { background: rgba(111,74,0,.78); box-shadow: inset 0 1px rgba(255,255,255,.38),0 0 12px rgba(255,213,58,.8); }
.brick-cell[data-special="boost"].is-boost-spent::after { opacity: .46; filter: grayscale(.7); box-shadow: none; }

.brick-cell.is-line-ready { z-index: 7; outline: 2px solid #ffe36b; outline-offset: -2px; filter: brightness(1.1) saturate(1.08); }
.brick-cell.is-line-ready:first-child { box-shadow: inset 0 0 0 2px #fff2a5,0 3px var(--brick-rim),0 0 18px rgba(255,214,64,.55); }
.brick-cell.is-line-locked { filter: saturate(.72) brightness(.88); }
.brick-cell.is-line-locked::after {
  inset: 4px;
  border: 1px solid rgba(214,232,248,.56);
  background:
    linear-gradient(135deg,#dce8ef,#677789 45%,transparent 47%) top left/24% 24% no-repeat,
    linear-gradient(225deg,#dce8ef,#677789 45%,transparent 47%) top right/24% 24% no-repeat,
    linear-gradient(45deg,#aebdca,#506073 45%,transparent 47%) bottom left/24% 24% no-repeat,
    linear-gradient(315deg,#aebdca,#506073 45%,transparent 47%) bottom right/24% 24% no-repeat,
    rgba(47,64,81,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.brick-cell[data-special].is-hint::after { box-shadow: inset 0 0 0 2px #fff,0 0 18px 4px var(--accent-glow); }
.game-board[data-ready-axis] { box-shadow: inset 0 5px 9px rgba(2,5,11,.85),inset 0 0 0 2px rgba(255,228,103,.21),0 11px #080e19,0 23px 38px rgba(0,0,0,.53),0 0 24px rgba(255,214,64,.1); }

.game-board.is-release-impact {
  animation: release-impact 0.28s ease-out both;
}

.game-board.is-level-clear {
  animation: board-clear 1.25s ease-out both;
}

.brick-cell.is-clear-flash {
  z-index: 12;
  animation: clear-flash 0.34s var(--clear-delay, 0ms) ease-in-out 2 alternate !important;
}

.drag-hud {
  position: absolute;
  z-index: 30;
  top: -38px;
  left: 50%;
  min-width: 96px;
  padding: 8px 12px;
  border: 1px solid rgba(117, 193, 255, 0.4);
  border-radius: 99px;
  opacity: 0;
  background: rgba(12, 37, 80, 0.93);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(52, 124, 242, 0.23);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  transform: translate(-50%, 5px);
  transition: 0.16s ease;
  pointer-events: none;
}

.drag-hud.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.drag-hud.is-gain {
  color: #fff8bd;
  border-color: rgba(255, 214, 64, 0.6);
}

.particle-layer {
  position: absolute;
  z-index: 50;
  inset: -14%;
  overflow: visible;
  pointer-events: none;
}

.particle {
  --particle-color: var(--gold);
  position: absolute;
  top: var(--oy, 50%);
  left: var(--ox, 50%);
  width: var(--size, 10px);
  height: calc(var(--size, 10px) * 1.55);
  border-radius: 2px;
  opacity: 0;
  background: var(--particle-color);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
  will-change: transform, opacity;
}

.particle--spark {
  width: calc(var(--size, 10px) * .42);
  height: calc(var(--size, 10px) * 2.2);
  border-radius: 99px;
  box-shadow: 0 0 8px 2px var(--particle-color);
}

.particle--star {
  display: grid;
  width: auto;
  height: auto;
  place-items: center;
  color: var(--particle-color);
  background: transparent;
  box-shadow: none;
  font-size: calc(var(--size, 10px) * 1.45);
  line-height: 1;
  text-shadow: 0 0 8px #fff, 0 0 13px var(--particle-color);
}

.burst-ring {
  position: absolute;
  top: var(--oy, 50%);
  left: var(--ox, 50%);
  width: 28px;
  aspect-ratio: 1;
  border: 5px solid rgba(255, 239, 131, .92);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 14px #fff, inset 0 0 12px rgba(255, 214, 64, .9), 0 0 24px rgba(255, 214, 64, .7);
  transform: translate(-50%, -50%) scale(.15);
}

.particle.color-red { --particle-color: var(--red); }
.particle.color-blue { --particle-color: var(--blue); }
.particle.color-yellow { --particle-color: var(--yellow); }
.particle.color-green { --particle-color: var(--green); }
.particle.color-purple { --particle-color: var(--purple); }

.particle-layer.is-bursting .particle {
  animation: confetti var(--duration, 1.2s) cubic-bezier(0.14, 0.7, 0.2, 1) var(--delay, 0s) both;
}

.particle-layer.is-bursting .burst-ring {
  animation: burst-ring .58s cubic-bezier(.08,.65,.24,1) var(--delay, 0s) both;
}

.result-stars { position: relative; overflow: visible; }
.result-stars > .star { position: relative; z-index: 3; }

.star-spark-burst {
  position: absolute;
  z-index: 1;
  top: var(--burst-y, 50%);
  left: var(--burst-x, 50%);
  width: 0;
  height: 0;
  pointer-events: none;
}

.star-spark-burst i {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffe979;
  opacity: 0;
  font-size: var(--ssize, 9px);
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 4px #fff, 0 0 9px #ffbf21;
  transform: translate(-50%, -50%) scale(.15);
  animation: small-star-pop 1.12s linear var(--sdelay, 0ms) both;
}

@keyframes hint-pulse { to { filter: brightness(1.35) saturate(1.16); transform: scale(1.045); } }
@keyframes cell-refresh {
  from { opacity: 0.18; filter: brightness(1.55) saturate(1.22); transform: translate(var(--refresh-x, 0), var(--refresh-y, 0)) scale(0.8); }
  62% { opacity: 1; transform: scale(1.055); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes new-match { 50% { filter: brightness(1.55); transform: scale(1.1); } }
@keyframes release-impact { 50% { filter: brightness(1.08); transform: scale(1.008); } }
@keyframes special-activate { 48% { filter: brightness(1.6) saturate(1.4); transform: scale(1.12); } }
@keyframes board-clear { 50% { filter: drop-shadow(0 0 22px rgba(255, 214, 50, 0.5)); } }
@keyframes clear-flash { to { filter: brightness(1.9) saturate(1.38); transform: scale(1.11); box-shadow: inset 0 0 0 2px #fff, 0 0 20px 7px #fff6a8, 0 6px var(--brick-rim); } }
@keyframes confetti {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  5% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.72) rotate(var(--spin)); }
}
@keyframes burst-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.2); border-width: 1px; }
}
@keyframes small-star-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(0); }
  8% { opacity: 1; transform: translate(calc(-50% + var(--arc-x)), calc(-50% + var(--arc-y))) scale(.58) rotate(0); }
  22% { opacity: 1; transform: translate(calc(-50% + var(--x22)), calc(-50% + var(--y22))) scale(.88) rotate(var(--r22)); }
  42% { opacity: 1; transform: translate(calc(-50% + var(--x42)), calc(-50% + var(--y42))) scale(1) rotate(var(--r42)); }
  62% { opacity: .94; transform: translate(calc(-50% + var(--x62)), calc(-50% + var(--y62))) scale(.93) rotate(var(--r62)); }
  82% { opacity: .55; transform: translate(calc(-50% + var(--x82)), calc(-50% + var(--y82))) scale(.72) rotate(var(--r82)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x100)), calc(-50% + var(--y100))) scale(.42) rotate(var(--r100)); }
}