/* Sweet Shift board system v2
   Loaded after legacy styles so the gameplay board has one consistent visual source of truth. */

.saga-board-wrap {
  width: 100%;
  min-width: 0;
}

.saga-board-stage {
  position: relative;
  padding: 18px;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(180deg, rgba(107,151,210,.32), rgba(91,102,172,.26));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -14px 28px rgba(52,59,126,.12),
    0 18px 40px rgba(55,55,108,.22);
  isolation: isolate;
}

.saga-board-stage::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 29px;
  background: linear-gradient(180deg, rgba(70,92,160,.22), rgba(49,57,122,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.saga-board {
  --tile: min(7.9vh, 67px);
  position: relative;
  width: calc(var(--tile) * 9);
  height: calc(var(--tile) * 9);
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}

.saga-board::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  border-radius: 25px;
  background: rgba(75,92,153,.17);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.13);
  pointer-events: none;
}

.saga-board .cell-layer { z-index: 2; }
.saga-board .fx-layer { z-index: 30; }

.saga-board .board-cell {
  width: var(--tile);
  height: var(--tile);
  left: 0;
  top: 0;
  padding: 3px;
  transform: none;
}

.saga-board .board-slot,
.saga-board .board-cell:nth-child(even) .board-slot {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: calc(var(--tile) * .22);
  background:
    radial-gradient(circle at 35% 23%, rgba(255,255,255,.30), transparent 35%),
    linear-gradient(180deg, rgba(223,235,255,.56), rgba(119,153,210,.33));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -8px 13px rgba(66,79,143,.11);
}

.saga-board .piece {
  width: var(--tile);
  height: var(--tile);
  padding: calc(var(--tile) * .085);
  left: 0;
  top: 0;
  transform: none;
  transition:
    left .16s cubic-bezier(.22,.84,.22,1),
    top .16s cubic-bezier(.22,.84,.22,1),
    opacity .15s ease,
    filter .15s ease;
  transform-origin: center;
  will-change: left, top;
}

.saga-board .piece .candy {
  width: 100%;
  height: 100%;
  position: relative;
  transform: rotate(var(--rot, 0deg));
  border: 2px solid rgba(255,255,255,.34);
  box-shadow:
    inset 0 calc(var(--tile) * .105) 0 rgba(255,255,255,.36),
    inset 0 calc(var(--tile) * -.16) calc(var(--tile) * .22) rgba(26,18,50,.16),
    0 calc(var(--tile) * .075) calc(var(--tile) * .11) rgba(42,31,78,.20);
  backface-visibility: hidden;
}

.saga-board .piece .candy::before {
  left: 18%;
  top: 10%;
  width: 31%;
  height: 20%;
  background: rgba(255,255,255,.64);
}

.saga-board .piece .candy::after {
  inset: 10%;
  border-color: rgba(255,255,255,.18);
}

/* Keep candy silhouettes distinct without making the board visually noisy. */
.saga-board .piece[data-type="0"] .candy { border-radius: 42% 48% 43% 47%; }
.saga-board .piece[data-type="1"] .candy { border-radius: 50%; }
.saga-board .piece[data-type="2"] .candy { border-radius: 30% 50% 31% 49%; }
.saga-board .piece[data-type="3"] .candy { border-radius: 47% 34% 47% 34%; }
.saga-board .piece[data-type="4"] .candy { border-radius: 34% 34% 50% 50%; }
.saga-board .piece[data-type="5"] .candy { border-radius: 50% 31% 49% 33%; }
.saga-board .piece[data-type="6"] .candy { border-radius: 50% 35% 50% 35%; }

.saga-board .piece.selected {
  z-index: 45;
  filter: brightness(1.08);
}

.saga-board .piece.selected .candy {
  outline: 3px solid rgba(255,255,255,.94);
  outline-offset: 2px;
  box-shadow:
    inset 0 calc(var(--tile) * .105) 0 rgba(255,255,255,.42),
    inset 0 calc(var(--tile) * -.16) calc(var(--tile) * .22) rgba(26,18,50,.16),
    0 0 0 4px rgba(222,119,183,.36),
    0 calc(var(--tile) * .08) calc(var(--tile) * .14) rgba(42,31,78,.24);
  animation: sweetSelectedPulse .72s ease-in-out infinite alternate;
}

/* Critical movement fix: hint animation scales the candy in place.
   The legacy keyframe translated it by row/column a second time. */
.saga-board .piece.hint .candy {
  animation: sweetHintPulse .58s ease-in-out 3 !important;
}

.saga-board .piece.dragging {
  z-index: 60;
  filter: brightness(1.10) drop-shadow(0 12px 16px rgba(54,38,82,.26));
}

.saga-board .piece.dragging .candy {
  scale: 1.04;
}

.saga-board .piece.new {
  animation: sweetDropIn .22s cubic-bezier(.2,.9,.18,1.12);
}

.saga-board .piece.removing {
  animation: sweetPopOut .18s ease forwards;
}

.saga-board .jelly-mark {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-width: 2px;
  border-radius: calc(var(--tile) * .20);
  opacity: .76;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.76),
    0 0 0 1px rgba(255,255,255,.28),
    0 0 12px rgba(89,220,255,.56);
}

.saga-board .jelly-mark.layer2 {
  opacity: .92;
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.88),
    0 0 0 2px rgba(255,255,255,.42),
    0 0 17px rgba(89,220,255,.72);
}

.saga-board .board-cell > .blocker {
  inset: 5px;
  border-radius: calc(var(--tile) * .20);
}

.saga-board .licorice-lock {
  inset: calc(var(--tile) * .09);
  border-radius: calc(var(--tile) * .18);
}

.saga-board .dispenser {
  z-index: 26;
}

.message-banner {
  top: 2px;
  max-width: min(88vw, 520px);
  text-align: center;
}

@keyframes sweetHintPulse {
  0%, 100% { scale: 1; filter: brightness(1); }
  50% { scale: 1.12; filter: brightness(1.22) drop-shadow(0 0 9px rgba(255,255,255,.60)); }
}

@keyframes sweetSelectedPulse {
  from { scale: 1; filter: brightness(1.03); }
  to { scale: 1.035; filter: brightness(1.10); }
}

@keyframes sweetDropIn {
  from {
    opacity: 0;
    transform: translateY(calc(var(--tile) * -1.15)) scale(.92);
  }
}

@keyframes sweetPopOut {
  to {
    opacity: 0;
    transform: scale(.35);
    filter: brightness(1.35);
  }
}

@media (max-width: 920px) {
  .saga-board-stage { padding: 13px; border-radius: 30px; }
  .saga-board { --tile: min(7.05vh, 10vw, 59px); }
}

@media (max-width: 620px) {
  .saga-board-stage { padding: 8px; border-width: 3px; border-radius: 23px; }
  .saga-board-stage::before { inset: 5px; border-radius: 17px; }
  .saga-board { --tile: min(7.05vh, 10.25vw, 53px); }
  .saga-board::before { inset: -2px; border-radius: 18px; }
  .saga-board .board-cell { padding: 2px; }
  .saga-board .piece { padding: calc(var(--tile) * .075); }
}

@media (prefers-reduced-motion: reduce) {
  .saga-board .piece,
  .saga-board .piece .candy,
  .saga-board.impact {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}