/* Position changes run on the compositor; candy art animates independently. */
#gameBoard .candy {
  left: 0;
  top: 0;
  translate: calc(var(--col) * 100%) calc(var(--row) * 100%);
  transition:
    translate var(--candy-motion, 200ms) cubic-bezier(0.22, 0.7, 0.3, 1),
    background 0.15s;
}
#gameBoard .candy.crushing,
#gameBoard .candy.entering {
  animation: none;
}
#gameBoard .candy.crushing .candy-art {
  animation: crush 180ms ease-in both;
}
#gameBoard .candy.entering .candy-art {
  animation: appear var(--candy-motion, 280ms) cubic-bezier(0.2, 0.7, 0.3, 1)
    backwards;
}
.campaign-flight-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 25;
}
.campaign-orb {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 8%, var(--orb-color) 65%);
  box-shadow: 0 0 9px var(--orb-color);
}
.campaign-orb.is-bonus {
  width: 18px;
  height: 18px;
  margin: -9px;
  border: 2px solid #fff4c7;
  box-shadow: 0 0 12px #ffdd8c;
}
#gameScreen.is-finale .board-frame {
  border-color: #e7af69;
  box-shadow:
    0 0 0 2px #ffe2a6,
    0 6px 20px #c98b3b22;
}
#collectionGoals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.collection-goal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 65px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #e4d2e0;
  border-radius: 12px;
  background: #fffaf4;
  color: #49374d;
  position: relative;
}
.collection-goal img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.collection-goal strong {
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.collection-check {
  display: none;
}
.collection-goal.is-complete {
  border-color: #7db9a2;
  background: #eaf6ee;
}
.collection-goal.is-complete .collection-check {
  display: grid;
  place-items: center;
  position: absolute;
  right: -3px;
  top: -5px;
  width: 16px;
  height: 16px;
  background: #3e8068;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
}
.score-float.is-combo {
  color: #a42b66;
  font-size: 23px;
}
.collection-result {
  padding: 8px 12px;
  background: #fff2d9;
  border-radius: 10px;
  color: #76552d;
}
@media (max-width: 760px) {
  #gameScreen.is-collection .level-summary {
    display: none;
  }
  #collectionGoals {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    flex-wrap: nowrap;
  }
  .collection-goal {
    padding: 3px 5px;
  }
  .collection-goal img {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 540px) and (max-height: 700px) {
  #gameScreen.is-collection .board-section {
    width: min(100%, calc(100dvh - 363px));
  }
  .collection-goal {
    gap: 3px;
  }
  .collection-goal strong {
    font-size: 12px;
  }
}
@media (max-height: 650px) and (min-width: 761px) {
  #gameScreen.is-collection .level-summary .goal-copy {
    display: none;
  }
  #collectionGoals {
    margin-top: 4px;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .collection-goal {
    flex-basis: 0;
    flex-direction: column;
    gap: 0;
    padding: 2px;
  }
  .collection-goal strong {
    font-size: 12px;
  }
  .collection-goal img {
    width: 20px;
    height: 20px;
  }
  #gameScreen.is-collection .score-stars {
    margin-block: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #gameBoard .candy {
    transition: none;
  }
}
.candy-art {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.candy-art img {
  display: block;
  position: relative;
  z-index: 1;
}
/* Stripes, wrapping and shadows are part of each SVG, not CSS overlays. */
:is(.candy, .duel-candy, .lab-candy)[data-special="bomb"] .candy-art {
  filter: drop-shadow(0 0 5px #ffefb8);
  animation: bomb-breathe 3s ease-in-out infinite;
}
:is(.candy, .lab-candy).primed .candy-art {
  filter: drop-shadow(0 0 8px #fff0af);
  animation: wrapped-charge 0.4s ease-in-out infinite alternate;
}
.candy.special-born .candy-art {
  animation: special-born 0.55s cubic-bezier(0.18, 0.8, 0.2, 1.4);
}
.candy-effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.board-message {
  max-width: 95%;
  font-size: clamp(23px, 3.1vw, 43px);
  text-align: center;
  white-space: normal;
  line-height: 1.05;
}
.board-guide-link {
  display: flex;
  justify-content: center;
  margin: 11px auto 0;
  font-size: 12px;
  color: #81637a;
  gap: 6px;
}
.board-guide-link svg {
  width: 13px;
  height: 13px;
}
.special-sample {
  position: relative;
  display: inline-block;
  width: 43px;
  height: 43px;
  flex-shrink: 0;
}
.special-sample img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.game-note.special-note {
  padding-top: 18px;
}
.special-note h3 {
  margin: 10px 0 18px;
  font-size: 27px;
}
.special-note .note-candy {
  width: 65px;
  height: 65px;
  margin-bottom: 18px;
}
.special-legend {
  display: grid;
  gap: 11px;
  margin: 0 0 20px;
  text-align: left;
}
.special-legend > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.special-legend strong {
  font-size: 12px;
  font-weight: 900;
  display: block;
}
.special-legend small {
  font-size: 12px;
  line-height: 1.7;
  color: #796478;
  display: block;
}
.special-note > p {
  font-size: 12px;
}
dialog[data-kind="specials"] {
  width: min(620px, calc(100vw - 32px));
}
.special-guide {
  display: grid;
  gap: 10px;
  margin: 24px 0;
  text-align: left;
}
.special-guide-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 15px;
  background: #f7edf3;
  border: 1px solid #eadde7;
  border-radius: 14px;
}
.special-guide-card .special-sample {
  width: 53px;
  height: 53px;
}
.special-guide-card strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
}
.special-guide-card b {
  font-size: 12px;
  color: #9c5478;
  display: block;
  margin: 3px 0 5px;
}
.special-guide-card p {
  font-size: 13px;
  line-height: 1.65;
  color: #7c657a;
}
.combo-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
  margin: 18px 0;
}
.combo-guide > div {
  border: 1px solid #eadde5;
  border-radius: 11px;
  padding: 13px;
  background: #fff7ee;
}
.combo-guide strong {
  font-size: 13px;
  display: block;
  color: #8d6485;
}
.combo-guide p {
  font-size: 12px;
  line-height: 1.7;
  color: #796477;
  margin-top: 5px;
}
.special-guide-heading {
  font-family: var(--display);
  font-weight: 500;
  font-size: 23px;
  margin-top: 20px;
}
.special-guide-note {
  font-size: 12px !important;
  line-height: 1.8 !important;
}
@keyframes bomb-breathe {
  50% {
    filter: drop-shadow(0 0 8px #ffe496);
    transform: scale(1.05);
  }
}
@keyframes wrapped-charge {
  to {
    transform: scale(1.13) rotate(7deg);
  }
}
@keyframes special-born {
  0% {
    transform: scale(0.5);
    filter: brightness(1.6);
  }
  55% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
@media (max-width: 540px) {
  .board-message {
    font-size: 27px;
  }
  .combo-guide {
    grid-template-columns: 1fr;
  }
  .special-guide-card {
    padding: 11px;
    gap: 10px;
  }
  .special-guide-card strong {
    font-size: 18px;
  }
  .special-guide-card p {
    font-size: 12px;
  }
  .special-guide-card .special-sample {
    width: 43px;
    height: 43px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.candy, .duel-candy, .lab-candy) .candy-art {
    animation: none !important;
  }
  .candy-effects {
    display: none;
  }
  .special-born {
    outline: 2px solid #fff0b9;
    outline-offset: -3px;
  }
}