/* =========================================================
   CINEMATIC SUDOKU — tema: gece gökyüzü + deniz feneri
   ========================================================= */
:root {
  --bg-0: #0b1220;
  --bg-1: #121a2b;
  --bg-2: #1a2d47;
  --ink: #eaf1ff;
  --ink-soft: #c9d5ea;
  --ink-dim: #9fb0cc;
  --accent: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.45);
  --gold: #e6b55a;
  --danger: #ff7a7a;
  --success: #43c27a;
  --grid-line: rgba(255, 255, 255, 0.20);
  --grid-line-strong: rgba(255, 255, 255, 0.42);
  --cell-bg: rgba(18, 26, 43, 0.60);
  --cell-hl: rgba(124, 196, 255, 0.17);
  --cell-sel: rgba(124, 196, 255, 0.38);
  --cell-same: rgba(124, 196, 255, 0.26);
  /* Tutorial tri-color highlights — Cinematic "warm triad": altın / mercan / cyan */
  --hl-row: rgba(251, 191, 36, 0.45);
  --hl-col: rgba(251, 113, 133, 0.45);
  --hl-block: rgba(34, 211, 238, 0.40);
  --hl-row-col: rgba(252, 152, 80, 0.55);
  --hl-row-block: rgba(140, 200, 140, 0.50);
  --kw-row: #fbbf24;
  --kw-col: #fb7185;
  --kw-block: #22d3ee;
  /* Win celebration — koyu zeminde parlasın diye doygun + neon glow */
  --celeb-row: rgba(255, 196, 64, 0.92);
  --celeb-col: rgba(255, 88, 138, 0.92);
  --celeb-block: rgba(72, 224, 244, 0.88);
  --celeb-row-col: rgba(255, 142, 90, 0.95);
  --celeb-row-block: rgba(180, 220, 130, 0.92);
  --celeb-glow-row: 0 0 14px rgba(255, 196, 64, 0.85), inset 0 0 10px rgba(255, 220, 140, 0.55);
  --celeb-glow-col: 0 0 14px rgba(255, 88, 138, 0.85), inset 0 0 10px rgba(255, 160, 200, 0.55);
  --celeb-glow-block: 0 0 16px rgba(72, 224, 244, 0.85), inset 0 0 10px rgba(160, 240, 255, 0.55);
  --celeb-text: #0a1422;
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  /* Hedef viewport: 1280x720 (GameDistribution). Board ve t\u00fcm UI sat\u0131rlar\u0131
     bu sabit boyutu kullan\u0131r. 382 = 2 (border) + 9*42 (cells), b\u00f6lme tam, sub-pixel yok. */
  --app-width: 420px;
  --board-size: 382px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ── POKI / GAMEDISTRIBUTION PAGE SHELL ──────────────────────────
   html + body → tam viewport, sayfa arka planı (koyu antrasit)
   .game-frame → sabit 800×600 oyun kanvası; tüm absolute katmanlar
   (scene, loader, modal) bu kutuya göre konumlanır.              */
html {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #0d1520; /* GD shell dışı koyu sahne — 1280×720 frame için */
  user-select: none;
  -webkit-user-select: none;
  display: flex; align-items: center; justify-content: center;
}

/* ── GD SHELL (1280×720 sabit çerçeve, viewport'ta ortalı) ──────── */
.gd-shell {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1280px;
  display: flex; flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 24px 80px rgba(0, 0, 0, 0.60),
    0 8px 24px rgba(0, 0, 0, 0.40);
}
.gd-shell__bar {
  width: 100%; height: 36px; flex-shrink: 0;
  background: #1a1f2e;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.gd-shell__bar-logo { flex-shrink: 0; }
.gd-shell__bar-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.75);
}

.game-frame {
  position: relative;
  width: 1280px; height: 720px;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
}

/* Cinematic'e geçişte ~1.4s smooth fade — reverb tail'iyle eş zamanlı.
   Sadece tema değişimi sırasında aktif (JS class ekler/çıkarır). */
body.theme-fade,
body.theme-fade * {
  transition: background-color 0.8s ease, color 0.8s ease,
              border-color 0.8s ease, box-shadow 0.8s ease,
              fill 0.8s ease, stroke 0.8s ease !important;
}

/* ---------- LOADER (ilk a\u00e7\u0131l\u0131\u015f) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  opacity: 1; transition: opacity 0.5s ease;
}
.loader.hidden { opacity: 0; pointer-events: none; }

/* Loader aktifken game içeriğini gizle — sadece arka plan görünsün */
#loader:not(.hidden) ~ .app { opacity: 0; pointer-events: none; }
.app { transition: opacity 0.5s ease; }
.loader__inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  animation: loader-rise 0.6s ease both;
}
.logo {
  width: 104px; height: 104px;
  filter: drop-shadow(0 8px 28px rgba(124, 196, 255, 0.35));
  animation: logo-pulse 3s ease-in-out infinite;
}
.logo__frame { fill: #ffffff; }
.logo__frame-draw { fill: none; stroke: none; }
.logo__grid { stroke: rgba(20, 35, 60, 0.18); stroke-width: 1.2; }
.logo__digits text {
  fill: #1b2740;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.logo__digits .is-accent { fill: #2563eb; }
html[data-theme-preload="dark"] .logo__digits .is-accent,
body[data-theme="dark"] .logo__digits .is-accent { fill: #818CF8; }
html[data-theme-preload="mint"] .logo__digits .is-accent,
body[data-theme="mint"] .logo__digits .is-accent { fill: #0FA37A; }
/* Slot machine digit states — JS controls transitions via class adds */
.logo__d { animation: none; }
.logo__d.is-spinning { opacity: 1; }
.logo__d.is-ticking {
  animation: reel-up 85ms ease-out forwards;
}
.logo__d.is-locking {
  animation: digit-lock 0.30s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.logo__d.is-accent.is-locking {
  animation: digit-lock-accent 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes reel-up {
  from { transform: translateY(55%); opacity: 0; }
  to   { transform: translateY(0%);  opacity: 1; }
}
.loader__title {
  font-family: 'Poppins', sans-serif;
  font-size: 38px; font-weight: 700; letter-spacing: 10px;
  color: #eaf1ff; margin: 0;
}
.loader__subtitle {
  font-size: 11px; letter-spacing: 6px; text-transform: uppercase;
  color: #7a8aa6; margin: 0;
}
.loader__dots { display: flex; gap: 6px; margin-top: 8px; }
.loader__dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(124, 196, 255, 0.55);
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.loader__dots span:nth-child(2) { animation-delay: 0.2s; }
.loader__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loader-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 8px 28px rgba(124, 196, 255, 0.30)); }
  50%      { filter: drop-shadow(0 10px 36px rgba(124, 196, 255, 0.55)); }
}
@keyframes digit-lock {
  0%   { transform: scale(1.28); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes digit-lock-accent {
  0%   { transform: scale(1.52); opacity: 1; text-shadow: 0 0 18px rgba(37, 99, 235, 0.95); }
  55%  { text-shadow: 0 0 8px rgba(37, 99, 235, 0.45); }
  100% { transform: scale(1);    opacity: 1; text-shadow: none; }
}
@keyframes digit-lock-accent-dark {
  0%   { transform: scale(1.52); opacity: 1; text-shadow: 0 0 18px rgba(26, 138, 255, 0.95); }
  55%  { text-shadow: 0 0 8px rgba(26, 138, 255, 0.45); }
  100% { transform: scale(1);    opacity: 1; text-shadow: none; }
}
@keyframes digit-lock-accent-mint {
  0%   { transform: scale(1.52); opacity: 1; text-shadow: 0 0 18px rgba(15, 163, 122, 0.95); }
  55%  { text-shadow: 0 0 8px rgba(15, 163, 122, 0.45); }
  100% { transform: scale(1);    opacity: 1; text-shadow: none; }
}
html[data-theme-preload="dark"] .logo__d.is-accent.is-locking,
body[data-theme="dark"] .logo__d.is-accent.is-locking {
  animation: digit-lock-accent-dark 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
html[data-theme-preload="mint"] .logo__d.is-accent.is-locking,
body[data-theme="mint"] .logo__d.is-accent.is-locking {
  animation: digit-lock-accent-mint 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes dot-bounce { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .logo, .logo__digits text, .loader__dots span, .loader__inner { animation: none; }
  .logo__digits text { opacity: 1; }
}

html[data-theme-preload="light"] .loader,
body[data-theme="light"] .loader {
  background: url('images/light/light-back.png') center / cover no-repeat;
}
body[data-theme="light"] #game-frame {
  background-image:    url('images/light/light-back.png');
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}
.loader__pin--light,
.loader__pin--dark,
.loader__pin--mint { display: none; }

html[data-theme-preload="mint"] .loader,
body[data-theme="mint"] .loader {
  background: transparent;
}
html[data-theme-preload="light"] .logo,
body[data-theme="light"] .logo { filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.20)); }
html[data-theme-preload="light"] .loader__title,
body[data-theme="light"] .loader__title {
  color: #1b2740;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 3px;
  animation: classic-sudoku-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0s;
}
html[data-theme-preload="light"] .loader__subtitle,
body[data-theme="light"] .loader__subtitle { display: none; }
html[data-theme-preload="light"] .loader__pin--light,
body[data-theme="light"] .loader__pin--light {
  display: block;
  height: 12px;
  width: auto;
  margin: 0;
  opacity: 0;
  animation: classic-fade-up 0.4s ease both;
  animation-delay: 1s;
}
html[data-theme-preload="light"] .loader__dots,
body[data-theme="light"] .loader__dots {
  opacity: 0;
  animation: classic-fade-up 0.4s ease both;
  animation-delay: 1s;
}
html[data-theme-preload="light"] .loader__dots span:nth-child(1),
body[data-theme="light"] .loader__dots span:nth-child(1) {
  background: #93c5fd;
  animation: dot-bounce-blue1 1.2s ease-in-out infinite;
}
html[data-theme-preload="light"] .loader__dots span:nth-child(2),
body[data-theme="light"] .loader__dots span:nth-child(2) {
  background: #3b82f6;
  animation: dot-bounce-blue2 1.2s ease-in-out infinite;
  animation-delay: 0.2s;
}
html[data-theme-preload="light"] .loader__dots span:nth-child(3),
body[data-theme="light"] .loader__dots span:nth-child(3) {
  background: #2563eb;
  animation: dot-bounce-blue3 1.2s ease-in-out infinite;
  animation-delay: 0.4s;
}
@keyframes classic-sudoku-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes classic-fade-up {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dot-bounce-blue1 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #93c5fd; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #bfdbfe; }
}
@keyframes dot-bounce-blue2 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #3b82f6; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #60a5fa; }
}
@keyframes dot-bounce-blue3 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #2563eb; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #3b82f6; }
}

/* ── Dark loader ─────────────────────────────────────────────────── */
html[data-theme-preload="dark"] .loader,
body[data-theme="dark"] .loader {
  background: url('images/dark/dark-back-rev.png') center center / cover no-repeat;
}
html[data-theme-preload="dark"] .loader__title,
body[data-theme="dark"] .loader__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 40px; letter-spacing: 3px; color: #eaf1ff;
  animation: classic-sudoku-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0s;
}
html[data-theme-preload="dark"] .loader__subtitle,
body[data-theme="dark"] .loader__subtitle { display: none; }
html[data-theme-preload="dark"] .loader__pin--dark,
body[data-theme="dark"] .loader__pin--dark {
  display: block; height: 12px; width: auto; margin: 0;
  opacity: 0; animation: classic-fade-up 0.4s ease both; animation-delay: 1s;
}
html[data-theme-preload="dark"] .loader__dots,
body[data-theme="dark"] .loader__dots {
  opacity: 0; animation: classic-fade-up 0.4s ease both; animation-delay: 1s;
}
html[data-theme-preload="dark"] .loader__dots span:nth-child(1),
body[data-theme="dark"] .loader__dots span:nth-child(1) {
  background: #a5f3fc; animation: dot-bounce-cyan1 1.2s ease-in-out infinite;
}
html[data-theme-preload="dark"] .loader__dots span:nth-child(2),
body[data-theme="dark"] .loader__dots span:nth-child(2) {
  background: #49C6E5; animation: dot-bounce-cyan2 1.2s ease-in-out infinite; animation-delay: 0.2s;
}
html[data-theme-preload="dark"] .loader__dots span:nth-child(3),
body[data-theme="dark"] .loader__dots span:nth-child(3) {
  background: #2aa8c4; animation: dot-bounce-cyan3 1.2s ease-in-out infinite; animation-delay: 0.4s;
}
@keyframes dot-bounce-cyan1 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #a5f3fc; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #cffafe; }
}
@keyframes dot-bounce-cyan2 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #49C6E5; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #7dd3e0; }
}
@keyframes dot-bounce-cyan3 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #2aa8c4; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #49C6E5; }
}

/* ── Mint loader ─────────────────────────────────────────────────── */
html[data-theme-preload="mint"] .loader,
body[data-theme="mint"] .loader {
  background: url('images/deep-mint/mint-back-yaprak.png') center / cover no-repeat;
}
html[data-theme-preload="mint"] .logo,
body[data-theme="mint"] .logo { filter: drop-shadow(0 8px 24px rgba(15, 163, 122, 0.25)); }
html[data-theme-preload="mint"] .loader__title,
body[data-theme="mint"] .loader__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 40px; letter-spacing: 3px; color: #0F1F1A;
  animation: classic-sudoku-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0s;
}
html[data-theme-preload="mint"] .loader__subtitle,
body[data-theme="mint"] .loader__subtitle { display: none; }
html[data-theme-preload="mint"] .loader__pin--mint,
body[data-theme="mint"] .loader__pin--mint {
  display: block; height: 12px; width: auto; margin: 0;
  opacity: 0; animation: classic-fade-up 0.4s ease both; animation-delay: 1s;
}
html[data-theme-preload="mint"] .loader__dots,
body[data-theme="mint"] .loader__dots {
  opacity: 0; animation: classic-fade-up 0.4s ease both; animation-delay: 1s;
}
html[data-theme-preload="mint"] .loader__dots span:nth-child(1),
body[data-theme="mint"] .loader__dots span:nth-child(1) {
  background: #6ee7b7; animation: dot-bounce-mint1 1.2s ease-in-out infinite;
}
html[data-theme-preload="mint"] .loader__dots span:nth-child(2),
body[data-theme="mint"] .loader__dots span:nth-child(2) {
  background: #0FA37A; animation: dot-bounce-mint2 1.2s ease-in-out infinite; animation-delay: 0.2s;
}
html[data-theme-preload="mint"] .loader__dots span:nth-child(3),
body[data-theme="mint"] .loader__dots span:nth-child(3) {
  background: #0b8a67; animation: dot-bounce-mint3 1.2s ease-in-out infinite; animation-delay: 0.4s;
}
@keyframes dot-bounce-mint1 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #6ee7b7; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #a7f3d0; }
}
@keyframes dot-bounce-mint2 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #0FA37A; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #34d399; }
}
@keyframes dot-bounce-mint3 {
  0%, 100% { opacity: 0.35; transform: translateY(0); background: #0b8a67; }
  50%       { opacity: 1;    transform: translateY(-4px); background: #0FA37A; }
}

/* ---------- APP ---------- */
.app {
  position: relative; z-index: 1;
  width: var(--app-width); height: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column;
}
.screen { display: none; width: 100%; height: 100%; flex-direction: column; }
.screen.active { display: flex; }


/* ---------- MENU SCREEN ----------
   600px viewport sabit. Dikey bütçe ~580px (padding hariç).
   Hierarchy: header → kartlar → en iyi puan → CTA grubu → footer. */
.screen--menu {
  position: relative;
  padding: 14px 22px 10px;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

/* Menü açılış efekti — zorluk modalındaki cascade'in aynısı, üstten iniş */
@keyframes menu-card-reveal {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.screen--menu.is-animating > * {
  animation: menu-card-reveal 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.screen--menu.is-animating > *:nth-child(1) { animation-delay: 0ms;   }
.screen--menu.is-animating > *:nth-child(2) { animation-delay: 60ms;  }
.screen--menu.is-animating > *:nth-child(3) { animation-delay: 120ms; }
.screen--menu.is-animating > *:nth-child(4) { animation-delay: 180ms; }
.screen--menu.is-animating > *:nth-child(5) { animation-delay: 240ms; }
.screen--menu.is-animating > *:nth-child(6) { animation-delay: 300ms; }
.screen--menu.is-animating > *:nth-child(7) { animation-delay: 360ms; }
.screen--menu.is-animating > .menu__spacer { animation: none; }
.menu__header {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 2px;
  position: relative;
  z-index: 50; /* dil picker dropdown'\u0131n\u0131n menu cards \u00fczerinde a\u00e7\u0131lmas\u0131 i\u00e7in */
}
.menu__title {
  font-size: 30px; font-weight: 300; letter-spacing: 6px;
  color: var(--ink);
  text-shadow: 0 0 30px rgba(124, 196, 255, 0.25);
  line-height: 1;
}
.menu__subtitle {
  font-size: 11px; letter-spacing: 4px;
  color: var(--ink-dim); text-transform: uppercase;
  line-height: 1;
}
.menu__theme {
  margin-top: 2px;
  /* tema toggle artık başlık altına gömülü; container kendi stiliyle gelir. */
}

/* Daily card — tek kart, ortalı */
.menu__cards {
  display: flex; justify-content: center;
  width: 100%; max-width: 360px;
}
.event-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px;
  padding: 14px 14px 12px;
  width: 100%;
  min-height: 200px;
  border: none;
  border-radius: 22px;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font: inherit;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(20, 80, 170, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.event-card--daily {
  background: linear-gradient(165deg, #6cc6ff 0%, #3a9bff 45%, #1f73e8 100%);
}

/* ── Daily Slot Machine overlay ───────────────────────────── */
.daily-slot {
  position: absolute; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  /* Şeffaf: game-frame arka planı tam genişlikte doğal görünür, koyu bant yok */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: daily-slot-fadein 0.22s ease both;
}
.daily-slot[hidden] { display: none; }

/* Slot aktifken tüm #menu-screen içeriğini gizle, sadece daily-slot görünsün */
#menu-screen.is-slot-active > *:not(#daily-slot) {
  visibility: hidden !important;
}
#menu-screen.is-slot-active #daily-slot {
  visibility: visible !important;
}
@keyframes daily-slot-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.daily-slot__box {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 38px 56px;
  background: rgba(10, 20, 48, 0.93);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  box-shadow: 0 28px 72px rgba(0,0,0,0.65);
  min-width: 240px; text-align: center;
}
.daily-slot__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ink-soft); opacity: 0.65;
}
/* Reel: makara penceresi — overflow:hidden içeriği kırpar */
.daily-slot__reel {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  overflow: hidden;
  /* İkon (88px) + gap (12px) + isim (44px) = 144px görünür alan */
  height: 144px;
  justify-content: center;
  padding: 0 4px;
  position: relative;
}

/* İkon + isim: slide için will-change optimizasyonu */
.daily-slot__icon {
  width: 72px; height: 72px;
  object-fit: contain; display: block;
  flex-shrink: 0;
  margin-bottom: 12px;
  will-change: transform, opacity, filter;
}
.daily-slot__name {
  font-family: 'Manrope', sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: 2px;
  color: var(--ink); min-width: 190px; text-align: center;
  flex-shrink: 0;
  will-change: transform, opacity, filter;
}

/* ── Slide-in keyframe: yukarıdan aşağıya süzülme ─────────── */
@keyframes daily-slot-slide {
  0% {
    opacity: 0;
    transform: translateY(-32px);
  }
  60% {
    opacity: 1;
    transform: translateY(2px);
  }
  80% {
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Spinning fazında slide animasyonu ─────────────────────── */
.daily-slot__reel.is-spinning .daily-slot__icon,
.daily-slot__reel.is-spinning .daily-slot__name {
  animation: daily-slot-slide var(--slot-dur, 0.1s) ease-out both;
}

/* ── Landing: blur sıfırla, bounce ile yerleş ─────────────── */
@keyframes daily-slot-bounce {
  0%   { transform: translateY(0)   scale(1);    filter: none; }
  28%  { transform: translateY(5px) scale(1.10); filter: none; }
  55%  { transform: translateY(-3px) scale(0.97); }
  75%  { transform: translateY(2px)  scale(1.03); }
  90%  { transform: translateY(-1px) scale(0.99); }
  100% { transform: translateY(0)   scale(1); }
}
.daily-slot__reel.is-landed .daily-slot__icon,
.daily-slot__reel.is-landed .daily-slot__name {
  animation: daily-slot-bounce 0.50s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  filter: none !important;
}
.daily-slot__sub {
  font-size: 12px; color: var(--ink-soft); letter-spacing: 0.4px; min-height: 18px;
}
/* Light tema */
/* Light: kart açık, border ve shadow hafif */
body[data-theme="light"] .daily-slot__box {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(37, 99, 235, 0.12);
  box-shadow: 0 20px 60px rgba(13, 27, 42, 0.18);
}
/* Mint: kart beyaz-yeşil tonda */
body[data-theme="mint"] .daily-slot__box {
  background: rgba(250, 251, 249, 0.97);
  border-color: rgba(15, 163, 122, 0.16);
  box-shadow: 0 20px 60px rgba(10, 60, 45, 0.18);
}
.event-card:not(:disabled):hover {
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(124, 196, 255, 0.35);
}
body[data-theme="mint"] .event-card--daily:hover,
body[data-theme="mint"] .best-score:hover,
body[data-theme="mint"] .best-score:focus-visible,
body[data-theme="mint"] .menu__secondary:hover,
body[data-theme="mint"] .menu__secondary:focus-visible {
  filter: none; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 163, 122, 0.18);
}
.event-card__head {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
}
.event-card__main {
  display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%;
}
/* Daily kartında text, sağdaki gift butonunun altına binmesin */
.event-card--daily .event-card__main {
  padding-right: 84px;
}
.event-card__text {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
}
.event-card__icon-cal-mint,
.event-card__sub { display: none; }

/* ── Achievement Toast ───────────────────────────────────────── */
.achievement-toast {
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%) translateY(-110%);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: var(--bg-2, #1a2d47);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
  pointer-events: none;
  min-width: 220px; max-width: 340px;
}
.achievement-toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.achievement-toast__emoji {
  font-size: 28px; line-height: 1; flex-shrink: 0;
}
.achievement-toast__body {
  display: flex; flex-direction: column; gap: 2px;
}
.achievement-toast__title {
  font-size: 13px; font-weight: 700; color: var(--ink, #eaf1ff);
  letter-spacing: 0.3px;
}
.achievement-toast__desc {
  font-size: 11px; color: var(--ink-soft, #c9d5ea);
}
/* Light / Lavender modda koyu değil açık kart */
body[data-theme="light"] .achievement-toast,
body[data-theme="lavender"] .achievement-toast {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
body[data-theme="light"] .achievement-toast__title,
body[data-theme="lavender"] .achievement-toast__title { color: var(--ink); }
body[data-theme="light"] .achievement-toast__desc,
body[data-theme="lavender"] .achievement-toast__desc  { color: var(--ink-soft); }

/* ── Gift Button ─────────────────────────────────────────────── */
.event-card-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.gift-btn {
  position: absolute;
  bottom: 12px; right: 12px;
  background: none; border: none; padding: 0;
  cursor: pointer; z-index: 10;
  border-radius: 8px;
  line-height: 0;
  /* transform animasyonla çakışmasın diye transition'dan çıkarıldı */
  transition: filter 0.2s ease;
}
.gift-btn:hover       { filter: brightness(1.1); }
.gift-btn:active      { filter: brightness(0.9); }
.gift-btn__badge      { display: none; }

/* Hover translateY → img üzerinde, transition yok → çakışma yok */
.gift-btn img         { transition: transform 0.2s ease; }
.gift-btn:hover img   { transform: translateY(-2px); }
.gift-btn:active img  { transform: translateY(0) scale(0.96); }

/* ── Menü girişinde dikkat çekici minimal sallanma ───────────── */
@keyframes gift-shake {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-5deg); }
  40%       { transform: rotate(5deg); }
  60%       { transform: rotate(-3deg); }
  80%       { transform: rotate(3deg); }
}
.gift-btn--shake img {
  animation: gift-shake 0.55s ease both;
  transform-origin: center bottom;
}
.gift-btn--shake:hover img { animation-play-state: paused; }

/* 3/3: Kilid açık — animasyon yok, hover efekti korunur */
/* Gift imgs: sadece aktif tema görünür */
.event-card__gift { display: none; }
body[data-theme="mint"]  .event-card__gift--mint  { display: block; }
body[data-theme="light"] .event-card__gift--light { display: block; }
body[data-theme="dark"]  .event-card__gift--dark  { display: block; }

.event-card__label {
  font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}
.event-card__title {
  font-size: 22px; font-weight: 700; letter-spacing: 0.2px;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 2px;
}
.event-card__cta {
  display: inline-block;
  margin-top: 2px;
  padding: 7px 22px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
}
.event-card__timer {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  color: #ffffff;
}
/* Zorluk rozeti — referans tasarımda gizli, veriyi koruyoruz */
.event-card__badge { display: none; }
/* Seri dotları — referans tasarımda gizli */
.daily-streak { display: none; }
.event-card__streak-label {
  display: inline-block;
  margin-top: auto;
  padding: 8px 28px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 2px 6px rgba(0,0,0,0.12);
}

/* Eski "En iyi puan" konumunda görsel boşluk — düzen aynı kalır. */
.menu__spacer { width: 100%; max-width: 360px; height: 60px; }

/* Tüm Zamanların En İyi Puanı */
.best-score {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 18px;
  background: rgba(10, 22, 40, 0.45);
  border: 1px solid var(--grid-line);
  border-radius: 12px;
  color: inherit;
  cursor: pointer;
  width: 100%; max-width: 360px;
  font: inherit;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.best-score:hover, .best-score:focus-visible {
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(124, 196, 255, 0.35);
  outline: none;
}
.best-score__label {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink-soft);
}
.best-score__value {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 500; color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px var(--accent-glow);
}
.best-score__value svg { color: var(--accent); }
.best-score__stats {
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: 100%; margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--grid-line);
}
.best-score__stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1;
}
.best-score__stat-val {
  font-size: 15px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.best-score__stat-lbl {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-dim);
}
.best-score__stat-divider {
  width: 1px; height: 28px; background: var(--grid-line);
  flex-shrink: 0;
}

/* CTA grubu */
.menu__actions {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 360px;
}
.menu__primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  background: var(--accent); color: #061222;
  border: none; border-radius: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 8px 24px rgba(124, 196, 255, 0.25);
}
.menu__primary:hover, .menu__primary:focus-visible {
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(124, 196, 255, 0.35);
  outline: none;
}
.menu__secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--grid-line);
  border-radius: 10px;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s ease;
}
.menu__secondary:hover, .menu__secondary:focus-visible {
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(124, 196, 255, 0.35);
  outline: none;
}
.menu__footer { color: var(--ink-dim); font-size: 10px; letter-spacing: 1px; text-align: center; margin-top: 10px; }

/* ---------- SCORES SCREEN ---------- */
.screen--scores { padding: 12px 18px 20px; gap: 12px; }

/* Skorlar açılış efekti — menü cascade ile aynı pattern (60ms cascade, üstten iniş) */
.screen--scores.is-animating > * {
  animation: menu-card-reveal 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.screen--scores.is-animating > *:nth-child(1) { animation-delay: 0ms;   }
.screen--scores.is-animating > *:nth-child(2) { animation-delay: 60ms;  }
.screen--scores.is-animating > *:nth-child(3) { animation-delay: 120ms; }
.screen--scores.is-animating > *:nth-child(4) { animation-delay: 180ms; }
.scores__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 4px;
}
.scores__title { font-size: 18px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; }
.scores__spacer { width: 36px; }
.scores__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(10, 22, 40, 0.45);
  border: 1px solid var(--grid-line);
  border-radius: 14px; padding: 0;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.scores__stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 14px 8px 12px;
  border-right: 1px solid var(--grid-line); min-width: 0;
}
.scores__stat:last-child { border-right: none; }
.scores__stat-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: currentColor; margin-bottom: 2px;
}
.scores__stat--gold .scores__stat-icon,
.scores__stat--gold .scores__stat-value { color: #F5C842; }
.scores__stat--blue .scores__stat-icon,
.scores__stat--blue .scores__stat-value { color: var(--accent); }
.scores__stat--green .scores__stat-icon,
.scores__stat--green .scores__stat-value { color: #43c27a; }
.scores__stat--orange .scores__stat-icon,
.scores__stat--orange .scores__stat-value { color: #FF8A4C; }
.scores__stat-label { font-size: 8px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-dim); }
.scores__stat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.scores__stat-sub { font-size: 9px; color: var(--ink-dim); font-variant-numeric: tabular-nums; margin-top: 1px; }
.scores__tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.scores__tabs::-webkit-scrollbar { display: none; }
.score-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: rgba(10, 22, 40, 0.45);
  border: 1px solid var(--grid-line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s ease;
}
.score-tab.active {
  background: rgba(124, 196, 255, 0.15);
  border-color: var(--accent);
  color: var(--ink);
}
.scores__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; flex: 1;
  background: rgba(10, 22, 40, 0.45);
  border: 1px solid var(--grid-line);
  border-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.score-row {
  display: grid;
  /* Sabit kolon genişlikleri → puan haneleri (787 vs 1.003) ne olursa olsun
     hata ve süre yatayda kaymaz. Son 3 kolon sağa hizalı. */
  grid-template-columns: 32px 1fr 36px 48px 64px;
  align-items: center; gap: 10px;
  padding: 13px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--grid-line);
  border-radius: 0;
  font-size: 14px;
}
.score-row:last-child { border-bottom: none; }
.score-row.mine { background: rgba(124, 196, 255, 0.06); }
.score-row__rank {
  color: var(--ink-dim); font-size: 11px; letter-spacing: 1px;
  text-align: center; font-weight: 600;
}
.score-row:nth-child(1) .score-row__rank,
.score-row:nth-child(2) .score-row__rank,
.score-row:nth-child(3) .score-row__rank { font-weight: 800; }
.score-row:nth-child(1) .score-row__rank { font-size: 22px; }
.score-row:nth-child(2) .score-row__rank { font-size: 20px; }
.score-row:nth-child(3) .score-row__rank { font-size: 18px; }

/* Light mod rank renkleri */
body[data-theme="light"] .score-row:nth-child(1) .score-row__rank { color: #2563EB; }
body[data-theme="light"] .score-row:nth-child(2) .score-row__rank { color: #7AAAE4; }
body[data-theme="light"] .score-row:nth-child(3) .score-row__rank { color: #A8C2F0; }

/* Dark mod rank renkleri — indigo accent ailesi */
body[data-theme="dark"] .score-row:nth-child(1) .score-row__rank { color: var(--accent); }
body[data-theme="dark"] .score-row:nth-child(2) .score-row__rank { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
body[data-theme="dark"] .score-row:nth-child(3) .score-row__rank { color: color-mix(in srgb, var(--accent) 45%, var(--ink-dim)); }

/* Mint mod rank renkleri */
body[data-theme="mint"] .score-row:nth-child(1) .score-row__rank { color: #0FA37A; }
body[data-theme="mint"] .score-row:nth-child(2) .score-row__rank { color: #5CB89A; }
body[data-theme="mint"] .score-row:nth-child(3) .score-row__rank { color: #3A8870; }
.score-row__name { color: var(--ink); letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.score-row__mistakes {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  color: var(--ink-dim); font-size: 11px; font-variant-numeric: tabular-nums;
}
.score-row__mistakes svg { width: 10px; height: 10px; flex-shrink: 0; opacity: 0.7; }
.score-row__time  { color: var(--ink-dim); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; text-align: right; }
.score-row__score { color: var(--accent);  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.scores__empty { color: var(--ink-dim); text-align: center; padding: 20px; font-size: 13px; }

/* ---------- GAME SCREEN ---------- */
.screen--game {
  padding: 8px 14px 8px;
  min-height: 0;
  overflow: hidden;
}
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 6px;
  flex-shrink: 0;
  position: relative;
}
.score-float {
  position: absolute;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  animation: score-float-up 0.9s ease-out forwards;
}
.score-float--pos { color: var(--accent); }
.score-float--neg { color: var(--danger); }
@keyframes score-float-up {
  0%   { opacity: 1;   transform: translateY(0);     }
  60%  { opacity: 0.9; transform: translateY(-18px);  }
  100% { opacity: 0;   transform: translateY(-34px);  }
}
.icon-btn {
  background: transparent; border: none; color: var(--ink);
  width: 36px; height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.06); }
.icon-btn svg { width: 22px; height: 22px; }
.top-bar__score {
  font-family: 'Poppins', sans-serif;
  font-size: 26px; font-weight: 300; color: var(--ink);
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(124, 196, 255, 0.25);
}

/* ---------- STATUS ROW ---------- */
.status-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 auto 10px;
  flex-shrink: 0;
  width: var(--board-size);
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid var(--grid-line);
  border-radius: 12px;
  padding: 4px 6px;
}
.status-row__center {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
}
/* Her hücre: ikon (üst) + değer (alt) */
.status-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 13px;
}
/* Tema hücresi kaldırıldı — theme-picker artık doğrudan status-row içinde */
.status-cell__label {
  color: var(--ink-soft); font-size: 12px;
  letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 4px;
}
.status-cell__value {
  color: var(--ink); font-size: 15px; letter-spacing: 1px;
  display: inline-flex; align-items: center;
}
/* Tema seçici — sol kenara yaslanmış tek buton */
.theme-picker { position: relative; flex-shrink: 0; }
.theme-picker__btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(20, 35, 55, 0.7);
  border: 1px solid var(--grid-line);
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.theme-picker__btn svg { width: 16px; height: 16px; }
.theme-picker__btn img { width: 16px; height: 16px; object-fit: contain; }
.theme-picker__btn:hover { background: rgba(124, 196, 255, 0.15); border-color: var(--accent); }
/* Dropdown */
.theme-picker__dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(10, 22, 40, 0.92);
  border: 1px solid var(--grid-line);
  border-radius: 12px; padding: 4px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  transform-origin: top left;
  transform: scaleY(0.8); opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.theme-picker__dropdown.open {
  transform: scaleY(1); opacity: 1;
  pointer-events: auto;
}
/* Ana menü tema toggle — hap şekli pill container */
.theme-toggle {
  display: inline-flex; gap: 4px;
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid var(--grid-line);
  border-radius: 999px; padding: 2px;
  width: fit-content;
  align-self: center;
}
.theme-btn {
  width: 26px; height: 26px; border-radius: 999px;
  background: transparent; border: none; color: var(--ink-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.18s ease;
}
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn:hover { color: var(--ink); }
.theme-btn.active {
  background: var(--accent);
  color: #001020;
  box-shadow: 0 0 12px var(--accent-glow);
}
/* Oyun içi dropdown butonları — köşeli, biraz daha küçük */
.theme-picker__dropdown .theme-btn {
  width: 28px; height: 28px; border-radius: 8px;
}
.theme-picker__dropdown .theme-btn:hover { background: rgba(124,196,255,0.1); }

/* ── Men\u00fc header kontrol grubu (tema + dil) ────────────────── */
.menu__header-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 2px;
  position: relative;
}
.menu__header-controls .menu__theme { margin-top: 0; }

/* ── Dil se\u00e7ici (Language picker) ──────────────────────────── */
.lang-picker { position: relative; }
.lang-picker__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid var(--grid-line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.lang-picker__btn:hover { color: var(--ink); border-color: var(--accent); }
.lang-picker__globe { flex-shrink: 0; opacity: 0.85; }
.lang-picker__current { line-height: 1; }
.lang-picker__chevron {
  flex-shrink: 0; opacity: 0.7;
  transition: transform 0.18s ease;
}
.lang-picker.open .lang-picker__chevron { transform: rotate(180deg); }
.lang-picker.open .lang-picker__btn { border-color: var(--accent); color: var(--ink); }

/* Dropdown */
.lang-picker__dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: rgba(10, 22, 40, 0.96);
  border: 1px solid var(--grid-line);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  display: flex; flex-direction: column;
  max-height: 320px; overflow-y: auto;
}
.lang-picker__dropdown[hidden] { display: none; }
.lang-option {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  background: transparent; border: none;
  color: var(--ink-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 600;
  text-align: left; cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.lang-option:hover { background: rgba(124, 196, 255, 0.10); color: var(--ink); }
.lang-option.active {
  background: var(--accent);
  color: #001020;
}
.lang-option__flag {
  width: 20px; height: 20px;
  object-fit: cover; border-radius: 3px;
  flex-shrink: 0; display: block;
}
.lang-option__name { line-height: 1.1; }
.lang-option__code {
  font-size: 10px; opacity: 0.55; letter-spacing: 1px;
  padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px;
}
.lang-option.active .lang-option__code { opacity: 0.8; }

/* ── Light tema overrides ──────────────────────────────────── */
body[data-theme="light"] .lang-picker__btn {
  background: #ffffff;
  border-color: #d5ddec;
  color: var(--ink-soft);
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}
body[data-theme="light"] .lang-picker__btn:hover { color: var(--accent); border-color: var(--accent); }
body[data-theme="light"] .lang-picker.open .lang-picker__btn { color: var(--accent); border-color: var(--accent); }
body[data-theme="light"] .lang-picker__dropdown {
  background: #ffffff;
  border-color: #d5ddec;
  box-shadow: 0 4px 16px rgba(13, 27, 42, 0.12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="light"] .lang-option { color: var(--ink-soft); }
body[data-theme="light"] .lang-option:hover { background: #f1f3f7; color: var(--ink); }
body[data-theme="light"] .lang-option.active { background: var(--accent); color: #ffffff; }

/* ── Dark tema (yaz\u0131lar a\u00e7\u0131k, glass) ──────────────────────── */
body[data-theme="dark"] .lang-picker__btn { color: var(--ink); }
body[data-theme="dark"] .lang-option { color: var(--ink); }
body[data-theme="dark"] .lang-option:hover { background: rgba(255,255,255,0.08); color: #ffffff; }

/* ── Mint tema overrides ───────────────────────────────────── */
body[data-theme="mint"] .lang-picker__btn {
  background: #FAFBF9;
  border-color: rgba(15, 163, 122, 0.18);
  color: var(--ink-soft);
  box-shadow: 0 1px 6px rgba(10, 60, 45, 0.07);
}
body[data-theme="mint"] .lang-picker__btn:hover { color: var(--accent); border-color: var(--accent); }
body[data-theme="mint"] .lang-picker.open .lang-picker__btn { color: var(--accent); border-color: var(--accent); }
body[data-theme="mint"] .lang-picker__dropdown {
  background: #FAFBF9;
  border-color: rgba(15, 163, 122, 0.20);
  box-shadow: 0 4px 16px rgba(10, 60, 45, 0.12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="mint"] .lang-option { color: var(--ink-soft); }
body[data-theme="mint"] .lang-option:hover { background: #D9F4EA; color: var(--ink); }
body[data-theme="mint"] .lang-option.active { background: var(--accent); color: #ffffff; }

/* Difficulty modal a\u00e7\u0131kken dil pickeri da gizle (theme picker ile tutarl\u0131) */
.app:has(#difficulty-modal:not([hidden])) .menu__lang { display: none !important; }

/* Status cell icon (zorluk / hata / süre) */
.status-cell__icon {
  width: 14px; height: 14px;
  color: var(--ink-dim);
  flex-shrink: 0;
}
.trophy { color: #ffc85e; filter: drop-shadow(0 0 4px rgba(255,200,94,0.4)); }
.pause-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(20, 35, 55, 0.7);
  border: 1px solid var(--grid-line);
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.pause-btn:hover { background: rgba(124, 196, 255, 0.15); border-color: var(--accent); }
.pause-btn svg { width: 14px; height: 14px; }

/* ---------- BOARD ---------- */
.board-wrap {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  margin: 0 auto 6px;
  flex-shrink: 0;
}
.board {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background: var(--cell-bg);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border: 2px solid var(--grid-line-strong);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
  box-sizing: border-box;
}
.cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  cursor: pointer;
  /* T\u00fcm cell border'lar\u0131 1px (uniform) \u2014 alt-piksel yuvarlama sorunlar\u0131n\u0131 \u00f6nler.
     3x3 ay\u0131r\u0131c\u0131 sadece renk kontrast\u0131yla belirginle\u015ftirilir, kal\u0131nl\u0131k de\u011fi\u015fmez. */
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  transition: background 0.15s ease;
}
.cell:nth-child(9n) { border-right: none; }
.cell:nth-child(n+73) { border-bottom: none; }
/* 3x3 ayırıcılar: aynı 1px kalınlık, daha güçlü renk */
.cell[data-col="2"], .cell[data-col="5"] { border-right-color: var(--grid-line-strong); }
.cell[data-row="2"], .cell[data-row="5"] { border-bottom-color: var(--grid-line-strong); }

.cell.block-locked { background: var(--cell-hl); }
.cell.peer { background: var(--cell-hl); }
.cell.same {
  background: rgba(148, 210, 255, 0.28);
  box-shadow: none;
}
.cell.selected {
  background: rgba(148, 210, 255, 0.62);
  box-shadow: inset 0 0 0 2px rgba(210, 240, 255, 0.90);
}
.board-block-lines {
  position: absolute; inset: 2px;
  pointer-events: none; z-index: 3;
}
.bbl { position: absolute; background: var(--grid-line-strong); }
.bbl--v { top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.bbl--h { left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.bbl--v:nth-child(1) { left: 33.333%; }
.bbl--v:nth-child(2) { left: 66.667%; }
.bbl--h:nth-child(3) { top: 33.333%; }
.bbl--h:nth-child(4) { top: 66.667%; }
body[data-theme="light"] .board-block-lines { display: none; }

/* Bulmaca üretilirken board pulse → loading hissi */
.screen--game.is-loading .board {
  opacity: 0.35;
  animation: board-loading-pulse 0.9s ease-in-out infinite alternate;
}
.screen--game.is-loading .controls-stack { opacity: 0.35; pointer-events: none; }
@keyframes board-loading-pulse {
  from { opacity: 0.25; }
  to   { opacity: 0.50; }
}

.board-col-beam { display: none; }
.cell.prefilled { color: var(--ink); font-weight: 400; }
.cell.prefilled.is-spinning-num { color: var(--accent); opacity: 0.55; }
.cell.user { color: var(--accent); font-weight: 400; transition: color 0.7s ease; }
.cell.user.is-settled { color: var(--ink); }
.cell.error { color: var(--danger) !important; animation: shake 0.3s ease; }
.cell.hinted { animation: glow 0.8s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes glow { 0%{text-shadow:0 0 0 transparent} 50%{text-shadow:0 0 20px var(--success)} 100%{text-shadow:0 0 0 transparent} }

/* Win ritüeli: tutorial'daki "tut-paint" pop animasyonu ile yukarıdan aşağı
   9 satır cascade. Renkler son yerleştirilen hücrenin satır/kolon/bloğuna göre
   tri-color (gold/pink/cyan). Diğer hücreler sadece pop yapar, renksiz kalır. */
.cell.cell--celeb-paint {
  animation: cell-celeb-paint 460ms cubic-bezier(.34, 1.56, .64, 1) both;
}
/* Kutlama hücresi border'ları — sarı zemin üstünde grid çizgileri okunur kalsın.
   Mevcut beyaz @ 0.14α grid çizgileri sarı dolgu altında kayboluyor; koyu navy
   ile override ediyoruz. 3x3 ayırıcılar (board-block-lines overlay z-index:3)
   zaten cell üstünde; onlara dokunmadan sadece hücre içi çizgileri güçlendirir. */
.cell.cell--celeb-row,
.cell.cell--celeb-col,
.cell.cell--celeb-block {
  border-right-color: rgba(10, 22, 40, 0.45) !important;
  border-bottom-color: rgba(10, 22, 40, 0.45) !important;
}
.cell.cell--celeb-row {
  background: var(--celeb-row) !important;
  box-shadow: var(--celeb-glow-row);
  color: var(--celeb-text) !important;
}
.cell.cell--celeb-col {
  background: var(--celeb-col) !important;
  box-shadow: var(--celeb-glow-col);
  color: var(--celeb-text) !important;
}
.cell.cell--celeb-block {
  background: var(--celeb-block) !important;
  box-shadow: var(--celeb-glow-block);
  color: var(--celeb-text) !important;
}
/* Çakışan dalgalar — blend renkleri (sıralama önemli: en spesifik en sonda) */
.cell.cell--celeb-row.cell--celeb-col   { background: var(--celeb-row-col)   !important; }
.cell.cell--celeb-row.cell--celeb-block,
.cell.cell--celeb-col.cell--celeb-block { background: var(--celeb-row-block) !important; }
@keyframes cell-celeb-paint {
  0%   { transform: scale(0.78); filter: brightness(1.6); }
  60%  { transform: scale(1.08); filter: brightness(1.15); }
  100% { transform: scale(1);    filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cell.cell--celeb-paint { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   WIN PANEL — board sweep sonrası game-screen'i kaplayan sonuç ekranı
   ══════════════════════════════════════════════════════════════════ */
/* ── WIN PANEL — board-wrap içine oturur, 382×382 ─────────────── */
/* ── Game Over Panel ─────────────────────────────── */
/* ── Game Over panel \u2014 yeniden tasarlanm\u0131\u015f, 3 mod tek layout ── */
.go-panel {
  position: absolute; inset: 0; z-index: 50;
  visibility: visible;
  display: flex; flex-direction: column;
  padding: 14px 14px 12px;
  background: rgba(3, 7, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  opacity: 0;
  animation: wp-in 0.32s ease forwards;
}
.go-panel[hidden] { display: none; }

/* Head: icon + title, dikey */
.go-panel__head {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.go-panel__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}
.go-panel__icon svg { width: 24px; height: 24px; }
.go-panel__title {
  font-family: 'Manrope', sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--ink); text-align: center; text-transform: uppercase;
  line-height: 1; margin: 0;
}

/* Stats: dikey list */
.go-panel__stats {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 2px 0;
}
.go-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.go-stat:last-child { border-bottom: none; }
.go-stat__label {
  font-size: 12px; color: var(--ink-soft);
  letter-spacing: 0.3px; font-weight: 500;
}
.go-stat__value {
  font-size: 13px; color: var(--ink);
  font-weight: 700; letter-spacing: 0.3px;
}

/* Actions */
.go-panel__actions {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 10px;
  margin-top: 0 !important;
  flex-shrink: 0;
}
.go-panel__actions .wpr__btn {
  flex: none;
  width: 100%;
  padding: 10px 16px;
  font-size: 11px; letter-spacing: 1.4px;
  border-radius: 9px;
}

/* \u0130kinci \u015eans \u2014 alt\u0131n vurgu (ana \u00f6d\u00fcl) */
.wpr__btn--second-chance {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1a0800 !important;
}
.wpr__btn--second-chance:hover { opacity: 0.92; transform: translateY(-1px); }
.go-btn__label { flex: none; }
.go-btn__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid rgba(26,8,0,0.40);
  border-radius: 5px;
  background: transparent;
  color: #1a0800;
}
.wpr__btn--second-chance.used {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink-dim) !important;
  cursor: not-allowed; pointer-events: none;
  filter: grayscale(1); box-shadow: none;
}
.wpr__btn--second-chance.used .go-btn__label {
  text-decoration: line-through;
  text-decoration-color: var(--ink-dim);
  opacity: 0.5;
}
.wpr__btn--second-chance.used .go-btn__play { display: none; }

/* Tekrar Dene \u2014 accent dolu (ikincil) */
.wpr__btn--retry {
  background: var(--accent); color: #ffffff;
}
.wpr__btn--retry:hover { opacity: 0.92; transform: translateY(-1px); }

/* Ana Men\u00fc \u2014 ghost (\u00fc\u00e7\u00fcnc\u00fcl) */
.wpr__btn--menu {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(255,255,255,0.18);
}
.wpr__btn--menu:hover { background: rgba(255,255,255,0.06); color: var(--ink); opacity: 1; filter: none; }

/* ── Game Over \u2014 LIGHT tema (a\u00e7\u0131k beyaz panel) ── */
body[data-theme="light"] .go-panel {
  background: rgba(250, 251, 253, 0.97);
  border-color: #d5ddec;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="light"] .go-panel__icon {
  background: rgba(192, 39, 45, 0.10);
  color: #c0272d;
}
body[data-theme="light"] .go-panel__title { color: var(--ink); }
body[data-theme="light"] .go-stat { border-color: #e6eaf2; }
body[data-theme="light"] .go-stat__label { color: var(--ink-soft); }
body[data-theme="light"] .go-stat__value { color: var(--ink); }
body[data-theme="light"] .go-panel__actions { border-color: #d5ddec; }
body[data-theme="light"] .wpr__btn--second-chance {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1a0800 !important;
  box-shadow: 0 4px 14px rgba(245,158,11,0.25);
}
body[data-theme="light"] .wpr__btn--second-chance.used {
  background: #f1f3f7 !important; color: #a3acb8 !important;
  border: 1px solid #d5ddec; box-shadow: none; filter: grayscale(1);
}
body[data-theme="light"] .wpr__btn--retry {
  background: var(--accent); color: #ffffff;
}
body[data-theme="light"] .wpr__btn--menu {
  background: #ffffff;
  border: 1px solid #d5ddec;
  color: var(--ink-soft);
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}
body[data-theme="light"] .wpr__btn--menu:hover { background: #f1f3f7; color: var(--ink); }

/* ── Game Over \u2014 DARK tema (yaz\u0131lar d\u00fcz beyaz, ayarlar paneliyle tutarl\u0131) ── */
body[data-theme="dark"] .go-panel__title { color: #ffffff; }
body[data-theme="dark"] .go-stat__label { color: #ffffff; }
body[data-theme="dark"] .go-stat__value { color: #ffffff; }
body[data-theme="dark"] .go-panel__icon {
  background: color-mix(in srgb, #ef4444 16%, transparent);
  color: #ff6b6b;
}
body[data-theme="dark"] .wpr__btn--menu {
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  border: 1px solid var(--grid-line-strong);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="dark"] .wpr__btn--menu:hover {
  background: color-mix(in srgb, var(--bg-2) 85%, transparent);
  color: #ffffff;
}

/* ── Game Over \u2014 MINT tema (a\u00e7\u0131k mint zemin) ── */
body[data-theme="mint"] .go-panel {
  background: rgba(250, 252, 251, 0.97);
  border-color: rgba(15, 163, 122, 0.20);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="mint"] .go-panel__icon {
  background: rgba(192, 39, 45, 0.10);
  color: #c0272d;
}
body[data-theme="mint"] .go-panel__title { color: var(--ink); }
body[data-theme="mint"] .go-stat { border-color: rgba(15, 163, 122, 0.12); }
body[data-theme="mint"] .go-stat__label { color: var(--ink-soft); }
body[data-theme="mint"] .go-stat__value { color: var(--ink); }
body[data-theme="mint"] .go-panel__actions { border-color: rgba(15, 163, 122, 0.18); }
body[data-theme="mint"] .wpr__btn--second-chance {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1a0800 !important;
  box-shadow: 0 4px 14px rgba(245,158,11,0.22);
}
body[data-theme="mint"] .wpr__btn--retry {
  background: var(--accent); color: #ffffff;
}
body[data-theme="mint"] .wpr__btn--menu {
  background: #ffffff;
  border: 1px solid rgba(15, 163, 122, 0.20);
  color: var(--ink-soft);
}
body[data-theme="mint"] .wpr__btn--menu:hover { background: #D9F4EA; color: var(--ink); }


/* ── Win Panel ───────────────────────────────────── */
.win-panel {
  position: absolute; inset: 0; z-index: 50;
  visibility: visible;
  display: flex; flex-direction: column;
  padding: 12px 14px 10px;
  background: rgba(3, 7, 16, 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  opacity: 0;
  animation: wp-in 0.32s ease forwards;
}
.win-panel[hidden] { display: none; }
@keyframes wp-in { to { opacity: 1; } }

.win-panel__confetti {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ── WPR (win panel row) ──────────────────────────────────────── */
.wpr {
  position: relative; z-index: 1;
  opacity: 0; transform: translateY(7px);
}
.wpr--visible {
  animation: wpr-in 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
@keyframes wpr-in {
  to { opacity: 1; transform: translateY(0); }
}

.wpr__spark { font-size: 9px; opacity: 0.55; }

.wpr--stats {
  display: flex; align-items: center; justify-content: space-around;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.wpr__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.wpr__stat-lbl { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.wpr__stat-val { font-size: 13px; font-weight: 600; color: var(--ink); }
.wpr__sep { width: 1px; height: 24px; background: rgba(255,255,255,0.10); }

.wpr--score-lbl {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 0 4px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-dim);
  flex-shrink: 0;
}

.wpr--score {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.wpr__score-val {
  font-family: 'Outfit', sans-serif;
  font-size: 72px; font-weight: 600; letter-spacing: -1px;
  color: var(--accent); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px var(--accent-glow);
  line-height: 1;
}
.wpr__score-val {
  opacity: 0;
}
.wpr__score-val.score-pop {
  animation: score-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes score-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  55%  { transform: scale(1.18); opacity: 1; text-shadow: 0 0 56px var(--accent-glow), 0 0 100px var(--accent-glow); }
  100% { transform: scale(1); opacity: 1; }
}
.wpr__score-val.is-record {
  color: #fbbf24;
  text-shadow: 0 0 32px rgba(251,191,36,0.65), 0 0 64px rgba(251,191,36,0.30);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.score-shockwave {
  position: absolute;
  left: 50%; top: 50%;
  width: 160px; height: 80px;
  border-radius: 50%;
  border: 2px solid #fbbf24;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0.9;
  pointer-events: none;
  animation: shockwave-out 0.75s ease-out forwards;
}
.score-shockwave:nth-child(2) { animation-delay: 0.16s; border-width: 1.5px; opacity: 0.6; }
@keyframes shockwave-out {
  to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
.wpr__badge {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #fbbf24; font-weight: 700;
  padding: 2px 10px;
  background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.30);
  border-radius: 999px;
  animation: wpr-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wpr__badge[hidden] { display: none; }
@keyframes wpr-badge-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.wpr--breakdown {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 3px 0;
}
.wpr--breakdown ul { list-style: none; margin: 0; padding: 0; }
.wpr--breakdown li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0; font-size: 13px;
}
.wpr--breakdown .bd-label { color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.wpr--breakdown .bd-icon { width: 18px; height: 18px; }
.wpr--breakdown .pos { color: var(--success); font-weight: 600; font-variant-numeric: tabular-nums; }
.wpr--breakdown .neg { color: var(--danger); font-weight: 600; font-variant-numeric: tabular-nums; }

.wpr--name {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: var(--ink-soft);
  flex-shrink: 0;
}
.wpr--name[hidden] { display: none; }
.wpr--name input {
  flex: 1; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 4px;
  padding: 5px 8px; color: var(--ink); font-size: 12px; outline: none;
}
.wpr--name input:focus { border-color: var(--accent); }

/* ── Günlük İlerleme Barı ────────────────────────────────────── */
.wpr--daily-progress {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 2px;
  border-top: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.dp__label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-soft);
  white-space: nowrap; flex-shrink: 0;
}
.dp__gift { font-size: 14px; }
.dp__track {
  flex: 1; height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 99px; overflow: hidden;
}
.dp__fill {
  height: 100%; width: 0%;
  background: #0FA37A;
  border-radius: 99px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.dp__fill--done { background: #22c55e; }
.dp__count {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  flex-shrink: 0; min-width: 22px; text-align: right;
}
body[data-theme="light"] .dp__track { background: rgba(0,0,0,0.08); }
body[data-theme="light"] .wpr--daily-progress { border-color: rgba(0,0,0,0.08); }

.wpr--actions {
  display: flex; gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 8px;
  margin-top: auto;
  flex-shrink: 0;
}
.wpr__btn {
  /* Yeni Oyun (.menu__primary) ile ayn\u0131 boyut/proportion → tutarl\u0131 buton dili */
  flex: 1; padding: 14px 18px;
  border-radius: 12px; border: none; cursor: pointer;
  font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  background: var(--accent); color: #ffffff;
  transition: opacity 0.15s, transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wpr__btn:hover { opacity: 0.92; filter: brightness(1.08); }
.wpr__btn:active { transform: scale(0.98); }
.wpr__btn--ghost {
  background: transparent; color: var(--ink-soft);
  border: 1px solid rgba(255,255,255,0.16);
}

/* Classic tema */
body[data-theme="light"] .win-panel {
  background: rgba(240, 246, 255, 0.58);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border-color: rgba(20,35,60,0.12);
}
body[data-theme="light"] .wpr--title { color: var(--accent); border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .wpr--stats { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .wpr__sep { background: rgba(0,0,0,0.10); }
body[data-theme="light"] .wpr__stat-val { color: var(--ink); }
body[data-theme="light"] .wpr--score { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .wpr__score-val { color: var(--accent); text-shadow: none; }
body[data-theme="light"] .wpr--name { border-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .wpr--name input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
body[data-theme="light"] .wpr--actions { border-color: rgba(0,0,0,0.08); }
/* ── Panel butonları (game over / win) ── */
body[data-theme="light"] .wpr__btn { background: var(--accent); color: #ffffff; box-shadow: 0 4px 14px rgba(37,99,235,0.22); }
body[data-theme="light"] .wpr__btn--ghost { background: #ffffff; color: var(--ink); border: 1px solid #d5ddec; box-shadow: none; }
body[data-theme="light"] .wpr__btn--ghost:hover { background: #f1f3f7; }

/* Dark — win panel hafif indigo tinted, confetti net g\u00f6z\u00fcks\u00fcn diye yar\u0131 \u015feffaf */
body[data-theme="dark"] .win-panel {
  background: color-mix(in srgb, var(--bg-1) 60%, transparent);
  border-color: var(--grid-line-strong);
}
body[data-theme="dark"] .wpr__btn {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Mint — win panel a\u00e7\u0131k beyaz\u0131ms\u0131, mint border, confetti g\u00f6r\u00fcn\u00fcr */
body[data-theme="mint"] .win-panel {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border-color: rgba(15, 163, 122, 0.20);
}
body[data-theme="mint"] .wpr--score-lbl,
body[data-theme="mint"] .wpr--breakdown li { color: var(--ink); }
body[data-theme="mint"] .wpr__score-val { color: var(--accent); text-shadow: none; }
body[data-theme="mint"] .wpr--breakdown { border-color: rgba(15, 163, 122, 0.15); }
body[data-theme="mint"] .wpr--actions { border-color: rgba(15, 163, 122, 0.15); }
body[data-theme="mint"] .wpr__btn {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 163, 122, 0.30);
}

/* ---------- HINT VISUALS (hücre üzeri) ---------- */
.cell.hint-line { background: var(--hint-line-bg, rgba(59, 130, 246, 0.14)); }
.cell.hint-eliminator {
  background: rgba(67, 194, 122, 0.20);
  color: var(--success) !important;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(67, 194, 122, 0.40);
}
.cell.hint-target {
  background: var(--hint-target-bg, rgba(59, 130, 246, 0.22));
  box-shadow: var(--hint-target-shadow, inset 0 0 0 2px rgba(59, 130, 246, 0.90), inset 0 0 10px rgba(59,130,246,0.15));
}
.cell.hint-reveal {
  font-weight: 700;
  animation: hint-reveal-fade 1s ease forwards;
}
@keyframes hint-reveal-fade {
  0%   { color: var(--accent); }
  100% { color: var(--ink); }
}
.cell.hinted { animation: glow 0.8s ease; }

.hint-outline {
  position: absolute;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 0 1px var(--hint-outline-inner, rgba(124,196,255,0.4));
  z-index: 2;
  transition: all 0.25s ease;
}
.hint-outline[hidden] { display: none; }


.cell .notes {
  position: absolute; inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: 9px;
  color: var(--ink-dim);
  pointer-events: none;
}
.cell .notes span {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.board-overlay {
  position: absolute; inset: 0;
  background: rgba(5, 10, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  z-index: 5;
}
.board-overlay[hidden] { display: none; }
.resume-btn {
  padding: 14px 28px;
  background: rgba(124, 196, 255, 0.15);
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--ink);
  font-size: 16px; letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 0 30px var(--accent-glow);
}

/* ---------- ACTION BAR ---------- */
.action-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 0 auto 6px;
  flex-shrink: 0;
  width: var(--board-size);
}
.action-btn {
  position: relative;
  background: transparent; border: none;
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 4px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.action-btn:hover { background: rgba(255,255,255,0.04); }
.action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.action-btn svg { width: 22px; height: 22px; color: var(--ink-soft); }
.action-btn span em { font-style: normal; font-size: 10px; color: var(--ink-dim); margin-left: 2px; }
.action-btn.active svg { color: var(--accent); }
.action-btn.active span em { color: var(--accent); }
.action-btn__badge {
  position: absolute;
  top: 2px; right: calc(50% - 22px);
  background: var(--accent);
  color: #ffffff;
  font-size: 10px; font-weight: 600;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.action-btn__badge.hidden { display: none; }
/* "AD" rozeti — hint biterse butonun üstüne ekstra ipucu daveti olarak çıkar */
.action-btn__ad-badge {
  position: absolute;
  top: -2px; right: calc(50% - 24px);
  background: linear-gradient(180deg, #ffcf4a 0%, #ff9a1f 100%);
  color: #2a1500;
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  min-width: 22px; height: 14px; padding: 0 5px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.35), 0 2px 6px rgba(255, 154, 31, 0.5);
  animation: hintAdPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
.action-btn__ad-badge.hidden { display: none; animation: none; }
.action-btn__ad-badge.is-loading { animation: none; opacity: 0.6; }
@keyframes hintAdPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1.5px rgba(0,0,0,0.35), 0 2px 6px rgba(255, 154, 31, 0.5); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 1.5px rgba(0,0,0,0.35), 0 3px 10px rgba(255, 207, 74, 0.85); }
}
/* Hint butonu "ad-mode"da: disabled stilini bastır, butona hafif çekicilik ver */
#hint-btn.is-ad-mode { opacity: 1; cursor: pointer; }
#hint-btn.is-ad-mode svg { color: var(--ink-soft); }

/* ---------- NUMBER PAD ---------- */
.number-pad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  padding: 0;
  flex-shrink: 0;
  width: var(--board-size);
  margin: 0 auto;
}
.num-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 22px;
  font-weight: 300;
  padding: 2px 0;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 6px;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.25);
}
.num-btn:hover { background: rgba(59, 130, 246, 0.12); transform: translateY(-1px); }
.num-btn:active { transform: scale(0.95); }
.num-btn.used { opacity: 0.25; pointer-events: none; }

/* ---------- MODAL ---------- */
.modal {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1280px; height: 720px;
  background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100;
  gap: 0;
}
.modal[hidden] { display: none; }
.modal:not([hidden]) .modal__card { animation: modal-enter 380ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes modal-enter {
  0%   { transform: scale(0.88); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal:not([hidden]) .modal__card { animation: none; }
}

.modal__card {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 35, 60, 0.97), rgba(10, 20, 35, 0.97));
  border: 1px solid var(--grid-line-strong);
  border-radius: 20px;
  max-width: 360px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(124, 196, 255, 0.10);
  overflow: hidden;
  max-height: 540px;
  display: flex; flex-direction: column;
}
/* Konfeti canvas — kart içine kliplenmiş */
.modal__confetti {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
/* Kaydırılabilir kart içeriği */
.modal__card-content {
  position: relative; z-index: 1;
  flex: 1; overflow: hidden;
  padding-bottom: 8px;
}
.modal__title { font-size: 22px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; padding: 20px 28px 0; }
.modal--win .modal__title {
  display: block;
  font-size: 28px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(135deg, #7cc4ff 0%, #a78bfa 60%, #7cc4ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 22px 28px 4px;
  margin-bottom: 0;
}
.modal__text { color: var(--ink-soft); font-size: 13px; margin-bottom: 14px; line-height: 1.5; padding: 0 28px; }
/* Win kazanıldığında oyun tahtası görünmez — sadece arka plan grid kalır */
.modal__text[hidden] { display: none; }
/* Stats row */
.modal__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0 20px 10px;
  padding: 10px 8px;
  background: rgba(10, 22, 40, 0.50);
  border: 1px solid var(--grid-line);
  border-radius: 14px;
}
.modal__stats[hidden] { display: none; }
.modal__stat {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 2px 4px;
  position: relative;
}
.modal__stat + .modal__stat::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px; background: var(--grid-line);
}
.modal__stat-label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim);
}
.modal__stat-row {
  display: flex; align-items: center; gap: 7px;
}
.modal__stat-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.modal__stat-icon img { display: block; width: 30px; height: 30px; }
.modal__stat-value { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Actions */
.modal__actions {
  display: flex; gap: 10px;
  flex-shrink: 0;
  position: relative; z-index: 1;
  padding: 12px 28px 18px;
  background: linear-gradient(to top, rgba(10,20,35,0.98) 55%, transparent);
}
.modal__btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  background: var(--accent);
  color: #001020;
  border: none;
  border-radius: 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal__btn:hover { box-shadow: 0 0 24px var(--accent-glow); transform: translateY(-1px); }
.modal__btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  border: 1px solid var(--grid-line-strong);
  flex: 1;
}
.modal__btn--ghost:hover { background: rgba(255,255,255,0.10); box-shadow: none; }

/* ---------- DIFFICULTY MODAL (fullscreen, vertical list) ---------- */
.difficulty-card {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 24px;
  background: transparent;
  color: var(--ink);
}
.difficulty-card__inner {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 400px;
}
.difficulty-card__title {
  margin: 0; text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: 3px;
  color: var(--ink);
}
.difficulty-card__sub {
  margin: 0 0 2px; text-align: center;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-soft);
}
.difficulty-card__info {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0;
  font-size: 10.5px; color: var(--ink-soft);
  opacity: 0.75;
  letter-spacing: 0.1px;
  text-align: center;
}
.difficulty-grid {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0;
}
.diff-btn {
  display: flex; flex-direction: row; align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.18s ease;
  font: inherit;
  text-align: left;
}
.diff-btn:hover, .diff-btn:focus-visible {
  background: rgba(20, 38, 68, 0.75);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  outline: none;
}
.diff-btn.is-selected {
  background: rgba(20, 38, 68, 0.80);
  border-color: rgba(255, 255, 255, 0.18);
}
.diff-btn__icon-wrap {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--diff-color);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--diff-color) 35%, transparent);
}
.diff-btn__png-icon,
.diff-btn__png-icon--mint,
.diff-btn__png-icon--sakura { display: none; object-fit: contain; }

body[data-theme="dark"] .diff-btn__icon-wrap { background: none; box-shadow: none; border-radius: 0; }
body[data-theme="dark"] .diff-btn__icon-wrap svg { display: none; }
body[data-theme="dark"] .diff-btn__png-icon { display: block; }

/* ── Dark mod — günlük mücadele kartı */
body[data-theme="dark"] .event-card--daily {
  background: var(--bg-1);
  border: 2.5px solid var(--grid-line);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  align-items: stretch; text-align: left;
  width: 100%; min-height: unset;
  padding: 28px 14px 15px;
  gap: 30px;
}
body[data-theme="dark"] .event-card--daily .event-card__head {
  flex-direction: row; align-items: center; gap: 7px;
}

body[data-theme="dark"] .event-card__icon-cal--mint { display: none; }
body[data-theme="dark"] .event-card__icon-cal--dark { display: block; }
body[data-theme="dark"] .event-card--daily .event-card__label {
  color: #cbd5e1; font-size: 13px; letter-spacing: 1.8px; position: relative; top: 2px;
}
body[data-theme="dark"] .event-card--daily .event-card__main {
  flex-direction: row; align-items: stretch; justify-content: space-between; gap: 8px; flex: 1;
}
body[data-theme="dark"] .event-card--daily .event-card__text {
  align-items: flex-start; flex: 1;
}
body[data-theme="dark"] .event-card--daily .event-card__title { color: #ffffff; }
body[data-theme="dark"] .event-card--daily .event-card__sub {
  display: block; font-size: 12px; color: #94a3b8; opacity: 1;
}
body[data-theme="dark"] .event-card--daily .event-card__streak-label {
  background: var(--accent);
  box-shadow: none;
  color: #ffffff; margin-top: auto;
}
/* dark-gift --dark variant ile yönetiliyor */

/* ── Dark mod — ana menü düzeni (deepmint ile aynı yapı) */
body[data-theme="dark"] .menu__spacer { height: 30px; }
body[data-theme="dark"] .menu__title,
body[data-theme="dark"] .menu__subtitle { display: none; }
body[data-theme="dark"] .menu__pin-mint-wrap { display: flex; }
body[data-theme="dark"] .menu__pin-mint-title { color: var(--ink); }

body[data-theme="dark"] .best-score {
  background: color-mix(in srgb, var(--bg-1) 75%, transparent);
  border-color: var(--grid-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
/* YEN\u0130 OYUN \u2014 indigo accent ile dolu birincil buton */
body[data-theme="dark"] .menu__primary {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
body[data-theme="dark"] .menu__primary:hover,
body[data-theme="dark"] .menu__primary:focus-visible {
  background: var(--accent) !important;
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
/* NASIL OYNANIR \u2014 koyu glassmorphism, indigo border vurgusu */
body[data-theme="dark"] .menu__secondary {
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  color: var(--ink);
  border: 1px solid var(--grid-line-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}
body[data-theme="dark"] .menu__secondary:hover,
body[data-theme="dark"] .menu__secondary:focus-visible {
  filter: none;
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Kart hover'lar\u0131 \u2014 indigo glow */
body[data-theme="dark"] .event-card--daily:hover,
body[data-theme="dark"] .best-score:hover,
body[data-theme="dark"] .best-score:focus-visible {
  filter: none; transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 25%, transparent);
}

body[data-theme="mint"] .event-card--daily {
  background: #FAFBF9; border: 2.5px solid #D9F4EA; box-shadow: none;
  align-items: stretch; text-align: left;
  width: 100%; min-height: unset;
  padding: 28px 14px 15px;
  gap: 30px;
}
body[data-theme="mint"] .event-card--daily .event-card__head {
  flex-direction: row; align-items: center; gap: 7px;
}

body[data-theme="mint"] .event-card__icon-cal--mint { display: block; }
body[data-theme="mint"] .event-card__icon-cal--dark { display: none; }
body[data-theme="mint"] .event-card--daily .event-card__main {
  flex-direction: row; align-items: stretch; justify-content: space-between; gap: 8px; flex: 1;
}
body[data-theme="mint"] .event-card--daily .event-card__text {
  align-items: flex-start; flex: 1;
}
/* deepmint-gift --mint variant ile yönetiliyor */
body[data-theme="mint"] .event-card--daily .event-card__label { color: #0F1F1A; font-size: 13px; letter-spacing: 1.8px; position: relative; top: 2px; }
body[data-theme="mint"] .event-card--daily .event-card__title { color: #1F2D28; }
body[data-theme="mint"] .event-card--daily .event-card__sub {
  display: block; font-size: 12px; color: #6B7C76; opacity: 1;
}
body[data-theme="mint"] .event-card--daily .event-card__streak-label {
  background: #0FA37A; box-shadow: none; color: #ffffff; margin-top: auto;
}
body[data-theme="mint"] .menu__spacer { height: 30px; }
body[data-theme="mint"] .menu__primary { background: #0FA37A !important; }
body[data-theme="mint"] .diff-btn { background: #FAFBF9; border: 1.5px solid #D9F4EA; }
body[data-theme="mint"] .diff-btn:hover,
body[data-theme="mint"] .diff-btn:focus-visible { background: #e6f7ee; border-color: #b4e8cc; }
body[data-theme="mint"] .diff-btn.is-selected { background: #e0f5ea; border-color: #a0debb; }
body[data-theme="mint"] .diff-btn__icon-wrap { background: none; box-shadow: none; border-radius: 0; }
body[data-theme="mint"] .diff-btn__icon-wrap svg { display: none; }
body[data-theme="mint"] .diff-btn__png-icon--mint { display: block; }
.diff-btn__text {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.diff-btn__name { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; color: var(--diff-color); }
.diff-btn__desc { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.1px; }
.diff-btn__dots {
  display: flex; flex-direction: row;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.diff-btn__dot {
  width: 8px; height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.diff-btn__chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.30);
}
.diff-btn__dot.is-filled {
  background: var(--diff-color, var(--accent));
  border-color: var(--diff-color, var(--accent));
  box-shadow: 0 0 5px color-mix(in srgb, var(--diff-color, var(--accent)) 55%, transparent);
}

/* ── Gift Reward Modal ───────────────────────────────────────── */
/* Icon wrap: solid arka plan yok */
.gift-reward__icon-wrap {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Tema bazlı gift icon görünürlüğü */
.gift-icon--dark  { display: none; }
.gift-icon--mint  { display: none; }
.gift-icon--light { display: none; }
body[data-theme="dark"]     .gift-icon--mint  { display: block; }
body[data-theme="mint"]     .gift-icon--mint  { display: block; }
body[data-theme="light"]    .gift-icon--mint  { display: block; }
body[data-theme="lavender"] .gift-icon--mint  { display: block; }

/* 2 — Dots sabit genişlik: tüm satırlarda aynı hizalamayı garantiler */
.gift-reward__dots {
  min-width: 36px;
  justify-content: flex-end;
}

/* 2 — Onay işareti: dots ile aynı alanda, sağa hizalı */
.gift-reward__right {
  flex-shrink: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.gift-reward__check { display: block; flex-shrink: 0; }

@keyframes diff-card-reveal {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.difficulty-grid.is-animating .diff-btn {
  animation: diff-card-reveal 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 52ms);
}

/* ---------- HOW-TO-PLAY MODAL (fullscreen, animated tutorial) ---------- */
/* Fullscreen modal — sahne arka planı net görünür, üstüne sadece hafif tema wash (blur yok). */
.modal--fullscreen {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  align-items: stretch; justify-content: stretch;
}
body[data-theme="light"] .modal--fullscreen {
  background: url('images/light/light-back.png') center / cover no-repeat !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body[data-theme="dark"] .modal--fullscreen {
  background: url('images/dark/dark-back-rev.png') center / cover no-repeat !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body[data-theme="mint"] .modal--fullscreen {
  background: url('images/deep-mint/mint-back-yaprak.png') center / cover no-repeat !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Fullscreen modal açıkken arkadaki ekran içeriği tamamen gizlenir.
   display:none + visibility:hidden ikilisi → tema fark etmeksizin garanti kapanma.
   modal--fullscreen kendi background görseliyle alanı tamamen kaplar. */
.app:has(.modal--fullscreen:not([hidden])) .screen.active {
  visibility: hidden !important;
  display: none !important;
}
.app:has(.modal--fullscreen:not([hidden])) .modal--fullscreen { visibility: visible; }
.app:has(#difficulty-modal:not([hidden])) .menu__theme { display: none !important; }
/* Mint modunda mint-leaf-layer fixed katman → modal açıkken de gizle ki çapak kalmasın */
body[data-theme="mint"]:has(.modal--fullscreen:not([hidden])) #mint-leaf-layer {
  display: none !important;
}
.howto-card {
  position: relative;
  /* 800×600 hedef: 380px stage + 360px panel = 740px, dikeyde ortalı */
  width: min(760px, 100%);
  height: min(580px, 100%);
  margin: auto;                       /* modal içinde hem yatay hem dikey ortala */
  display: grid;
  grid-template-columns: 380px 1fr;   /* stage sabit, panel kalan (~360px) */
  align-items: center;
  gap: 20px;
  padding: 18px 24px 18px 18px;
  background: transparent;
  color: var(--ink);
}
.howto-close-x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}
.howto-close-x:hover { background: var(--cell-hl); }
.howto-card__stage {
  display: flex; align-items: center; justify-content: flex-start;
}
.howto-card__panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  text-align: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0 8px;
}
.howto-card__title {
  font-size: 22px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--ink);
  margin: 0;
}
.howto-card__btn {
  padding: 12px 36px;
  background: #1e3a6e;
  border: none;
  border-radius: 999px;
  color: #ffffff;
  font-size: 15px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
  margin-top: 8px;
}
.howto-card__btn:hover { transform: translateY(-1px); opacity: 0.88; }

.tutorial { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tutorial__stage {
  position: relative;
  width: 380px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 10px;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* Mini topbar — gerçek oyun status-row'unu taklit eder (tema/pause yok) */
.tutorial__topbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 6px 4px 8px;
  border-bottom: 1px solid var(--grid-line);
}
.tutorial__stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tutorial__stat-lbl {
  font-size: 11px; font-weight: 500; letter-spacing: 0.4px;
  color: var(--ink-soft);
  text-transform: none;
}
.tutorial__stat-val {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
}

.tutorial__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 380px; height: 380px;
  background: var(--cell-bg);
  border: 1.5px solid var(--grid-line-strong);
  border-radius: 4px;
  overflow: hidden;
}
.tutorial__cell {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600;
  color: var(--ink);
  background: transparent;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}
.tutorial__cell[data-col="2"], .tutorial__cell[data-col="5"] { border-right-color: var(--grid-line-strong); }
.tutorial__cell[data-row="2"], .tutorial__cell[data-row="5"] { border-bottom-color: var(--grid-line-strong); }
.tutorial__cell[data-col="8"] { border-right: none; }
.tutorial__cell[data-row="8"] { border-bottom: none; }
.tutorial__cell.is-fixed { color: var(--ink); }
.tutorial__cell.is-correct { color: var(--success); animation: tut-pop 0.4s ease both; }
.tutorial__cell.is-wrong { color: var(--danger); animation: tut-shake 0.4s ease both; }
.tutorial__cell.is-selected { background: var(--cell-sel); }
.tutorial__cell.is-glow { background: rgba(110, 231, 168, 0.22); }
.tutorial__cell.is-hint-target {
  background: rgba(124, 196, 255, 0.20);
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: tut-hint-pulse 1.2s ease-in-out infinite;
}
/* --- Tutorial hint step styles (4. adım: ipucu gösterimi) --- */
.tutorial__hint-outline {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
.tutorial__hint-outline[hidden] { display: none; }
@keyframes tut-outline-draw { to { stroke-dashoffset: 0; } }
.tutorial__cell.tut-elim {
  background: rgba(110, 231, 168, 0.28);
  color: var(--success);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 168, 0.55);
}
.tutorial__cell.tut-hint-row { background: var(--hl-row); }
.tutorial__cell.tut-hint-col { background: var(--hl-col); }
.tutorial__cell.tut-hint-row.tut-hint-col { background: var(--hl-row-col); }
.tutorial__cell.tut-hint-only {
  background: rgba(124, 196, 255, 0.18);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.70);
  animation: tut-hint-pulse 1.2s ease-in-out infinite;
}

/* Tri-color highlight (step 1: kural) */
.tutorial__cell.is-row-hl   { background: var(--hl-row); }
.tutorial__cell.is-col-hl   { background: var(--hl-col); }
.tutorial__cell.is-block-hl { background: var(--hl-block); }
.tutorial__cell.is-row-hl.is-col-hl { background: var(--hl-row-col); }
.tutorial__cell.is-row-hl.is-block-hl,
.tutorial__cell.is-col-hl.is-block-hl { background: var(--hl-row-block); }
/* Boyama animasyonu: her hücre eklendikçe küçük bir pop + parlak iz */
.tutorial__cell.is-painting { animation: tut-paint 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes tut-paint {
  0%   { transform: scale(0.78); filter: brightness(1.6); }
  60%  { transform: scale(1.08); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Hücre içi notlar (step 3) */
.tutorial__notes {
  position: absolute; inset: 3px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font-size: 10px; line-height: 1; font-weight: 600;
  color: var(--accent);
  pointer-events: none;
}
.tutorial__notes span { display: flex; align-items: center; justify-content: center; opacity: 0; }
.tutorial__notes span.is-on { opacity: 1; animation: tut-pop 0.3s ease both; }

/* Action bar (Geri Al / Sil / Notlar / İpucu) — gerçek oyun action-bar'ını taklit eder */
.tutorial__actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 6px;
}
.tutorial__action {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--ink-soft);
}
.tutorial__action svg { color: var(--ink-soft); width: 22px; height: 22px; }
.tutorial__action em { font-style: normal; font-size: 10px; color: var(--ink-dim); margin-left: 2px; }
.tutorial__action-badge {
  position: absolute; top: 2px; right: calc(50% - 22px);
  min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  background: var(--accent); color: #000000;
  font-size: 10px; font-weight: 600; font-style: normal;
  border-radius: 50%;
}

/* Numpad (step 2 & 3) — gerçek oyun numpad'ini taklit eder */
.tutorial__numpad {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
  margin-top: 2px;
  pointer-events: none;
}
.tutorial__numpad span {
  display: flex; align-items: center; justify-content: center;
  height: 36px;
  font-size: 20px; font-weight: 700;
  color: var(--ink);
  background: var(--cell-bg);
  border: 1px solid var(--grid-line);
  border-radius: 6px;
  opacity: 0; transform: translateY(8px) scale(0.85);
  transition: background 0.2s ease, color 0.2s ease;
}
/* Soldan sağa stagger: 9 sayı × 50ms = ~450ms */
.tutorial__numpad.is-visible span { animation: tut-num-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tutorial__numpad.is-visible span:nth-child(1) { animation-delay: 0ms; }
.tutorial__numpad.is-visible span:nth-child(2) { animation-delay: 50ms; }
.tutorial__numpad.is-visible span:nth-child(3) { animation-delay: 100ms; }
.tutorial__numpad.is-visible span:nth-child(4) { animation-delay: 150ms; }
.tutorial__numpad.is-visible span:nth-child(5) { animation-delay: 200ms; }
.tutorial__numpad.is-visible span:nth-child(6) { animation-delay: 250ms; }
.tutorial__numpad.is-visible span:nth-child(7) { animation-delay: 300ms; }
.tutorial__numpad.is-visible span:nth-child(8) { animation-delay: 350ms; }
.tutorial__numpad.is-visible span:nth-child(9) { animation-delay: 400ms; }
.tutorial__numpad span.is-active {
  background: var(--cell-sel);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.1);
  opacity: 1;
}
@keyframes tut-num-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Notes butonu — action bar içinde, aktif durum gösterir */
.tutorial__notes-btn {
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tutorial__notes-btn.is-active {
  color: var(--accent);
  background: var(--cell-hl);
  border-color: var(--accent);
}
.tutorial__notes-btn.is-active em,
.tutorial__notes-btn.is-active svg { color: var(--accent); }

.tutorial__action--hint {
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tutorial__action--hint.is-active {
  color: var(--accent);
  background: var(--cell-hl);
  border-color: var(--accent);
}
.tutorial__action--hint.is-active svg { color: var(--accent); }

/* Pointer (animated finger image) — parmak ucu hedefin merkezine gelir
   Ayar değişkenleri: rotation, scale, fingertip offset, lean (hareket yönü yatışı) */
.tutorial__pointer {
  --tp-size: 64px;
  --tp-rot: -22deg;
  --tp-lean: 0deg;   /* JS hareket yönüne göre set eder, ±5° */
  --tp-tip-x: 28%;   /* parmak ucunun image içindeki yatay pozisyonu */
  --tp-tip-y: 12%;   /* parmak ucunun image içindeki dikey pozisyonu */
  position: absolute;
  top: 0; left: 0;
  width: var(--tp-size); height: var(--tp-size);
  pointer-events: none;
  opacity: 0;
  /* önce hedefe doğru hizala (parmak ucu = (0,0)), sonra rotate + lean */
  transform: translate(calc(var(--tp-tip-x) * -1), calc(var(--tp-tip-y) * -1))
             rotate(calc(var(--tp-rot) + var(--tp-lean)));
  transform-origin: var(--tp-tip-x) var(--tp-tip-y);
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s ease-out,
              opacity 0.25s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  z-index: 5;
}
.tutorial__pointer img {
  width: 100%; height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.tutorial__pointer.is-visible { opacity: 1; }
.tutorial__pointer.is-tap { animation: tut-tap 0.3s ease; }

/* Overlay (X marks, hint icon, oyun sonu yazısı) — sadece grid alanını kaplar */
.tutorial__overlay {
  position: absolute; left: 0;
  /* topbar yüksekliği kadar aşağıda başlar, grid'i kaplar */
  top: 56px;
  width: 380px; height: 380px;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.tutorial__overlay-content {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 20px;
  background: var(--bg-1);
  border: 1px solid var(--grid-line-strong);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  animation: tut-fade-in 0.3s ease both;
}
.tutorial__xs { display: flex; gap: 10px; }
.tutorial__x {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger);
  opacity: 0;
  animation: tut-pop 0.4s ease both;
}
.tutorial__x:nth-child(1) { animation-delay: 0.2s; }
.tutorial__x:nth-child(2) { animation-delay: 1.0s; }
.tutorial__x:nth-child(3) { animation-delay: 1.8s; }
.tutorial__overlay-text {
  font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--danger);
  opacity: 0;
  animation: tut-fade-in 0.4s ease 2.6s both;
}
.tutorial__bulb {
  color: #f59e0b;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.55));
  animation: tut-bulb 1.4s ease-in-out infinite;
}

.tutorial__caption {
  min-height: 56px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  padding: 0 8px;
  margin: 0;
}
.tutorial__caption b { color: var(--accent); font-weight: 700; }

.tutorial__controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 4px;
}
.tutorial__nav {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cell-bg);
  border: 1.5px solid var(--grid-line);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tutorial__nav:hover { background: var(--cell-hl); border-color: var(--accent); }
.tutorial__dots { display: flex; gap: 8px; align-items: center; }
.tutorial__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
}
.tutorial__dot.is-active { background: var(--accent); opacity: 1; width: 22px; border-radius: 999px; }

/* ---------- TUTORIAL ANIMATIONS ---------- */
@keyframes tut-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tut-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes tut-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tut-hint-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 rgba(124, 196, 255, 0.5); }
  50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px rgba(124, 196, 255, 0); }
}
@keyframes tut-bulb {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 214, 107, 0.5)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 14px rgba(255, 214, 107, 0.9)); }
}
@keyframes tut-tap {
  0%, 100% {
    transform: translate(calc(var(--tp-tip-x) * -1), calc(var(--tp-tip-y) * -1))
               rotate(calc(var(--tp-rot) + var(--tp-lean))) scale(1);
  }
  50% {
    transform: translate(calc(var(--tp-tip-x) * -1), calc(var(--tp-tip-y) * -1 + 4px))
               rotate(calc(var(--tp-rot) + var(--tp-lean))) scale(0.88);
  }
}

/* ---------- PAUSE PANEL (board içinde) ---------- */
.pause-panel {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  padding: 16px;
  background: rgba(3, 7, 16, 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  opacity: 0;
  animation: wp-in 0.32s ease forwards;
}
.pause-panel[hidden] { display: none; }
.pause-panel__head {
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.pause-panel__title {
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 800; letter-spacing: 4px;
  color: var(--ink); text-align: center; text-transform: uppercase;
}
.pause-panel__body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 14px 0;
}
.pause-panel__lbl {
  font-size: 10px; letter-spacing: 3px; color: var(--ink-dim);
  text-transform: uppercase; text-align: center;
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.pause-panel__lbl::before, .pause-panel__lbl::after {
  content: ''; flex: 1; height: 1px; background: var(--grid-line);
}
.pause-panel__score {
  font-family: 'Manrope', sans-serif;
  font-size: 54px; font-weight: 300; color: var(--accent);
  letter-spacing: 2px; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px var(--accent-glow);
  line-height: 1; text-align: center;
}
.pause-panel .pause-reward { width: 100%; margin-bottom: 0; }
.pause-panel__foot {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.pause-panel .pause-resume-btn { width: 100%; }
.pause-score {
  font-size: 28px; font-weight: 300; color: var(--accent);
  letter-spacing: 2px; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--accent-glow);
  margin-bottom: 16px;
}
.pause-reward {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  background: rgba(124, 196, 255, 0.08);
  border: 1px solid rgba(124, 196, 255, 0.25);
  border-radius: 10px;
  text-align: left;
}
.pause-reward[hidden] { display: none; }
.pause-reward__icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(124, 196, 255, 0.18);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.pause-reward__title {
  font-size: 13px; color: var(--ink); letter-spacing: 1px;
  margin-bottom: 2px;
}
.pause-reward__desc { font-size: 11px; color: var(--ink-dim); line-height: 1.35; }
.pause-reward__btn {
  background: var(--accent); color: #001020; border: none;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 1px;
  cursor: pointer; transition: all 0.2s ease;
  white-space: nowrap;
}
.pause-reward__btn:hover:not(:disabled) {
  box-shadow: 0 0 16px var(--accent-glow);
  transform: translateY(-1px);
}
.pause-reward__btn:disabled {
  background: rgba(124, 196, 255, 0.2);
  color: var(--ink-dim);
  cursor: not-allowed;
}
.pause-reward.is-loading .pause-reward__btn {
  opacity: 0.7; cursor: wait;
}
.pause-resume-btn {
  width: 100%; padding: 14px 16px;
  font-size: 14px; letter-spacing: 2px;
}

/* ─── QUIT CONFIRM PANEL ─────────────────────────────── */
.quit-panel {
  position: absolute; inset: 0; z-index: 55;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px;
  background: rgba(3, 7, 16, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  opacity: 0;
  animation: wp-in 0.28s ease forwards;
}
.quit-panel[hidden] { display: none; }
.quit-panel__body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.quit-panel__icon { color: var(--ink-dim); margin-bottom: 4px; }
.quit-panel__title {
  font-family: 'Manrope', sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--ink); text-align: center;
}
.quit-panel__msg {
  font-size: 12px; color: var(--ink-dim); letter-spacing: 0.3px; text-align: center;
}
.quit-panel__foot {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
}
.quit-panel__btn {
  width: 100%; padding: 14px 16px; border: none; border-radius: 10px;
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  transition: opacity 0.15s;
}
.quit-panel__btn:hover { opacity: 0.88; }
.quit-panel__btn--leave {
  background: #ef4444; color: #fff;
}
.quit-panel__btn--stay {
  background: var(--accent); color: #fff;
}

body[data-theme="light"] .quit-panel {
  background: rgba(250, 251, 253, 0.97);
  border: 1px solid #d5ddec;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="light"] .quit-panel__icon { color: #9fb0cc; }
body[data-theme="light"] .quit-panel__btn--leave { background: #c0272d; }
body[data-theme="light"] .quit-panel__btn--stay { background: var(--accent); }

/* Mint — light pattern: a\u00e7\u0131k beyaz panel + mint accent border */
body[data-theme="mint"] .quit-panel {
  background: rgba(250, 252, 251, 0.97);
  border: 1px solid rgba(15, 163, 122, 0.20);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="mint"] .quit-panel__icon { color: #5A8A7A; }
body[data-theme="mint"] .quit-panel__btn--leave { background: #c0272d; }
body[data-theme="mint"] .quit-panel__btn--stay { background: var(--accent); }

/* ─── SETTINGS PANEL ─────────────────────────────────── */
.settings-panel {
  position: absolute; inset: 0; z-index: 52;
  display: flex; flex-direction: column;
  padding: 16px;
  background: rgba(3, 7, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  opacity: 0;
  animation: wp-in 0.28s ease forwards;
}
.settings-panel[hidden] { display: none; }
.settings-panel__head {
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.settings-panel__title {
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 800; letter-spacing: 4px;
  color: var(--ink); text-align: center; text-transform: uppercase;
}
.settings-panel__body {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 4px 0;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.settings-row:last-child { border-bottom: none; }
.settings-row__label {
  font-size: 13px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.2px;
}
.settings-toggle {
  position: relative; flex-shrink: 0;
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
}
.settings-toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-dim);
  transition: left 0.2s, background 0.2s;
}
.settings-toggle[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
}
.settings-toggle[aria-checked="true"]::after {
  left: 22px; background: #fff;
}
.settings-panel__foot {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.settings-close-btn {
  width: 100%; padding: 14px 16px;
  background: var(--accent); border: none; border-radius: 10px;
  color: #fff; font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: 3px;
  cursor: pointer; text-transform: uppercase;
  transition: opacity 0.15s;
}
.settings-close-btn:hover { opacity: 0.88; }

.score-panel { margin-bottom: 8px; text-align: center; padding: 0 20px; }
.score-panel[hidden] { display: none; }
.score-panel__total {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-bottom: 8px;
}
.score-panel__total-label {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: center; gap: 6px;
}
.score-panel__score-row {
  display: flex; align-items: center; gap: 10px;
}
.score-panel__spark {
  font-size: 12px; color: var(--accent); opacity: 0.55;
}
.score-panel__total-value {
  font-size: 34px; font-weight: 700; letter-spacing: 1px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.score-panel__badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 6px 16px; border-radius: 999px;
  background: rgba(124, 196, 255, 0.14); color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid rgba(124, 196, 255, 0.28);
}
.score-panel__badge[hidden] { display: none; }
.score-panel__badge--bounce {
  animation: badge-bounce 800ms cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes badge-bounce {
  0%   { transform: scale(0); opacity: 0; }
  55%  { transform: scale(1.2); opacity: 1; box-shadow: 0 0 24px rgba(124, 196, 255, 0.6); }
  100% { transform: scale(1); opacity: 1; }
}
.score-panel__total-value.is-counting { animation: score-pulse 1.6s ease-out both; }
@keyframes score-pulse {
  0%   { text-shadow: 0 0 0 rgba(124, 196, 255, 0); }
  50%  { text-shadow: 0 0 32px rgba(124, 196, 255, 0.65); }
  100% { text-shadow: 0 0 14px rgba(124, 196, 255, 0.25); }
}
/* Breakdown */
/* Breakdown — tüm satırlar tek kart içinde */
.score-breakdown {
  list-style: none; padding: 0; margin: 0 0 6px;
  display: flex; flex-direction: column; gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; overflow: hidden;
}
.score-breakdown li {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--ink-soft);
  padding: 8px 12px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.score-breakdown li:last-child { border-bottom: none; }
.bd-label { display: flex; align-items: center; gap: 10px; }
.bd-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: block; object-fit: contain;
}
.score-breakdown .pos { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.score-breakdown .neg { color: #ff8a8a; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Name row */
.name-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; background: rgba(255,255,255,0.05); border-radius: 12px; border: 1px solid var(--grid-line); }
.name-row label { color: var(--accent); font-weight: 600; font-size: 13px; }
.name-row[hidden] { display: none; }
.name-row__avatar { color: var(--ink-dim); display: flex; align-items: center; }
.name-row__edit { color: var(--ink-dim); display: flex; align-items: center; margin-left: auto; }
.name-row label { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.5px; white-space: nowrap; }
.name-row input {
  flex: 1; padding: 0; background: transparent;
  border: none; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500;
  min-width: 0;
}
.name-row input:focus { outline: none; }

/* ---------- CONTROLS STACK (action-bar + number-pad + hint-panel ortak alan) ---------- */
/* Hint-panel a\u00e7\u0131ld\u0131\u011f\u0131nda board'un boyut de\u011fi\u015ftirmesini \u00f6nler: action-bar/num-pad
   visibility:hidden ile yer korur, hint-panel absolute olarak ayn\u0131 alana oturur. */
.controls-stack {
  position: relative;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  width: var(--board-size);
  margin: 0 auto;
}

/* ---------- HINT PANEL ---------- */
.hint-panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 32, 54, 0.95), rgba(10, 20, 35, 0.95));
  border: 1px solid var(--grid-line-strong);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-columns: 36px 1fr 36px auto;
  grid-template-areas: "prev body next done";
  align-items: center;
  gap: 6px;
  animation: hintFade 0.25s ease;
}
.hint-panel[hidden] { display: none; }
/* İpucu açıkken eski araçlar yer korur ama görünmez — board sabit kalır */
.screen--game.hint-active .controls-stack > .action-bar,
.screen--game.hint-active .controls-stack > .number-pad {
  visibility: hidden;
  pointer-events: none;
}
@keyframes hintFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hint-panel__body {
  grid-area: body;
  display: flex; flex-direction: column; gap: 2px;
  text-align: center; min-width: 0;
}
.hint-panel__title {
  font-size: 13px; font-weight: 500;
  letter-spacing: 1.5px; color: var(--ink);
}
.hint-panel__text {
  font-size: 12px; color: var(--ink-soft);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hint-panel__text b { color: var(--accent); font-weight: 500; }
.hint-panel__text .elim { color: var(--success); font-weight: 500; }
.hint-panel__footer { display: contents; }
.hint-panel__footer .hint-dots { display: none; }
#hint-prev { grid-area: prev; }
#hint-next { grid-area: next; }
#hint-done { grid-area: done; }
.hint-nav {
  background: transparent; border: none;
  color: var(--accent); cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease;
}
.hint-nav:hover:not(:disabled) { background: rgba(124, 196, 255, 0.1); }
.hint-nav:disabled { opacity: 0.2; cursor: default; }
.hint-nav svg { width: 20px; height: 20px; }
.hint-dots .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-dim); opacity: 0.4;
  transition: all 0.2s ease;
}
.hint-dots .dot.active { background: var(--accent); opacity: 1; transform: scale(1.1); }
.hint-done {
  background: transparent; border: none;
  color: var(--accent); cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.hint-done:hover { background: rgba(124, 196, 255, 0.12); }
.hint-done[hidden] { display: none; }


/* ---------- RESPONSIVE ----------
   Kald\u0131r\u0131ld\u0131: Hedef viewport sabit 800x600 (Poki/GameDistribution).
   T\u00fcm boyutlar :root'taki --app-width ve --board-size de\u011fi\u015fkenleriyle ayarlan\u0131r. */


/* =========================================================
   DARK TEMA — accent renk override
   ========================================================= */
body[data-theme="dark"] {
  /* Deep midnight palette — accent indigo, board/cells koyu, text aç\u0131k */
  --bg-0: #0A1224;
  --bg-1: #131C33;
  --bg-2: #1D2842;
  --ink: #E6EDF7;
  --ink-soft: #B3C0D6;
  --ink-dim: #7E8DA6;
  --accent: #818CF8;
  --accent-glow: rgba(129, 140, 248, 0.45);
  --grid-line: rgba(255, 255, 255, 0.10);
  --grid-line-strong: rgba(255, 255, 255, 0.22);
  --cell-bg: rgba(255, 255, 255, 0.03);
  --cell-hl: rgba(129, 140, 248, 0.10);
  --cell-sel: rgba(129, 140, 248, 0.32);
  --cell-same: rgba(129, 140, 248, 0.18);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   CLASSIC TEMA — modern beyaz görünüm
   ========================================================= */
/* Light tema ekranları: görselin görünmesi için şeffaf */
body[data-theme="light"] .screen--menu,
body[data-theme="light"] .screen--game,
body[data-theme="light"] .screen--scores { background: transparent !important; }

body[data-theme="light"] {
  background: #0d1520; /* GD shell dışı koyu sahne — frame içi arka plan görselle gelir */
  --bg-0: #fafbfd;
  --bg-1: #fafbfd;
  --bg-2: #e6eaf2;
  --ink: #0d1b2a;
  --ink-soft: #41516b;
  --ink-dim: #748199;
  --accent: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.20);
  --gold: #f4b63d;
  --danger: #c0272d;
  --success: #1a8a52;
  --grid-line: rgba(13, 27, 42, 0.10);
  --grid-line-strong: rgba(13, 27, 42, 0.30);
  --cell-bg: #ffffff;
  --cell-hl: #fff3de;
  --cell-sel: #fdeccf;
  --cell-same: #e7f0ff;
  /* Tutorial tri-color highlights — classic için daha açık tonlar */
  --hl-row: rgba(255, 184, 77, 0.32);
  --hl-col: rgba(255, 110, 160, 0.32);
  --hl-block: rgba(34, 197, 94, 0.22);
  --hl-row-col: rgba(255, 140, 110, 0.50);
  --hl-row-block: rgba(180, 200, 100, 0.50);
  --kw-row: #e07b1a;
  --kw-col: #d63384;
  --kw-block: #16a163;
  /* Win celebration — classic'te marka mavisi tonları, neon glow yok */
  --celeb-row: rgba(59, 130, 246, 0.55);
  --celeb-col: rgba(99, 102, 241, 0.55);
  --celeb-block: rgba(14, 165, 233, 0.45);
  --celeb-row-col: rgba(79, 116, 246, 0.65);
  --celeb-row-block: rgba(46, 148, 240, 0.65);
  --celeb-glow-row: none;
  --celeb-glow-col: none;
  --celeb-glow-block: none;
  --celeb-text: var(--ink);
  --shadow-lg: 0 12px 40px rgba(20, 35, 60, 0.12);
  color: var(--ink);
}
body[data-theme="dark"] #game-frame {
  background: url('images/dark/dark-back-rev.png') center center / cover no-repeat;
}
/* Dark mod \u2014 g\u00f6rsel zemin \u00fczerine yumu\u015fak indigo nebula glow + vignette.
   ::after t\u00fcm UI'\u0131n alt\u0131nda kal\u0131r (z-index: 0, pointer-events: none). */
body[data-theme="dark"] #game-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* merkez-alt yumu\u015fak indigo glow \u2014 oyun alan\u0131n\u0131 hafif vurgular */
    radial-gradient(ellipse 60% 45% at 50% 65%,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%,
      transparent 70%),
    /* sol-\u00fcst k\u00f6\u015fede sessiz mor sis */
    radial-gradient(ellipse 35% 30% at 18% 22%,
      rgba(140, 100, 220, 0.10) 0%,
      transparent 65%),
    /* sa\u011f-alt k\u00f6\u015fede sessiz teal sis */
    radial-gradient(ellipse 30% 25% at 85% 78%,
      rgba(80, 130, 180, 0.10) 0%,
      transparent 65%),
    /* genel vignette \u2014 kenarlar koyu, merkez net */
    radial-gradient(ellipse 90% 90% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.35) 100%);
}
/* Scene ve i\u00e7erik ::after \u00fcst\u00fcnde kals\u0131n */
body[data-theme="dark"] .scene,
body[data-theme="dark"] .screen { position: relative; z-index: 1; }

body[data-theme="light"] .top-bar__score { text-shadow: none; }
body[data-theme="dark"]  .score-float--pos { color: var(--accent); }
body[data-theme="mint"]  .score-float--pos { color: #0FA37A; }
body[data-theme="light"] .icon-btn { color: var(--ink); }
body[data-theme="light"] .icon-btn:hover { background: rgba(20, 35, 60, 0.06); }

body[data-theme="light"] .menu__title,
body[data-theme="light"] .scores__title { color: var(--ink); }
body[data-theme="light"] .menu__subtitle,
body[data-theme="light"] .menu__label { color: var(--ink-soft); }
body[data-theme="light"] .score-tab,
body[data-theme="light"] .scores__stats,
body[data-theme="light"] .scores__list,
body[data-theme="light"] .status-row { border-color: #d5ddec; }
body[data-theme="mint"] .status-row { border-color: #D9F4EA; }
body[data-theme="light"] .pause-btn,
body[data-theme="light"] .theme-picker__btn,
body[data-theme="light"] .theme-toggle,
body[data-theme="light"] .best-score,
body[data-theme="light"] .menu__secondary {
  background: #ffffff;
  border-color: #d5ddec;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}
body[data-theme="light"] .best-score__label,
body[data-theme="light"] .menu__secondary {
  color: var(--ink-soft);
}
body[data-theme="light"] .best-score__value { color: var(--accent); text-shadow: none; }
body[data-theme="light"] .best-score__stat-val { color: var(--ink); }
body[data-theme="light"] .best-score__stat-lbl { color: var(--ink-dim); }
body[data-theme="light"] .best-score__stats { border-top-color: var(--grid-line); }
body[data-theme="light"] .menu__primary,
body[data-theme="light"] .pause-resume-btn {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}
body[data-theme="light"] .pause-resume-btn { border: none; }
/* Event/Daily kartlar her iki temada da markalı mavi kalır — referansa sadık. */
body[data-theme="light"] .difficulty-card {
  align-items: flex-start;
  padding-top: 16px;
}
body[data-theme="light"] .difficulty-card__title {
  font-size: 28px;
  margin-top: 2px;
  width: 100%;
}
body[data-theme="light"] .difficulty-card__sub {
  margin-top: -6px;
}
body[data-theme="light"] .diff-btn {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(20, 35, 60, 0.14);
}
body[data-theme="light"] .diff-btn:hover,
body[data-theme="light"] .diff-btn:focus-visible {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(20, 35, 60, 0.22);
}
body[data-theme="light"] .diff-btn.is-selected {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(20, 35, 60, 0.22);
}
body[data-theme="light"] .diff-btn__dot {
  background: rgba(20, 35, 60, 0.12);
  border-color: rgba(20, 35, 60, 0.20);
  border-radius: 3px;
}
body[data-theme="light"] .diff-btn__dot.is-filled {
  background: var(--diff-color, var(--accent));
  border-color: var(--diff-color, var(--accent));
  box-shadow: 0 0 5px color-mix(in srgb, var(--diff-color, var(--accent)) 45%, transparent);
}
body[data-theme="light"] .diff-btn__chevron {
  color: rgba(20, 35, 60, 0.35);
}
body[data-theme="light"] .score-tab.active {
  background: rgba(37, 99, 235, 0.10);
  color: var(--accent);
}
body[data-theme="light"] .score-row { border-bottom-color: #e8edf5; }
body[data-theme="light"] .score-row.mine { background: rgba(37, 99, 235, 0.05); }
body[data-theme="light"] .score-row__score { color: var(--accent); }
body[data-theme="light"] .score-row__name { color: #1a2d45; }
body[data-theme="light"] .score-row__time { color: #7a8da8; }

body[data-theme="mint"] .scores__list {
  background: #ffffff;
  border-color: #D9F4EA;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="mint"] .score-row { border-bottom-color: #E8F8F1; }
body[data-theme="mint"] .score-row.mine { background: rgba(15, 163, 122, 0.05); }
body[data-theme="mint"] .score-row__name { color: #0F1F1A; }
body[data-theme="mint"] .score-row__time { color: #5A8A7A; }
body[data-theme="mint"] .score-row__score { color: #0FA37A; }
body[data-theme="dark"] .score-row__score { color: var(--accent); }

/* Skor tab ikonları — varsayılan gizli */
.score-tab__icon { display: none; width: 28px; height: 28px; object-fit: contain; }

/* Ortak tab grid layout (light / dark / mint / lavender / sakura) */
body[data-theme="light"] .scores__tabs,
body[data-theme="dark"] .scores__tabs,
body[data-theme="mint"] .scores__tabs,
body[data-theme="lavender"] .scores__tabs,
body[data-theme="sakura"] .scores__tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  overflow-x: visible;
  padding-bottom: 0;
}
body[data-theme="light"] .score-tab,
body[data-theme="dark"] .score-tab,
body[data-theme="mint"] .score-tab,
body[data-theme="lavender"] .score-tab,
body[data-theme="sakura"] .score-tab {
  flex: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 12px;
  font-size: 9px;
  letter-spacing: 1px;
}
body[data-theme="mint"] .score-tab {
  background: #ffffff;
  border-color: #D9F4EA;
  box-shadow: none;
  color: #0F1F1A;
}
body[data-theme="mint"] .scores__stats {
  background: #ffffff;
  border-color: #D9F4EA;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.06);
}
body[data-theme="mint"] .scores__stat { border-right-color: #E8F8F1; }
body[data-theme="mint"] .scores__stat-label { color: #5A8A7A; }
body[data-theme="mint"] .scores__stat-sub { color: #5A8A7A; }

body[data-theme="light"] .scores__stats {
  background: #ffffff;
  border-color: #d5ddec;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}
body[data-theme="light"] .scores__list {
  background: #ffffff;
  border-color: #d5ddec;
}
body[data-theme="light"] .score-row {
  border-bottom-color: #e8edf5;
}
body[data-theme="light"] .score-tab {
  background: #ffffff;
  border-color: #d5ddec;
  box-shadow: none;
  color: #3a4a6b;
}
body[data-theme="light"] .score-tab.active {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
body[data-theme="light"] .scores__stat { border-right-color: #e8edf5; }
body[data-theme="light"] .scores__stat-sub { color: #7a8da8; }

/* Light — kendi ikonlarını göster */
body[data-theme="light"] .score-tab__icon--light { display: block; }
/* Dark — kendi ikonlarını göster */
body[data-theme="dark"] .score-tab__icon--dark { display: block; }
/* Mint — kendi ikonlarını göster */
body[data-theme="mint"] .score-tab__icon--mint { display: block; }
/* Lavender — kendi ikonlarını göster */
body[data-theme="lavender"] .score-tab__icon--lavender { display: block; }

/* Classic SKORLAR başlığı */
body[data-theme="light"] .scores__title,
body[data-theme="dark"] .scores__title,
body[data-theme="mint"] .scores__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 3px;
}

/* Aktif tab renkleri */
body[data-theme="dark"] .score-tab.active {
  background: rgba(77, 179, 255, 0.12);
  color: #4DB3FF;
}
body[data-theme="mint"] .score-tab.active {
  background: rgba(15, 163, 122, 0.12);
  color: #0FA37A;
}

/* Winner empty state */
.scores__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; }
.scores__winner-img { width: 300px; height: auto; opacity: 0.25; }
.scores__empty-text { color: var(--ink-dim); font-size: 13px; text-align: center; }
body[data-theme="light"] .scores__winner-img,
body[data-theme="dark"] .scores__winner-img,
body[data-theme="mint"] .scores__winner-img { opacity: 1; }

/* ── Classic mod — ana menü düzeni (deepmint ile aynı yapı) */
body[data-theme="light"] .menu__spacer { height: 30px; }
body[data-theme="light"] .menu__title,
body[data-theme="light"] .menu__subtitle { display: none; }
body[data-theme="light"] .menu__pin-mint-wrap { display: flex; }
body[data-theme="light"] .menu__pin-mint-title { color: var(--ink); }

/* Günlük mücadele kartı */
body[data-theme="light"] .event-card--daily {
  background: #ffffff; border: 2.5px solid #d5ddec; box-shadow: none;
  align-items: stretch; text-align: left;
  width: 100%; min-height: unset;
  padding: 28px 14px 15px; gap: 30px;
}
body[data-theme="light"] .event-card--daily .event-card__head {
  flex-direction: row; align-items: center; gap: 7px;
}

body[data-theme="light"] .event-card__icon-cal--mint { display: none; }
body[data-theme="light"] .event-card__icon-cal--dark { display: none; }
body[data-theme="light"] .event-card__icon-cal--light { display: block; }
body[data-theme="light"] .event-card--daily .event-card__main {
  flex-direction: row; align-items: stretch; justify-content: space-between; gap: 8px; flex: 1;
}
body[data-theme="light"] .event-card--daily .event-card__text {
  align-items: flex-start; flex: 1;
}
/* classic-gift --light variant ile yönetiliyor */
body[data-theme="light"] .event-card--daily .event-card__label {
  color: var(--ink); font-size: 13px; letter-spacing: 1.8px; position: relative; top: 2px;
}
body[data-theme="light"] .event-card--daily .event-card__title { color: var(--ink); }
body[data-theme="light"] .event-card--daily .event-card__sub {
  display: block; font-size: 12px; color: var(--ink-soft); opacity: 0.85;
}
body[data-theme="light"] .event-card--daily .event-card__streak-label {
  background: var(--accent); box-shadow: none; color: #ffffff; margin-top: auto;
}

/* Kart arka planları */
body[data-theme="light"] .best-score {
  background: #ffffff;
  border-color: #d5ddec;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}
body[data-theme="light"] .menu__secondary {
  background: #EEF4FF;
  border-color: #d5ddec;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}

/* Hover efektleri */
body[data-theme="light"] .event-card--daily:hover,
body[data-theme="light"] .best-score:hover,
body[data-theme="light"] .best-score:focus-visible,
body[data-theme="light"] .menu__secondary:hover,
body[data-theme="light"] .menu__secondary:focus-visible {
  filter: none; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.16);
}

body[data-theme="light"] .board {
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid rgba(20, 35, 60, 0.40);
  box-shadow: none;
}
body[data-theme="light"] .cell { background: #FFFFFF; color: var(--ink); border-color: var(--grid-line); }
/* Klasik kutlama — sarı zemin üstünde grid çizgileri yine okunur kalsın */
body[data-theme="light"] .cell.cell--celeb-row,
body[data-theme="light"] .cell.cell--celeb-col,
body[data-theme="light"] .cell.cell--celeb-block {
  border-right-color: rgba(20, 35, 60, 0.35) !important;
  border-bottom-color: rgba(20, 35, 60, 0.35) !important;
}
/* Klasik temada 3x3 ayırıcılar — uniform 1px, sadece renk vurgusu */
body[data-theme="light"] .cell[data-col="2"],
body[data-theme="light"] .cell[data-col="5"] {
  border-right-color: rgba(20, 35, 60, 0.55);
}
body[data-theme="light"] .cell[data-row="2"],
body[data-theme="light"] .cell[data-row="5"] {
  border-bottom-color: rgba(20, 35, 60, 0.55);
}
body[data-theme="light"] .cell.prefilled { color: var(--ink); font-weight: 600; }
body[data-theme="light"] .cell.user { color: var(--accent); font-weight: 600; }
body[data-theme="light"] .cell.user.is-settled { color: var(--ink); }
body[data-theme="light"] .cell.error {
  background: #ffe6e6;
  color: var(--danger) !important;
}
body[data-theme="light"] .cell.selected {
  background: rgba(244, 182, 61, 0.32);
  box-shadow: none;
}
body[data-theme="light"] .cell.selected::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(315deg, #2F6DF6, #60A5FA, #A5B4FC);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
body[data-theme="light"] .cell.same {
  background: rgba(244, 182, 61, 0.14);
  box-shadow: none;
}
body[data-theme="light"] .cell.peer { background: rgba(244, 182, 61, 0.22); }
body[data-theme="light"] .cell.block-locked { background: rgba(244, 182, 61, 0.22); }
body[data-theme="light"] .cell.hinted { color: #0d1b2a; }
body[data-theme="light"] .cell.hint-reveal { animation: hint-reveal-fade-light 1s ease forwards; }
@keyframes hint-reveal-fade-light {
  0%   { color: #2563eb; }
  100% { color: #0d1b2a; }
}
body[data-theme="light"] .cell.hint-line { background: rgba(244,182,61,0.08); }
body[data-theme="light"] .cell.is-correct { background: #e6f6ea; color: var(--success); }
body[data-theme="light"] .cell.hint-eliminator {
  background: #e6f6ea;
  box-shadow: inset 0 0 0 1px rgba(26, 138, 82, 0.30);
}
body[data-theme="light"] .cell.hint-target {
  background: rgba(244,182,61,0.14);
  box-shadow: inset 0 0 0 2px rgba(244,182,61,0.80);
}
body[data-theme="light"] .hint-outline {
  border-color: rgb(244,182,61);
  box-shadow: 0 0 10px rgba(244,182,61,0.25), inset 0 0 0 1px rgba(244,182,61,0.30);
}
body[data-theme="light"] .tutorial__hint-outline {
  box-shadow: 0 0 10px var(--accent-glow), inset 0 0 0 1px rgba(37, 99, 235, 0.28);
}
body[data-theme="light"] .tutorial__cell.tut-elim {
  background: rgba(110, 231, 168, 0.20);
  color: #16a34a;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 168, 0.40);
}
body[data-theme="light"] .tutorial__cell.tut-hint-only {
  background: rgba(59, 130, 246, 0.10);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.70);
}

/* ── Numpad & aksiyon — İkincil buton sistemi ── */
body[data-theme="light"] .num-btn,
body[data-theme="light"] .action-btn {
  background: #ffffff;
  border: 1px solid #d5ddec;
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}
body[data-theme="light"] .num-btn:hover,
body[data-theme="light"] .action-btn:hover {
  background: #e7f0ff;
  border-color: var(--accent);
  color: var(--accent);
}
body[data-theme="light"] .num-btn:disabled,
body[data-theme="light"] .action-btn:disabled {
  background: #f1f3f7;
  border-color: #e6eaf2;
  color: #a3acb8;
}

/* ── Tactile feedback efektleri (light + dark + mint) ─────────────────────
   Renkler var(--accent) üzerinden color-mix ile türetildiği için tema
   değişince otomatik doğru tonla çalışır. Tema-spesifik override gerekmez. */

/* 2) Hücre seçim feedback — scale 1.02 + tek atımlık glow ring (220ms)
   NOT: outline kullanıyoruz çünkü dark/mint .cell.selected çok katmanlı
   inset box-shadow (parlak halka) kullanıyor; box-shadow ile çakışmasın. */
@keyframes cell-select-pulse {
  0%   { transform: scale(1);    outline-width: 0;   outline-color: color-mix(in srgb, var(--accent) 0%,  transparent); outline-offset: 0; }
  40%  { transform: scale(1.02); outline-width: 3px; outline-color: color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
  100% { transform: scale(1);    outline-width: 0;   outline-color: color-mix(in srgb, var(--accent) 0%,  transparent); outline-offset: 0; }
}
.cell.selected {
  z-index: 4;
  outline: 0 solid transparent;
  animation: cell-select-pulse 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3) Numpad & action btn press — scale(0.94) + 100ms */
.num-btn,
.action-btn {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.num-btn:active,
.action-btn:active {
  transform: scale(0.94);
}

/* 4) Daily card press — translateY(0) + scale(0.98) */
.event-card--daily {
  transition: filter 0.2s ease, transform 120ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease;
}
.event-card--daily:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* 5) Top-bar score pulse — scale 1.05 + accent shimmer (250ms) */
@keyframes score-pulse {
  0%   { transform: scale(1);    text-shadow: 0 0 0    color-mix(in srgb, var(--accent) 0%,  transparent); }
  45%  { transform: scale(1.05); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
  100% { transform: scale(1);    text-shadow: 0 0 0    color-mix(in srgb, var(--accent) 0%,  transparent); }
}
.top-bar__score {
  display: inline-block;
  transform-origin: center;
  transition: color 0.25s ease;
}
.top-bar__score.is-pulsing {
  animation: score-pulse 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* A) Best-score trophy hover tilt — kupa ikonu hafif eğilir */
.best-score__value svg {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 80%;
}
.best-score:hover .best-score__value svg,
.best-score:focus-visible .best-score__value svg {
  transform: rotate(-8deg) scale(1.05);
}

/* B) Settings toggle bounce — knob değişiminde hafif sıçrama */
.settings-toggle::after {
  transition: left 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease,
              transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.settings-toggle:active::after {
  transform: scale(0.92);
}

/* C) Hint badge count-up + scale pulse — sayı değiştiğinde tetiklenir */
@keyframes hint-badge-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
  45%  { transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
}
.action-btn__badge {
  transition: background 0.2s ease, color 0.2s ease;
}
.action-btn__badge.is-pulsing {
  animation: hint-badge-pulse 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* D) Modal (game over / win) backdrop blur fade-in
   Light/Mint açık temada beyaz overlay; dark temada siyah overlay. */
@keyframes modal-backdrop-in-light {
  0%   { backdrop-filter: blur(0px);  -webkit-backdrop-filter: blur(0px);  background: rgba(255,255,255,0.0); }
  100% { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  background: rgba(255,255,255,0.35); }
}
@keyframes modal-backdrop-in-dark {
  0%   { backdrop-filter: blur(0px);  -webkit-backdrop-filter: blur(0px);  background: rgba(0,0,0,0.0); }
  100% { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  background: rgba(0,0,0,0.45); }
}
.modal:not(.modal--fullscreen):not([hidden])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="light"] .modal:not(.modal--fullscreen):not([hidden])::before,
body[data-theme="mint"]  .modal:not(.modal--fullscreen):not([hidden])::before {
  background: rgba(255,255,255,0.35);
  animation: modal-backdrop-in-light 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
body[data-theme="dark"] .modal:not(.modal--fullscreen):not([hidden])::before {
  background: rgba(0,0,0,0.45);
  animation: modal-backdrop-in-dark 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* E) Pause aktifken board hafif blur + scale (focus shift) */
.board {
  transition: filter 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.screen--game:has(.pause-panel:not([hidden])) .board,
.screen--game:has(.quit-panel:not([hidden]))  .board {
  filter: blur(2.5px);
  transform: scale(0.985);
}

/* G) Focus-visible ring standardizasyonu — klavye navigasyonu için tutarlı halka */
button:focus-visible,
[role="button"]:focus-visible,
.cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}
/* Mouse tıklamasında halka istemiyoruz — sadece klavye odakta görünsün */
button:focus:not(:focus-visible) {
  outline: none;
}

body[data-theme="light"] .modal__card {
  background: #ffffff;
  border-color: rgba(20,35,60,0.14);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
body[data-theme="light"] .modal__actions {
  background: linear-gradient(to top, rgba(255,255,255,0.98) 55%, transparent);
}
body[data-theme="light"] .modal__card-content {
  scrollbar-color: rgba(37,99,235,0.20) transparent;
}
body[data-theme="light"] .modal__text { color: var(--ink-soft); }
body[data-theme="light"] .modal__title { color: var(--ink); }
/* ── Modal butonları ── */
body[data-theme="light"] .modal__btn { background: var(--accent); color: #ffffff; box-shadow: 0 4px 14px rgba(37,99,235,0.22); }
body[data-theme="light"] .modal__btn--ghost {
  background: var(--accent); color: #ffffff; border: none;
  border-radius: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}
body[data-theme="light"] .modal__btn--ghost:hover {
  background: var(--accent);
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35);
}

/* Dark — VAZGE\u00c7 (difficulty modal) YEN\u0130 OYUN ile ayn\u0131 stil (indigo, dolu) */
body[data-theme="dark"] .modal__btn--ghost {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  box-shadow: none !important;
}
body[data-theme="dark"] .modal__btn--ghost:hover {
  background: var(--accent) !important;
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

/* Mint — VAZGE\u00c7 (difficulty modal) YEN\u0130 OYUN ile ayn\u0131 stil (yeşil, dolu) */
body[data-theme="mint"] .modal__btn--ghost {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(15, 163, 122, 0.30) !important;
}
body[data-theme="mint"] .modal__btn--ghost:hover {
  background: var(--accent) !important;
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
body[data-theme="light"] .score-panel__total-value { color: var(--accent); }
body[data-theme="light"] .score-panel__badge { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.25); }
body[data-theme="light"] .name-row { background: #f0f4fb; border-color: rgba(20,35,60,0.12); }
body[data-theme="light"] .name-row input { color: var(--ink); }
body[data-theme="light"] .modal__stats { background: #f0f4fb; border-color: rgba(20,35,60,0.10); }
body[data-theme="light"] .modal__stat-value { color: var(--ink); }
body[data-theme="light"] .modal__stat-label { color: var(--ink-dim); }
body[data-theme="light"] .score-breakdown {
  background: #f0f4fb;
  border-color: rgba(20,35,60,0.10);
}
body[data-theme="light"] .score-breakdown li {
  background: transparent;
  border-bottom-color: rgba(20,35,60,0.08);
}

body[data-theme="light"] .pause-panel {
  background: rgba(250, 251, 253, 0.94);
  border-color: #d5ddec;
}
body[data-theme="light"] .pause-panel__head { border-color: #d5ddec; }
body[data-theme="light"] .pause-panel__foot { border-color: #d5ddec; }
body[data-theme="light"] .pause-panel__score { color: var(--accent); text-shadow: none; }

/* Mint — pause panel light pattern (a\u00e7\u0131k beyaz + mint border) */
body[data-theme="mint"] .pause-panel {
  background: rgba(250, 252, 251, 0.94);
  border-color: rgba(15, 163, 122, 0.20);
}
body[data-theme="mint"] .pause-panel__head { border-color: rgba(15, 163, 122, 0.18); }
body[data-theme="mint"] .pause-panel__foot { border-color: rgba(15, 163, 122, 0.18); }
body[data-theme="mint"] .pause-panel__title { color: var(--ink); }
body[data-theme="mint"] .pause-panel__lbl { color: var(--ink-dim); }
body[data-theme="mint"] .pause-panel__score { color: var(--accent); text-shadow: none; }
body[data-theme="mint"] .pause-resume-btn {
  background: var(--accent); color: #ffffff; border: none;
  box-shadow: 0 4px 16px rgba(15, 163, 122, 0.30);
}

/* Dark — OYUNU S\u00dcRD\u00dcR (YEN\u0130 OYUN ile birebir, indigo dolu, shadow yok) */
body[data-theme="dark"] .pause-resume-btn {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
/* Mint pause reward kart\u0131 \u2014 mint-tinted */
body[data-theme="mint"] .pause-reward {
  background: rgba(15, 163, 122, 0.06);
  border-color: rgba(15, 163, 122, 0.20);
}
body[data-theme="mint"] .pause-reward__icon {
  background: rgba(15, 163, 122, 0.14); color: var(--accent);
}
body[data-theme="mint"] .pause-reward__title { color: var(--ink); }
body[data-theme="mint"] .pause-reward__desc { color: var(--ink-dim); }
body[data-theme="mint"] .pause-reward__btn { background: var(--accent); color: #ffffff; font-weight: 700; }
body[data-theme="mint"] .pause-reward__btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(15, 163, 122, 0.35);
}
/* Mint "Hakk\u0131n Dolu" \u2014 NASIL OYNANIR ile ayn\u0131 (a\u00e7\u0131k mint) */
body[data-theme="mint"] .pause-reward__btn:disabled {
  background: #D9F4EA;
  border: 1px solid rgba(15, 163, 122, 0.18);
  color: var(--ink-soft);
  opacity: 1;
  cursor: not-allowed;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 8px 14px; border-radius: 8px;
}

/* ── Settings panel — classic overrides ── */
body[data-theme="light"] .settings-panel {
  background: rgba(250, 251, 253, 0.97);
  border: 1px solid #d5ddec;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="light"] .settings-panel__head { border-color: #d5ddec; }
body[data-theme="light"] .settings-panel__foot { border-color: #d5ddec; }
body[data-theme="light"] .settings-row { border-color: #e6eaf2; }
body[data-theme="light"] .settings-toggle {
  background: #e6eaf2;
  border-color: #d5ddec;
}
body[data-theme="light"] .settings-toggle::after { background: #9fb0cc; }
body[data-theme="light"] .settings-toggle[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
body[data-theme="light"] .settings-toggle[aria-checked="true"]::after { background: #fff; }
body[data-theme="light"] .settings-close-btn { background: var(--accent); }

/* Dark — Ayarlar paneli yaz\u0131lar\u0131 d\u00fcz beyaz */
body[data-theme="dark"] .settings-panel__title,
body[data-theme="dark"] .settings-row__label {
  color: #ffffff;
}

/* Mint \u2014 Ayarlar paneli light pattern (a\u00e7\u0131k beyaz + mint border) */
body[data-theme="mint"] .settings-panel {
  background: rgba(250, 252, 251, 0.97);
  border: 1px solid rgba(15, 163, 122, 0.20);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="mint"] .settings-panel__head { border-color: rgba(15, 163, 122, 0.18); }
body[data-theme="mint"] .settings-panel__foot { border-color: rgba(15, 163, 122, 0.18); }
body[data-theme="mint"] .settings-row { border-color: rgba(15, 163, 122, 0.10); }
body[data-theme="mint"] .settings-panel__title { color: var(--ink); }
body[data-theme="mint"] .settings-row__label { color: var(--ink); }
body[data-theme="mint"] .settings-toggle {
  background: #e6eaf2;
  border-color: rgba(15, 163, 122, 0.18);
}
body[data-theme="mint"] .settings-toggle::after { background: #9fb0cc; }
body[data-theme="mint"] .settings-toggle[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
body[data-theme="mint"] .settings-toggle[aria-checked="true"]::after { background: #fff; }
body[data-theme="mint"] .settings-close-btn { background: var(--accent); }

body[data-theme="light"] .pause-reward {
  background: #fdf6e8;
  border-color: rgba(244, 182, 61, 0.35);
}
body[data-theme="light"] .pause-reward__icon {
  background: rgba(244, 182, 61, 0.18); color: #c98a00;
}
/* ── İpucu reklam kartı — Gold vurgu butonu ── */
body[data-theme="light"] .pause-reward__btn { background: #f4b63d; color: #0d1b2a; font-weight: 700; }
body[data-theme="light"] .pause-reward__btn:hover:not(:disabled) { background: #f0aa28; box-shadow: 0 4px 14px rgba(244,182,61,0.35); }
/* Light "Hakk\u0131n Dolu" \u2014 NASIL OYNANIR ile ayn\u0131 (beyaz + gri border) */
body[data-theme="light"] .pause-reward__btn:disabled {
  background: #ffffff;
  border: 1px solid #d5ddec;
  color: var(--ink-soft);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 8px 14px; border-radius: 8px;
}

/* Dark "Hakk\u0131n Dolu" \u2014 NASIL OYNANIR ile ayn\u0131 (koyu glass + a\u00e7\u0131k text) */
body[data-theme="dark"] .pause-reward__btn:disabled {
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  border: 1px solid var(--grid-line-strong);
  color: var(--ink);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 8px 14px; border-radius: 8px;
}


body[data-theme="light"] .hint-panel {
  background: #ffffff;
  border-color: var(--grid-line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
body[data-theme="light"] .menu__link { color: var(--ink-soft); }
body[data-theme="light"] .menu__link:hover { color: var(--accent); }
body[data-theme="light"] .theme-btn.active { color: #ffffff; box-shadow: 0 2px 8px var(--accent-glow); }
body[data-theme="light"] .theme-picker__dropdown {
  background: rgba(255,255,255,0.96);
  border-color: #d5ddec;
  box-shadow: 0 4px 16px rgba(13,27,42,0.12);
}
body[data-theme="light"] .theme-btn { color: #7a8da8; }
body[data-theme="light"] .theme-btn:hover { background: rgba(37,99,235,0.08); color: #2563eb; }

/* ── DeepMint tema — tam değişken bloğu ──────────────────────────── */
body[data-theme="mint"] {
  --bg-0: #FAFBF9;
  --bg-1: #F1FAF6;
  --bg-2: #D9F4EA;
  --ink: #0F1F1A;
  --ink-soft: #3A5A50;
  --ink-dim: #6B8C82;
  --accent: #0FA37A;
  --accent-glow: rgba(15, 163, 122, 0.30);
  --gold: #e8a020;
  --danger: #d93b3b;
  --success: #0FA37A;
  --grid-line: rgba(15, 90, 65, 0.12);
  --grid-line-strong: rgba(15, 90, 65, 0.28);
  --cell-bg: #ffffff;
  --cell-hl: #E8F8F2;
  --cell-sel: #C8EFE2;
  --cell-same: #C8EFE2;
  /* Tutorial tri-color highlights */
  --hl-row: rgba(255, 184, 77, 0.28);
  --hl-col: rgba(255, 110, 160, 0.28);
  --hl-block: rgba(34, 197, 150, 0.18);
  --hl-row-col: rgba(244, 182, 61, 0.45);
  --hl-row-block: rgba(200, 180, 80, 0.30);
  --kw-row: #e07b1a;
  --kw-col: #d63384;
  --kw-block: #0FA37A;
  /* Win celebration */
  --celeb-row: rgba(15, 163, 122, 0.55);
  --celeb-col: rgba(15, 163, 122, 0.45);
  --celeb-block: rgba(15, 163, 122, 0.38);
  --celeb-row-col: rgba(15, 163, 122, 0.65);
  --celeb-row-block: rgba(15, 163, 122, 0.50);
  --celeb-glow-row: none;
  --celeb-glow-col: none;
  --celeb-glow-block: none;
  --celeb-text: var(--ink);
  --shadow-lg: 0 12px 40px rgba(10, 50, 35, 0.10);
  color: var(--ink);
}
/* DeepMint: arka plan görseli — game-frame içinde, body beyaz kalır */
body[data-theme="mint"] { background: #0d1520 !important; } /* GD shell dışı sahne */
body[data-theme="mint"] #game-frame {
  background-image: url('images/deep-mint/mint-back-yaprak.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body[data-theme="mint"] .theme-btn.active {
  background: #FAFBF9;
  box-shadow: 0 0 10px rgba(15, 163, 122, 0.30);
}
.theme-btn__leaf {
  height: 18px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── DeepMint — menü & kart overrides ───────────────────────────── */
body[data-theme="mint"] .menu__title,
body[data-theme="mint"] .scores__title { color: var(--ink); }
body[data-theme="mint"] .menu__subtitle,
body[data-theme="mint"] .menu__label { color: var(--ink-soft); }
body[data-theme="mint"] .menu__title,
body[data-theme="mint"] .menu__subtitle { display: none; }
.menu__pin-mint-wrap { display: none; flex-direction: column; align-items: center; gap: 2px; }
.menu__pin-mint { display: none; height: 8px; width: auto; margin-top: -3px; }
body[data-theme="mint"] .menu__pin-mint--deepmint { display: block; }
body[data-theme="light"] .menu__pin-mint--light { display: block; }
body[data-theme="dark"] .menu__pin-mint--dark { display: block; }
.menu__pin-mint-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--ink);
}
body[data-theme="mint"] .menu__pin-mint-wrap { display: flex; }
body[data-theme="mint"] .menu__pin-mint-title { color: #0FA37A; }

body[data-theme="mint"] .pause-btn,
body[data-theme="mint"] .theme-picker__btn,
body[data-theme="mint"] .theme-toggle,
body[data-theme="mint"] .best-score {
  background: #FAFBF9;
  border-color: rgba(15, 163, 122, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 6px rgba(10, 60, 45, 0.07);
}
body[data-theme="mint"] .menu__secondary {
  background: #D9F4EA;
  border-color: rgba(15, 163, 122, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 6px rgba(10, 60, 45, 0.07);
}
body[data-theme="mint"] .best-score__label { color: var(--ink-soft); }
body[data-theme="mint"] .best-score__value { color: var(--accent); text-shadow: none; }
body[data-theme="mint"] .best-score__stat-val { color: var(--ink); }
body[data-theme="mint"] .best-score__stat-lbl { color: var(--ink-dim); }
body[data-theme="mint"] .best-score__stats { border-top-color: var(--grid-line); }

body[data-theme="mint"] .menu__primary {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 163, 122, 0.30);
}
body[data-theme="mint"] .menu__link { color: var(--ink-soft); }
body[data-theme="mint"] .menu__link:hover { color: var(--accent); }

/* ── Dark mod buton sistemi overrides ─────────────────────────────── */
/* İkincil buton: kart lacivert bg + border */
body:not([data-theme="light"]) .num-btn {
  background: #121a2b;
  border: 1px solid #2a3448;
  color: var(--accent);
  text-shadow: none;
}
body:not([data-theme="light"]) .num-btn:hover {
  background: #1f2f4d;
  border-color: var(--accent);
}
body:not([data-theme="light"]) .action-btn {
  background: #121a2b;
  border: 1px solid #2a3448;
  border-radius: 10px;
  color: var(--ink-soft);
}
body:not([data-theme="light"]) .action-btn:hover {
  background: #1f2f4d;
  border-color: #3d4f6b;
  color: var(--ink);
}
body:not([data-theme="light"]) .action-btn svg { color: var(--ink-soft); }
/* \u0130kinci \u015eans gold override \u2014 her tema kendi blo\u011funda; bu kural kald\u0131r\u0131ld\u0131. */
/* "Hakk\u0131n Dolu" pasif buton \u2014 her temada NASIL OYNANIR (menu__secondary)
   stiliyle birebir, okunabilirlik garanti. Tema bloklar\u0131nda override'l\u0131. */

/* ── Dark + DeepMint — oyun ekranı light UI (background hariç)
   Board, hücreler ve kontrol butonları classic ile aynı görünür. */

/* ── Mint board (a\u00e7\u0131k tema) ─────────────────────────────────── */
body[data-theme="mint"] .board {
  background: #ffffff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid rgba(20, 35, 60, 0.40);
  box-shadow: none;
}
body[data-theme="mint"] .board-block-lines { display: none; }
body[data-theme="mint"] .cell {
  background: #ffffff; color: #0d1b2a; border-color: rgba(13, 27, 42, 0.10);
}
body[data-theme="mint"] .cell[data-col="2"],
body[data-theme="mint"] .cell[data-col="5"] { border-right-color: rgba(20, 35, 60, 0.55); }
body[data-theme="mint"] .cell[data-row="2"],
body[data-theme="mint"] .cell[data-row="5"] { border-bottom-color: rgba(20, 35, 60, 0.55); }
body[data-theme="mint"] .cell.prefilled { color: #0d1b2a; font-weight: 600; }
body[data-theme="mint"] .cell.user { color: var(--accent); font-weight: 600; }
body[data-theme="mint"] .cell.user.is-settled { color: #0d1b2a; }
body[data-theme="mint"] .cell.error { background: #ffe6e6; color: var(--danger) !important; }
body[data-theme="mint"] .cell.selected {
  background: rgba(15, 163, 122, 0.82); box-shadow: inset 0 0 0 2.5px #0FA37A;
}
body[data-theme="mint"] .cell.same {
  background: rgba(15, 163, 122, 0.12); box-shadow: none;
}
body[data-theme="mint"] .cell.peer,
body[data-theme="mint"] .cell.block-locked { background: rgba(15, 163, 122, 0.20); }
body[data-theme="mint"] .cell.hinted { color: #0d1b2a; }
body[data-theme="mint"] .cell.hint-line { background: rgba(15,163,122,0.10); }
body[data-theme="mint"] .cell.hint-target {
  background: rgba(15,163,122,0.18);
  box-shadow: inset 0 0 0 2px rgba(15,163,122,0.85);
}
body[data-theme="mint"] .hint-outline {
  border-color: #0FA37A;
  box-shadow: 0 0 10px rgba(15,163,122,0.25), inset 0 0 0 1px rgba(15,163,122,0.30);
}
body[data-theme="mint"] .cell.is-correct { background: #e6f6ea; color: var(--success); }
body[data-theme="mint"] .cell.hint-reveal { animation: hint-reveal-fade-mint 1s ease forwards; }
@keyframes hint-reveal-fade-mint {
  0%   { color: #0FA37A; }
  100% { color: #0d1b2a; }
}

/* ── Dark board (gerçek koyu UI) ──────────────────────────────────
   Indigo accent, koyu navy zemin. Renkler var(--*) tabanl\u0131 \u2192
   tema de\u011fi\u015fkeni de\u011fi\u015firse otomatik adapte olur. */
body[data-theme="dark"] .board {
  background: var(--bg-1);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--grid-line-strong);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] .board-block-lines { display: none; }
body[data-theme="dark"] .cell {
  background: transparent; color: var(--ink);
  border-color: var(--grid-line);
}
body[data-theme="dark"] .cell[data-col="2"],
body[data-theme="dark"] .cell[data-col="5"] { border-right-color: var(--grid-line-strong); }
body[data-theme="dark"] .cell[data-row="2"],
body[data-theme="dark"] .cell[data-row="5"] { border-bottom-color: var(--grid-line-strong); }
body[data-theme="dark"] .cell.prefilled { color: var(--ink); font-weight: 600; }
body[data-theme="dark"] .cell.user {
  color: var(--accent); font-weight: 600;
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
body[data-theme="dark"] .cell.user.is-settled { color: var(--ink); text-shadow: none; }
body[data-theme="dark"] .cell.error {
  background: rgba(255, 122, 122, 0.18);
  color: var(--danger) !important;
}
body[data-theme="dark"] .cell.selected {
  background: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow:
    inset 0 0 0 2px var(--accent),
    inset 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
body[data-theme="dark"] .cell.same {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
body[data-theme="dark"] .cell.peer,
body[data-theme="dark"] .cell.block-locked {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
body[data-theme="dark"] .cell.hinted { color: var(--ink); }
body[data-theme="dark"] .cell.hint-line {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
body[data-theme="dark"] .cell.hint-eliminator {
  background: rgba(67, 194, 122, 0.18);
  color: var(--success) !important;
  box-shadow: inset 0 0 0 1px rgba(67, 194, 122, 0.40);
}
body[data-theme="dark"] .cell.hint-target {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--accent) 80%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
}
body[data-theme="dark"] .hint-outline {
  border-color: var(--accent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--accent) 40%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
body[data-theme="dark"] .cell.is-correct {
  background: rgba(67, 194, 122, 0.20);
  color: var(--success);
}
body[data-theme="dark"] .cell.hint-reveal { animation: hint-reveal-fade-dark 1s ease forwards; }
@keyframes hint-reveal-fade-dark {
  0%   { color: var(--accent); }
  100% { color: var(--ink); }
}
/* ── Mint butonlar (a\u00e7\u0131k tema) ─────────────────────────────── */
body[data-theme="mint"] .num-btn,
body[data-theme="mint"] .action-btn {
  background: #ffffff;
  border: 1px solid #d5ddec;
  color: #0d1b2a;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}
body[data-theme="mint"] .num-btn:hover,
body[data-theme="mint"] .action-btn:hover {
  background: #e7f0ff; border-color: var(--accent); color: var(--accent);
}
body[data-theme="mint"] .num-btn {
  background: #ffffff !important;
  border-color: #d5ddec !important;
}
body[data-theme="mint"] .num-btn:hover {
  background: #e7f0ff !important;
  border-color: var(--accent) !important;
  color: var(--accent);
}
body[data-theme="mint"] .num-btn:disabled,
body[data-theme="mint"] .action-btn:disabled {
  background: #f1f3f7; border-color: #e6eaf2; color: #a3acb8;
}
body[data-theme="mint"] .action-btn svg { color: #41516b; }
body[data-theme="mint"] .action-btn.active svg { color: var(--accent); }
body[data-theme="mint"] .action-btn.active span em { color: var(--accent); }
body[data-theme="mint"] .action-btn span em { color: #748199; }

/* ── Dark butonlar (koyu glassmorphism) ───────────────────────── */
body[data-theme="dark"] .num-btn,
body[data-theme="dark"] .action-btn {
  background: var(--bg-2);
  border: 1px solid var(--grid-line-strong);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] .num-btn:hover,
body[data-theme="dark"] .action-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
  border-color: var(--accent);
  color: var(--accent);
}
body[data-theme="dark"] .num-btn:disabled,
body[data-theme="dark"] .action-btn:disabled {
  background: var(--bg-1);
  border-color: var(--grid-line);
  color: var(--ink-dim);
  opacity: 0.55;
}
body[data-theme="dark"] .action-btn svg { color: var(--ink-soft); }
body[data-theme="dark"] .action-btn.active svg { color: var(--accent); }
body[data-theme="dark"] .action-btn.active span em { color: var(--accent); }
body[data-theme="dark"] .action-btn span em { color: var(--ink-dim); }

/* Tutorial — tema değişkenleriyle otomatik adapte olur (cinematic + classic).
   Eski hardcoded override'lar artık gerekli değil; renkler --bg-*, --ink-*,
   --accent, --grid-line-* tokenları üstünden çözülür. */

/* Caption renkli kelimeler */
.tutorial__caption .kw-row   { color: var(--kw-row); font-weight: 700; }
.tutorial__caption .kw-col   { color: var(--kw-col); font-weight: 700; }
.tutorial__caption .kw-block { color: var(--kw-block); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   MOBİL — Portrait / Küçük Ekran  (≤ 767px)
   GD Shell ölçekleme yerine viewport-native tam ekran layout.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* GD bar: mobilde gizle */
  .gd-shell__bar { display: none !important; }

  /* GD shell + game-frame: mobilde viewport'u doldur (1280×720 sabit ezildi) */
  .gd-shell {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  .game-frame {
    width: 100% !important; height: 100% !important;
  }

  /* ── App container: --app-width 420px sabit → mobilde viewport'u taşırıyor.
        Tüm screen'ler app içinde olduğu için bu kritik fix. ─────────────── */
  .app {
    width: 100% !important;
    max-width: 100% !important;
  }
  .screen { width: 100% !important; }

  /* ── Tüm modaller: tam viewport ───────────────────────────── */
  .modal, .modal--fullscreen {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    transform: none !important;
  }

  /* ── Oyun ekranı: board boyutu viewport'a göre ────────────── */
  /* 4 yön safe area: portrait notch (üst/alt) + landscape notch (sol/sağ). */
  .screen--game {
    --sa-h: max(20px, env(safe-area-inset-top, 20px));
    --board-size: calc(100vw
      - max(28px, calc(env(safe-area-inset-left, 0px)  + 14px))
      - max(28px, calc(env(safe-area-inset-right, 0px) + 14px)));
    padding: 0;
    padding-top:    var(--sa-h);
    padding-bottom: 0;
    padding-left:   max(14px, env(safe-area-inset-left,  14px));
    padding-right:  max(14px, env(safe-area-inset-right, 14px));
    justify-content: flex-start;
  }

  /* ── Top-bar: sol/sağ safe area (landscape notch) ─────────── */
  .top-bar {
    padding-top: 0;
    margin-bottom: 4px;
    padding-left:  max(0px, env(safe-area-inset-left,  0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }

  /* ── Numpad: home indicator + landscape notch ─────────────── */
  .controls-stack {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    padding-left:   max(0px,  env(safe-area-inset-left,   0px));
    padding-right:  max(0px,  env(safe-area-inset-right,  0px));
  }

  /* ── Touch targets: min 44×44px (Apple HIG standardı) ────── */
  .action-btn {
    padding: 8px 4px;
    min-height: 44px;
  }
  .num-btn {
    min-height: 44px;
    font-size: 26px;
    padding: 4px 0;
  }
  .icon-btn {
    width: 44px; height: 44px;
  }
  .pause-btn {
    width: 40px; height: 40px;
  }

  /* ── Touch feedback: hover yerine :active ─────────────────── */
  .num-btn:hover { transform: none; background: transparent; }
  .num-btn:active { opacity: 0.55; transform: scale(0.92); }
  .action-btn:hover { background: transparent; }
  .action-btn:active { background: rgba(255,255,255,0.08); }
  .icon-btn:hover { background: transparent; }
  .icon-btn:active { background: rgba(255,255,255,0.08); }

  /* ── touch-action: 300ms gecikme + istenmeyen scroll'u önle ─ */
  .board, .cell,
  .num-btn, .action-btn,
  .icon-btn, .pause-btn,
  .theme-btn, .wpr__btn,
  .menu__primary, .menu__secondary,
  .diff-btn, .event-card {
    touch-action: manipulation;
  }

  /* ── Menü ekranı: 4 yön safe area ───────────────────────────── */
  .screen--menu {
    padding-top:    max(20px, env(safe-area-inset-top,    0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-left:   max(16px, env(safe-area-inset-left,   0px));
    padding-right:  max(16px, env(safe-area-inset-right,  0px));
  }

  /* ── Skorlar ekranı: 4 yön safe area (önceden yoktu) ──────── */
  .screen--scores {
    padding-top:    max(20px, env(safe-area-inset-top,    20px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    padding-left:   max(18px, env(safe-area-inset-left,   18px));
    padding-right:  max(18px, env(safe-area-inset-right,  18px));
  }

  /* ── Difficulty modal: 4 yön safe area ────────────────────── */
  .difficulty-card {
    padding-top:    max(16px, calc(env(safe-area-inset-top,    0px) + 12px));
    padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    padding-left:   max(20px, calc(env(safe-area-inset-left,   0px) + 16px));
    padding-right:  max(20px, calc(env(safe-area-inset-right,  0px) + 16px));
    align-items: flex-start;
  }
  .difficulty-card__inner {
    max-width: 100%;
    width: 100%;
  }

  /* ── Howto modal: dikey stack ─────────────────────────────── */
  /* Base CSS'te .howto-card display:grid (380px+1fr) → mobilde flex'e çevir.
     Stage üstte (grid + action + numpad), panel altta (başlık + dots + buton). */
  .howto-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    border-radius: 0;
    /* Üst: Dynamic Island / notch için safe area */
    padding-top:   max(16px, env(safe-area-inset-top,  0px));
    padding-bottom: 0;
    padding-left:   max(0px, env(safe-area-inset-left,  0px));
    padding-right:  max(0px, env(safe-area-inset-right, 0px));
    gap: clamp(12px, 4vh, 48px);
  }
  .howto-card__stage {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    width: 100%;
  }
  .howto-card__panel {
    flex-shrink: 0;
    width: 100%;
    padding: 14px 20px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    gap: 10px;
    border-top: 1px solid var(--grid-line);
  }
  .howto-card__title { font-size: 18px; }
  .tutorial__caption { font-size: 13px; min-height: auto; }

  /* Tutorial stage içi: sadece nav butonları ve Anladım tıklanabilir */
  .tutorial__grid,
  .tutorial__actions,
  .tutorial__numpad,
  .tutorial__topbar,
  .tutorial__overlay { pointer-events: none !important; }

  /* ── Tutorial stage/grid/overlay: 380px sabit → viewport'a sığsın ── */
  .tutorial__stage {
    width: 100%;
    max-width: min(380px, calc(100vw - 24px));
    gap: 6px;
  }
  .tutorial__grid {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .tutorial__cell { font-size: 18px; }
  .tutorial__overlay {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    top: auto;
  }
  .tutorial__numpad span { height: 32px; font-size: 18px; }
  .tutorial__action svg { width: 20px; height: 20px; }
  .tutorial__action span { font-size: 11px; }

  /* ── Board hücre font boyutu: biraz büyüt ─────────────────── */
  .cell { font-size: 20px; }

  /* ── Light tema: mobil arka plan görseli ──────────────────── */
  body[data-theme="light"] #game-frame {
    background-image:    url('images/light/light-back.png');
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
  }
  body[data-theme="light"] .loader {
    background-image:    url('images/light/light-back.png');
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
  }
  body[data-theme="light"] .modal--fullscreen {
    background-image:    url('images/light/light-back.png');
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
  }

}

/* ── DeepMint — tüm katmanlar şeffaf, body bg her yerden görünür.
   NOT: .modal--fullscreen burada YOK çünkü kendi bg görseliyle ana menüyü
   kapatması gerekir (line 1928'deki override). */
body[data-theme="mint"] .screen--menu,
body[data-theme="mint"] .screen--game,
body[data-theme="mint"] .screen--scores,
body[data-theme="mint"] .modal:not(.modal--fullscreen),
body[data-theme="mint"] .howto-card,
body[data-theme="mint"] .difficulty-card,
body[data-theme="mint"] .app { background: transparent !important; }
body[data-theme="dark"]  .howto-card__btn { background: var(--accent); color: #ffffff; }
body[data-theme="mint"]  .howto-card__btn { background: #0FA37A; }
body[data-theme="light"] .howto-card__btn { background: var(--accent); }
body[data-theme="mint"] .action-btn__badge { color: #ffffff !important; }
body[data-theme="light"] .tutorial__action-badge,
body[data-theme="dark"] .tutorial__action-badge,
body[data-theme="mint"] .tutorial__action-badge { color: #ffffff; }

/* ── DeepMint — yaprak animasyon katmanı (gelecek yaprak efektleri için) */
#mint-leaf-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
body[data-theme="mint"] #mint-leaf-layer { display: block; }

/* ── Dar ekranlar (≤ 380px): iPhone 6/7/8/SE2/9 ────────────── */
@media (max-width: 380px) {
  .screen--game { --board-size: calc(100vw - 20px); }
  .num-btn { font-size: 22px; }
  .cell { font-size: 18px; }
}

/* ── Çok dar ekranlar (≤ 320px): iPhone 4 / 5 / 5SE ─────────
   320×480 (iPhone 4) ve 320×568 (iPhone 5) için genişlik fix. */
@media (max-width: 320px) {
  .screen--game { --board-size: calc(100vw - 12px); }
  .num-btn   { font-size: 19px; min-height: 38px; padding: 2px 0; }
  .action-btn { min-height: 38px; font-size: 10px; padding: 4px 2px; }
  .cell      { font-size: 15px; }
  .top-bar   { gap: 4px; }
  /* Menü: event kartı biraz küçülsün */
  .event-card { padding: 12px 10px; }
  .menu__primary, .menu__secondary { font-size: 13px; }
}

/* ── Çok kısa ekranlar (≤ 568px yükseklik): iPhone 4 / 5 ────
   480 / 568px yükseklikte tüm içerik sığmalı — sıkıştır.     */
@media (max-height: 568px) and (max-width: 767px) {

  /* Oyun ekranı: üst padding minimuma in */
  .screen--game {
    padding-top: max(8px, env(safe-area-inset-top, 8px));
    gap: 0;
  }
  .top-bar    { margin-bottom: 2px; padding-bottom: 2px; }
  .status-row { padding: 2px 0; gap: 6px; font-size: 11px; }
  .status-row .status-label { font-size: 9px; }

  /* Butonlar: min yüksekliği düşür */
  .num-btn    { min-height: 36px; font-size: 20px; }
  .action-btn { min-height: 36px; }
  .controls-stack { padding-bottom: max(4px, env(safe-area-inset-bottom, 4px)); }

  /* Menü: dikey boşlukları kıs, scroll ekle */
  .screen--menu {
    padding-top: max(8px, env(safe-area-inset-top, 8px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    gap: 6px;
    overflow-y: auto;
  }
  .menu__spacer { height: 0; min-height: 0; }
  .event-card   { padding: 10px 12px; }

  /* Howto: stage küçük, içerik scroll edilebilir */
  .howto-card {
    gap: 6px;
    padding-top:    max(8px, env(safe-area-inset-top,  0px));
    padding-left:   max(0px, env(safe-area-inset-left, 0px));
    padding-right:  max(0px, env(safe-area-inset-right,0px));
    padding-bottom: 0;
    overflow-y: auto;
  }
  .tutorial__stage {
    max-width: min(260px, calc(100vw - 24px));
  }
  .tutorial__cell   { font-size: 14px; }
  .tutorial__numpad span { height: 26px; font-size: 14px; }
  .howto-card__panel { padding: 8px 14px; gap: 6px; }
  .howto-card__title { font-size: 15px; }
  .tutorial__caption { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET — iPad Mini / iPad Air / iPad Pro portrait (600–1024px)
   Telefon medya sorgusu (≤1024px) devreye giriyor ama tablet
   için board/app boyutları sınırlanmalı.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1024px) {

  /* ── App: okunabilir max genişlik, yatayda ortala ─────────── */
  .app {
    max-width: 560px !important;
  }

  /* ── Oyun ekranı: board çok büyük olmasın ─────────────────── */
  .screen--game {
    --board-size: min(520px, calc(100vw - 60px));
    padding: 10px 30px 8px;
    justify-content: center;
  }

  /* ── Menü ekranı: içeriği dikeyde dengeli dağıt ──────────── */
  .screen--menu {
    justify-content: center;
    gap: 18px;
    padding-top:    max(32px, env(safe-area-inset-top,    0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    padding-left:   max(24px, env(safe-area-inset-left,   0px));
    padding-right:  max(24px, env(safe-area-inset-right,  0px));
  }
  .menu__spacer { display: none; } /* fazladan boşluğu kaldır */

  /* ── Howto: tablet'te grid daha büyük olabilir ────────────── */
  .tutorial__stage {
    max-width: min(480px, calc(100vw - 60px));
  }
  .howto-card {
    gap: clamp(20px, 3vh, 48px);
  }

  /* ── Numpad & action butonları: tablet için biraz büyüt ───── */
  .num-btn { font-size: 28px; min-height: 52px; }
  .action-btn { min-height: 52px; }
  .cell { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   16:9 KÜÇÜK EKRAN OPTİMİZASYONU
   iPhone 6/7/8 (375×667) · Plus serisi (414×736)
   iPhone SE 1st/2nd · iPhone 5/5S/5C (320×568)
   iPhone 4/4S (320×480)
   ═══════════════════════════════════════════════════════════

   KATMAN 1A — iPhone Plus serisi (yükseklik 681–736px, genişlik ≤440px)
   Orta sıkıştırma: gap & padding azalt, spacer sıfırla.
   ─────────────────────────────────────────────────────── */
@media (max-height: 736px) and (min-height: 681px) and (max-width: 440px) {

  /* ── Menü ──────────────────────────────────────────────── */
  .screen--menu {
    gap: 8px;
    padding-top:    max(10px, env(safe-area-inset-top,    10px));
    padding-bottom: max(8px,  env(safe-area-inset-bottom, 8px));
    padding-left:   max(14px, env(safe-area-inset-left,   14px));
    padding-right:  max(14px, env(safe-area-inset-right,  14px));
    overflow-y: auto;
    justify-content: flex-start;
  }
  .menu__spacer { height: 0 !important; min-height: 0; }
  .best-score   { padding: 8px 14px; }
  .menu__actions { gap: 6px; }
  .menu__primary { padding: 12px 18px; }
  .event-card   { padding: 10px 12px; min-height: unset; }
  .event-card--daily { padding: 18px 12px 12px !important; gap: 16px !important; }

  /* ── Tutorial ──────────────────────────────────────────── */
  .howto-card {
    gap: 6px !important;
    justify-content: flex-start !important;
    overflow-y: auto;
  }
  .tutorial__stage    { max-width: min(320px, calc(100vw - 20px)); }
  .tutorial__pointer  { --tp-size: 52px; }
  .howto-card__panel  { padding: 10px 16px; gap: 8px; }
  .howto-card__title  { font-size: 17px; }
  .tutorial__caption  { font-size: 12px; min-height: auto; }
}

/* ─────────────────────────────────────────────────────────
   KATMAN 1B — iPhone 6/7/8 (yükseklik 620–680px, genişlik ≤440px)
   Kullanılabilir yükseklik ≈587px. Grid'i 260px'e indirerek
   taşmayı gider; panel başlığını yukarı çek.
   ─────────────────────────────────────────────────────── */
@media (max-height: 680px) and (min-height: 569px) and (max-width: 440px) {

  /* ── Menü ──────────────────────────────────────────────── */
  .screen--menu {
    gap: 8px;
    padding-top:    max(10px, env(safe-area-inset-top,    10px));
    padding-bottom: max(8px,  env(safe-area-inset-bottom, 8px));
    padding-left:   max(14px, env(safe-area-inset-left,   14px));
    padding-right:  max(14px, env(safe-area-inset-right,  14px));
    overflow-y: auto;
    justify-content: flex-start;
  }
  .menu__spacer  { height: 0 !important; min-height: 0; }
  .best-score    { padding: 8px 14px; }
  .menu__actions { gap: 6px; }
  .menu__primary { padding: 12px 18px; }
  .event-card    { padding: 10px 12px; min-height: unset; }
  .event-card--daily { padding: 18px 12px 12px !important; gap: 14px !important; }

  /* ── Tutorial: kritik sıkıştırma ──────────────────────── */
  /* justify-content:flex-start → içerik her zaman üstten başlar,
     ilk açılış ile sonraki açılışlar arasındaki kayma önlenir.  */
  .howto-card {
    gap: 4px !important;
    justify-content: flex-start !important;
    overflow-y: auto;
    padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
  }
  /* Stage: 260px grid → yükseklik 260px (toplam stage ≈390px) */
  .tutorial__stage    { max-width: min(260px, calc(100vw - 16px)); }
  .tutorial__pointer  { --tp-size: 48px; }
  .tutorial__cell     { font-size: 15px; }
  .tutorial__numpad span { height: 28px; font-size: 15px; }
  .tutorial__topbar   { padding: 4px 4px 6px; }

  /* Panel: başlığı yukarı taşı, iç boşlukları kıs */
  .howto-card__panel  { padding: 6px 14px 10px; gap: 6px; }
  .howto-card__title  { font-size: 16px; margin: 0; }
  .tutorial__caption  { font-size: 11px; min-height: auto; line-height: 1.4; }
  .howto-card__btn    { padding: 10px 28px; font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────
   KATMAN 2 — iPhone 5/5S/SE (320×568px) · genişlik ≤375px
   Mevcut max-height:568px sorgusunu genişlet + menü fix.
   ─────────────────────────────────────────────────────── */
@media (max-height: 568px) and (max-width: 375px) {

  /* ── Menü: agresif sıkıştırma ─────────────────────────── */
  .screen--menu {
    gap: 6px;
    padding-top:    max(8px, env(safe-area-inset-top,    8px));
    padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
    padding-left:   max(12px, env(safe-area-inset-left,  12px));
    padding-right:  max(12px, env(safe-area-inset-right, 12px));
    overflow-y: auto;
    justify-content: flex-start;
  }
  .menu__spacer { display: none !important; }

  /* Logo / başlık */
  .menu__pin-mint-title { font-size: 22px; letter-spacing: 2px; }
  .menu__pin-mint       { height: 6px; }

  /* Best score kartı */
  .best-score           { padding: 6px 12px; gap: 2px; }
  .best-score__label    { font-size: 9px; }
  .best-score__value    { font-size: 18px; }
  .best-score__stats    { display: none; } /* dikey yer kazanımı */

  /* CTA butonları */
  .menu__actions  { gap: 4px; }
  .menu__primary  { padding: 10px 16px; font-size: 14px; letter-spacing: 2px; }
  .menu__secondary { padding: 7px 12px; font-size: 13px; }

  /* Event kart */
  .event-card            { min-height: unset; padding: 8px 10px; }
  .event-card--daily     { padding: 14px 10px 10px !important; gap: 12px !important; }
  .event-card__title     { font-size: 18px; }
  .event-card__sub       { font-size: 10px; }
  .event-card__streak-label { padding: 5px 16px; font-size: 11px; }

  /* ── Tutorial: daha küçük grid + sıkışık panel ─────────── */
  .howto-card { gap: 4px !important; }
  .tutorial__stage {
    max-width: min(280px, calc(100vw - 20px));
  }
  .tutorial__pointer    { --tp-size: 48px; }
  .tutorial__cell       { font-size: 14px; }
  .tutorial__numpad span { height: 26px; font-size: 13px; }
  .howto-card__panel    { padding: 6px 14px; gap: 4px; }
  .howto-card__title    { font-size: 14px; }
  .tutorial__caption    { font-size: 10px; min-height: auto; }
  .howto-card__btn      { padding: 8px 20px; font-size: 12px; }
}

/* ─────────────────────────────────────────────────────────
   KATMAN 3 — iPhone 4/4S (320×480px) · yükseklik ≤480px
   En agresif sıkıştırma; scroll zorunlu.
   ─────────────────────────────────────────────────────── */
@media (max-height: 480px) and (max-width: 375px) {

  /* ── Menü ─────────────────────────────────────────────── */
  .screen--menu {
    gap: 4px;
    padding-top:    max(6px, env(safe-area-inset-top,  6px));
    padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
    padding-left:   max(10px, env(safe-area-inset-left, 10px));
    padding-right:  max(10px, env(safe-area-inset-right, 10px));
    overflow-y: auto;
    justify-content: flex-start;
  }
  .menu__spacer        { display: none !important; }
  .menu__pin-mint-title { font-size: 20px; letter-spacing: 2px; }
  .best-score          { padding: 4px 10px; }
  .best-score__value   { font-size: 16px; }
  .best-score__stats   { display: none; }
  .menu__actions       { gap: 3px; }
  .menu__primary       { padding: 8px 14px; font-size: 13px; letter-spacing: 1.5px; }
  .menu__secondary     { padding: 6px 12px; font-size: 12px; }
  .event-card--daily   { padding: 10px 10px 8px !important; gap: 8px !important; }
  .event-card__title   { font-size: 16px; }

  /* ── Tutorial ─────────────────────────────────────────── */
  .howto-card         { gap: 3px !important; }
  .tutorial__stage    { max-width: min(240px, calc(100vw - 16px)); }
  .tutorial__pointer  { --tp-size: 40px; }
  .tutorial__cell     { font-size: 13px; }
  .tutorial__numpad span { height: 22px; font-size: 12px; }
  .howto-card__panel  { padding: 4px 12px; gap: 3px; }
  .howto-card__title  { font-size: 13px; }
  .tutorial__caption  { font-size: 9px; min-height: auto; }
  .howto-card__btn    { padding: 6px 16px; font-size: 11px; }
}

/* =========================================================
   LAVENDER TEMA
   ========================================================= */

/* ── CSS Değişkenleri ─────────────────────────────────────── */
body[data-theme="lavender"] {
  --bg-0:             #F8F5FF;
  --bg-1:             #F8F5FF;
  --bg-2:             #FFFFFF;
  --ink:              #282434;
  --ink-soft:         #81798F;
  --ink-dim:          #B0A8C0;
  --accent:           #9B7DD8;
  --accent-dk:        #7657B8;
  --accent-glow:      rgba(155, 125, 216, 0.25);
  --gold:             #C9A84C;
  --danger:           #D46A7A;
  --success:          #78A88A;
  --grid-line:        rgba(155, 125, 216, 0.15);
  --grid-line-strong: #C9BEDF;
  --cell-bg:          #FFFFFF;
  --cell-hl:          rgba(155, 125, 216, 0.08);
  --cell-sel:         #EEE7FF;
  --cell-same:        #D9CFFA;
  --hl-row:           rgba(201, 160, 76, 0.28);
  --hl-col:           rgba(212, 106, 122, 0.28);
  --hl-block:         rgba(120, 168, 138, 0.22);
  --hl-row-col:       rgba(200, 120, 140, 0.45);
  --shadow-lg:        0 12px 40px rgba(40, 36, 52, 0.12);
}

/* ── Şeffaf ekranlar (background image görünsün) ─────────── */
body[data-theme="lavender"] .screen--menu,
body[data-theme="lavender"] .screen--game,
body[data-theme="lavender"] .screen--scores,
body[data-theme="lavender"] .modal:not(.modal--fullscreen),
body[data-theme="lavender"] .howto-card,
body[data-theme="lavender"] .difficulty-card,
body[data-theme="lavender"] .app { background: transparent !important; }

/* ── Arka plan görseli ───────────────────────────────────── */
body[data-theme="lavender"] #game-frame {
  background-image:    url('images/lavender/lavender-back.png') !important;
  background-size:     cover !important;
  background-position: center !important;
  background-repeat:   no-repeat !important;
}
body[data-theme="lavender"] .loader {
  background: url('images/lavender/lavender-back.png') center / cover no-repeat;
}
body[data-theme="lavender"] .modal--fullscreen {
  background: url('images/lavender/lavender-back.png') center / cover no-repeat !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* ── Loader ──────────────────────────────────────────────── */
/* 1: SUDOKU yazısı — Yeni Oyun butonuyla aynı renk (#9B7DD8) */
html[data-theme-preload="lavender"] .loader__title,
body[data-theme="lavender"] .loader__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 40px; letter-spacing: 3px; color: #9B7DD8;
  animation: classic-sudoku-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0s;
}
body[data-theme="lavender"] .loader__subtitle { display: none; }

/* 2: PinGames logosu — light modla aynı boyut ve pozisyon */
.loader__pin--lavender { display: none; }
body[data-theme="lavender"] .loader__pin--dark,
body[data-theme="lavender"] .loader__pin--mint,
body[data-theme="lavender"] .loader__pin--light { display: none; }
html[data-theme-preload="lavender"] .loader__pin--lavender,
body[data-theme="lavender"] .loader__pin--lavender {
  display: block;
  height: 12px; width: auto; margin: 0;
  opacity: 0;
  animation: classic-fade-up 0.4s ease both;
  animation-delay: 1s;
}

/* Loader dots — lavender tonları */
html[data-theme-preload="lavender"] .loader__dots,
body[data-theme="lavender"] .loader__dots {
  opacity: 0; animation: classic-fade-up 0.4s ease both; animation-delay: 1s;
}
body[data-theme="lavender"] .loader__dots span:nth-child(1) {
  background: #C9BEDF;
  animation: dot-bounce-lav1 1.2s ease-in-out infinite;
}
body[data-theme="lavender"] .loader__dots span:nth-child(2) {
  background: #9B7DD8;
  animation: dot-bounce-lav2 1.2s ease-in-out infinite; animation-delay: 0.2s;
}
body[data-theme="lavender"] .loader__dots span:nth-child(3) {
  background: #7657B8;
  animation: dot-bounce-lav3 1.2s ease-in-out infinite; animation-delay: 0.4s;
}
@keyframes dot-bounce-lav1 {
  0%,100% { opacity: 0.35; transform: translateY(0);    background: #C9BEDF; }
  50%     { opacity: 1;    transform: translateY(-4px); background: #DDD6F3; }
}
@keyframes dot-bounce-lav2 {
  0%,100% { opacity: 0.35; transform: translateY(0);    background: #9B7DD8; }
  50%     { opacity: 1;    transform: translateY(-4px); background: #B49DE8; }
}
@keyframes dot-bounce-lav3 {
  0%,100% { opacity: 0.35; transform: translateY(0);    background: #7657B8; }
  50%     { opacity: 1;    transform: translateY(-4px); background: #9B7DD8; }
}

/* 3: 2,4,6,8 rakamları — Yeni Oyun butonuyla aynı renk */
html[data-theme-preload="lavender"] .logo__digits .is-accent,
body[data-theme="lavender"] .logo__digits .is-accent { fill: #9B7DD8; }

/* Kilitleme animasyonu — lavender glow */
@keyframes digit-lock-accent-lavender {
  0%   { transform: scale(1.52); opacity: 1; text-shadow: 0 0 18px rgba(155, 125, 216, 0.95); }
  55%  { text-shadow: 0 0 8px rgba(155, 125, 216, 0.45); }
  100% { transform: scale(1);    opacity: 1; text-shadow: none; }
}
html[data-theme-preload="lavender"] .logo__d.is-accent.is-locking,
body[data-theme="lavender"] .logo__d.is-accent.is-locking {
  animation: digit-lock-accent-lavender 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── 1&2: SUDOKU yazısı + pin-lavender logo (light modla aynı yapı) ── */
body[data-theme="lavender"] .menu__title,
body[data-theme="lavender"] .menu__subtitle { display: none; }
body[data-theme="lavender"] .menu__pin-mint-wrap { display: flex; }
body[data-theme="lavender"] .menu__pin-mint-title { color: #9B7DD8; }
/* Diğer pin'leri gizle, sadece lavender göster */
body[data-theme="lavender"] .menu__pin-mint--deepmint,
body[data-theme="lavender"] .menu__pin-mint--light,
body[data-theme="lavender"] .menu__pin-mint--dark    { display: none; }
body[data-theme="lavender"] .menu__pin-mint--lavender { display: block; }

/* ── Günlük takvim ikonu ─────────────────────────────────── */
body[data-theme="lavender"] .event-card__icon-cal--mint,
body[data-theme="lavender"] .event-card__icon-cal--dark,
body[data-theme="lavender"] .event-card__icon-cal--light   { display: none; }
body[data-theme="lavender"] .event-card__icon-cal--lavender { display: block; }

/* ── 3: Lavender-icon — pasifken arka plan yok, aktifken beyaz çember ── */
.theme-btn--lavender {
  background: none;
  border: none; border-radius: 50%;
  padding: 3px; cursor: pointer;
  box-shadow: none;
}
.theme-btn--lavender.active {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(155, 125, 216, 0.30);
}

/* ── Board & Grid ────────────────────────────────────────── */
body[data-theme="lavender"] .board {
  background: #FFFFFF;
  border-color: #C9BEDF;
  box-shadow: 0 4px 24px rgba(155, 125, 216, 0.15);
}
body[data-theme="lavender"] .cell {
  background: var(--cell-bg);
  color: var(--ink);
  border-color: var(--grid-line);
}
body[data-theme="lavender"] .cell.prefilled { color: var(--ink); font-weight: 700; }
body[data-theme="lavender"] .cell.user      { color: var(--accent); font-weight: 700; }
body[data-theme="lavender"] .cell.user.is-settled { color: var(--ink); font-weight: 700; }
body[data-theme="lavender"] .cell.error {
  background: rgba(212, 106, 122, 0.14);
  color: var(--danger) !important;
}
body[data-theme="lavender"] .cell.selected {
  background: #EEE7FF;
  box-shadow: none;
}
body[data-theme="lavender"] .cell.selected::before {
  content: '';
  position: absolute; inset: 0; padding: 2px;
  background: linear-gradient(315deg, #7657B8, #9B7DD8, #C9BEDF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; z-index: 2;
}
body[data-theme="lavender"] .cell.same {
  background: #D9CFFA; box-shadow: none;
}
body[data-theme="lavender"] .cell.peer,
body[data-theme="lavender"] .cell.block-locked {
  background: rgba(155, 125, 216, 0.08);
}

/* ── Menü bileşenleri ────────────────────────────────────── */
body[data-theme="lavender"] .menu__primary {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px rgba(155, 125, 216, 0.30);
}
body[data-theme="lavender"] .menu__primary:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(155, 125, 216, 0.40);
}
body[data-theme="lavender"] .menu__secondary {
  background: #F0EBFF; border-color: #C9BEDF;
  box-shadow: 0 1px 3px rgba(40, 36, 52, 0.06);
}
body[data-theme="lavender"] .menu__secondary:hover { background: #E4DAFF; }
body[data-theme="lavender"] .best-score {
  background: #ffffff; border-color: #E2DDF0;
  box-shadow: 0 1px 3px rgba(40, 36, 52, 0.06);
}

/* ── Daily kart — light tema ile birebir aynı yapı ──────── */
body[data-theme="lavender"] .event-card--daily {
  background: #ffffff; border: 2.5px solid #E2DDF0; box-shadow: none;
  align-items: stretch; text-align: left;
  width: 100%; min-height: unset;
  padding: 28px 14px 15px; gap: 30px;
}
body[data-theme="lavender"] .event-card--daily .event-card__head {
  flex-direction: row; align-items: center; gap: 7px;
}
body[data-theme="lavender"] .event-card--daily .event-card__main {
  flex-direction: row; align-items: stretch; justify-content: space-between; gap: 8px; flex: 1;
}
body[data-theme="lavender"] .event-card--daily .event-card__text {
  align-items: flex-start; flex: 1;
}
body[data-theme="lavender"] .event-card--daily .event-card__label {
  color: var(--ink); font-size: 13px; letter-spacing: 1.8px; position: relative; top: 2px;
}
body[data-theme="lavender"] .event-card--daily .event-card__title { color: var(--ink); }
body[data-theme="lavender"] .event-card--daily .event-card__sub {
  display: block; font-size: 12px; color: var(--ink-soft); opacity: 0.85;
}
body[data-theme="lavender"] .event-card--daily .event-card__streak-label {
  background: var(--accent); box-shadow: none; color: #ffffff; margin-top: auto;
}
/* lavender-gift.png göster, diğerlerini gizle */
body[data-theme="lavender"] .event-card__gift--mint,
body[data-theme="lavender"] .event-card__gift--dark,
body[data-theme="lavender"] .event-card__gift--light    { display: none; }
body[data-theme="lavender"] .event-card__gift--lavender { display: block; }

/* ── Difficulty modal ────────────────────────────────────── */
body[data-theme="lavender"] .difficulty-card { align-items: flex-start; padding-top: 16px; }
body[data-theme="lavender"] .difficulty-card__title { font-size: 28px; margin-top: 2px; width: 100%; }
body[data-theme="lavender"] .difficulty-card__sub   { margin-top: -6px; }
body[data-theme="lavender"] .diff-btn {
  background: rgba(255, 255, 255, 0.70); border: 1px solid #E2DDF0;
}
body[data-theme="lavender"] .diff-btn:hover,
body[data-theme="lavender"] .diff-btn:focus-visible {
  background: rgba(255, 255, 255, 0.90); border-color: #C9BEDF;
}
body[data-theme="lavender"] .diff-btn__dot {
  background: rgba(155, 125, 216, 0.12); border-color: rgba(155, 125, 216, 0.22);
}
body[data-theme="lavender"] .diff-btn__dot.is-filled {
  background: var(--diff-color, var(--accent));
  border-color: var(--diff-color, var(--accent));
  box-shadow: 0 0 5px color-mix(in srgb, var(--diff-color, var(--accent)) 45%, transparent);
}
body[data-theme="lavender"] .diff-btn__chevron { color: rgba(40, 36, 52, 0.35); }
body[data-theme="lavender"] .diff-btn__png-icon { display: block; }

/* ── Hint panel ─────────────────────────────────────────── */
body[data-theme="lavender"] .hint-panel {
  background: rgba(248, 245, 255, 0.97);
  border-color: #C5B8E8;
  color: var(--ink);
  box-shadow: 0 8px 32px rgba(40, 36, 52, 0.14);
}
body[data-theme="lavender"] .hint-panel__title { color: var(--ink); }
body[data-theme="lavender"] .hint-panel__text  { color: var(--ink-soft); }
body[data-theme="lavender"] .hint-panel__text b { color: var(--accent); }
body[data-theme="lavender"] .hint-nav  { color: var(--accent); }
body[data-theme="lavender"] .hint-nav:hover:not(:disabled) { background: rgba(155,125,216,0.12); }
body[data-theme="lavender"] .hint-done { color: var(--accent); }
body[data-theme="lavender"] .hint-done:hover { background: rgba(155,125,216,0.12); }
body[data-theme="lavender"] .hint-dots .dot { background: var(--ink-dim); }
body[data-theme="lavender"] .hint-dots .dot.active { background: var(--accent); }

/* ── Hint hücreleri ─────────────────────────────────────── */
body[data-theme="lavender"] .cell.hint-line   { background: rgba(155,125,216,0.10); }
body[data-theme="lavender"] .cell.hint-target {
  background: rgba(155,125,216,0.18);
  box-shadow: inset 0 0 0 2px rgba(155,125,216,0.80);
}
body[data-theme="lavender"] .hint-outline {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(155,125,216,0.25), inset 0 0 0 1px rgba(155,125,216,0.30);
}
/* ── Hint ile yerleştirilen rakam: ink rengi, kalın, animasyon ── */
body[data-theme="lavender"] .cell.hinted      { color: var(--ink); font-weight: 700; }
body[data-theme="lavender"] .cell.hint-reveal { font-weight: 700; animation: hint-reveal-fade-lavender 1s ease forwards; }
@keyframes hint-reveal-fade-lavender {
  0%   { color: var(--accent); }
  100% { color: var(--ink); }
}

body[data-theme="lavender"] .modal__btn--ghost {
  background: var(--accent); color: #ffffff; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(155, 125, 216, 0.30);
}
body[data-theme="lavender"] .modal__btn--ghost:hover {
  filter: brightness(1.08); transform: translateY(-1px);
}

/* ── Numpad ──────────────────────────────────────────────── */
body[data-theme="lavender"] .num-btn {
  background: #ffffff; border: 1px solid #E2DDF0; color: var(--accent);
}
body[data-theme="lavender"] .num-btn:hover { background: #F0EBFF; }
body[data-theme="lavender"] .num-btn:active { background: #E4DAFF; }

/* ── Pause, Quit panelleri ───────────────────────────────── */
body[data-theme="lavender"] .pause-resume-btn {
  background: var(--accent); color: #ffffff; border: none;
  box-shadow: 0 4px 16px rgba(155, 125, 216, 0.30);
}
body[data-theme="lavender"] .quit-panel {
  background: rgba(248, 245, 255, 0.97); border: 1px solid #E2DDF0;
}
body[data-theme="lavender"] .quit-panel__btn--leave { background: var(--danger); }
body[data-theme="lavender"] .quit-panel__btn--stay  { background: var(--accent); }
body[data-theme="lavender"] .pause-reward {
  background: rgba(155, 125, 216, 0.06); border-color: rgba(155, 125, 216, 0.20);
}
body[data-theme="lavender"] .pause-reward__btn { background: var(--accent); color: #ffffff; }
body[data-theme="lavender"] .pause-reward__btn:disabled {
  background: #F0EBFF; border: 1px solid #E2DDF0; color: var(--ink-soft);
  opacity: 1; cursor: not-allowed;
}

/* ── Win / Game-Over panelleri ───────────────────────────── */
body[data-theme="lavender"] .win-panel {
  background: rgba(248, 245, 255, 0.65);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border-color: rgba(155, 125, 216, 0.20);
}
body[data-theme="lavender"] .wpr--score-lbl,
body[data-theme="lavender"] .wpr--breakdown li { color: var(--ink); }
body[data-theme="lavender"] .wpr__score-val { color: var(--accent); text-shadow: none; }
body[data-theme="lavender"] .wpr--breakdown { border-color: rgba(155, 125, 216, 0.15); }
body[data-theme="lavender"] .wpr--actions   { border-color: rgba(155, 125, 216, 0.15); }
body[data-theme="lavender"] .wpr--daily-progress { border-color: rgba(155, 125, 216, 0.15); }
body[data-theme="lavender"] .dp__track { background: rgba(155, 125, 216, 0.12); }
body[data-theme="lavender"] .wpr__btn {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px rgba(155, 125, 216, 0.30);
}
body[data-theme="lavender"] .wpr__btn--ghost {
  background: #ffffff; color: var(--ink); border: 1px solid #E2DDF0; box-shadow: none;
}
body[data-theme="lavender"] .wpr__btn--ghost:hover { background: #F0EBFF; }
body[data-theme="lavender"] .go-panel {
  background: rgba(248, 245, 255, 0.97); border-color: #E2DDF0;
}
body[data-theme="lavender"] .wpr__btn--retry { background: var(--accent); color: #ffffff; }
body[data-theme="lavender"] .wpr__btn--menu {
  background: #ffffff; border: 1px solid #E2DDF0; color: var(--ink-soft);
}
body[data-theme="lavender"] .wpr__btn--menu:hover { background: #F0EBFF; }

/* ── Dil pickeri ─────────────────────────────────────────── */
body[data-theme="lavender"] .lang-picker__btn {
  background: #ffffff; border-color: rgba(155, 125, 216, 0.20);
  color: var(--ink-soft);
}
body[data-theme="lavender"] .lang-picker__btn:hover { color: var(--accent); border-color: var(--accent); }
body[data-theme="lavender"] .lang-picker__dropdown {
  background: #F6F1FF;
  border-color: #E2DDF0;
  box-shadow: 0 4px 16px rgba(40, 36, 52, 0.12);
}
body[data-theme="lavender"] .lang-option { color: var(--ink); }
body[data-theme="lavender"] .lang-option:hover { background: #EEE7FF; color: var(--ink); }
body[data-theme="lavender"] .lang-option.active { background: var(--accent); color: #ffffff; }

/* ── Daily slot overlay ──────────────────────────────────── */
body[data-theme="lavender"] .daily-slot__box {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(155, 125, 216, 0.14);
  box-shadow: 0 20px 60px rgba(40, 36, 52, 0.15);
}

/* ── Howto modal ─────────────────────────────────────────── */
body[data-theme="lavender"] .howto-card__btn { background: var(--accent); }
body[data-theme="lavender"] .tutorial__action-badge { color: #ffffff; }

/* ── Settings panel ──────────────────────────────────────── */
body[data-theme="lavender"] .settings-panel {
  background: rgba(248, 245, 255, 0.97); border-color: #E2DDF0;
}

/* ── Scores ekranı ───────────────────────────────────────── */
body[data-theme="lavender"] .scores-tab.active { border-color: var(--accent); color: var(--accent); }
body[data-theme="lavender"] .score-entry.mine  { background: rgba(155, 125, 216, 0.08); }
body[data-theme="lavender"] .scores__stats {
  background: #ffffff; border-color: #E2DDF0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(40, 36, 52, 0.06);
}
body[data-theme="lavender"] .scores__list {
  background: #ffffff; border-color: #E2DDF0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="lavender"] .score-tab {
  background: #ffffff; border-color: #E2DDF0;
  box-shadow: none; color: var(--ink);
}
body[data-theme="lavender"] .score-tab.active {
  background: rgba(155, 125, 216, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
body[data-theme="lavender"] .scores__stat  { border-right-color: #EDE8F7; }
body[data-theme="lavender"] .scores__stat-label { color: var(--ink-soft); }
body[data-theme="lavender"] .scores__stat-sub   { color: var(--ink-dim); }
body[data-theme="lavender"] .score-row { border-bottom-color: #EDE8F7; }
body[data-theme="lavender"] .score-row.mine { background: rgba(155, 125, 216, 0.05); }
body[data-theme="lavender"] .score-row__score { color: var(--accent); }
body[data-theme="lavender"] .status-row { border-color: #E2DDF0; }
body[data-theme="lavender"] .scores__winner-img { opacity: 1; }
body[data-theme="lavender"] .scores__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: 3px;
}

/* ── Menü spacer & genel yazı renkleri ──────────────────── */
body[data-theme="lavender"] .menu__spacer { height: 30px; }
body[data-theme="lavender"] .menu__title,
body[data-theme="lavender"] .scores__title { color: var(--ink); }
body[data-theme="lavender"] .menu__subtitle,
body[data-theme="lavender"] .menu__label  { color: var(--ink-soft); }
body[data-theme="lavender"] .menu__link   { color: var(--ink-soft); }
body[data-theme="lavender"] .menu__link:hover { color: var(--accent); }

/* ── Pause btn, theme picker, theme toggle, best-score ──── */
body[data-theme="lavender"] .pause-btn,
body[data-theme="lavender"] .theme-picker__btn,
body[data-theme="lavender"] .theme-toggle {
  background: #ffffff; border-color: #E2DDF0; backdrop-filter: none;
}
body[data-theme="lavender"] .best-score__label { color: var(--ink-soft); }
body[data-theme="lavender"] .best-score__value { color: var(--accent); text-shadow: none; }
body[data-theme="lavender"] .best-score__stat-val { color: var(--ink); }
body[data-theme="lavender"] .best-score__stat-lbl { color: var(--ink-dim); }
body[data-theme="lavender"] .best-score__stats { border-top-color: var(--grid-line); }

/* ── Theme picker dropdown ───────────────────────────────── */
body[data-theme="lavender"] .theme-picker__dropdown {
  background: rgba(255, 255, 255, 0.96);
  border-color: #E2DDF0;
  box-shadow: 0 4px 16px rgba(40, 36, 52, 0.12);
}
body[data-theme="lavender"] .theme-btn { color: var(--ink-soft); }
body[data-theme="lavender"] .theme-btn:hover { background: rgba(155, 125, 216, 0.08); color: var(--accent); }
body[data-theme="lavender"] .theme-btn.active { color: #ffffff; box-shadow: 0 2px 8px var(--accent-glow); }

/* ── Hover efektleri ─────────────────────────────────────── */
body[data-theme="lavender"] .event-card--daily:hover,
body[data-theme="lavender"] .best-score:hover,
body[data-theme="lavender"] .best-score:focus-visible,
body[data-theme="lavender"] .menu__secondary:hover,
body[data-theme="lavender"] .menu__secondary:focus-visible {
  filter: none; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(155, 125, 216, 0.18);
}

/* ── Numpad + action btn (tam light mirror) ──────────────── */
body[data-theme="lavender"] .num-btn,
body[data-theme="lavender"] .action-btn {
  background: #ffffff; border: 1px solid #E2DDF0; color: var(--ink);
}
body[data-theme="lavender"] .num-btn:hover,
body[data-theme="lavender"] .action-btn:hover {
  background: #F0EBFF; border-color: var(--accent); color: var(--accent);
}
body[data-theme="lavender"] .num-btn:disabled,
body[data-theme="lavender"] .action-btn:disabled {
  background: #F8F5FF; border-color: #EDE8F7; color: var(--ink-dim);
}

/* ── Modal ───────────────────────────────────────────────── */
body[data-theme="lavender"] .modal__card {
  background: #ffffff; border-color: rgba(155, 125, 216, 0.14); color: var(--ink);
}
body[data-theme="lavender"] .modal__actions {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 55%, transparent);
}
body[data-theme="lavender"] .modal__text  { color: var(--ink-soft); }
body[data-theme="lavender"] .modal__title { color: var(--ink); }
body[data-theme="lavender"] .modal__stats {
  background: #F4F0FC; border-color: rgba(155, 125, 216, 0.10);
}
body[data-theme="lavender"] .modal__stat-value { color: var(--ink); }
body[data-theme="lavender"] .modal__stat-label { color: var(--ink-dim); }

/* ── Pause panel ─────────────────────────────────────────── */
body[data-theme="lavender"] .pause-panel {
  background: rgba(248, 245, 255, 0.94); border-color: #E2DDF0;
}
body[data-theme="lavender"] .pause-panel__head { border-color: #E2DDF0; }
body[data-theme="lavender"] .pause-panel__foot { border-color: #E2DDF0; }
body[data-theme="lavender"] .pause-panel__score { color: var(--accent); text-shadow: none; }

/* =========================================================
   SAKURA TEMA
   ========================================================= */

/* ── CSS Değişkenleri ─────────────────────────────────────── */
body[data-theme="sakura"] {
  --bg-0:             #FFF7F8;
  --bg-1:             #FFF7F8;
  --bg-2:             #FFFFFF;
  --ink:              #2B2B35;
  --ink-soft:         #8A7C84;
  --ink-dim:          #B8A8B0;
  --accent:           #E888A3;
  --accent-dk:        #C95F7D;
  --accent-glow:      rgba(232, 136, 163, 0.25);
  --gold:             #C9A84C;
  --danger:           #D66A6A;
  --success:          #78A88A;
  --grid-line:        rgba(232, 136, 163, 0.15);
  --grid-line-strong: #D7B8C4;
  --cell-bg:          #FFFFFF;
  --cell-hl:          rgba(232, 136, 163, 0.08);
  --cell-sel:         #F8DDE5;
  --cell-same:        #F5C4D5;
  --hl-row:           rgba(201, 160, 76, 0.28);
  --hl-col:           rgba(214, 106, 106, 0.28);
  --hl-block:         rgba(120, 168, 138, 0.22);
  --hl-row-col:       rgba(210, 110, 130, 0.45);
  --shadow-lg:        0 12px 40px rgba(43, 43, 53, 0.12);
}

/* ── Şeffaf ekranlar ─────────────────────────────────────── */
body[data-theme="sakura"] .screen--menu,
body[data-theme="sakura"] .screen--game,
body[data-theme="sakura"] .screen--scores,
body[data-theme="sakura"] .modal:not(.modal--fullscreen),
body[data-theme="sakura"] .howto-card,
body[data-theme="sakura"] .difficulty-card,
body[data-theme="sakura"] .app { background: transparent !important; }

/* ── Arka plan görseli ───────────────────────────────────── */
body[data-theme="sakura"] #game-frame {
  background-image:    url('images/sakura/sakura-back.png') !important;
  background-size:     cover !important;
  background-position: center !important;
  background-repeat:   no-repeat !important;
}
body[data-theme="sakura"] .loader {
  background: url('images/sakura/sakura-back.png') center / cover no-repeat;
}
body[data-theme="sakura"] .modal--fullscreen {
  background: url('images/sakura/sakura-back.png') center / cover no-repeat !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* ── Loader ──────────────────────────────────────────────── */
html[data-theme-preload="sakura"] .loader__title,
body[data-theme="sakura"] .loader__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 40px; letter-spacing: 3px; color: #E888A3;
  animation: classic-sudoku-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0s;
}
body[data-theme="sakura"] .loader__subtitle { display: none; }

.loader__pin--sakura { display: none; }
body[data-theme="sakura"] .loader__pin--dark,
body[data-theme="sakura"] .loader__pin--mint,
body[data-theme="sakura"] .loader__pin--light,
body[data-theme="sakura"] .loader__pin--lavender { display: none; }
html[data-theme-preload="sakura"] .loader__pin--sakura,
body[data-theme="sakura"] .loader__pin--sakura {
  display: block; height: 12px; width: auto; margin: 0;
  opacity: 0; animation: classic-fade-up 0.4s ease both; animation-delay: 1s;
}
html[data-theme-preload="sakura"] .loader__dots,
body[data-theme="sakura"] .loader__dots {
  opacity: 0; animation: classic-fade-up 0.4s ease both; animation-delay: 1s;
}
body[data-theme="sakura"] .loader__dots span:nth-child(1) {
  background: #D7B8C4; animation: dot-bounce-sak1 1.2s ease-in-out infinite;
}
body[data-theme="sakura"] .loader__dots span:nth-child(2) {
  background: #E888A3; animation: dot-bounce-sak2 1.2s ease-in-out infinite; animation-delay: 0.2s;
}
body[data-theme="sakura"] .loader__dots span:nth-child(3) {
  background: #C95F7D; animation: dot-bounce-sak3 1.2s ease-in-out infinite; animation-delay: 0.4s;
}
@keyframes dot-bounce-sak1 {
  0%,100% { opacity:0.35; transform:translateY(0);    background:#D7B8C4; }
  50%     { opacity:1;    transform:translateY(-4px); background:#EDD0DB; }
}
@keyframes dot-bounce-sak2 {
  0%,100% { opacity:0.35; transform:translateY(0);    background:#E888A3; }
  50%     { opacity:1;    transform:translateY(-4px); background:#F0A8BF; }
}
@keyframes dot-bounce-sak3 {
  0%,100% { opacity:0.35; transform:translateY(0);    background:#C95F7D; }
  50%     { opacity:1;    transform:translateY(-4px); background:#E888A3; }
}
html[data-theme-preload="sakura"] .logo__digits .is-accent,
body[data-theme="sakura"] .logo__digits .is-accent { fill: #E888A3; }
@keyframes digit-lock-accent-sakura {
  0%   { transform: scale(1.52); opacity:1; text-shadow: 0 0 18px rgba(232,136,163,0.95); }
  55%  { text-shadow: 0 0 8px rgba(232,136,163,0.45); }
  100% { transform: scale(1); opacity:1; text-shadow: none; }
}
html[data-theme-preload="sakura"] .logo__d.is-accent.is-locking,
body[data-theme="sakura"] .logo__d.is-accent.is-locking {
  animation: digit-lock-accent-sakura 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* ── Menü logo & başlık ──────────────────────────────────── */
body[data-theme="sakura"] .menu__title,
body[data-theme="sakura"] .menu__subtitle { display: none; }
body[data-theme="sakura"] .menu__pin-mint-wrap { display: flex; }
body[data-theme="sakura"] .menu__pin-mint-title { color: #E888A3; }
body[data-theme="sakura"] .menu__pin-mint--deepmint,
body[data-theme="sakura"] .menu__pin-mint--light,
body[data-theme="sakura"] .menu__pin-mint--dark,
body[data-theme="sakura"] .menu__pin-mint--lavender { display: none; }
body[data-theme="sakura"] .menu__pin-mint--sakura { display: block; }

/* ── Günlük takvim ikonu ─────────────────────────────────── */
body[data-theme="sakura"] .event-card__icon-cal--mint,
body[data-theme="sakura"] .event-card__icon-cal--dark,
body[data-theme="sakura"] .event-card__icon-cal--light,
body[data-theme="sakura"] .event-card__icon-cal--lavender  { display: none; }
body[data-theme="sakura"] .event-card__icon-cal--sakura    { display: block; }

/* ── Tema picker butonu ──────────────────────────────────── */
.theme-btn--sakura {
  background: none; border: none; border-radius: 50%;
  padding: 3px; cursor: pointer; box-shadow: none;
}
.theme-btn--sakura.active {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(232, 136, 163, 0.30);
}

/* ── Board & Grid ────────────────────────────────────────── */
body[data-theme="sakura"] .board {
  background: #FFFFFF; border-color: #D7B8C4;
  box-shadow: 0 4px 24px rgba(232, 136, 163, 0.15);
}
body[data-theme="sakura"] .cell {
  background: var(--cell-bg); color: var(--ink); border-color: var(--grid-line);
}
body[data-theme="sakura"] .cell.prefilled { color: var(--ink); font-weight: 700; }
body[data-theme="sakura"] .cell.user      { color: var(--accent); font-weight: 700; }
body[data-theme="sakura"] .cell.user.is-settled { color: var(--ink); font-weight: 700; }
body[data-theme="sakura"] .cell.error {
  background: rgba(214, 106, 106, 0.14); color: var(--danger) !important;
}
body[data-theme="sakura"] .cell.selected { background: #F8DDE5; box-shadow: none; }
body[data-theme="sakura"] .cell.selected::before {
  content: ''; position: absolute; inset: 0; padding: 2px;
  background: linear-gradient(315deg, #C95F7D, #E888A3, #D7B8C4);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 2;
}
body[data-theme="sakura"] .cell.same { background: #F5C4D5; box-shadow: none; }
body[data-theme="sakura"] .cell.peer,
body[data-theme="sakura"] .cell.block-locked { background: rgba(232, 136, 163, 0.08); }

/* ── Menü bileşenleri ────────────────────────────────────── */
body[data-theme="sakura"] .menu__spacer { height: 30px; }
body[data-theme="sakura"] .menu__primary {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px rgba(232, 136, 163, 0.30);
}
body[data-theme="sakura"] .menu__primary:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(232, 136, 163, 0.40);
}
body[data-theme="sakura"] .menu__secondary {
  background: #FFF0F4; border-color: #D7B8C4;
  box-shadow: 0 1px 3px rgba(43, 43, 53, 0.06);
}
body[data-theme="sakura"] .menu__secondary:hover { background: #FFE0EB; }
body[data-theme="sakura"] .best-score {
  background: #ffffff; border-color: #E8D9DE;
  box-shadow: 0 1px 3px rgba(43, 43, 53, 0.06);
}
body[data-theme="sakura"] .menu__link   { color: var(--ink-soft); }
body[data-theme="sakura"] .menu__link:hover { color: var(--accent); }
body[data-theme="sakura"] .menu__spacer { height: 30px; }
body[data-theme="sakura"] .menu__title,
body[data-theme="sakura"] .scores__title { color: var(--ink); }
body[data-theme="sakura"] .menu__subtitle,
body[data-theme="sakura"] .menu__label  { color: var(--ink-soft); }

/* ── Pause btn, theme picker, theme toggle ───────────────── */
body[data-theme="sakura"] .pause-btn,
body[data-theme="sakura"] .theme-picker__btn,
body[data-theme="sakura"] .theme-toggle {
  background: #ffffff; border-color: #E8D9DE; backdrop-filter: none;
}
body[data-theme="sakura"] .best-score__label  { color: var(--ink-soft); }
body[data-theme="sakura"] .best-score__value  { color: var(--accent); text-shadow: none; }
body[data-theme="sakura"] .best-score__stat-val { color: var(--ink); }
body[data-theme="sakura"] .best-score__stat-lbl { color: var(--ink-dim); }
body[data-theme="sakura"] .best-score__stats  { border-top-color: var(--grid-line); }

/* ── Theme picker dropdown ───────────────────────────────── */
body[data-theme="sakura"] .theme-picker__dropdown {
  background: rgba(255, 255, 255, 0.96); border-color: #E8D9DE;
  box-shadow: 0 4px 16px rgba(43, 43, 53, 0.12);
}
body[data-theme="sakura"] .theme-btn { color: var(--ink-soft); }
body[data-theme="sakura"] .theme-btn:hover { background: rgba(232,136,163,0.08); color: var(--accent); }
body[data-theme="sakura"] .theme-btn.active { color: #ffffff; box-shadow: 0 2px 8px var(--accent-glow); }

/* ── Hover efektleri ─────────────────────────────────────── */
body[data-theme="sakura"] .event-card--daily:hover,
body[data-theme="sakura"] .best-score:hover,
body[data-theme="sakura"] .best-score:focus-visible,
body[data-theme="sakura"] .menu__secondary:hover,
body[data-theme="sakura"] .menu__secondary:focus-visible {
  filter: none; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 136, 163, 0.18);
}

/* ── Daily kart — light tema yapısı, sakura renkleri ────── */
body[data-theme="sakura"] .event-card--daily {
  background: #ffffff; border: 2.5px solid #E8D9DE; box-shadow: none;
  align-items: stretch; text-align: left;
  width: 100%; min-height: unset;
  padding: 28px 14px 15px; gap: 30px;
}
body[data-theme="sakura"] .event-card--daily .event-card__head {
  flex-direction: row; align-items: center; gap: 7px;
}
body[data-theme="sakura"] .event-card--daily .event-card__main {
  flex-direction: row; align-items: stretch; justify-content: space-between; gap: 8px; flex: 1;
}
body[data-theme="sakura"] .event-card--daily .event-card__text { align-items: flex-start; flex: 1; }
body[data-theme="sakura"] .event-card--daily .event-card__label {
  color: var(--ink); font-size: 13px; letter-spacing: 1.8px; position: relative; top: 2px;
}
body[data-theme="sakura"] .event-card--daily .event-card__title { color: var(--ink); }
body[data-theme="sakura"] .event-card--daily .event-card__sub {
  display: block; font-size: 12px; color: var(--ink-soft); opacity: 0.85;
}
body[data-theme="sakura"] .event-card--daily .event-card__streak-label {
  background: var(--accent); box-shadow: none; color: #ffffff; margin-top: auto;
}
body[data-theme="sakura"] .event-card__gift--mint,
body[data-theme="sakura"] .event-card__gift--dark,
body[data-theme="sakura"] .event-card__gift--light,
body[data-theme="sakura"] .event-card__gift--lavender { display: none; }
body[data-theme="sakura"] .event-card__gift--sakura   { display: block; }

/* ── Difficulty modal ────────────────────────────────────── */
body[data-theme="sakura"] .difficulty-card { align-items: flex-start; padding-top: 16px; }
body[data-theme="sakura"] .difficulty-card__title { font-size: 28px; margin-top: 2px; width: 100%; }
body[data-theme="sakura"] .difficulty-card__sub   { margin-top: -6px; }
body[data-theme="sakura"] .diff-btn {
  background: rgba(255,255,255,0.70); border: 1px solid #E8D9DE;
}
body[data-theme="sakura"] .diff-btn:hover,
body[data-theme="sakura"] .diff-btn:focus-visible {
  background: rgba(255,255,255,0.90); border-color: #D7B8C4;
}
body[data-theme="sakura"] .diff-btn__dot {
  background: rgba(232,136,163,0.12); border-color: rgba(232,136,163,0.22);
}
body[data-theme="sakura"] .diff-btn__dot.is-filled {
  background: var(--diff-color, var(--accent));
  border-color: var(--diff-color, var(--accent));
  box-shadow: 0 0 5px color-mix(in srgb, var(--diff-color, var(--accent)) 45%, transparent);
}
body[data-theme="sakura"] .diff-btn__chevron { color: rgba(43,43,53,0.35); }
body[data-theme="sakura"] .diff-btn__icon-wrap svg { display: none; }
body[data-theme="sakura"] .diff-btn__png-icon { display: none; }
body[data-theme="sakura"] .diff-btn__png-icon--sakura { display: block; }
body[data-theme="sakura"] .modal__btn--ghost {
  background: var(--accent); color: #ffffff; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(232,136,163,0.30);
}
body[data-theme="sakura"] .modal__btn--ghost:hover {
  filter: brightness(1.08); transform: translateY(-1px);
}

/* ── Numpad + action btn ─────────────────────────────────── */
body[data-theme="sakura"] .num-btn,
body[data-theme="sakura"] .action-btn {
  background: #ffffff; border: 1px solid #E8D9DE; color: var(--ink);
}
body[data-theme="sakura"] .num-btn:hover,
body[data-theme="sakura"] .action-btn:hover {
  background: #FFF0F4; border-color: var(--accent); color: var(--accent);
}
body[data-theme="sakura"] .num-btn:disabled,
body[data-theme="sakura"] .action-btn:disabled {
  background: #FFF7F8; border-color: #EDD0DB; color: var(--ink-dim);
}

/* ── Win / Game-Over panelleri ───────────────────────────── */
body[data-theme="sakura"] .win-panel {
  background: rgba(255,247,248,0.65);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border-color: rgba(232,136,163,0.20);
}
body[data-theme="sakura"] .wpr--score-lbl,
body[data-theme="sakura"] .wpr--breakdown li { color: var(--ink); }
body[data-theme="sakura"] .wpr__score-val { color: var(--accent); text-shadow: none; }
body[data-theme="sakura"] .wpr--breakdown { border-color: rgba(232,136,163,0.15); }
body[data-theme="sakura"] .wpr--actions   { border-color: rgba(232,136,163,0.15); }
body[data-theme="sakura"] .wpr--daily-progress { border-color: rgba(232,136,163,0.15); }
body[data-theme="sakura"] .dp__track { background: rgba(232,136,163,0.12); }
body[data-theme="sakura"] .wpr__btn {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 4px 16px rgba(232,136,163,0.30);
}
body[data-theme="sakura"] .wpr__btn--ghost {
  background: #ffffff; color: var(--ink); border: 1px solid #E8D9DE; box-shadow: none;
}
body[data-theme="sakura"] .wpr__btn--ghost:hover { background: #FFF0F4; }
body[data-theme="sakura"] .go-panel {
  background: rgba(255,247,248,0.97); border-color: #E8D9DE;
}
body[data-theme="sakura"] .wpr__btn--retry { background: var(--accent); color: #ffffff; }
body[data-theme="sakura"] .wpr__btn--menu {
  background: #ffffff; border: 1px solid #E8D9DE; color: var(--ink-soft);
}
body[data-theme="sakura"] .wpr__btn--menu:hover { background: #FFF0F4; }

/* ── Pause / Quit panelleri ──────────────────────────────── */
body[data-theme="sakura"] .pause-resume-btn {
  background: var(--accent); color: #ffffff; border: none;
  box-shadow: 0 4px 16px rgba(232,136,163,0.30);
}
body[data-theme="sakura"] .quit-panel {
  background: rgba(255,247,248,0.97); border: 1px solid #E8D9DE;
}
body[data-theme="sakura"] .quit-panel__btn--leave { background: var(--danger); }
body[data-theme="sakura"] .quit-panel__btn--stay  { background: var(--accent); }
body[data-theme="sakura"] .pause-reward {
  background: rgba(232,136,163,0.06); border-color: rgba(232,136,163,0.20);
}
body[data-theme="sakura"] .pause-reward__btn { background: var(--accent); color: #ffffff; }
body[data-theme="sakura"] .pause-reward__btn:disabled {
  background: #FFF0F4; border: 1px solid #E8D9DE; color: var(--ink-soft);
  opacity: 1; cursor: not-allowed;
}
body[data-theme="sakura"] .pause-panel {
  background: rgba(255,247,248,0.94); border-color: #E8D9DE;
}
body[data-theme="sakura"] .pause-panel__head { border-color: #E8D9DE; }
body[data-theme="sakura"] .pause-panel__foot { border-color: #E8D9DE; }
body[data-theme="sakura"] .pause-panel__score { color: var(--accent); text-shadow: none; }

/* ── Dil pickeri ─────────────────────────────────────────── */
body[data-theme="sakura"] .lang-picker__btn {
  background: #ffffff; border-color: rgba(232,136,163,0.20); color: var(--ink-soft);
}
body[data-theme="sakura"] .lang-picker__btn:hover { color: var(--accent); border-color: var(--accent); }
body[data-theme="sakura"] .lang-picker__dropdown {
  background: #FCEBF0; border-color: #E8D9DE;
  box-shadow: 0 4px 16px rgba(43,43,53,0.12);
}
body[data-theme="sakura"] .lang-option { color: var(--ink); }
body[data-theme="sakura"] .lang-option:hover { background: #FFE0EB; color: var(--ink); }
body[data-theme="sakura"] .lang-option.active { background: var(--accent); color: #ffffff; }

/* ── Daily slot overlay ──────────────────────────────────── */
body[data-theme="sakura"] .daily-slot__box {
  background: rgba(255,255,255,0.96); border-color: rgba(232,136,163,0.14);
  box-shadow: 0 20px 60px rgba(43,43,53,0.15);
}

/* ── Modal ───────────────────────────────────────────────── */
body[data-theme="sakura"] .modal__card {
  background: #ffffff; border-color: rgba(232,136,163,0.14); color: var(--ink);
}
body[data-theme="sakura"] .modal__actions {
  background: linear-gradient(to top, rgba(255,255,255,0.98) 55%, transparent);
}
body[data-theme="sakura"] .modal__text  { color: var(--ink-soft); }
body[data-theme="sakura"] .modal__title { color: var(--ink); }
body[data-theme="sakura"] .modal__stats {
  background: #FFF0F4; border-color: rgba(232,136,163,0.10);
}
body[data-theme="sakura"] .modal__stat-value { color: var(--ink); }
body[data-theme="sakura"] .modal__stat-label { color: var(--ink-dim); }

/* ── Hint panel ─────────────────────────────────────────── */
body[data-theme="sakura"] .hint-panel {
  background: rgba(255, 247, 248, 0.97);
  border-color: #D7B8C4;
  color: var(--ink);
  box-shadow: 0 8px 32px rgba(43, 43, 53, 0.14);
}
body[data-theme="sakura"] .hint-panel__title { color: var(--ink); }
body[data-theme="sakura"] .hint-panel__text  { color: var(--ink-soft); }
body[data-theme="sakura"] .hint-panel__text b { color: var(--accent); }
body[data-theme="sakura"] .hint-nav  { color: var(--accent); }
body[data-theme="sakura"] .hint-nav:hover:not(:disabled) { background: rgba(232,136,163,0.12); }
body[data-theme="sakura"] .hint-done { color: var(--accent); }
body[data-theme="sakura"] .hint-done:hover { background: rgba(232,136,163,0.12); }
body[data-theme="sakura"] .hint-dots .dot { background: var(--ink-dim); }
body[data-theme="sakura"] .hint-dots .dot.active { background: var(--accent); }

/* ── Hint hücreleri ─────────────────────────────────────── */
body[data-theme="sakura"] .cell.hint-line   { background: rgba(232,136,163,0.10); }
body[data-theme="sakura"] .cell.hint-target {
  background: rgba(232,136,163,0.18);
  box-shadow: inset 0 0 0 2px rgba(232,136,163,0.80);
}
body[data-theme="sakura"] .hint-outline {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(232,136,163,0.25), inset 0 0 0 1px rgba(232,136,163,0.30);
}
/* ── Hint ile yerleştirilen rakam: ink rengi, kalın, animasyon ── */
body[data-theme="sakura"] .cell.hinted      { color: var(--ink); font-weight: 700; }
body[data-theme="sakura"] .cell.hint-reveal { font-weight: 700; animation: hint-reveal-fade-sakura 1s ease forwards; }
@keyframes hint-reveal-fade-sakura {
  0%   { color: var(--accent); }
  100% { color: var(--ink); }
}

/* ── Howto / Settings ────────────────────────────────────── */
body[data-theme="sakura"] .howto-card__btn { background: var(--accent); }
body[data-theme="sakura"] .tutorial__action-badge { color: #ffffff; }
body[data-theme="sakura"] .settings-panel {
  background: rgba(255,247,248,0.97); border-color: #E8D9DE;
}

/* ── Achievement toast ───────────────────────────────────── */
body[data-theme="sakura"] .achievement-toast {
  background: #ffffff; border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
body[data-theme="sakura"] .achievement-toast__title { color: var(--ink); }
body[data-theme="sakura"] .achievement-toast__desc  { color: var(--ink-soft); }

/* ── Scores ekranı ───────────────────────────────────────── */
body[data-theme="sakura"] .score-tab {
  background: #ffffff; border-color: #E8D9DE;
  box-shadow: none; color: var(--ink);
}
body[data-theme="sakura"] .score-tab.active {
  background: rgba(232,136,163,0.12);
  border-color: var(--accent); color: var(--accent);
}
body[data-theme="sakura"] .score-tab__icon--sakura { display: block; }
body[data-theme="sakura"] .scores__stats {
  background: #ffffff; border-color: #E8D9DE;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(43,43,53,0.06);
}
body[data-theme="sakura"] .scores__list {
  background: #ffffff; border-color: #E8D9DE;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme="sakura"] .score-tab,
body[data-theme="sakura"] .scores__stats,
body[data-theme="sakura"] .scores__list,
body[data-theme="sakura"] .status-row { border-color: #E8D9DE; }
body[data-theme="sakura"] .scores__stat  { border-right-color: #F0DCE3; }
body[data-theme="sakura"] .scores__stat-label { color: var(--ink-soft); }
body[data-theme="sakura"] .scores__stat-sub   { color: var(--ink-dim); }
body[data-theme="sakura"] .score-row   { border-bottom-color: #F0DCE3; }
body[data-theme="sakura"] .score-row.mine { background: rgba(232,136,163,0.05); }
body[data-theme="sakura"] .score-row__score { color: var(--accent); }
body[data-theme="sakura"] .scores__winner-img { opacity: 1; }
body[data-theme="sakura"] .scores__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: 3px;
}

/* ── Gift modal ──────────────────────────────────────────── */
body[data-theme="sakura"] .gift-icon--sakura  { display: block; }