/* ============================================================
     DESIGN TOKENS
  ============================================================ */
:root {
  --bg-deep: #0d0f1c;
  --bg-mid: #151834;
  --bg-glow: #221e46;

  --glass-fill: rgba(255, 255, 255, 0.06);
  --glass-fill-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  --ink-0: #f5f4ff;
  --ink-1: #c7c4e6;
  --ink-2: #8a86b3;

  --accent-pink: #ff9fc7;
  --accent-mint: #7fead0;
  --accent-lavender: #b7a3ff;
  --accent-sky: #8fc7ff;
  --accent-peach: #ffbf8a;
  --accent-lemon: #ffe28a;
  --accent-coral: #ff9585;
  --accent-teal: #7fd6d6;

  --success: #7fead0;
  --danger: #ff8a8a;

  /* --- PRİZMA kimliği: Block Blast'tan ayrışan yeni ton seti --- */
  --bg-deep-2: #050a17;
  --bg-mid-2: #0d1440;
  --bg-glow-2: #1a0e3d;
  --nebula-a: #ff2fb1;
  --nebula-b: #12e4d9;
  --nebula-c: #6a3bff;
  --crystal-a: #baffef;
  --crystal-b: #4dfff0;
  --crystal-glow: #7cfff0;
  --surge-a: #ff3fa8;
  --surge-b: #ffde59;
  --surge-glow: rgba(255, 63, 168, 0.55);

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --cell-gap: 6px;

  --font-display:
    -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: none;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 47, 177, 0.22) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 88%,
      rgba(18, 228, 217, 0.18) 0%,
      transparent 48%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-deep-2), var(--bg-mid-2));
  background-size:
    140% 140%,
    140% 140%,
    160% 160%,
    100% 100%;
  animation: nebulaDrift 70s steps(6, jump-both) infinite alternate;
  color: var(--ink-0);
  font-family: var(--font-body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior-y: none;
}

@keyframes nebulaDrift {
  0% {
    background-position:
      0% 0%,
      100% 100%,
      50% 50%,
      0 0;
  }
  100% {
    background-position:
      20% 15%,
      75% 80%,
      55% 45%,
      0 0;
  }
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  gap: 10px;
  overscroll-behavior: none;
}

/* Prizma Surge (fever) modu: kısa süreliğine tüm ekranı canlandırır.
   NOT (ısınma düzeltmesi): önceden #app'in tamamına "filter:
   saturate/brightness" animasyonu uygulanıyordu -- bu, tüm ekranın alt
   ağacını her karede yeniden boyatan (repaint) çok pahalı bir efekttir.
   Aynı "parlama" hissini, ayrı bir compositor katmanında sadece
   "opacity" animasyonu ile (repaint gerektirmez, GPU'da çok daha ucuz)
   veren bir overlay katmanına taşındı. */
#app.surge-active::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Bilerek dusuk bir z-index: bu katman sadece oyun tahtasinin/HUD'un
     USTUNDE gorunmeli ama Ayarlar/Magaza/Pause gibi modal overlay'lerin
     (bunlar #app'in DOM kardesidir, z-index 900-6300 araligi) ALTINDA
     kalmali -- yoksa surge modu acikken bir modal acilirsa bu parlama
     katmani modalin ustune biner. */
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 222, 89, 0.28) 0%,
    rgba(255, 63, 168, 0.16) 50%,
    transparent 75%
  );
  mix-blend-mode: screen;
  animation: surgeGlowPulse 0.6s ease-in-out infinite alternate;
}
@keyframes surgeGlowPulse {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* Büyük temizlemelerde hafif ekran sarsıntısı */
#app.shake {
  animation: appShake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes appShake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* ============================================================
     TOP BAR
  ============================================================ */
.topbar {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(4px, 2vw, 8px);
  flex-shrink: 0;
}

.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.score-cluster {
  display: flex;
  gap: clamp(4px, 2vw, 8px);
  flex: 1;
  min-width: 0;
}

.score-card {
  flex: 1;
  border-radius: var(--radius-md);
  padding: clamp(6px, 2vw, 8px) clamp(6px, 3vw, 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.score-card .label {
  font-size: clamp(8px, 2.4vw, 10px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
}
.score-card .value {
  font-size: clamp(15px, 4.6vw, 20px);
  font-weight: 800;
  color: var(--ink-0);
  font-family: var(--font-display);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.score-card.hi .value {
  color: var(--accent-lemon);
}
.score-card.combo {
  align-items: center;
}
.score-card.combo .value {
  color: var(--nebula-a);
  transition:
    transform 0.18s ease,
    color 0.2s ease;
}
.score-card.combo.pulse .value {
  animation: comboPulse 0.4s ease;
}
.score-card.combo.tier-3 .value {
  color: var(--nebula-b);
}
.score-card.combo.tier-4 .value {
  color: var(--surge-b);
}
@keyframes comboPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

/* Prizma Ölçer: kristal parçalardan biriken enerjiyi gösteren şerit */
.prism-meter-wrap {
  width: 100%;
  max-width: 520px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
}
.prism-meter-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--crystal-glow);
}
.prism-meter-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}
.prism-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--crystal-a), var(--nebula-c));
  box-shadow: 0 0 10px var(--crystal-glow);
  transition: width 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.prism-meter-fill.ready {
  background: linear-gradient(90deg, var(--surge-a), var(--surge-b));
  animation: prismReadyPulse 0.7s ease-in-out infinite alternate;
}
@keyframes prismReadyPulse {
  0% {
    box-shadow: 0 0 8px var(--surge-glow);
  }
  100% {
    box-shadow: 0 0 18px var(--surge-glow);
  }
}
.prism-meter-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.icon-buttons {
  display: flex;
  gap: clamp(4px, 1.6vw, 8px);
  flex-shrink: 0;
}
.icon-btn {
  width: clamp(34px, 9.5vw, 44px);
  height: clamp(34px, 9.5vw, 44px);
  min-width: 34px;
  min-height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-0);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  flex-shrink: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 rgba(77, 255, 240, 0);
}
.icon-btn:hover {
  box-shadow: 0 0 14px rgba(77, 255, 240, 0.25);
  border-color: rgba(77, 255, 240, 0.4);
}
.icon-btn:active {
  transform: scale(0.9);
  background: var(--glass-fill-strong);
}
.icon-btn svg {
  width: clamp(15px, 4.4vw, 20px);
  height: clamp(15px, 4.4vw, 20px);
}

/* ============================================================
     GRID
  ============================================================ */
.board-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  min-height: 0;
  position: relative;
}

#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: var(--cell-gap);
  width: min(94vw, calc(100dvh - var(--reserved-v, 230px)), 480px);
  height: min(94vw, calc(100dvh - var(--reserved-v, 230px)), 480px);
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cell {
  position: relative;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
  overflow: hidden;
}
.cell.filled {
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.25);
}
.cell.filled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0) 55%
  );
  pointer-events: none;
}
.cell.preview-ok {
  background: rgba(127, 234, 208, 0.35) !important;
  border-color: rgba(127, 234, 208, 0.7) !important;
  box-shadow:
    0 0 10px rgba(127, 234, 208, 0.5),
    inset 0 0 0 1px rgba(127, 234, 208, 0.4);
}
.cell.preview-bad {
  background: rgba(255, 138, 138, 0.32) !important;
  border-color: rgba(255, 138, 138, 0.65) !important;
  box-shadow: 0 0 10px rgba(255, 138, 138, 0.4);
}
.cell.clearing {
  animation: clearCell 0.42s ease forwards;
  z-index: 5;
}
@keyframes clearCell {
  0% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
  }
  35% {
    transform: scale(1.16);
    filter: brightness(1.9);
    opacity: 1;
  }
  100% {
    transform: scale(0.2);
    filter: brightness(2.4);
    opacity: 0;
  }
}
.cell.pop-in {
  animation: popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* Kristal Blok: özgün oyun mekaniği — parlayan, döner yüzeyli özel hücre */
.cell.filled.crystal {
  background: linear-gradient(
    135deg,
    var(--crystal-a),
    var(--crystal-b) 45%,
    var(--nebula-c) 100%
  ) !important;
  box-shadow:
    0 0 14px var(--crystal-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2);
  animation: crystalShimmer 1.8s ease-in-out infinite;
}
.cell.filled.crystal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.05) 40%
  );
  mix-blend-mode: overlay;
  animation: crystalRotate 3.2s linear infinite;
}
@keyframes crystalShimmer {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.25) saturate(1.3);
  }
}
@keyframes crystalRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.piece-cell.crystal {
  background: linear-gradient(
    135deg,
    var(--crystal-a),
    var(--crystal-b) 45%,
    var(--nebula-c) 100%
  ) !important;
  box-shadow: 0 0 10px var(--crystal-glow);
}

/* Nova Blok: "Sikistiginda kurtarici" -- yerlestirildigi an patlayan, atesli/titreyen ozel hucre */
.cell.filled.nova {
  background: linear-gradient(
    135deg,
    var(--surge-a),
    var(--surge-b) 55%,
    #ff5b3d 100%
  ) !important;
  box-shadow:
    0 0 16px var(--surge-a),
    inset 0 2px 5px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
  animation: novaPulse 0.7s ease-in-out infinite;
}
@keyframes novaPulse {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.35) saturate(1.4);
    transform: scale(1.04);
  }
}
.piece-cell.nova {
  background: linear-gradient(
    135deg,
    var(--surge-a),
    var(--surge-b) 55%,
    #ff5b3d 100%
  ) !important;
  box-shadow: 0 0 10px var(--surge-a);
  animation: novaPulse 0.7s ease-in-out infinite;
}

/* Flux Blok: "Enerji Akışı" -- yerleştirildiği anda bulunduğu satırı/sütunu
   temizleyen, çizgisel/yönlü enerji hissi veren özel hücre. Nova'nın
   yuvarlak/alan patlaması hissinden bilinçli olarak ayrışır: burada merkezde
   parlak bir çekirdek ve seçilen yön boyunca uzanan bir ışık çizgisi var. */
.cell.filled.flux {
  background: linear-gradient(
    90deg,
    var(--nebula-c),
    var(--nebula-a) 50%,
    var(--nebula-b) 100%
  ) !important;
  box-shadow:
    0 0 14px var(--nebula-a),
    inset 0 2px 5px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
  animation: fluxPulse 0.85s ease-in-out infinite;
}
.cell.filled.flux.flux-v {
  background: linear-gradient(
    180deg,
    var(--nebula-c),
    var(--nebula-a) 50%,
    var(--nebula-b) 100%
  ) !important;
}
.cell.filled.flux::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
}
/* Yon farki artik ikon yerine hareketle anlatiliyor: parlak enerji seridi
   hucre icinde flux-h icin yatayda, flux-v icin dikeyde ileri-geri kayarak
   akiyor -- yerlestirme anindaki isin huzmesiyle ayni gorsel dili paylasir. */
.cell.filled.flux.flux-h::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.85) 44%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.85) 56%,
    transparent
  );
  background-size: 260% 100%;
  animation:
    fluxPulse 0.85s ease-in-out infinite,
    fluxShimmerH 1.7s ease-in-out infinite;
}
.cell.filled.flux.flux-v::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.85) 44%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.85) 56%,
    transparent
  );
  background-size: 100% 260%;
  animation:
    fluxPulse 0.85s ease-in-out infinite,
    fluxShimmerV 1.7s ease-in-out infinite;
}
@keyframes fluxPulse {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.3) saturate(1.35);
  }
}
@keyframes fluxShimmerH {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
}
@keyframes fluxShimmerV {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
}
.piece-cell.flux {
  background: linear-gradient(
    90deg,
    var(--nebula-c),
    var(--nebula-a) 50%,
    var(--nebula-b) 100%
  ) !important;
  box-shadow: 0 0 10px var(--nebula-a);
  animation: fluxPulse 0.85s ease-in-out infinite;
}
.piece-cell.flux.flux-v {
  background: linear-gradient(
    180deg,
    var(--nebula-c),
    var(--nebula-a) 50%,
    var(--nebula-b) 100%
  ) !important;
}
.piece-cell.flux::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
}
.piece-cell.flux.flux-h::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.85) 44%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.85) 56%,
    transparent
  );
  background-size: 260% 100%;
  animation:
    fluxPulse 0.85s ease-in-out infinite,
    fluxShimmerH 1.7s ease-in-out infinite;
}
.piece-cell.flux.flux-v::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.85) 44%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.85) 56%,
    transparent
  );
  background-size: 100% 260%;
  animation:
    fluxPulse 0.85s ease-in-out infinite,
    fluxShimmerV 1.7s ease-in-out infinite;
}

/* Flux enerji ışını: yerleştirme anında satır/sütun boyunca merkezden iki
   uca doğru hızlıca yayılan, ince ve net bir çizgi -- Nova'nın alan
   patlamasından bilinçli olarak ayrışır: burada dairesel değil, tamamen
   doğrusal ve yönü açıkça belli eden bir "ışın" var. Parlak bir çekirdek +
   yumuşak kenar solması, ışının satır mı sütun mu temizlediğini net gösterir. */
.flux-beam {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  border-radius: 999px;
  opacity: 0;
}
.flux-beam.horizontal {
  background: linear-gradient(
    90deg,
    transparent,
    var(--nebula-a) 12%,
    #ffffff 50%,
    var(--nebula-b) 88%,
    transparent
  );
  box-shadow:
    0 0 10px var(--nebula-a),
    0 0 22px var(--nebula-b);
  animation: fluxBeamSweepH 0.38s cubic-bezier(0.16, 0.8, 0.2, 1) forwards;
}
.flux-beam.vertical {
  background: linear-gradient(
    180deg,
    transparent,
    var(--nebula-a) 12%,
    #ffffff 50%,
    var(--nebula-b) 88%,
    transparent
  );
  box-shadow:
    0 0 10px var(--nebula-a),
    0 0 22px var(--nebula-b);
  animation: fluxBeamSweepV 0.38s cubic-bezier(0.16, 0.8, 0.2, 1) forwards;
}
@keyframes fluxBeamSweepH {
  0% {
    opacity: 0;
    transform: scaleX(0.02);
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
@keyframes fluxBeamSweepV {
  0% {
    opacity: 0;
    transform: scaleY(0.02);
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

/* Flux kıvılcımları: hücrenin merkezinden satırın/sütunun iki ucuna doğru
   fırlayan, yönün "gidişatını" gözle takip ettiren iki nokta. */
.flux-spark {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #ffffff,
    var(--nebula-b) 55%,
    transparent 100%
  );
  box-shadow:
    0 0 10px var(--nebula-a),
    0 0 18px var(--nebula-b);
  pointer-events: none;
  z-index: 61;
}

.cell .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  left: 50%;
  pointer-events: none;
  opacity: 0.95;
}

/* ============================================================
     TRAY (piece bank)
  ============================================================ */
.tray-wrap {
  width: 100%;
  max-width: 520px;
  flex-shrink: 0;
  padding-bottom: 2px;
}
#tray {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--radius-lg);
  /* BUG FIX: min-height yerine sabit height -- parça boyutlari artik
     buildPieceElement() icinde --tray-piece-box'a gore normalize
     edildigi icin tepsi kutusu hicbir zaman buyuyup kuculmemeli. */
  --tray-piece-box: 84px;
  height: 104px;
}
.tray-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  position: relative;
}
.piece {
  display: grid;
  gap: 4px;
  cursor: grab;
  touch-action: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  will-change: transform;
}
.piece.spawn {
  animation: pieceSpawn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pieceSpawn {
  0% {
    transform: scale(0) rotate(-8deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.piece.dragging {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  /* Konum artık inline transform: translate3d ile verilir; .piece'in
     0.15s'lik transform geçişi sürüklemeyi geriden getirirdi. */
  transition: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
.piece.used {
  opacity: 0;
  transform: scale(0.4);
}
.piece-cell {
  /* border-radius artik script.js'te buildPieceElement() icinde
     unit boyutuna orantili olarak satir ici (inline) veriliyor --
     sabit deger burada dursaydi kucuk tepsi hucrelerinde (dar/
     landscape ekranlarda) kareyi daireye cevirebiliyordu. */
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 2px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}
.piece-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0) 55%
  );
}
.piece-empty-cell {
  visibility: hidden;
}

/* ============================================================
     FLOATING SCORE TEXT
  ============================================================ */
.float-text {
  position: fixed;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent-lemon);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 900;
  animation: floatUp 0.9s ease-out forwards;
  white-space: nowrap;
}
@keyframes floatUp {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -160%) scale(1);
    opacity: 0;
  }
}

.combo-banner {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  background: linear-gradient(
    120deg,
    var(--nebula-a),
    var(--nebula-c),
    var(--nebula-b)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(106, 59, 255, 0.4);
  z-index: 950;
  pointer-events: none;
  opacity: 0;
  animation: comboBanner 1.1s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
.combo-banner.tier-mega {
  font-size: 50px;
  background: linear-gradient(
    120deg,
    var(--surge-a),
    var(--surge-b),
    var(--crystal-a)
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.combo-banner.tier-surge {
  font-size: 54px;
  background: linear-gradient(
    120deg,
    var(--crystal-a),
    var(--surge-b),
    var(--surge-a)
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 40px var(--surge-glow);
}
@keyframes comboBanner {
  0% {
    transform: translate(-50%, -50%) scale(0.3) rotate(-6deg);
    opacity: 0;
  }
  18% {
    transform: translate(-50%, -50%) scale(1.15) rotate(2deg);
    opacity: 1;
  }
  32% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -58%) scale(1.05) rotate(0deg);
    opacity: 0;
  }
}

/* ============================================================
     OVERLAYS
  ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 16, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden; /* gizliyken tam ekran blur katmanı hiç çizilmesin */
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}
.overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.25s ease,
    visibility 0s;
}

.panel {
  width: min(88vw, 360px);
  border-radius: 28px;
  padding: 32px 26px 26px;
  text-align: center;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.03)
  );
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: scale(0.8) translateY(20px);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.overlay.show .panel {
  transform: scale(1) translateY(0);
}

.panel h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--nebula-a), var(--nebula-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.panel .sub {
  color: var(--ink-2);
  font-size: 13px;
  margin-bottom: 20px;
}

.panel .stat-row {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.panel .stat {
  flex: 1;
  border-radius: 16px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
}
.panel .stat .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  font-weight: 700;
}
.panel .stat .value {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  margin-top: 4px;
}
.panel .stat.new .value {
  color: var(--surge-b);
  animation: crystalShimmer 1.2s ease-in-out infinite;
}

.btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  min-height: 48px;
  border-radius: 18px;
  border: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 10px;
  transition:
    transform 0.14s ease,
    filter 0.14s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(0.96);
}
.btn-primary {
  background: linear-gradient(120deg, var(--nebula-a), var(--nebula-c));
  color: #0a0620;
  box-shadow: 0 10px 24px rgba(106, 59, 255, 0.4);
}
.btn-secondary {
  background: var(--glass-fill);
  color: var(--ink-0);
  border: 1px solid var(--glass-border);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
  padding-top: 8px;
  padding-bottom: 8px;
}

.pause-panel .icon-big {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--nebula-b), var(--nebula-c));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pause-panel .icon-big svg {
  width: 28px;
  height: 28px;
  color: #0a0620;
}

/* focus visibility for accessibility */
button:focus-visible,
.piece:focus-visible {
  outline: 2px solid var(--accent-sky);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 380px) {
  .score-card .value {
    font-size: 17px;
  }
  .panel h2 {
    font-size: 22px;
  }
}

/* Small-height phones in portrait (e.g. compact Android devices): reduce reserved
     chrome so the board keeps a comfortable size without overlapping the tray. */
@media (max-height: 700px) {
  :root {
    --reserved-v: 210px;
  }
}
@media (max-height: 600px) {
  :root {
    --reserved-v: 190px;
  }
}

/* Landscape phones: the vertical column layout has very little height to work with.
     Compact the topbar and tray so the square board still fits without breaking. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --reserved-v: 150px;
  }
  #app {
    gap: 6px;
  }
  .score-card {
    padding: 6px 10px;
  }
  .score-card .label {
    font-size: 9px;
  }
  .score-card .value {
    font-size: 15px;
  }
  .icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .icon-btn svg {
    width: 17px;
    height: 17px;
  }
  #tray {
    padding: 8px 6px;
    --tray-piece-box: 56px;
    height: 76px;
  }
  .tray-slot {
    height: 60px;
  }
}
@media (orientation: landscape) and (max-height: 380px) {
  :root {
    --reserved-v: 130px;
  }
  #tray {
    --tray-piece-box: 46px;
    height: 64px;
  }
  .tray-slot {
    height: 50px;
  }
}

/* Larger screens (tablets/desktop): allow the board a bit more breathing room. */
@media (min-width: 900px) {
  :root {
    --reserved-v: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
     PERFORMANCE MODE (Settings > Performance Mode)
     Eski / bütçe telefonlarda (özellikle backdrop-filter blur destekleyen
     ama zayıf GPU'lu Android cihazlarda) sürekli bulanıklık ve parıltı
     efektleri cihazı ısıtıp pil tüketiyor. Bu mod açıldığında en pahalı
     efektleri (blur + dekoratif sonsuz animasyonlar) kapatıyoruz;
     oyunun mantığı ve okunabilirliği aynı kalıyor.
  ============================================================ */
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Sadece animasyon ADINI kapatıyoruz (shorthand değil): satır içi
     animation-delay gibi değerler korunur. */
  animation-name: none !important;
}
/* Kısa, tek seferlik GERİ BİLDİRİM animasyonları sade modda da kalır
   (combo yazıları, +puan, flux ışını, satır silme, yerleştirme). Eskiden
   hepsi kapanıyor ve başlangıçta opacity:0 olan banner/ışın hiç
   görünmüyordu. Sadece sonsuz/dekoratif olanlar kapalı kalır. */
html.perf-lite .combo-banner {
  animation-name: comboBanner !important;
  /* Degrade text-clip + blur shadow, patlama anında her karede yeniden
     rasterize edilen pahalı bir katman. Sade modda düz renk + gölgesiz. */
  background: none !important;
  -webkit-text-fill-color: var(--nebula-c) !important;
  color: var(--nebula-c) !important;
  text-shadow: none !important;
}
html.perf-lite .combo-banner.tier-mega {
  -webkit-text-fill-color: var(--surge-a) !important;
  color: var(--surge-a) !important;
}
html.perf-lite .combo-banner.tier-surge {
  -webkit-text-fill-color: var(--surge-b) !important;
  color: var(--surge-b) !important;
}
html.perf-lite .float-text {
  animation-name: floatUp !important;
}
html.perf-lite .flux-beam.horizontal {
  animation-name: fluxBeamSweepH !important;
}
html.perf-lite .flux-beam.vertical {
  animation-name: fluxBeamSweepV !important;
}
html.perf-lite .piece.spawn {
  animation-name: pieceSpawn !important;
  animation-duration: 0.32s !important;
  animation-iteration-count: 1 !important;
}
html.perf-lite .cell.pop-in {
  animation-name: popIn !important;
  animation-duration: 0.22s !important;
  animation-iteration-count: 1 !important;
}
html.perf-lite .cell.clearing {
  animation-name: clearCellLite !important;
  animation-duration: 0.42s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
  animation-delay: 0s !important;
}
@keyframes clearCellLite {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.2);
    opacity: 0;
  }
}
/* Pahalı gölge/filtreler sade modda tek ince çerçeveye iner. */
html.perf-lite .cell.filled,
html.perf-lite .piece-cell {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  filter: none !important;
}
html.perf-lite .cell.preview-ok,
html.perf-lite .cell.preview-bad,
html.perf-lite .piece.dragging {
  box-shadow: none !important;
  filter: none !important;
}
/* Tutorial hedef vurgusu animasyonsuz da görünsün. */
html.perf-lite .cell.tutorial-target {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6) !important;
}
/* Sürükleme önizlemesi: tek bir hareketli katman (bkz. script.js
   createPreviewOverlay). Hücre sınıfları yerine transform ile taşınır. */
.drop-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 500;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
.drop-preview-cell {
  position: absolute;
  box-sizing: border-box;
  border-radius: 8px;
  background: rgba(127, 234, 208, 0.35);
  border: 1px solid rgba(127, 234, 208, 0.7);
  box-shadow:
    0 0 10px rgba(127, 234, 208, 0.5),
    inset 0 0 0 1px rgba(127, 234, 208, 0.4);
}
.drop-preview.bad .drop-preview-cell {
  background: rgba(255, 138, 138, 0.32);
  border-color: rgba(255, 138, 138, 0.65);
  box-shadow: 0 0 10px rgba(255, 138, 138, 0.4);
}
/* Oyun ekranındayken gizlenen başlangıç ekranının içindeki (kristaller,
   logo, neon titremeleri) animasyonlar görünmese de çalışmaya devam
   ediyordu; gizliyken duraklatıyoruz. */
#startScreen.hidden *,
#startScreen.hidden *::before,
#startScreen.hidden *::after {
  animation-play-state: paused !important;
}
html.perf-lite body,
html.perf-lite #startScreen {
  /* Gradient katmanları GPU'ya pahalıya patlıyordu ama bunları tamamen
           kaldırmak arka planı şeffaf bırakıp altındaki (önceden hazırlanmış)
           oyun tahtasının görünmesine sebep oluyordu — düz, tek renk bir
           arka planla değiştiriyoruz: hem ucuz hem de tam kapatıyor. */
  background: var(--bg-mid-2) !important;
}

/* ============================================================
     BACKGROUNDED / HIDDEN TAB
     Ekran kilitlenip telefon cepteyken sekme "hidden" olur ama JS/CSS
     çalışmaya devam edebilir. visibilitychange ile eklenen bu sınıf tüm
     animasyonları donduruyor, böylece kilitli ekranda telefon ısınmaya
     devam etmiyor.
  ============================================================ */
html.is-bg-paused *,
html.is-bg-paused *::before,
html.is-bg-paused *::after {
  animation-play-state: paused !important;
}
html {
  background: var(--bg-mid-2);
}

/* ============================================================
     START SCREEN (Prisma Pop entry screen)
  ============================================================ */
#startScreen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: max(28px, env(safe-area-inset-top)) 20px
    max(46px, calc(env(safe-area-inset-bottom) + 34px));
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(255, 47, 177, 0.28) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 78%,
      rgba(18, 228, 217, 0.22) 0%,
      transparent 46%
    ),
    radial-gradient(circle at 50% 45%, var(--bg-glow-2) 0%, transparent 62%),
    linear-gradient(165deg, var(--bg-deep-2), var(--bg-mid-2) 55%, #08122f);
  background-size:
    150% 150%,
    150% 150%,
    170% 170%,
    100% 100%;
  animation: nebulaDrift 70s steps(6, jump-both) infinite alternate;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}
#startScreen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Oyuna girince bu ekran artık görünmüyor ama animasyonu durdurmazsak
           arka planda sonsuza dek "background-position" hesaplamaya devam
           eder — bu da tüm oyun boyunca gereksiz CPU/GPU yükü ve ısınma
           demektir. animation: none ile tamamen durduruyoruz. */
  animation: none;
}

/* faint prismatic line texture, echoes the reference art's geometric facets */
#startScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 46%,
      rgba(255, 255, 255, 0.05) 47%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      65deg,
      transparent 0%,
      transparent 61%,
      rgba(255, 255, 255, 0.04) 62%,
      transparent 63%,
      transparent 100%
    ),
    linear-gradient(
      160deg,
      transparent 0%,
      transparent 30%,
      rgba(120, 100, 255, 0.06) 31%,
      transparent 32%,
      transparent 100%
    );
}

.start-crystals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.start-crystal {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, var(--crystal-a), var(--nebula-c));
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 0 10px currentColor;
  opacity: 0.75;
  animation: crystalDrift 7s ease-in-out infinite;
}
@keyframes crystalDrift {
  0%,
  100% {
    transform: translateY(0) rotate(45deg);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-16px) rotate(45deg);
    opacity: 0.9;
  }
}

.start-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
  margin-top: clamp(18px, 6vh, 60px);
}

.start-logo-wrap {
  position: relative;
  width: min(88vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-logo-wrap svg.prisma-logo-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(120, 90, 255, 0.32));
}

.start-tagline {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-1);
  text-align: center;
  text-shadow: 0 0 14px rgba(143, 199, 255, 0.35);
}

.start-streak-badge {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 222, 89, 0.4);
  box-shadow: 0 0 14px rgba(255, 222, 89, 0.25);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--surge-b);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.start-streak-badge.show {
  opacity: 1;
  transform: translateY(0);
}
.made-by-credit {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom, 12px));
  left: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(
    135deg,
    var(--crystal-a),
    var(--crystal-b),
    var(--nebula-a)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s ease;
}

.made-by-credit:hover {
  opacity: 1;
}
@media (max-width: 480px) {
  .made-by-credit {
    font-size: 9px;
    bottom: max(8px, env(safe-area-inset-bottom, 8px));
    left: 10px;
  }
}

.start-mid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}

.play-btn {
  position: relative;
  width: clamp(108px, 26vw, 148px);
  height: clamp(108px, 26vw, 148px);
  border-radius: 26px;
  transform: rotate(45deg);
  background: conic-gradient(
    from 200deg,
    var(--surge-b),
    var(--accent-coral),
    var(--nebula-a),
    var(--nebula-c),
    var(--nebula-b),
    var(--crystal-a),
    var(--surge-b)
  );
  box-shadow:
    0 0 40px rgba(255, 63, 168, 0.45),
    0 0 80px rgba(18, 228, 217, 0.25),
    inset 0 3px 10px rgba(255, 255, 255, 0.5),
    inset 0 -8px 18px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.play-btn:hover {
  box-shadow:
    0 0 52px rgba(255, 63, 168, 0.6),
    0 0 96px rgba(18, 228, 217, 0.35),
    inset 0 3px 10px rgba(255, 255, 255, 0.55),
    inset 0 -8px 18px rgba(0, 0, 0, 0.3);
}
.play-btn:active {
  transform: rotate(45deg) scale(0.94);
}
.play-btn-inner {
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.15);
}
.play-btn-inner svg {
  width: 46%;
  height: 46%;
  margin-left: 6%;
  fill: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.start-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 5vw, 26px);
  width: 100%;
  max-width: 420px;
  margin-bottom: clamp(4px, 2vh, 16px);
}

.start-icon-btn {
  position: relative;
  width: clamp(52px, 14vw, 66px);
  height: clamp(52px, 14vw, 66px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid currentColor;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 14px currentColor;
}
.start-icon-btn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.12);
}
.start-icon-btn svg {
  width: 46%;
  height: 46%;
}
.start-icon-btn.trophy {
  color: var(--nebula-c);
}
.start-icon-btn.star {
  color: var(--surge-b);
}
.start-icon-btn.shop {
  color: var(--crystal-a, #4dc8ff);
}
.start-icon-btn.settings {
  color: var(--nebula-b);
}
.start-icon-btn.sound {
  color: var(--nebula-a);
}

.start-toast {
  position: fixed;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%) translateY(10px);
  z-index: 5100;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20, 16, 40, 0.85);
  border: 1px solid var(--glass-border);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.start-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 640px) {
  .start-header {
    margin-top: clamp(30px, 8vh, 90px);
  }
  .start-footer {
    margin-bottom: clamp(20px, 6vh, 48px);
  }
}

/* ============================================================
         PRISMA POP SETTINGS MODAL
      ============================================================ */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 6200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(3, 5, 18, 0.58);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}
.settings-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.settings-card {
  position: relative;
  width: min(100%, 390px);
  max-height: min(720px, calc(100dvh - 44px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 47, 177, 0.16), transparent 38%),
    radial-gradient(
      circle at 100% 100%,
      rgba(18, 228, 217, 0.13),
      transparent 42%
    ),
    rgba(14, 16, 40, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(106, 59, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  transform: translateY(14px) scale(0.94);
  transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.settings-overlay.open .settings-card {
  transform: translateY(0) scale(1);
}
.settings-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07),
    transparent 35%,
    rgba(77, 255, 240, 0.035)
  );
}
.settings-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  color: var(--ink-0);
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.settings-close:hover {
  transform: rotate(5deg) scale(1.04);
  border-color: rgba(77, 255, 240, 0.55);
  box-shadow: 0 0 18px rgba(77, 255, 240, 0.18);
}
.settings-close:active {
  transform: scale(0.92);
}
.settings-close svg {
  width: 18px;
  height: 18px;
}

.settings-heading {
  position: relative;
  z-index: 1;
  margin: 2px 48px 4px 0;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #fff;
}
.settings-subheading {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.settings-group {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
}
.settings-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
}
.settings-row-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--crystal-glow);
  box-shadow: 0 0 14px rgba(77, 255, 240, 0.08);
  font-size: 18px;
}
.settings-row-copy {
  min-width: 0;
  flex: 1;
}
.settings-row-title {
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 750;
}
.settings-row-note {
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 10px;
}
.settings-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex: 0 0 48px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.settings-toggle::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #c9c7dc;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.85, 0.25, 1),
    background 0.2s ease;
}
.settings-toggle.on {
  background: linear-gradient(
    90deg,
    rgba(255, 47, 177, 0.72),
    rgba(77, 255, 240, 0.72)
  );
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 16px rgba(77, 255, 240, 0.22);
}
.settings-toggle.on::after {
  transform: translateX(20px);
  background: #fff;
}
.settings-toggle:active {
  transform: scale(0.95);
}

.settings-section-title {
  position: relative;
  z-index: 1;
  margin: 2px 0 9px;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.settings-version {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  text-align: center;
  color: rgba(199, 196, 230, 0.46);
  font-size: 9px;
  letter-spacing: 0.12em;
}
@media (max-width: 420px) {
  .settings-overlay {
    padding: 14px;
  }
  .settings-card {
    padding: 20px;
    border-radius: 24px;
  }
}

/* ============================================================
   DAILY CHALLENGE (prizma küpü + görev havuzu)
============================================================ */
/* Bildirim rozeti artık bir daire değil, minik parlayan bir yıldız —
   oyunun tüm görsel dili köşeli/prizmatik olduğu için daireler burada
   yabancı duruyordu. */
.dc-badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, var(--surge-b), var(--nebula-a));
  clip-path: polygon(
    50% 0%,
    63% 35%,
    100% 38%,
    72% 60%,
    82% 96%,
    50% 76%,
    18% 96%,
    28% 60%,
    0% 38%,
    37% 35%
  );
  opacity: 0;
  transform: scale(0.3) rotate(-20deg);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  filter: drop-shadow(0 0 6px rgba(255, 222, 89, 0.85));
}
.dc-badge-dot.show {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: dcBadgeStarPulse 1.5s ease-in-out infinite;
}
@keyframes dcBadgeStarPulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 4px rgba(255, 63, 168, 0.6));
  }
  50% {
    transform: scale(1.22) rotate(10deg);
    filter: drop-shadow(0 0 11px rgba(255, 222, 89, 0.95));
  }
}

.dc-overlay {
  position: fixed;
  inset: 0;
  z-index: 6300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 5, 18, 0.6);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}
.dc-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.dc-card {
  position: relative;
  width: min(100%, 400px);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 47, 177, 0.18), transparent 40%),
    radial-gradient(
      circle at 100% 100%,
      rgba(18, 228, 217, 0.14),
      transparent 42%
    ),
    rgba(14, 16, 40, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 44px rgba(106, 59, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  transform: translateY(14px) scale(0.94);
  transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.dc-overlay.open .dc-card {
  transform: translateY(0) scale(1);
}
.dc-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  color: var(--ink-0);
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.dc-close:hover {
  transform: rotate(5deg) scale(1.04);
  border-color: rgba(77, 255, 240, 0.55);
}
.dc-close:active {
  transform: scale(0.92);
}
.dc-close svg {
  width: 17px;
  height: 17px;
}

.dc-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  /* Sağ tarafa, kapatma (X) butonunun kapladığı alan kadar boşluk
     bırakıyoruz — küp artık X'in tam altına/üstüne binmiyor, metne
     biraz daha yakın ve dikeyde ortalanmış duruyor. */
  padding-right: 46px;
}
.dc-title {
  margin: 2px 40px 6px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #fff;
}
.dc-resets {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.dc-resets-time {
  color: var(--accent-sky);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dc-wallet {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-0);
  width: fit-content;
}
.dc-diamond {
  font-size: 12px;
}
.dc-cube-slot {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  align-self: center;
  margin-top: 6px;
}
.dc-cube-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(77, 255, 240, 0.25));
}
.dc-cube-svg.full {
  filter: drop-shadow(0 0 18px rgba(255, 222, 89, 0.65));
  animation: dcCubePulse 1.8s ease-in-out infinite;
}
@keyframes dcCubePulse {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(255, 222, 89, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 26px rgba(255, 63, 168, 0.65));
  }
}
/* "İçine su dolar gibi" efekt: yüzde değiştiğinde dolum seviyesi
   sertçe zıplamak yerine yumuşakça yükselir/alçalır. */
.dc-cube-clip-rect {
  transition:
    y 0.7s cubic-bezier(0.22, 0.9, 0.3, 1),
    height 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
}
/* Su yüzeyinde hafif kıpırdayan bir dalga/parlama şeridi — küp boşta
   dururken bile "canlı" hissettirsin. */
.dc-cube-ripple {
  transition: cy 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
  transform-box: fill-box;
  transform-origin: center;
  animation: dcRippleBob 2.6s ease-in-out infinite;
}
.dc-cube-ripple[data-side="r"] {
  animation-delay: 0.55s;
}
@keyframes dcRippleBob {
  0%,
  100% {
    transform: translateY(0) scaleX(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-2.5px) scaleX(1.08);
    opacity: 0.85;
  }
}
/* %100 dolunca üst yüz de yumuşakça belirsin (aniden görünmesin). */
.dc-cube-top-fill {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.dc-cube-svg.full .dc-cube-top-fill {
  opacity: 0.94;
}

.dc-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-bottom: 14px;
}
.dc-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.dc-row.ready {
  border-color: rgba(255, 222, 89, 0.5);
  background: rgba(255, 222, 89, 0.07);
}
.dc-row.claimed {
  opacity: 0.55;
}
.dc-row-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  box-shadow: 0 0 12px currentColor;
}
.dc-row-main {
  min-width: 0;
  flex: 1;
}
.dc-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.dc-row-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-0);
  line-height: 1.25;
}
.dc-row-reward {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-lemon);
  white-space: nowrap;
}
.dc-row-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.dc-row-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.2, 0.85, 0.25, 1);
  box-shadow: 0 0 8px currentColor;
}
.dc-row-frac {
  margin-top: 4px;
  font-size: 9.5px;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dc-row-claim-btn {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-1);
  font-size: 11.5px;
  font-weight: 800;
  cursor: not-allowed;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.dc-row.ready .dc-row-claim-btn {
  cursor: pointer;
  color: #24122f;
  background: linear-gradient(90deg, var(--surge-a), var(--surge-b));
  border-color: transparent;
  box-shadow: 0 0 16px rgba(255, 222, 89, 0.45);
}
.dc-row.ready .dc-row-claim-btn:active {
  transform: scale(0.94);
}
.dc-row.claimed .dc-row-claim-btn {
  background: rgba(126, 231, 135, 0.15);
  border-color: rgba(126, 231, 135, 0.4);
  color: var(--accent-mint);
}

.dc-bonus-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.16);
}
.dc-bonus-row.ready {
  border-style: solid;
  border-color: rgba(255, 63, 168, 0.5);
  background: rgba(255, 63, 168, 0.08);
}
.dc-bonus-row.claimed {
  opacity: 0.6;
}
.dc-bonus-cube-slot {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}
.dc-bonus-text {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ink-1);
  line-height: 1.3;
}
.dc-bonus-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc-bonus-reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-lemon);
}

@media (max-width: 420px) {
  .dc-overlay {
    padding: 10px;
  }
  .dc-card {
    padding: 18px;
    border-radius: 24px;
  }
  .dc-title {
    font-size: 19px;
  }
  .dc-header {
    padding-right: 40px;
  }
  .dc-cube-slot {
    width: 54px;
    height: 54px;
    margin-top: 10px;
  }
}

.start-streak-badge.milestone {
  background: rgba(255, 222, 89, 0.18);
  border-color: rgba(255, 222, 89, 0.9);
  box-shadow: 0 0 22px rgba(255, 222, 89, 0.55);
  color: #ffe159;
}

/* ============================================================
   SHOP (kozmetik prizma temaları)
============================================================ */
.shop-subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.shop-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 2px;
}
.shop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.shop-item.equipped {
  border-color: rgba(126, 231, 135, 0.65);
  box-shadow: 0 0 16px rgba(126, 231, 135, 0.25);
}
.shop-swatch-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
  height: 40px;
}
.shop-swatch {
  border-radius: 8px;
  display: block;
}
.shop-item-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-0);
  letter-spacing: 0.01em;
}
.shop-item-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}
.shop-item-btn:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.16);
}
.shop-item-btn:not(:disabled):active {
  transform: scale(0.96);
}
.shop-item-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.shop-item.equipped .shop-item-btn {
  background: rgba(126, 231, 135, 0.18);
  border-color: rgba(126, 231, 135, 0.5);
  color: #7ee787;
}

/* ============================================================
   TEMA ATMOSFERİ (Shop'tan giyilen kozmetik tema artık sadece
   parça renklerini değil; arka planı, parıltıları, combo/prizma
   ölçer renklerini de değiştiriyor — fark gerçekten hissedilsin.)
============================================================ */
[data-theme="neon"] {
  /* BUG FIX (ışıklı neon tabela hissi zayıf): tonlar maksimum
     doygunluk/parlaklığa çekildi -- elektrik mavisi, şok pembesi,
     lazer moru gibi "yanan" tüp renkleri. Gerçek ışıma (glow) artık
     bloklarda/UI'da çift katmanlı box-shadow ve filter ile geliyor,
     bkz. bu dosyanın sonundaki "NEON IŞIKLI TABELA EFEKTİ" bölümü. */
  --nebula-a: #ff00e5;
  --nebula-b: #00faff;
  --nebula-c: #a100ff;
  --crystal-a: #c8fff9;
  --crystal-b: #00e5ff;
  --crystal-glow: #00e5ff;
  --surge-a: #ff00c8;
  --surge-b: #fbff2f;
  --surge-glow: rgba(255, 0, 200, 0.7);
  --bg-deep-2: #030014;
  --bg-mid-2: #0a0030;
  --bg-glow-2: #1d0040;
}
[data-theme="neon"] body {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 0, 200, 0.3) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 88%,
      rgba(0, 255, 242, 0.26) 0%,
      transparent 48%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-deep-2), var(--bg-mid-2));
}

[data-theme="pastel"] {
  /* REDESIGN v4 (2026): referans görsel (Prisma-Pop mockup) gerçekten
     AÇIK, havadar bir pastel gökyüzü kullanıyor -- önceki "orta tonlu
     lavanta" zemin bu hissi vermiyordu. Zemin artık gerçekten açık;
     okunabilirlik ise global --ink-* değişkenlerini DEĞİŞTİRMEDEN,
     sadece bu açık zemin üstünde oturan bileşenlere (topbar, tahta,
     tepsi, ana menü ikonları) özel koyu "mürekkep" renkleriyle
     korunuyor -- bkz. aşağıdaki "PASTEL v4 OKUNABİLİRLİK" bloğu.
     Duraklat/Ayarlar gibi koyu perde üstündeki panellere dokunulmuyor. */
  --nebula-a: #f79bc4;
  --nebula-b: #8fe0c2;
  --nebula-c: #a98ae6;
  --crystal-a: #eaf4ff;
  --crystal-b: #8fc7ee;
  --crystal-glow: #9fcdf0;
  --surge-a: #ffcf8f;
  --surge-b: #ffe08f;
  --surge-glow: rgba(255, 208, 143, 0.5);
  --bg-deep-2: #fdf1f8;
  --bg-mid-2: #eef1ff;
  --bg-glow-2: #f7ecff;
  /* Cam paneller (skor kartları, tepsi, tahta, ikon düğmeleri) artık
     soğuk koyu cam yerine sıcak, açık pembemsi-lavanta bir "şeker
     camı" -- yumuşak, yuvarlak, belirgin biçimde açık zeminden ayrışan,
     neredeyse beyaz bir kart hissi (referans görseldeki skor kartları). */
  --glass-fill: rgba(255, 255, 255, 0.58);
  --glass-fill-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.92);
  --glass-shadow:
    0 8px 26px rgba(150, 118, 190, 0.22), 0 0 1px rgba(255, 255, 255, 0.6);
}
[data-theme="pastel"] body {
  background:
    radial-gradient(
      circle at 16% 10%,
      rgba(255, 186, 214, 0.42) 0%,
      transparent 44%
    ),
    radial-gradient(
      circle at 86% 14%,
      rgba(179, 220, 255, 0.34) 0%,
      transparent 46%
    ),
    radial-gradient(
      circle at 82% 90%,
      rgba(178, 236, 210, 0.32) 0%,
      transparent 48%
    ),
    radial-gradient(
      circle at 14% 86%,
      rgba(255, 214, 168, 0.26) 0%,
      transparent 46%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 62%),
    linear-gradient(160deg, var(--bg-deep-2), var(--bg-mid-2));
}

[data-theme="sunset"] {
  --nebula-a: #ff5c3d;
  --nebula-b: #ffb02b;
  --nebula-c: #8f3dff;
  --crystal-a: #ffd65c;
  --crystal-b: #ff9d3d;
  --crystal-glow: #ffb02b;
  --surge-a: #ff3d8f;
  --surge-b: #ffb02b;
  --surge-glow: rgba(255, 92, 61, 0.6);
  --bg-deep-2: #17060a;
  --bg-mid-2: #2b0a14;
  --bg-glow-2: #3d0f1a;
}
[data-theme="sunset"] body {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 122, 64, 0.32) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 88%,
      rgba(255, 61, 143, 0.24) 0%,
      transparent 48%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-deep-2), var(--bg-mid-2));
}

[data-theme="mono"] {
  --nebula-a: #d6d6d6;
  --nebula-b: #9e9e9e;
  --nebula-c: #bdbdbd;
  --crystal-a: #f2f2f2;
  --crystal-b: #c9c9c9;
  --crystal-glow: #e0e0e0;
  --surge-a: #e6e6e6;
  --surge-b: #bdbdbd;
  --surge-glow: rgba(220, 220, 220, 0.5);
  --bg-deep-2: #060606;
  --bg-mid-2: #101010;
  --bg-glow-2: #1c1c1c;
  /* BUG FIX (monokromluk hissi zayıf): --ink-* ve bazı --accent-*
     değişkenleri :root'ta SABİT tanımlı ve hafif lavanta/mor bir ton
     taşıyor -- skor metni, odak (focus) çerçevesi, "Uygulandı" rozeti
     gibi birçok yerde bu sabit renkler kullanıldığı için Monochrome
     giyilse bile ekranda hep hafif bir renk kalıyordu. Burada ezerek
     tüm bu metin/aksan renklerini de gerçek, nötr griye çekiyoruz --
     diğer temalar bu değişkenleri override ETMEDİĞİ için hiç
     etkilenmiyor. */
  --ink-0: #f0f0f0;
  --ink-1: #c6c6c6;
  --ink-2: #8a8a8a;
  --accent-lemon: #ececec;
  --accent-sky: #bdbdbd;
  --accent-coral: #9a9a9a;
  --accent-mint: #cfcfcf;
}
[data-theme="mono"] body {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(230, 230, 230, 0.14) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 88%,
      rgba(200, 200, 200, 0.12) 0%,
      transparent 48%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-deep-2), var(--bg-mid-2));
}

/* ============================================================
   AURORA TEMASI — "kutup gecesinde oynamak" hissi.
   Derin gece lacivert/siyahı üzerinde camgöbeği, turkuaz, zümrüt
   yeşili, yumuşak mor ve ince bir pembe akışı -- rastgele neon
   gradyanlar yerine, gerçek bir kutup ışığı perdesi gibi büyük,
   yumuşak ve katmanlı. Yıldız tozu + ara sıra kayan yıldız efektleri
   bu bloğun sonunda (STARFIELD / SHOOTING STARS) ayrıca tanımlı.
============================================================ */
[data-theme="aurora"] {
  --nebula-a: #3fe0ff; /* camgöbeği ışın */
  --nebula-b: #34e8a6; /* zümrüt/turkuaz perde */
  --nebula-c: #9b7bff; /* kutup moru */
  --crystal-a: #eafcff;
  --crystal-b: #7fe9ff;
  --crystal-glow: #7fe9ff;
  --surge-a: #b98bff;
  --surge-b: #4df0c8;
  --surge-glow: rgba(125, 233, 255, 0.55);
  --bg-deep-2: #030711;
  --bg-mid-2: #071227;
  --bg-glow-2: #0d1c3a;
  /* Cam paneller (skor kartları, tahta, tepsi, tüm .glass öğeleri) artık
     nötr beyaz yerine soğuk camgöbeği tonunda -- "pahalı buzlu cam"
     hissi. Hiçbir tema bu değişkenleri daha önce override etmiyordu. */
  --glass-fill: rgba(140, 210, 255, 0.055);
  --glass-fill-strong: rgba(160, 225, 255, 0.11);
  --glass-border: rgba(170, 230, 255, 0.17);
  --glass-shadow:
    0 8px 34px rgba(2, 6, 16, 0.6), 0 0 1px rgba(170, 230, 255, 0.3);
}
[data-theme="aurora"] body {
  background:
    radial-gradient(
      ellipse 70% 55% at 15% 0%,
      rgba(63, 224, 255, 0.2) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 65% 50% at 85% 8%,
      rgba(52, 232, 166, 0.16) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 60% at 50% 100%,
      rgba(155, 123, 255, 0.18) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 40% 30% at 72% 62%,
      rgba(255, 175, 215, 0.07) 0%,
      transparent 65%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 60%),
    linear-gradient(
      175deg,
      var(--bg-deep-2) 0%,
      var(--bg-mid-2) 55%,
      #040a18 100%
    );
  background-size:
    160% 160%,
    160% 160%,
    170% 170%,
    140% 140%,
    170% 170%,
    100% 100%;
  animation: auroraDrift 90s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      50% 100%,
      60% 60%,
      50% 50%,
      0 0;
  }
  100% {
    background-position:
      14% 10%,
      82% 16%,
      56% 86%,
      64% 54%,
      50% 50%,
      0 0;
  }
}

/* --- Yıldız alanı: küçük, tekrarlanan radial-gradient "noktalar" ile
   yüzlerce tek tek div oluşturmadan ucuz bir yıldız tozu efekti.
   İkinci bir katman (::after) daha büyük/az sayıda yıldızı yavaşça
   parlatıp söndürerek "bazı yıldızlar hafifçe titriyor" hissini verir. */
[data-theme="aurora"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 78% 14%, #d7f3ff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 33% 68%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 58% 44%, #c8ffe9 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 90% 76%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 6% 84%, #dbe4ff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 46% 8%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 92%, #d2ffe9 50%, transparent 52%);
  background-repeat: repeat;
  background-size:
    180px 180px,
    220px 220px,
    260px 260px,
    150px 150px,
    240px 240px,
    200px 200px,
    300px 300px,
    170px 170px;
  opacity: 0.7;
  animation: auroraTwinkle 8s ease-in-out infinite;
}
[data-theme="aurora"] body::after {
  content: "";
  position: fixed;
  top: 16%;
  left: 8%;
  width: 90px;
  height: 2px;
  pointer-events: none;
  z-index: 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95),
    rgba(180, 230, 255, 0.45) 45%,
    transparent 100%
  );
  filter: drop-shadow(0 0 4px rgba(200, 240, 255, 0.8));
  opacity: 0;
  animation: auroraShoot1 13s ease-in infinite;
  animation-delay: 4s;
}
@keyframes auroraTwinkle {
  0%,
  100% {
    opacity: 0.55;
  }
  35% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.9;
  }
}
@keyframes auroraShoot1 {
  0%,
  90% {
    opacity: 0;
    transform: translate(0, 0) rotate(-18deg);
  }
  91% {
    opacity: 1;
  }
  95% {
    transform: translate(210px, 88px) rotate(-18deg);
    opacity: 0.85;
  }
  100% {
    transform: translate(250px, 105px) rotate(-18deg);
    opacity: 0;
  }
}
@keyframes auroraShoot2 {
  0%,
  93% {
    opacity: 0;
    transform: translate(0, 0) rotate(-14deg);
  }
  94% {
    opacity: 1;
  }
  97% {
    transform: translate(-150px, 62px) rotate(-14deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-180px, 76px) rotate(-14deg);
    opacity: 0;
  }
}

/* #app'in kendi z-index'i olmadığı için (position:relative, z-index:auto)
   DOM sırasına göre üstte kalan body::after (kayan yıldız) oyun
   ekranındayken tahtanın/HUD'un üstüne binebilirdi -- gerçek oyun
   içeriğini net biçimde dekoratif katmanların üstüne sabitliyoruz. */
[data-theme="aurora"] #app {
  position: relative;
  z-index: 2;
}

/* Tahta: gece gökyüzünde "asılı" duruyormuş gibi çok ince bir
   camgöbeği/mor ışıma halkası. Boş hücreler soğuk, okunabilir bir
   aurora tonuyla hafifçe tintlenir. */
[data-theme="aurora"] #board {
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(140, 220, 255, 0.08),
    0 0 40px rgba(63, 224, 255, 0.12),
    0 0 90px rgba(155, 123, 255, 0.09);
}
[data-theme="aurora"] .cell:not(.filled) {
  background: rgba(120, 200, 255, 0.045);
  border-color: rgba(150, 220, 255, 0.1);
}

/* Sıradan (özel olmayan) bloklara ince bir iç parıltı/bloom -- "kutup
   ışığından yapılmış" hissi. Crystal/Nova/Flux zaten kendi güçlü
   ışımalarına sahip, burada dokunulmuyor. */
[data-theme="aurora"] .cell.filled:not(.crystal):not(.nova):not(.flux) {
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    0 0 10px var(--cell-glow, rgba(120, 220, 255, 0.4)),
    0 0 22px var(--cell-glow, rgba(120, 220, 255, 0.22));
}
[data-theme="aurora"] .piece-cell:not(.crystal):not(.nova):not(.flux) {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22),
    0 0 8px var(--cell-glow, rgba(120, 220, 255, 0.35));
}

/* Cam panellerin (skor kartları, tepsi, prizma ölçer, tahta) kenarına
   ince bir soğuk ışıma; ikon düğmelerinin hover'ı da aynı aileden. */
[data-theme="aurora"] .icon-btn:hover {
  box-shadow: 0 0 16px rgba(63, 224, 255, 0.3);
  border-color: rgba(140, 220, 255, 0.4);
}
[data-theme="aurora"] .score-cluster .score-card,
[data-theme="aurora"] .prism-meter-wrap,
[data-theme="aurora"] .tray-wrap #tray {
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(63, 224, 255, 0.06);
}

/* Play (oynat) düğmesi: pembe/camgöbeği yerine camgöbeği/mor kutup
   ışığı ile daha "değerli taş" hissi veren premium ışıma. */
[data-theme="aurora"] .play-btn {
  box-shadow:
    0 0 40px rgba(63, 224, 255, 0.45),
    0 0 92px rgba(155, 123, 255, 0.3),
    inset 0 3px 10px rgba(255, 255, 255, 0.55),
    inset 0 -8px 18px rgba(0, 0, 0, 0.35);
  border-color: rgba(220, 245, 255, 0.5);
}
[data-theme="aurora"] .play-btn:hover {
  box-shadow:
    0 0 56px rgba(63, 224, 255, 0.6),
    0 0 112px rgba(155, 123, 255, 0.4),
    inset 0 3px 10px rgba(255, 255, 255, 0.6),
    inset 0 -8px 18px rgba(0, 0, 0, 0.3);
}

/* Ana menüdeki süzülen kristal parçacıklar: aurora'da köşeli elmas
   yerine yumuşak, ışıldayan "yıldız tozu" noktaları gibi görünüyor. */
[data-theme="aurora"] .start-crystal {
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 72%);
  box-shadow:
    0 0 6px currentColor,
    0 0 14px currentColor;
}

/* Ana menüye özel iki kayan yıldız (farklı konum/gecikme/rota) --
   .start-crystals zaten boş, dekoratif bir konteyner olduğu için
   ::before/::after'ı burada kullanmak HTML'e dokunmadan iki bağımsız
   "shooting star" eklemeyi sağlıyor. */
[data-theme="aurora"] .start-crystals::before,
[data-theme="aurora"] .start-crystals::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95),
    rgba(180, 230, 255, 0.4) 45%,
    transparent 100%
  );
  filter: drop-shadow(0 0 5px rgba(210, 240, 255, 0.85));
  opacity: 0;
  pointer-events: none;
}
[data-theme="aurora"] .start-crystals::before {
  top: 16%;
  left: 10%;
  animation: auroraShoot1 11s ease-in infinite;
  animation-delay: 2.5s;
}
[data-theme="aurora"] .start-crystals::after {
  top: 62%;
  left: 58%;
  animation: auroraShoot2 15s ease-in infinite;
  animation-delay: 7s;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="aurora"] body,
  [data-theme="aurora"] body::before,
  [data-theme="aurora"] body::after,
  [data-theme="aurora"] .start-crystals::before,
  [data-theme="aurora"] .start-crystals::after {
    animation: none !important;
  }
  [data-theme="aurora"] body::after,
  [data-theme="aurora"] .start-crystals::before,
  [data-theme="aurora"] .start-crystals::after {
    opacity: 0 !important;
  }
}

/* ============================================================
   ÖZEL BLOK KİMLİĞİ (Kristal = mavi, Nova = kırmızı, Flux = mor/pembe)
   Bu 3 özel blok artık genel tema paletinden BAĞIMSIZ kendi renk
   ailesini koruyor; sadece tema değişince o ailenin tonu (parlaklık/
   doygunluk/sıcaklık) hafifçe kaymalar yapıyor. Böylece hangi temayı
   giyersen giy Kristal her zaman "mavi", Nova her zaman "kırmızı",
   Flux her zaman "mor-pembe" olarak tanınabiliyor.
============================================================ */
:root {
  --special-crystal-a: #cfe9ff;
  --special-crystal-b: #5aa4ff;
  --special-crystal-c: #245bd6;
  --special-crystal-glow: #5aa4ff;

  --special-nova-a: #ff9a7a;
  --special-nova-b: #ff3b3b;
  --special-nova-c: #c81e1e;
  --special-nova-glow: #ff3b3b;

  --special-flux-a: #c58cff;
  --special-flux-b: #ff4fd8;
  --special-flux-c: #7a1eff;
  --special-flux-glow: #ff4fd8;
}
[data-theme="neon"] {
  --special-crystal-a: #baf7ff;
  --special-crystal-b: #00c8ff;
  --special-crystal-c: #0047ff;
  --special-crystal-glow: #00c8ff;
  --special-nova-a: #ff7a4d;
  --special-nova-b: #ff2200;
  --special-nova-c: #c80000;
  --special-nova-glow: #ff2200;
  --special-flux-a: #ea7aff;
  --special-flux-b: #ff00e5;
  --special-flux-c: #9500ff;
  --special-flux-glow: #ff00e5;
}
[data-theme="pastel"] {
  /* REDESIGN: candy/toy-blok hissi için önceki mat/tozlu (chalky) set
     yeniden canlandırıldı -- Kristal = bebek mavisi şeker, Nova =
     şeftali/mercan şeker, Flux = leylak şeker. Hâlâ yumuşak ama net
     okunur ve "alive" hissediyor. */
  --special-crystal-a: #e4f2ff;
  --special-crystal-b: #8ec8f2;
  --special-crystal-c: #5a93c9;
  --special-crystal-glow: #8ec8f2;
  --special-nova-a: #ffe4cc;
  --special-nova-b: #ffab7a;
  --special-nova-c: #e8825a;
  --special-nova-glow: #ffab7a;
  --special-flux-a: #efdff8;
  --special-flux-b: #c9a0e8;
  --special-flux-c: #9c6fc4;
  --special-flux-glow: #c9a0e8;
}
[data-theme="sunset"] {
  --special-crystal-a: #d3edff;
  --special-crystal-b: #5cb0ff;
  --special-crystal-c: #2e6fd6;
  --special-crystal-glow: #5cb0ff;
  --special-nova-a: #ffab6b;
  --special-nova-b: #ff5c3d;
  --special-nova-c: #d6280f;
  --special-nova-glow: #ff5c3d;
  --special-flux-a: #e9a8ff;
  --special-flux-b: #ff5cb8;
  --special-flux-c: #a83dff;
  --special-flux-glow: #ff5cb8;
}
[data-theme="mono"] {
  --special-crystal-a: #e4edf3;
  --special-crystal-b: #93aebd;
  --special-crystal-c: #5c7688;
  --special-crystal-glow: #93aebd;
  --special-nova-a: #e8c2b9;
  --special-nova-b: #c2786b;
  --special-nova-c: #8f4a3e;
  --special-nova-glow: #c2786b;
  --special-flux-a: #e2d5e8;
  --special-flux-b: #b592bf;
  --special-flux-c: #7a5c8a;
  --special-flux-glow: #b592bf;
}
[data-theme="aurora"] {
  /* Kristal = buzlu camgöbeği, Nova = aurora gülü (kırmızı ailesinden
     ama sert kırmızı yerine gece gökyüzünde görülen pembe-kızıl ışık
     tonu), Flux = kutup moru. Üçü de aynı "kutup ışığı" ailesinde ama
     hâlâ birbirinden anında ayırt edilebiliyor. */
  --special-crystal-a: #e2fbff;
  --special-crystal-b: #4fd8ff;
  --special-crystal-c: #1f7fe0;
  --special-crystal-glow: #4fd8ff;
  --special-nova-a: #ffb3c9;
  --special-nova-b: #ff4d7d;
  --special-nova-c: #b8104f;
  --special-nova-glow: #ff4d7d;
  --special-flux-a: #ddc2ff;
  --special-flux-b: #b366ff;
  --special-flux-c: #6a1fcc;
  --special-flux-glow: #b366ff;
}

/* Kristal: mavi aile */
.cell.filled.crystal,
.piece-cell.crystal {
  background: linear-gradient(
    135deg,
    var(--special-crystal-a),
    var(--special-crystal-b) 50%,
    var(--special-crystal-c) 100%
  ) !important;
  box-shadow:
    0 0 14px var(--special-crystal-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}

/* Nova: kırmızı aile */
.cell.filled.nova,
.piece-cell.nova {
  background: linear-gradient(
    135deg,
    var(--special-nova-a),
    var(--special-nova-b) 55%,
    var(--special-nova-c) 100%
  ) !important;
  box-shadow:
    0 0 16px var(--special-nova-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}

/* Flux: mor-pembe aile */
.cell.filled.flux,
.piece-cell.flux {
  background: linear-gradient(
    90deg,
    var(--special-flux-c),
    var(--special-flux-b) 50%,
    var(--special-flux-a) 100%
  ) !important;
  box-shadow:
    0 0 14px var(--special-flux-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}
.cell.filled.flux.flux-v,
.piece-cell.flux.flux-v {
  background: linear-gradient(
    180deg,
    var(--special-flux-c),
    var(--special-flux-b) 50%,
    var(--special-flux-a) 100%
  ) !important;
}

/* ============================================================
   PASTEL ATMOSFERİ v3 — "cozy dreamy candy sky". Zemin artık orta
   tonlu, tozlu bir lavanta/mor (asla beyaza/neredeyse-beyaza gitmiyor)
   üstünde toz pembe, bebek mavisi, nane ve şeftali tonlarında yumuşak
   ama net ambiyans ışıkları. Referans: sıcak, oyuncak/şekerleme hissi
   veren pastel gökyüzü -- fakat okunabilirlik için biraz daha derin.
============================================================ */
[data-theme="pastel"] {
  --bg-deep-2: #dd88bf;
  --bg-mid-2: #93a3ec;
  --bg-glow-2: #c17ce0;
}
[data-theme="pastel"] body {
  background:
    radial-gradient(
      circle at 16% 10%,
      rgba(255, 90, 165, 0.88) 0%,
      transparent 46%
    ),
    radial-gradient(
      circle at 86% 14%,
      rgba(60, 125, 240, 0.8) 0%,
      transparent 48%
    ),
    radial-gradient(
      circle at 82% 90%,
      rgba(60, 175, 140, 0.72) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 14% 86%,
      rgba(255, 145, 65, 0.64) 0%,
      transparent 48%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 62%),
    linear-gradient(160deg, var(--bg-deep-2), var(--bg-mid-2));
  /* Aynı background-size mirası hatası burada da düzeltiliyor (bkz.
     #startScreen kuralındaki not) -- oyun ekranı zemini de aksi halde
     gereğinden fazla soluk görünüyordu. */
  background-size: 100% 100%;
}
/* Ana menü #startScreen, oyunun kendisinin ÜSTÜNDE ayrı bir katman
   olduğu için "body" arka planı hiç görünmüyor; burada da aynı açık,
   havadar pastel gökyüzü paletiyle ayrıca override ediliyor --
   referans görseldeki gibi yumuşak pembe/lavanta/gökyüzü mavisi
   dokusu, asla koyu/doygun bir zemine kaçmıyor. */
[data-theme="pastel"] #startScreen {
  background:
    radial-gradient(
      circle at 16% 10%,
      rgba(255, 90, 165, 0.88) 0%,
      transparent 46%
    ),
    radial-gradient(
      circle at 86% 14%,
      rgba(60, 125, 240, 0.8) 0%,
      transparent 48%
    ),
    radial-gradient(
      circle at 82% 90%,
      rgba(60, 175, 140, 0.72) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 14% 86%,
      rgba(255, 145, 65, 0.64) 0%,
      transparent 48%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 62%),
    linear-gradient(160deg, var(--bg-deep-2), var(--bg-mid-2));
  /* BUG FIX: temel #startScreen kuralı background-size'ı %150/%170 gibi
     büyük değerlere ayarlıyor (kendi 4 katmanı için) -- pastel'in 6
     katmanlı yeni arka planına miras kaldığında gradyanlar aşırı
     büyütülüp seyrelerek soluk görünüyordu. Burada tüm katmanlar
     kesin %100 boyuta sabitleniyor. */
  background-size: 100% 100%;
}

/* "PRISMA POP" başlığındaki SVG logo, temadan bağımsız sabit
   <linearGradient> stop-color değerleriyle çiziliyor (index.html içinde
   #prismaFill / #popFill). Pastel giyilince logo da aynı toz pembe →
   şeftali → tereyağı → nane → bebek mavisi → leylak şekerleme
   gökkuşağına dönüşüyor -- referans görseldeki başlık hissi. */
[data-theme="pastel"] #prismaFill stop:nth-child(1) {
  stop-color: #cdb0ea;
}
[data-theme="pastel"] #prismaFill stop:nth-child(2) {
  stop-color: #f0a8d0;
}
[data-theme="pastel"] #prismaFill stop:nth-child(3) {
  stop-color: #f7b3ba;
}
[data-theme="pastel"] #prismaFill stop:nth-child(4) {
  stop-color: #f6c79a;
}
[data-theme="pastel"] #prismaFill stop:nth-child(5) {
  stop-color: #f2e29a;
}
[data-theme="pastel"] #prismaFill stop:nth-child(6) {
  stop-color: #b9dba0;
}
[data-theme="pastel"] #prismaFill stop:nth-child(7) {
  stop-color: #93d0c4;
}
[data-theme="pastel"] #prismaFill stop:nth-child(8) {
  stop-color: #93b8e0;
}
[data-theme="pastel"] #popFill stop:nth-child(1) {
  stop-color: #fff6e8;
}
[data-theme="pastel"] #popFill stop:nth-child(2) {
  stop-color: #cfe0f5;
}
[data-theme="pastel"] #popFill stop:nth-child(3) {
  stop-color: #b3a0e0;
}

/* ------------------------------------------------------------
   PASTEL v4 — OKUNABİLİRLİK. Zemin artık açık olduğu için, global
   --ink-0/1/2 (tüm temalarda sabit, açık/beyaza yakın -- Duraklat/
   Ayarlar gibi koyu perde üstündeki panellerin okunması buna bağlı)
   burada DEĞİŞTİRİLMİYOR. Bunun yerine sadece açık gökyüzü zemini
   üstünde oturan bileşenlere (üst çubuk, tahta, tepsi, ana menü
   ikonları) özel koyu "mürekkep mor" metin/ikon renkleri veriliyor.
------------------------------------------------------------ */
[data-theme="pastel"] .score-card .label,
[data-theme="pastel"] .prism-meter-label {
  color: #8974ad;
}
[data-theme="pastel"] .score-card .value {
  color: #4a2f70;
}
[data-theme="pastel"] .score-card.hi .value {
  color: #d6960a;
}
[data-theme="pastel"] .score-card.combo .value {
  color: #d6488f;
}
[data-theme="pastel"] .score-card.combo.tier-3 .value {
  color: #1f9e93;
}
[data-theme="pastel"] .score-card.combo.tier-4 .value {
  color: #d6960a;
}
[data-theme="pastel"] .prism-meter-icon {
  color: #5a93c9;
}
[data-theme="pastel"] .prism-meter-track {
  background: rgba(120, 90, 170, 0.14);
}
[data-theme="pastel"] .icon-btn {
  color: #4a2f70;
}
[data-theme="pastel"] .made-by-credit {
  background: linear-gradient(135deg, #5f9fd6, #8a63cf, #e0679f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.95;
}
[data-theme="pastel"] .start-tagline {
  color: #7d5fa8;
  text-shadow: none;
}
[data-theme="pastel"] .start-streak-badge {
  background: rgba(255, 214, 233, 0.55);
  border-color: rgba(214, 72, 143, 0.4);
  box-shadow: 0 0 12px rgba(214, 72, 143, 0.16);
  color: #c23f80;
}
[data-theme="pastel"] .start-icon-btn {
  background: color-mix(in srgb, currentColor 28%, white 72%);
  border-width: 2px;
  border-color: color-mix(in srgb, currentColor 75%, black 5%);
  box-shadow: 0 4px 14px rgba(150, 118, 190, 0.22);
}
[data-theme="pastel"] .start-icon-btn:active {
  background: color-mix(in srgb, currentColor 40%, white 60%);
}
[data-theme="pastel"] .start-icon-btn.trophy {
  color: #8a6fd6;
}
[data-theme="pastel"] .start-icon-btn.star {
  color: #d6960a;
}
[data-theme="pastel"] .start-icon-btn.shop {
  color: #4a90d9;
}
[data-theme="pastel"] .start-icon-btn.settings {
  color: #3fa07f;
}
[data-theme="pastel"] .start-icon-btn.sound {
  color: #d6488f;
}

/* ------------------------------------------------------------
   PASTEL — UI bileşenleri (tahta, hücreler, düğmeler, kartlar,
   modallar). Sadece görsel; yapı/boyut/mantığa dokunulmuyor.
   Boş hücreler artık yumuşak, hafif çukur bir "tepsi gözü" gibi
   -- dolu (şekerleme) bloklardan net ayrışıyor.
------------------------------------------------------------ */
[data-theme="pastel"] .cell:not(.filled) {
  background: rgba(150, 118, 190, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 5px rgba(56, 36, 88, 0.16);
}
[data-theme="pastel"] .cell.filled:not(.crystal):not(.nova):not(.flux) {
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.75),
    inset 0 -3px 6px rgba(120, 80, 140, 0.22),
    0 2px 6px rgba(60, 36, 90, 0.22),
    0 0 10px var(--cell-glow, rgba(255, 200, 225, 0.4));
}
[data-theme="pastel"] .piece-cell:not(.crystal):not(.nova):not(.flux) {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(120, 80, 140, 0.2),
    0 2px 5px rgba(60, 36, 90, 0.2),
    0 0 8px var(--cell-glow, rgba(255, 200, 225, 0.35));
}
[data-theme="pastel"] #board {
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 44px rgba(200, 160, 240, 0.16);
}
[data-theme="pastel"] .icon-btn:hover {
  box-shadow: 0 0 16px rgba(247, 155, 196, 0.35);
  border-color: rgba(255, 255, 255, 0.6);
}
[data-theme="pastel"] .icon-btn:active {
  background: var(--glass-fill-strong);
}

/* Play (oynat) düğmesi: sabit magenta/camgöbeği ışıma yerine yumuşak,
   şekerleme tonlarında sıcak bir ışıma -- "değerli tatlı" hissi. */
[data-theme="pastel"] .play-btn {
  box-shadow:
    0 0 40px rgba(247, 155, 196, 0.5),
    0 0 80px rgba(143, 199, 238, 0.32),
    inset 0 3px 10px rgba(255, 255, 255, 0.7),
    inset 0 -8px 18px rgba(120, 80, 140, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
}
[data-theme="pastel"] .play-btn:hover {
  box-shadow:
    0 0 54px rgba(247, 155, 196, 0.62),
    0 0 100px rgba(143, 199, 238, 0.4),
    inset 0 3px 10px rgba(255, 255, 255, 0.75),
    inset 0 -8px 18px rgba(120, 80, 140, 0.24);
}

/* Süzülen dekoratif parçacıklar: köşeli neon "kristal" yerine yumuşak,
   yuvarlak, minik parıldayan şekerleme/sparkle noktaları. */
[data-theme="pastel"] .start-crystal {
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  background: radial-gradient(
    circle,
    #ffffff 0%,
    currentColor 45%,
    transparent 78%
  );
  box-shadow:
    0 0 8px currentColor,
    0 0 16px currentColor;
}

/* İnce, sabit bir "şekerleme tozu" katmanı -- çok düşük opasiteli
   minik parıltı noktaları, referans görseldeki uçuşan parıltı hissi. */
[data-theme="pastel"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 20%, #f2a8cc 60%, transparent 65%),
    radial-gradient(1.2px 1.2px at 76% 16%, #f7c96a 60%, transparent 65%),
    radial-gradient(1.4px 1.4px at 34% 70%, #a98ae6 60%, transparent 65%),
    radial-gradient(1.1px 1.1px at 60% 42%, #7fd6ba 60%, transparent 65%),
    radial-gradient(1.3px 1.3px at 90% 74%, #f2a8cc 60%, transparent 65%),
    radial-gradient(1.1px 1.1px at 8% 84%, #8fc7ee 60%, transparent 65%),
    radial-gradient(1.5px 1.5px at 48% 8%, #f7c96a 60%, transparent 65%),
    radial-gradient(1.1px 1.1px at 68% 92%, #a98ae6 60%, transparent 65%);
  background-repeat: repeat;
  background-size:
    190px 190px,
    230px 230px,
    270px 270px,
    160px 160px,
    250px 250px,
    210px 210px,
    310px 310px,
    180px 180px;
  opacity: 0.5;
  animation: auroraTwinkle 9s ease-in-out infinite;
}
[data-theme="pastel"] #app {
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="pastel"] body::before {
    animation: none !important;
  }
}

/* Modallar / kartlar (ayarlar, günlük görev, mağaza): koyu cam yerine
   sıcak, açık lavanta-pembe şeker camı -- yumuşak, davetkar, premium. */
[data-theme="pastel"] .settings-card,
[data-theme="pastel"] .dc-card {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(255, 186, 214, 0.28),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(179, 220, 255, 0.22),
      transparent 44%
    ),
    rgba(74, 61, 110, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 28px 80px rgba(38, 24, 66, 0.45),
    0 0 44px rgba(200, 160, 240, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
[data-theme="pastel"] .settings-card::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    transparent 35%,
    rgba(255, 214, 168, 0.06)
  );
}
[data-theme="pastel"] .settings-row,
[data-theme="pastel"] .dc-row,
[data-theme="pastel"] .shop-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
[data-theme="pastel"] .settings-row-icon {
  background: rgba(255, 255, 255, 0.16);
}
[data-theme="pastel"] .settings-close:hover,
[data-theme="pastel"] .dc-close:hover {
  border-color: rgba(247, 155, 196, 0.65);
  box-shadow: 0 0 18px rgba(247, 155, 196, 0.3);
}
[data-theme="pastel"] .settings-toggle.on {
  background: linear-gradient(
    90deg,
    rgba(247, 155, 196, 0.85),
    rgba(143, 199, 238, 0.85)
  );
}
[data-theme="pastel"] .shop-item.equipped {
  border-color: rgba(143, 224, 194, 0.75);
  box-shadow: 0 0 16px rgba(143, 224, 194, 0.32);
}
[data-theme="pastel"] .shop-item-btn {
  background: rgba(255, 255, 255, 0.16);
}
[data-theme="pastel"] .shop-item-btn:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.26);
}
[data-theme="pastel"] .start-toast {
  background: rgba(90, 74, 137, 0.88);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   SUNSET TEMA — GERÇEK BİR GÜN BATIMI HİSSİ
   Aynı #startScreen / #prismaFill / #popFill "ayrı katman" sorunu
   Sunset'te de vardı: ana menü (start screen) body'den bağımsız
   kendi arka planına sahip ve logo hep aynı sabit gökkuşağı
   gradyanını kullanıyordu -- Sunset giyilse bile ana menüde hiç
   gün batımı hissi yoktu. Referans: gökyüzü lacivert/mordan başlayıp
   ufukta turuncu-kırmızıya, sonra altın/kum tonlarına dönüşüyor.
============================================================ */
[data-theme="sunset"] #startScreen {
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 176, 43, 0.4) 0%,
      transparent 48%
    ),
    radial-gradient(
      circle at 14% 10%,
      rgba(255, 92, 61, 0.3) 0%,
      transparent 44%
    ),
    radial-gradient(
      circle at 86% 84%,
      rgba(143, 61, 255, 0.22) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 50% 46%, var(--bg-glow-2) 0%, transparent 62%),
    linear-gradient(
      175deg,
      #17203f 0%,
      var(--bg-deep-2) 40%,
      var(--bg-mid-2) 68%,
      #3d0f1a 100%
    );
}

/* Logo: "gökyüzü" -- lacivert/mordan turuncuya, sonra altına akan bir
   ufuk gradyanı. PRISMA = gökyüzü üst tarafı, POP = ufuk/yansıma. */
[data-theme="sunset"] #prismaFill stop:nth-child(1) {
  stop-color: #2b4d8f;
}
[data-theme="sunset"] #prismaFill stop:nth-child(2) {
  stop-color: #5c5ba8;
}
[data-theme="sunset"] #prismaFill stop:nth-child(3) {
  stop-color: #a15a9e;
}
[data-theme="sunset"] #prismaFill stop:nth-child(4) {
  stop-color: #e8735f;
}
[data-theme="sunset"] #prismaFill stop:nth-child(5) {
  stop-color: #ff9a52;
}
[data-theme="sunset"] #prismaFill stop:nth-child(6) {
  stop-color: #ffb347;
}
[data-theme="sunset"] #prismaFill stop:nth-child(7) {
  stop-color: #ffcf6b;
}
[data-theme="sunset"] #prismaFill stop:nth-child(8) {
  stop-color: #ffe29a;
}
[data-theme="sunset"] #popFill stop:nth-child(1) {
  stop-color: #ffd9a0;
}
[data-theme="sunset"] #popFill stop:nth-child(2) {
  stop-color: #ff8a4d;
}
[data-theme="sunset"] #popFill stop:nth-child(3) {
  stop-color: #ff5f6d;
}

/* Logo'ya güneşin sıcak ışığı gibi yumuşak, yavaşça nefes alan bir
   parıltı -- Neon'daki elektrik flicker'ın aksine sakin ve sıcak. */
@keyframes sunsetLogoGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 16px rgba(255, 154, 82, 0.5))
      drop-shadow(0 0 36px rgba(255, 61, 143, 0.22))
      drop-shadow(0 6px 16px rgba(23, 6, 10, 0.45));
  }
  50% {
    filter: drop-shadow(0 0 26px rgba(255, 176, 43, 0.62))
      drop-shadow(0 0 52px rgba(255, 61, 143, 0.3))
      drop-shadow(0 6px 16px rgba(23, 6, 10, 0.45));
  }
}
[data-theme="sunset"] .start-logo-wrap svg.prisma-logo-svg {
  animation: sunsetLogoGlow 6s ease-in-out infinite;
}
[data-theme="sunset"] .start-tagline {
  color: #ffe3c2;
  text-shadow:
    0 0 12px rgba(255, 176, 43, 0.55),
    0 0 26px rgba(255, 92, 61, 0.3);
}
[data-theme="sunset"] .start-streak-badge {
  border-color: rgba(255, 176, 43, 0.4);
  box-shadow: 0 0 16px rgba(255, 154, 82, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="sunset"] .start-logo-wrap svg.prisma-logo-svg {
    animation: none !important;
  }
}

/* ============================================================
   NEON TEMA — IŞIKLI NEON TABELA EFEKTİ
   Bu blok SADECE [data-theme="neon"] için geçerli; diğer temalara
   dokunmuyor. Amaç: bloklar/başlık/ikonlar gerçek bir neon tüp gibi
   çevresine taşan bir ışık (glow) yayması ve hafifçe "nefes alması".
   Koyu arka plan olduğu gibi bırakıldı (kontrast ışımayı güçlendirir).
============================================================ */

@keyframes neonCellBreathe {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.22);
  }
}
/* Neon tüplerin düzensiz, hafif titreyen ışığını taklit eden ince bir
   opacity flicker -- filter/transform'u kullanan mevcut animasyonlarla
   (crystalShimmer/novaPulse/fluxPulse) aynı property'i hedeflemediği
   için üst üste binmeden birlikte çalışıyor. */
@keyframes neonTubeFlicker {
  0%,
  100% {
    opacity: 1;
  }
  7% {
    opacity: 0.86;
  }
  9% {
    opacity: 1;
  }
  46% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  54% {
    opacity: 1;
  }
}

/* --- Sıradan (özel olmayan) bloklar: kendi renginde dış ışıma --- */
[data-theme="neon"] .cell.filled:not(.crystal):not(.nova):not(.flux) {
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    0 0 4px var(--cell-glow, rgba(255, 255, 255, 0.6)),
    0 0 14px var(--cell-glow, rgba(255, 255, 255, 0.6)),
    0 0 28px var(--cell-glow, rgba(255, 255, 255, 0.5));
  animation:
    neonCellBreathe 2.6s ease-in-out infinite,
    neonTubeFlicker 3.1s ease-in-out infinite;
}
[data-theme="neon"] .piece-cell:not(.crystal):not(.nova):not(.flux) {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 0 3px var(--cell-glow, rgba(255, 255, 255, 0.6)),
    0 0 10px var(--cell-glow, rgba(255, 255, 255, 0.55));
}

/* --- Özel bloklar: mevcut ışımayı güçlü çift/üç katmanlı glow'a
   çıkarıyor + tüp flicker'ı ekliyor. Orijinal crystalShimmer/
   novaPulse/fluxPulse animasyonları (filter) korunuyor, flicker
   (opacity) üstüne ekleniyor -- aynı property çakışmıyor. --- */
[data-theme="neon"] .cell.filled.crystal,
[data-theme="neon"] .piece-cell.crystal {
  box-shadow:
    0 0 6px var(--special-crystal-glow),
    0 0 16px var(--special-crystal-glow),
    0 0 34px var(--special-crystal-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}
[data-theme="neon"] .cell.filled.crystal {
  animation:
    crystalShimmer 1.8s ease-in-out infinite,
    neonTubeFlicker 2.6s ease-in-out infinite;
}
[data-theme="neon"] .piece-cell.crystal {
  animation: neonTubeFlicker 2.6s ease-in-out infinite;
}

[data-theme="neon"] .cell.filled.nova,
[data-theme="neon"] .piece-cell.nova {
  box-shadow:
    0 0 8px var(--special-nova-glow),
    0 0 20px var(--special-nova-glow),
    0 0 40px var(--special-nova-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}
[data-theme="neon"] .cell.filled.nova {
  animation:
    novaPulse 0.7s ease-in-out infinite,
    neonTubeFlicker 1.9s ease-in-out infinite;
}
[data-theme="neon"] .piece-cell.nova {
  animation:
    novaPulse 0.7s ease-in-out infinite,
    neonTubeFlicker 1.9s ease-in-out infinite;
}

[data-theme="neon"] .cell.filled.flux,
[data-theme="neon"] .piece-cell.flux {
  box-shadow:
    0 0 6px var(--special-flux-glow),
    0 0 16px var(--special-flux-glow),
    0 0 34px var(--special-flux-glow),
    inset 0 2px 5px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}
[data-theme="neon"] .cell.filled.flux {
  animation:
    fluxPulse 0.85s ease-in-out infinite,
    neonTubeFlicker 2.3s ease-in-out infinite;
}
[data-theme="neon"] .piece-cell.flux {
  animation:
    fluxPulse 0.85s ease-in-out infinite,
    neonTubeFlicker 2.3s ease-in-out infinite;
}

/* --- Başlık: "PRISMA POP" SVG logosu -- cam tüp içinde yanan neon
   harf hissi için çift renkli (pembe + camgöbeği) katmanlı dış ışıma
   ve hafif flicker. --- */
@keyframes neonLogoFlicker {
  0%,
  100% {
    opacity: 1;
  }
  6% {
    opacity: 0.88;
  }
  9% {
    opacity: 1;
  }
  52% {
    opacity: 0.93;
  }
  55% {
    opacity: 1;
  }
}
[data-theme="neon"] .start-logo-wrap svg.prisma-logo-svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 200, 0.9))
    drop-shadow(0 0 16px rgba(255, 0, 200, 0.6))
    drop-shadow(0 0 12px rgba(0, 250, 255, 0.55))
    drop-shadow(0 0 30px rgba(0, 250, 255, 0.4));
  animation: neonLogoFlicker 3.4s ease-in-out infinite;
}
[data-theme="neon"] .start-tagline {
  text-shadow:
    0 0 8px rgba(0, 250, 255, 0.55),
    0 0 18px rgba(255, 0, 200, 0.35);
}

/* --- İkon butonları (trophy/star/shop/settings/sound): cam tüp
   içinde yanan simge hissi için hem butonun hem de içindeki SVG
   çizgisinin kendi ışığını taşırması. --- */
@keyframes neonIconFlicker {
  0%,
  100% {
    box-shadow:
      0 0 6px currentColor,
      0 0 16px currentColor,
      0 0 32px currentColor;
  }
  50% {
    box-shadow:
      0 0 9px currentColor,
      0 0 24px currentColor,
      0 0 46px currentColor;
  }
}
[data-theme="neon"] .start-icon-btn {
  border-width: 2px;
  animation: neonIconFlicker 2.4s ease-in-out infinite;
}
[data-theme="neon"] .start-icon-btn svg {
  filter: drop-shadow(0 0 5px currentColor);
}
[data-theme="neon"] .start-icon-btn.trophy {
  animation-delay: 0s;
}
[data-theme="neon"] .start-icon-btn.star {
  animation-delay: 0.3s;
}
[data-theme="neon"] .start-icon-btn.shop {
  animation-delay: 0.6s;
}
[data-theme="neon"] .start-icon-btn.settings {
  animation-delay: 0.9s;
}
[data-theme="neon"] .start-icon-btn.sound {
  animation-delay: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="neon"] .cell.filled,
  [data-theme="neon"] .piece-cell,
  [data-theme="neon"] .start-logo-wrap svg.prisma-logo-svg,
  [data-theme="neon"] .start-icon-btn {
    animation: none !important;
  }
}

/* ============================================================
   MONOCHROME TEMA — ESKİ SİYAH BEYAZ TV / KARAKALEM HİSSİ
   Bu blok SADECE [data-theme="mono"] için geçerli; diğer temalara
   dokunmuyor. Amaç: Neon'un renkli ışıması veya Sunset'in sıcak
   paletinin tam tersi -- gerçek, katıksız bir gri skala. Ana menü
   (start screen) varsayılan olarak genel "body" arka planından
   BAĞIMSIZ kendi (pembe/camgöbeği) arka planına ve logonun sabit
   gökkuşağı gradyanına sahipti; bu yüzden Monochrome giyilse bile
   ana menü hep renkliydi. Aşağıda hem ana menüye özel gri/vinyet +
   ince "tarama çizgisi" (scanline) dokusu hem de logoya/oyun
   içindeki bazı sabit renkli ışımalara "grayscale" filtresiyle
   kesin bir güvence ekleniyor -- tek tek her rengi avlamak yerine,
   görünen sonucu tamamen gri tonlara indirgeyen bu filtre en ufak
   bir renk sızıntısını bile garanti altına alıyor. Sadece ana menüde
   kullanıldığı için (64 hücreli oyun tahtası değil) performans
   maliyeti düşük.
============================================================ */
[data-theme="mono"] #startScreen {
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(255, 255, 255, 0.22) 0%,
      transparent 42%
    ),
    radial-gradient(circle at 50% 50%, var(--bg-glow-2) 0%, transparent 65%),
    /* çok hafif, statik "tarama çizgisi" dokusu -- eski CRT ekranı
       hissi, animasyonsuz olduğu için maliyetsiz */
    repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.028) 0px,
        rgba(255, 255, 255, 0.028) 1px,
        transparent 1px,
        transparent 3px
      ),
    linear-gradient(
      180deg,
      #040404 0%,
      var(--bg-deep-2) 45%,
      var(--bg-mid-2) 100%
    );
  /* #startScreen::before'daki "faint prismatic line texture" da renkli
     bir mor ton taşıyordu -- tüm ana menüye uygulanan bu grayscale
     güvencesi onu (ve gözden kaçabilecek her rengi) otomatik nötrlüyor. */
  filter: grayscale(1) contrast(1.1);
}

[data-theme="mono"] .start-logo-wrap svg.prisma-logo-svg {
  filter: drop-shadow(0 0 20px rgba(235, 235, 235, 0.32));
}
[data-theme="mono"] .start-tagline {
  text-shadow: 0 0 12px rgba(225, 225, 225, 0.3);
}
[data-theme="mono"] .start-streak-badge {
  border-color: rgba(225, 225, 225, 0.35);
  box-shadow: 0 0 14px rgba(225, 225, 225, 0.2);
}
/* ateş ikonu (emoji) CSS renk değişkeniyle boyanamıyor -- kendi
   filtresiyle ayrıca griye çekiliyor (üstteki #startScreen'e uygulanan
   grayscale zaten bunu kapsıyor, bu satır ekstra güvence). */
[data-theme="mono"] .start-streak-badge span:first-child {
  filter: grayscale(1);
}

/* Play (oynat) düğmesi: renkli konik gradyan + pembe/camgöbeği ışıma
   yerine parlak bir krom/gümüş taş hissi. */
[data-theme="mono"] .play-btn {
  background: conic-gradient(
    from 200deg,
    #f0f0f0,
    #cfcfcf,
    #a3a3a3,
    #7a7a7a,
    #a3a3a3,
    #e2e2e2,
    #f0f0f0
  );
  box-shadow:
    0 0 40px rgba(230, 230, 230, 0.35),
    0 0 80px rgba(150, 150, 150, 0.2),
    inset 0 3px 10px rgba(255, 255, 255, 0.5),
    inset 0 -8px 18px rgba(0, 0, 0, 0.35);
}
[data-theme="mono"] .play-btn:hover {
  box-shadow:
    0 0 52px rgba(235, 235, 235, 0.5),
    0 0 96px rgba(160, 160, 160, 0.3),
    inset 0 3px 10px rgba(255, 255, 255, 0.55),
    inset 0 -8px 18px rgba(0, 0, 0, 0.3);
}

/* Oyun içi üst çubuktaki ikon düğmelerinin (ses/duraklat/yeniden
   başlat) hover ışıması da sabit camgöbeği renkliydi -- nötr griye
   çekildi, böylece monokromluk sadece ana menüde değil oyun sırasında
   da hissediliyor. */
[data-theme="mono"] .icon-btn:hover {
  box-shadow: 0 0 14px rgba(220, 220, 220, 0.28);
  border-color: rgba(220, 220, 220, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="mono"] .start-crystal {
    animation: none !important;
  }
}

/* ============================================================
   AURORA TEMASI — ANA MENÜ (kutup gecesi gökyüzü)
   Diğer temalarda olduğu gibi #startScreen kendi ayrı, body'den
   bağımsız arka planına sahip -- burada da aynı aurora perdeleri
   daha belirgin/canlı verilip üstüne yıldız tozu + logo/ikonlara
   kutup ışığı parıltısı ekleniyor.
============================================================ */
[data-theme="aurora"] #startScreen {
  background:
    radial-gradient(
      ellipse 75% 50% at 20% -5%,
      rgba(63, 224, 255, 0.3) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 70% 55% at 85% 10%,
      rgba(52, 232, 166, 0.26) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 85% 60% at 50% 105%,
      rgba(155, 123, 255, 0.3) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 30% at 76% 60%,
      rgba(255, 175, 215, 0.1) 0%,
      transparent 62%
    ),
    radial-gradient(circle at 50% 45%, var(--bg-glow-2) 0%, transparent 62%),
    linear-gradient(
      170deg,
      #040a18 0%,
      var(--bg-deep-2) 45%,
      var(--bg-mid-2) 100%
    );
  background-size:
    160% 160%,
    160% 160%,
    170% 170%,
    140% 140%,
    170% 170%,
    100% 100%;
  animation: auroraDrift 70s ease-in-out infinite alternate;
}

/* Ana menünün ince "prizmatik çizgi" dokusunun (::before) üstüne
   yıldız tozu ekleniyor, böylece logo ve Play düğmesinin arkasında da
   gökyüzü hissi devam ediyor. */
[data-theme="aurora"] #startScreen::before {
  opacity: 0.9;
  background-image:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 46%,
      rgba(255, 255, 255, 0.035) 47%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      160deg,
      transparent 0%,
      transparent 30%,
      rgba(140, 120, 255, 0.045) 31%,
      transparent 32%,
      transparent 100%
    ),
    radial-gradient(1.6px 1.6px at 10% 18%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 82% 12%, #dff6ff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 28% 74%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 63% 38%, #cbffe9 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 92% 68%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 15% 92%, #dbe4ff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 50% 6%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 40% 50%, #d2ffe9 50%, transparent 52%);
  background-size:
    100% 100%,
    100% 100%,
    190px 190px,
    230px 230px,
    170px 170px,
    250px 250px,
    210px 210px,
    280px 280px,
    150px 150px,
    260px 260px;
  animation: auroraTwinkle 7s ease-in-out infinite;
}

/* Logo: "PRISMA" gökkuşağı yerine camgöbeğinden zümrüde, oradan kutup
   moruna ve en uçta çok ince bir pembeye akan bir kutup ışığı akışı.
   "POP" ise buzlu-camgöbeği bir yansıma. */
[data-theme="aurora"] #prismaFill stop:nth-child(1) {
  stop-color: #2fc7ff;
}
[data-theme="aurora"] #prismaFill stop:nth-child(2) {
  stop-color: #3fe0d8;
}
[data-theme="aurora"] #prismaFill stop:nth-child(3) {
  stop-color: #34e8a6;
}
[data-theme="aurora"] #prismaFill stop:nth-child(4) {
  stop-color: #7fe9b0;
}
[data-theme="aurora"] #prismaFill stop:nth-child(5) {
  stop-color: #9b7bff;
}
[data-theme="aurora"] #prismaFill stop:nth-child(6) {
  stop-color: #b98bff;
}
[data-theme="aurora"] #prismaFill stop:nth-child(7) {
  stop-color: #d8a8ff;
}
[data-theme="aurora"] #prismaFill stop:nth-child(8) {
  stop-color: #eec7ff;
}
[data-theme="aurora"] #popFill stop:nth-child(1) {
  stop-color: #eafcff;
}
[data-theme="aurora"] #popFill stop:nth-child(2) {
  stop-color: #7fe9ff;
}
[data-theme="aurora"] #popFill stop:nth-child(3) {
  stop-color: #3fa8ff;
}

/* Logoya sakin, "nefes alan" bir kutup ışığı parıltısı -- Neon'daki
   elektrik flicker'ın aksine yavaş ve yumuşak. */
@keyframes auroraLogoGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(63, 224, 255, 0.45))
      drop-shadow(0 0 34px rgba(155, 123, 255, 0.28))
      drop-shadow(0 6px 16px rgba(2, 6, 16, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(63, 224, 255, 0.6))
      drop-shadow(0 0 50px rgba(52, 232, 166, 0.32))
      drop-shadow(0 6px 16px rgba(2, 6, 16, 0.5));
  }
}
[data-theme="aurora"] .start-logo-wrap svg.prisma-logo-svg {
  animation: auroraLogoGlow 6.5s ease-in-out infinite;
}
[data-theme="aurora"] .start-tagline {
  color: #cdeeff;
  text-shadow:
    0 0 12px rgba(63, 224, 255, 0.5),
    0 0 26px rgba(155, 123, 255, 0.3);
}
[data-theme="aurora"] .start-streak-badge {
  border-color: rgba(127, 233, 255, 0.4);
  box-shadow: 0 0 16px rgba(63, 224, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="aurora"] #startScreen,
  [data-theme="aurora"] #startScreen::before,
  [data-theme="aurora"] .start-logo-wrap svg.prisma-logo-svg,
  [data-theme="aurora"] .start-crystal {
    animation: none !important;
  }
}

/* Tutorial: sessiz hedef-hücre parıltısı (metin/popup yok) */
@keyframes tutorialTargetPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.85),
      0 0 18px 6px rgba(255, 255, 255, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.35),
      0 0 30px 10px rgba(255, 255, 255, 0.25);
  }
}
.cell.tutorial-target {
  animation: tutorialTargetPulse 1.1s ease-in-out infinite;
  border-radius: 6px;
}