:root {
  --sun: #ffc62e;
  --pink: #ff2fa4;
  --hot-pink: #f01988;
  --cyan: #35d8ff;
  --ink: #23133a;
  --wood: #8c4f22;
  --panel: rgba(255, 255, 255, 0.94);
  --board-cols: 11;
  --board-rows: 8;
  --cell-gap: 2px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: "Trebuchet MS", "Avenir Next", Verdana, sans-serif;
  background: #ffca36;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;
  width: 100vw;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 5%, rgba(255, 255, 255, 0.55), transparent 18rem),
    radial-gradient(circle at 70% 95%, rgba(255, 34, 157, 0.9), transparent 20rem),
    linear-gradient(180deg, #ffd845 0%, #ffc24a 34%, #ff7c56 67%, #f328a5 100%);
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 37%, rgba(255, 255, 255, 0.23), transparent 18rem),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 7px, transparent 7px 22px);
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  transition: opacity 180ms ease, transform 180ms ease;
}

.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.98);
}

.map-hero {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 18px 16px;
  border-radius: 30px;
  color: white;
  background:
    linear-gradient(135deg, rgba(133, 75, 35, 0.96), rgba(95, 43, 25, 0.94)),
    radial-gradient(circle at 20% 10%, rgba(255, 219, 136, 0.8), transparent 16rem);
  box-shadow: 0 18px 36px rgba(75, 31, 28, 0.25), inset 0 0 0 2px rgba(255, 224, 153, 0.26);
}

.eyebrow {
  margin: 0 0 4px;
  color: #7ef0ff;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: clamp(2rem, 10vw, 3.5rem);
  line-height: 0.9;
  text-shadow: 0 5px 0 rgba(44, 17, 31, 0.24);
}

h2 {
  margin-bottom: 18px;
  font-size: 2rem;
}

.map-copy {
  margin: 0;
  opacity: 0.9;
  font-weight: 800;
}

.reward-card {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 12px 14px;
  border-radius: 22px;
  text-align: center;
  color: #6b1159;
  background: var(--panel);
  box-shadow: inset 0 -5px 0 rgba(255, 178, 219, 0.65), 0 10px 18px rgba(70, 21, 50, 0.24);
}

.reward-card span,
.preview-stats span,
.goal-card span,
.score-card span,
.moves-badge small {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.8;
}

.reward-card strong {
  font-size: 1.8rem;
}

.level-path {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
  padding: 22px 2px 4px;
  overflow: auto;
  scrollbar-width: none;
}

.level-path::-webkit-scrollbar {
  display: none;
}

.current-level-card {
  width: min(92vw, 430px);
  margin: auto;
  padding: 24px;
  border-radius: 34px;
  color: #5b1852;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,0.9), transparent 3.8rem),
    linear-gradient(180deg, #fff7fe, #ffe0f2 60%, #ffd18f);
  box-shadow:
    0 26px 50px rgba(85, 28, 87, 0.28),
    inset 0 -7px 0 rgba(255, 166, 218, 0.55),
    inset 0 0 0 4px rgba(255,255,255,0.66);
}

.current-level-card h2 {
  margin: 4px 0 14px;
  color: #7b1464;
  font-size: clamp(2.4rem, 13vw, 4rem);
  line-height: 0.95;
  text-shadow: 0 3px 0 rgba(255,255,255,0.85);
}

.current-level-card .primary-button,
.current-level-card .secondary-button {
  width: 100%;
}

.demo-button,
.reset-button {
  margin-top: 14px;
}

.level-button {
  min-height: 94px;
  border: 0;
  border-radius: 28px;
  color: white;
  font-weight: 1000;
  text-align: left;
  padding: 16px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.84), transparent 1.5rem),
    linear-gradient(135deg, #36d8ff, #8253ff 55%, #f02ca5);
  box-shadow: 0 15px 26px rgba(73, 23, 87, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.4);
  transform: rotate(var(--tilt, -2deg));
}

.level-button:nth-child(even) {
  --tilt: 2deg;
  margin-top: 18px;
}

.level-button.is-locked {
  filter: saturate(0.15) brightness(0.8);
}

.level-button.is-current {
  transform: rotate(var(--tilt, -2deg)) scale(1.04);
  box-shadow:
    0 18px 34px rgba(73, 23, 87, 0.34),
    0 0 0 4px rgba(255, 255, 255, 0.82),
    0 0 28px rgba(255, 236, 93, 0.78),
    inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.level-button strong {
  display: block;
  font-size: 2rem;
}

.level-button span {
  font-size: 0.8rem;
}

.preview-screen,
.result-screen {
  align-items: center;
  justify-content: center;
  background: rgba(38, 11, 56, 0.18);
  backdrop-filter: blur(8px);
}

.dialog-card {
  width: min(92vw, 430px);
  padding: 24px;
  border-radius: 34px;
  text-align: center;
  background: var(--panel);
  box-shadow: 0 26px 56px rgba(60, 17, 64, 0.35), inset 0 -7px 0 rgba(255, 180, 222, 0.55);
}

.back-button {
  display: inline-flex;
  align-self: flex-start;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: #7b245f;
  background: #ffe5f4;
  font-weight: 900;
}

.preview-stats {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  gap: 12px;
  margin: 16px 0 24px;
}

.preview-stats div {
  padding: 14px 12px;
  border-radius: 22px;
  background: #fff4fb;
  box-shadow: inset 0 -4px 0 rgba(255, 178, 219, 0.55);
}

.preview-stats strong {
  display: block;
  margin-top: 5px;
  color: #7d1265;
}

.stage-intro-screen {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.58), transparent 28rem),
    linear-gradient(180deg, rgba(117,39,164,0.28), rgba(255,139,204,0.28));
}

.stage-intro-shell {
  width: min(94vw, 520px);
  min-height: min(78dvh, 660px);
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 12px;
}

.stage-intro-shell .eyebrow {
  color: white;
  text-shadow: 0 2px 0 rgba(120, 36, 113, 0.48);
}

.stage-intro-stack {
  position: relative;
  width: min(88vw, 430px);
  aspect-ratio: 0.82;
}

.stage-intro-board {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76vw, 330px);
  padding: 34px 12px 12px;
  border: 4px solid rgba(255,255,255,0.82);
  border-radius: 26px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.78), transparent 4.5rem),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,211,241,0.95));
  box-shadow:
    0 24px 44px rgba(82, 28, 102, 0.28),
    inset 0 -5px 0 rgba(255, 154, 213, 0.45);
  transform:
    translate(-50%, -50%)
    translateY(var(--intro-offset))
    scale(var(--intro-scale));
  opacity: 0;
  animation: stage-board-reveal 620ms cubic-bezier(.2,.85,.15,1.05) forwards;
  animation-delay: calc(var(--intro-order) * 430ms);
}

.stage-intro-board.is-play-stage {
  border-color: #fff7a8;
  box-shadow:
    0 28px 52px rgba(82, 28, 102, 0.36),
    0 0 30px rgba(255, 238, 107, 0.78),
    inset 0 -5px 0 rgba(255, 154, 213, 0.45);
  animation-name: stage-board-reveal, stage-board-play-pulse;
  animation-duration: 620ms, 760ms;
  animation-delay: calc(var(--intro-order) * 430ms), 1560ms;
  animation-fill-mode: forwards, forwards;
}

.stage-intro-badge {
  position: absolute;
  left: 14px;
  top: 10px;
  z-index: 2;
  min-width: 52px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #8c4dff, #e92bb6);
  box-shadow: 0 3px 0 rgba(91, 28, 105, 0.55);
  font-size: 0.82rem;
  font-weight: 1000;
  text-align: center;
}

.stage-intro-grid {
  display: grid;
  grid-template-columns: repeat(var(--intro-cols), 1fr);
  grid-template-rows: repeat(var(--intro-rows), 1fr);
  gap: 3px;
  aspect-ratio: var(--intro-cols) / var(--intro-rows);
}

.stage-intro-cell {
  position: relative;
  display: block;
  border-radius: 5px;
  background: linear-gradient(135deg, #74eaff, #8c4dff);
  box-shadow: inset 0 -2px 0 rgba(32, 27, 78, 0.22);
}

.stage-intro-cell[data-gem="mint"] {
  background: linear-gradient(135deg, #9effbd, #42cfe8);
}

.stage-intro-cell[data-gem="gold"] {
  background: linear-gradient(135deg, #fff38f, #ff9e3f);
}

.stage-intro-cell[data-gem="rose"] {
  background: linear-gradient(135deg, #ff8ed0, #ff4c85);
}

.stage-intro-cell[data-gem="violet"] {
  background: linear-gradient(135deg, #d08cff, #713cff);
}

.stage-intro-cell.is-painted::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 4px;
  background: rgba(74, 239, 255, 0.82);
  box-shadow: 0 0 8px rgba(74, 239, 255, 0.78);
}

.stage-intro-cell.has-blocker::before {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: 1;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff4be, #d68736 56%, #814024);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.62), 0 1px 3px rgba(91,43,27,0.42);
}

.stage-intro-cell.is-inactive {
  visibility: hidden;
}

@keyframes stage-board-reveal {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -43%)
      translateY(var(--intro-start-offset))
      scale(var(--intro-start-scale));
  }
  100% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translateY(var(--intro-offset))
      scale(var(--intro-scale));
  }
}

@keyframes stage-board-play-pulse {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.13);
  }
  100% {
    filter: brightness(1);
  }
}

.primary-button,
.secondary-button {
  border: 0;
  border-radius: 999px;
  min-height: 54px;
  padding: 0 24px;
  font-weight: 1000;
  color: white;
  background: linear-gradient(180deg, #54efff, #1ba3ff 52%, #7462ff);
  box-shadow: 0 10px 0 #115dba, 0 16px 26px rgba(35, 76, 187, 0.28);
}

.secondary-button {
  color: #7c1e65;
  background: linear-gradient(180deg, #fff, #ffdff1);
  box-shadow: 0 8px 0 #d97fb2, 0 14px 22px rgba(143, 38, 102, 0.18);
}

.game-screen {
  justify-content: space-between;
  gap: 10px;
}

.game-hud {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  gap: 10px;
  align-items: start;
  min-height: 116px;
  padding: 12px 8px 18px;
  border-radius: 0 0 32px 32px;
  background:
    radial-gradient(circle at 50% -40%, rgba(255, 236, 166, 0.9), transparent 8rem),
    linear-gradient(180deg, rgba(128, 70, 33, 0.98), rgba(90, 43, 25, 0.94));
  box-shadow: 0 14px 24px rgba(70, 28, 33, 0.24), inset 0 -3px 0 rgba(75, 29, 19, 0.45);
}

.goal-card,
.score-card {
  min-height: 64px;
  padding: 11px 10px;
  border-radius: 18px;
  text-align: center;
  background: var(--panel);
  box-shadow: inset 0 -4px 0 rgba(255, 188, 220, 0.55);
}

.goal-card strong,
.score-card strong {
  display: block;
  margin-top: 4px;
  color: #861463;
  font-size: clamp(1rem, 4vw, 1.35rem);
  line-height: 1.1;
}

.goal-card strong.has-collect-goals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.collect-goal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #861463;
  background: rgba(255, 232, 247, 0.9);
}

.collect-goal.is-complete {
  color: #0f6b3a;
  background: linear-gradient(180deg, #dcffe9, #9ef2bf);
  box-shadow: inset 0 -2px 0 rgba(34, 150, 76, 0.3);
}

.collect-complete-badge {
  padding: 2px 5px;
  border-radius: 999px;
  color: white;
  background: #18a752;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.moves-badge {
  margin-top: -2px;
  min-height: 100px;
  padding: 10px 4px 12px;
  text-align: center;
  color: white;
  background: linear-gradient(180deg, #6feeff, #1d9bdf 48%, #2268bb);
  clip-path: polygon(10% 0, 90% 0, 90% 72%, 50% 100%, 10% 72%);
  filter: drop-shadow(0 7px 0 rgba(21, 76, 126, 0.65));
}

.moves-badge span {
  display: block;
  color: #213565;
  font-weight: 1000;
  font-size: 0.85rem;
}

.moves-badge strong {
  display: block;
  font-size: 2.6rem;
  line-height: 0.9;
  text-shadow: 0 4px 0 rgba(22, 63, 106, 0.32);
}

.stars-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: white;
  margin: -7px 8px 2px;
}

.stars-strip span {
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f02a98, #ffba31);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4);
}

.stars-strip i {
  font-style: normal;
  color: #fff9c9;
  text-shadow: 0 2px 0 #c97800;
}

.board-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  --cell-size: min(calc((98vw - (var(--board-cols) - 1) * var(--cell-gap)) / var(--board-cols)), calc((58dvh - (var(--board-rows) - 1) * var(--cell-gap)) / var(--board-rows)));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--board-cols), var(--cell-size));
  grid-auto-rows: var(--cell-size);
  gap: var(--cell-gap);
  justify-content: center;
  max-width: 100vw;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 18px 28px rgba(58, 16, 59, 0.18);
}

.cell {
  position: relative;
  border: 0;
  border-radius: 7px;
  padding: 0;
  background: rgba(44, 65, 87, 0.86);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.13), inset 0 -3px 0 rgba(11, 20, 42, 0.25);
  touch-action: none;
  user-select: none;
}

.cell.has-paint:not(.is-painted) {
  background:
    linear-gradient(135deg, rgba(99, 29, 128, 0.98), rgba(37, 44, 90, 0.94));
  box-shadow:
    inset 0 0 0 2px rgba(255, 119, 245, 0.9),
    inset 0 0 18px rgba(255, 51, 222, 0.35),
    0 0 10px rgba(255, 61, 225, 0.36);
}

.cell.is-inactive {
  pointer-events: none;
  visibility: hidden;
}

.gem {
  position: absolute;
  inset: 5%;
  border-radius: 30% 30% 35% 35%;
  transform: rotate(45deg) scale(0.86);
  filter: drop-shadow(0 4px 2px rgba(17, 20, 43, 0.35));
  will-change: transform, opacity;
}

.gem::before {
  content: "";
  position: absolute;
  inset: 16% 16% auto auto;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: rgba(255,255,255,0.58);
  filter: blur(1px);
}

.cell[data-gem="cyan"] .gem {
  background: linear-gradient(135deg, #e6ffff 0 13%, #53e9ff 20% 50%, #139bdc 78%, #0570bf 100%);
}

.cell[data-gem="mint"] .gem {
  background: linear-gradient(135deg, #edffce 0 12%, #53ff75 20% 48%, #11b854 72%, #08783e 100%);
}

.cell[data-gem="gold"] .gem {
  border-radius: 38% 38% 32% 32%;
  background: linear-gradient(135deg, #fffad3 0 13%, #ffd647 20% 52%, #f79919 78%, #cf620e 100%);
}

.cell[data-gem="rose"] .gem {
  border-radius: 24%;
  background: linear-gradient(135deg, #ffe2dc 0 12%, #ff7a64 22% 55%, #ed2c33 78%, #aa121e 100%);
}

.cell[data-gem="violet"] .gem {
  border-radius: 34%;
  background: linear-gradient(135deg, #ffe5ff 0 13%, #ff72ff 22% 50%, #c229df 76%, #7821b4 100%);
}

.cell.is-selected {
  outline: 3px solid white;
  outline-offset: -2px;
  z-index: 2;
}

.cell.is-dragging {
  z-index: 5;
}

.cell.is-dragging .gem {
  filter: drop-shadow(0 10px 5px rgba(17, 20, 43, 0.35));
}

.cell.has-special .gem {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.82),
    0 0 12px rgba(255,255,255,0.74),
    inset 0 0 14px rgba(255,255,255,0.45);
}

.cell-paint {
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.7), transparent 28%),
    linear-gradient(135deg, rgba(49,244,224,0.98), rgba(80,184,255,0.92) 52%, rgba(123,63,255,0.9));
  opacity: 0.96;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.52),
    inset 0 0 18px rgba(255,255,255,0.22),
    0 0 14px rgba(71,238,255,0.66);
  pointer-events: none;
  animation: none;
}

.cell.is-painted .cell-paint {
  opacity: 1;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.72), transparent 30%),
    linear-gradient(135deg, rgba(42,245,220,1), rgba(75,204,255,0.96) 56%, rgba(104,70,255,0.92));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.6),
    inset 0 -8px 18px rgba(34,89,181,0.24),
    0 0 18px rgba(71,238,255,0.82);
  animation: paint-fill 360ms ease-out both;
}

.cell.has-blocker {
  background:
    linear-gradient(135deg, rgba(49, 43, 57, 0.96), rgba(32, 52, 77, 0.94));
  box-shadow:
    inset 0 0 0 2px rgba(255, 219, 134, 0.62),
    inset 0 -3px 0 rgba(76, 38, 28, 0.5),
    0 0 10px rgba(255, 190, 88, 0.26);
}

.cell-blocker {
  position: absolute;
  inset: 9%;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff7c9;
  font-size: calc(var(--cell-size) * 0.42);
  text-shadow: 0 2px 0 rgba(97, 47, 18, 0.85);
  background:
    linear-gradient(135deg, rgba(255,244,190,0.98), rgba(214,135,54,0.98) 54%, rgba(129,64,36,0.98));
  box-shadow:
    0 3px 0 rgba(112,52,25,0.92),
    inset 0 0 0 2px rgba(255,255,255,0.68),
    inset 0 -10px 18px rgba(91,43,27,0.26);
  pointer-events: none;
}

.cell-blocker::before {
  content: "";
  position: absolute;
  inset: 16% 20%;
  border-radius: 2px;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(74,35,28,0.72) 45% 51%, transparent 52% 100%),
    linear-gradient(36deg, transparent 0 50%, rgba(255,255,255,0.34) 51% 54%, transparent 55% 100%);
}

.cell-layer-badge {
  position: absolute;
  right: -2px;
  top: -4px;
  z-index: 8;
  min-width: calc(var(--cell-size) * 0.36);
  height: calc(var(--cell-size) * 0.36);
  display: grid;
  place-items: center;
  border: 2px solid white;
  border-radius: 999px;
  color: white;
  background: linear-gradient(180deg, #ff48db, #7a2dff);
  box-shadow: 0 2px 0 rgba(75, 14, 99, 0.72), 0 0 8px rgba(255,255,255,0.84);
  font-size: calc(var(--cell-size) * 0.2);
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}

.cell-layer-badge-blocker {
  background: linear-gradient(180deg, #ffc95e, #9a4b1b);
  box-shadow: 0 2px 0 rgba(88, 39, 20, 0.78), 0 0 8px rgba(255,223,144,0.8);
}

.special-rune {
  position: absolute;
  inset: 14%;
  z-index: 2;
  display: grid;
  place-items: center;
  color: white;
  font-size: calc(var(--cell-size) * 0.46);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(63, 24, 83, 0.72), 0 0 8px rgba(255,255,255,0.85);
  pointer-events: none;
}

.cell.is-clearing .gem {
  animation: pop-clear 180ms cubic-bezier(.1,.88,.2,1.25) both;
}

.cell.is-clearing::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 3;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 18%, rgba(117,235,255,0.65) 19% 34%, transparent 35%),
    conic-gradient(from 10deg, transparent, rgba(255,255,255,0.85), transparent, rgba(255,217,76,0.78), transparent);
  animation: crystal-burst 260ms ease-out both;
  pointer-events: none;
}

.cell.is-birth-cell::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.86), rgba(255,207,54,0.42) 45%, transparent 70%);
  animation: rune-birth 420ms ease-out both;
  pointer-events: none;
}

.cell.is-special-target .gem {
  filter: brightness(1.35) saturate(1.35) drop-shadow(0 0 12px rgba(255,255,255,0.9));
}

.cell.is-special-line::before,
.cell.is-special-bomb::before,
.cell.is-special-prism::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
}

.cell.is-special-line::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), rgba(122,239,255,0.8), transparent);
  animation: special-line-sweep 320ms ease-out both;
}

.cell.is-special-bomb::before {
  background: radial-gradient(circle, rgba(255,255,255,0.96) 0 18%, rgba(255,209,67,0.82) 20% 44%, rgba(255,73,145,0.42) 45% 62%, transparent 64%);
  animation: special-bomb-shock 340ms ease-out both;
}

.cell.is-special-prism::before {
  background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(119,243,255,0.9), rgba(255,79,214,0.8), rgba(255,231,92,0.88), rgba(255,255,255,0));
  animation: special-prism-flash 420ms ease-out both;
}

.special-fx {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  border-radius: 20px;
  mix-blend-mode: screen;
}

.special-fx-line {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,0.72) 48% 52%, transparent 92% 100%),
    linear-gradient(0deg, transparent 0 8%, rgba(97,232,255,0.48) 48% 52%, transparent 92% 100%);
  animation: special-line-sweep 320ms ease-out both;
}

.special-fx-bomb {
  background: radial-gradient(circle at center, rgba(255,255,255,0.92) 0 8%, rgba(255,217,75,0.56) 16%, rgba(255,49,153,0.32) 32%, transparent 58%);
  animation: special-bomb-shock 360ms ease-out both;
}

.special-fx-prism {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.82), rgba(119,239,255,0.38) 24%, rgba(255,70,214,0.26) 42%, transparent 68%),
    conic-gradient(from 20deg, transparent, rgba(255,255,255,0.65), transparent, rgba(255,238,92,0.62), transparent, rgba(116,239,255,0.7), transparent);
  animation: special-prism-flash 460ms ease-out both;
}

.cube-drone-fx {
  position: absolute;
  width: clamp(22px, 7vw, 34px);
  aspect-ratio: 1;
  z-index: 22;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.64);
  animation: cube-drone-flight var(--drone-ms, 420ms) cubic-bezier(.18,.82,.18,1) both;
  filter: drop-shadow(0 0 12px rgba(129,244,255,0.95)) drop-shadow(0 0 18px rgba(255,212,82,0.5));
}

.cube-drone-body {
  position: absolute;
  inset: 17%;
  border-radius: 42% 58% 48% 52%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.95) 0 12%, transparent 13%),
    linear-gradient(135deg, rgba(131,246,255,0.95), rgba(114,127,255,0.82) 48%, rgba(255,216,82,0.9));
  border: 1px solid rgba(255,255,255,0.72);
  transform: rotate(45deg);
}

.cube-drone-body::before,
.cube-drone-body::after {
  content: "";
  position: absolute;
  width: 48%;
  height: 12%;
  top: -18%;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 0 10px rgba(129,244,255,0.9);
  animation: cube-drone-rotor 120ms linear infinite;
}

.cube-drone-body::before {
  left: -28%;
}

.cube-drone-body::after {
  right: -28%;
}

.cube-drone-trail {
  position: absolute;
  width: 170%;
  height: 42%;
  right: 58%;
  top: 28%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(101,232,255,0.42), rgba(255,255,255,0.72));
  transform: rotate(-18deg);
  transform-origin: right center;
  filter: blur(1px);
}

@keyframes pop-clear {
  to {
    transform: rotate(45deg) scale(0.15);
    opacity: 0;
  }
}

@keyframes crystal-burst {
  from {
    transform: scale(0.2) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: scale(1.45) rotate(90deg);
    opacity: 0;
  }
}

@keyframes rune-birth {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  45% {
    transform: scale(1.35);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes paint-fill {
  0% {
    transform: scale(0.72);
    filter: brightness(1.9);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes special-line-sweep {
  0% {
    transform: scaleX(0.1) scaleY(0.72);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1.18) scaleY(1.04);
    opacity: 0;
  }
}

@keyframes special-bomb-shock {
  0% {
    transform: scale(0.18);
    opacity: 0;
  }
  38% {
    transform: scale(0.82);
    opacity: 1;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@keyframes special-prism-flash {
  0% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  100% {
    transform: scale(1.35) rotate(120deg);
    opacity: 0;
  }
}

@keyframes cube-drone-flight {
  0% {
    transform: translate(-50%, -50%) scale(0.52) rotate(-12deg);
    opacity: 0;
  }
  18% {
    transform: translate(calc(var(--drone-dx) * 0.15 - 50%), calc(var(--drone-dy) * -0.05 - 50%)) scale(0.95) rotate(8deg);
    opacity: 1;
  }
  72% {
    transform: translate(calc(var(--drone-dx) * 0.82 - 50%), calc(var(--drone-dy) * 0.82 - 50%)) scale(1.04) rotate(-8deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--drone-dx) - 50%), calc(var(--drone-dy) - 50%)) scale(0.28) rotate(28deg);
    opacity: 0;
  }
}

@keyframes cube-drone-rotor {
  to {
    transform: rotate(180deg);
  }
}

@keyframes paint-target-pulse {
  0%, 100% {
    transform: scale(0.96);
    filter: saturate(1.05) brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: saturate(1.45) brightness(1.16);
  }
}

.combo-demo-screen {
  gap: 12px;
  overflow: auto;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.demo-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  width: min(94vw, 520px);
  margin: 0 auto;
  padding: 12px 0 0;
}

.demo-header h2 {
  margin: 0;
  color: white;
  font-size: clamp(1.55rem, 7vw, 2.4rem);
  text-shadow: 0 3px 0 rgba(132, 46, 107, 0.55);
}

.demo-actions {
  width: min(94vw, 520px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.demo-action {
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: 9px 6px;
  color: #67205e;
  background: linear-gradient(180deg, #ffffff, #ffd4f0);
  box-shadow: 0 5px 0 rgba(145, 37, 116, 0.42);
  font-weight: 1000;
  font-size: 0.78rem;
}

.demo-action.is-active {
  color: white;
  background: linear-gradient(180deg, #8c4dff, #ec2bb7);
  box-shadow: 0 5px 0 rgba(94, 22, 111, 0.72), 0 0 14px rgba(255,255,255,0.72);
}

.demo-caption,
.objective-legend {
  width: min(94vw, 520px);
  margin: 0 auto;
  border-radius: 18px;
  color: #5b1852;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 8px 18px rgba(80, 18, 88, 0.16);
}

.demo-caption {
  min-height: 52px;
  padding: 10px 12px;
  font-weight: 900;
  line-height: 1.25;
}

.objective-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.objective-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-swatch {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(70, 15, 70, 0.24);
}

.legend-paint {
  background: linear-gradient(135deg, #ff30da, #6f28ff);
}

.legend-painted {
  background: linear-gradient(135deg, #ff58e7, #62e2ff);
}

.legend-blocker {
  background: linear-gradient(135deg, #fff4be, #d68736 56%, #814024);
}

.demo-board-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}

.demo-board {
  --board-cols: 7;
  --board-rows: 7;
  --cell-size: min(calc((94vw - 12px) / 7), 52px);
  border-radius: 12px;
}

.demo-board .cell {
  pointer-events: none;
}

.demo-board .cell.demo-source {
  outline: 3px solid #ffffff;
  outline-offset: -2px;
  z-index: 6;
}

.demo-board .cell.demo-target {
  animation: demo-target-flash 850ms ease-in-out infinite;
}

.demo-board .cell.demo-transform .gem {
  box-shadow:
    0 0 0 3px white,
    0 0 18px rgba(255,247,110,0.95);
}

.demo-board .cell.demo-hit {
  animation: demo-hit-pop 580ms ease-out both;
}

.demo-board .cell.demo-cleared .gem {
  opacity: 0.28;
  transform: rotate(45deg) scale(0.62);
}

@keyframes demo-target-flash {
  0%, 100% {
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.13), inset 0 -3px 0 rgba(11, 20, 42, 0.25), 0 0 0 rgba(255,255,255,0);
  }
  50% {
    box-shadow: inset 0 0 0 2px white, 0 0 16px rgba(255,255,255,0.95), 0 0 22px rgba(255,65,217,0.72);
  }
}

@keyframes demo-hit-pop {
  0% {
    transform: scale(1);
  }
  38% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(0.98);
  }
}

.combo-burst {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 20;
  transform: translate(-50%, -50%);
  color: #fff3b7;
  font-size: clamp(1.8rem, 9vw, 3.2rem);
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 0 #c84a91, 0 0 14px rgba(255,255,255,0.9);
  pointer-events: none;
  animation: combo-pop 620ms cubic-bezier(.16,.92,.22,1) both;
}

@keyframes combo-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.45) rotate(-8deg);
    opacity: 0;
  }
  28% {
    transform: translate(-50%, -56%) scale(1.12) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -92%) scale(0.86) rotate(0deg);
    opacity: 0;
  }
}

.board.is-shuffling {
  animation: board-shuffle 360ms ease both;
}

@keyframes board-shuffle {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  45% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-3px);
  }
}

.game-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
}

.round-tool,
.tool-row span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  background: linear-gradient(180deg, #ff61c4, #e01388);
  box-shadow: 0 7px 0 #a21968, 0 10px 18px rgba(89, 12, 80, 0.22);
  font-weight: 1000;
  font-size: 1.4rem;
}

.tool-row {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border: 3px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  background: rgba(126, 44, 104, 0.2);
}

.tool-row span {
  width: 52px;
  height: 52px;
  border-color: #ffda90;
  color: #552f1a;
  background: linear-gradient(180deg, #b56f3c, #70401f);
  box-shadow: inset 0 0 0 4px rgba(255, 218, 141, 0.2), 0 5px 0 #442112;
}

.result-stars {
  color: #ffc928;
  font-size: 3rem;
  letter-spacing: 0.08em;
  text-shadow: 0 4px 0 #c27000;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 374px) {
  .screen {
    padding-left: 4px;
    padding-right: 4px;
  }

  .board {
    --cell-gap: 1px;
  }

  .game-hud {
    grid-template-columns: 1fr 74px 1fr;
    gap: 6px;
  }

  .moves-badge strong {
    font-size: 2.2rem;
  }

  .tool-row span {
    width: 44px;
    height: 44px;
  }
}