@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500&family=Outfit:wght@600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:      #0b0c10;
  --surf:    #15171e;
  --surf2:   #1f2229;
  --brd:     #2a2d36;
  --ink:     #e8e6e3;
  --ink2:    #9b9996;
  --ink3:    #4e4d49;
  --accent:  #d4af37;
  --ok:      #2e8b57;
  --warn:    #d4af37;
  --locked:  #0f1115;
  --sz: 64px;
}



html,body{height:100%}
/* Oyun ekrani yatayda kaymasin — grid birkac px tasarsa bile sayfa saga sola oynamasin */
html,body{overflow-x:hidden;max-width:100%}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  /* Oyun hissi: cift-tik zoom yok, basili tutunca secim/callout yok */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* iOS centik / Dynamic Island: icerik durum cubugunun altina girmesin */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* Yazi girisleri secilebilir kalsin */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* -- DESKTOP LAYOUT -- */
.app-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Sidebar hidden by default — shown only on desktop */
.sidebar { display: none; }

@media (min-width: 860px) {
  body {
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .app-shell {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 24px;
  }
  .game-col {
    flex: 0 0 580px;
    width: 580px;
    min-width: 0;
  }
  .sidebar {
    flex: 1 1 0;
    min-width: 200px;
    max-width: 340px;
    padding: 48px 0 40px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}



/* -- FIX: force all overlays to cover full viewport regardless of flex layout -- */

.gameover-screen,
.nick-modal,
.lb-modal,
.profile-modal,
.ad-overlay,
.season-overlay,
.rank-up-overlay {
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}

/* -- SIDEBAR WIDGETS -- */
.sidebar-card {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-card-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--brd);
}

.sb-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--ink);
  padding: 3px 0;
}
.sb-lb-pos {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--ink2);
  width: 20px;
  text-align: right;
}
.sb-lb-nick { flex: 1; }
.sb-lb-stars { color: var(--warn); font-size: 0.62rem; }
.sb-lb-moves {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  color: var(--ink2);
}
.sb-lb-me { color: var(--accent); font-weight: 500; }
.sb-lb-empty {
  font-size: 0.68rem;
  color: var(--ink2);
  text-align: center;
  padding: 8px 0;
}

.sb-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sb-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-stat-l {
  font-size: 0.55rem;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sb-stat-v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}

.sb-tip {
  font-size: 0.65rem;
  color: var(--ink2);
  line-height: 1.6;
}
.sb-tip b { color: var(--ink); font-weight: 500; }

.sb-open-lb-btn {
  background: transparent;
  border: 1px solid var(--brd);
  color: var(--ink2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  padding: 7px 0;
  border-radius: 7px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
  margin-top: 4px;
}
.sb-open-lb-btn:hover { border-color: var(--ink2); color: var(--ink); }

/* -- HEADER -- */
header {
  width: 100%; max-width: 580px;
  padding: 36px 24px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.wordmark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.level-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--ink2);
  letter-spacing: 0.1em;
  padding-bottom: 4px;
}

/* -- MAIN -- */
main {
  width: 100%; max-width: 580px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* -- HEADER LEFT (menu + wordmark) -- */
.hdr-left { display: flex; align-items: flex-end; gap: 12px; }



/* -- FA ICONS (inline SVG sprite) -- */
.ic {
  width: 1em; height: 1em;
  fill: currentColor;
  display: block;
}
.sound-btn { color: var(--ink2); display: flex; align-items: center; }
.sound-btn:hover { color: var(--ink); }
.sound-btn .ic { width: 1.05em; height: 1.05em; }

/* -- DRAWER MENU -- */





























/* -- CONTROL ROW -- */
.ctrl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Diger temalarda sarmalayici gorunmez — cocuklar ctrl-row'un dogrudan
   ogesiymis gibi davranir. Sakin temada gercek satira donuyor. */
.ctrl-tools { display: contents; }

.target-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surf);
  border: 1px solid var(--brd);
  padding: 8px 14px;
  border-radius: 8px;
}

.t-lbl { font-size: 0.62rem; color: var(--ink2); }
.t-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}

/* Timer box */
.timer-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surf);
  border: 1px solid var(--brd);
  padding: 8px 14px;
  border-radius: 8px;
  display: none;
}
.timer-box.visible { display: flex; }
.timer-box.urgent { border-color: var(--accent); }
.timer-box.urgent .timer-val { color: var(--accent); }

.t-lbl2 { font-size: 0.62rem; color: var(--ink2); }
.timer-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--warn);
  line-height: 1;
  min-width: 42px;
}

.sz-btns { display: flex; gap: 4px; }
.sz-btn {
  border: 1px solid var(--brd);
  background: var(--surf);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink2);
  border-radius: 6px;
  transition: all 0.15s;
}
.sz-btn.on  { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sz-btn:hover:not(.on) { color: var(--ink); border-color: var(--ink2); }

.new-btn {
  margin-left: auto;
  border: 1px solid var(--brd);
  background: var(--surf);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
  color: var(--ink);
  transition: all 0.15s;
}
.new-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* -- MODE INFO BANNER -- */
.mode-banner {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.68rem;
  color: var(--ink2);
  line-height: 1.7;
}
.mode-banner b { color: var(--ink); font-weight: 500; }
.mode-banner .tag {
  display: inline-block;
  background: var(--surf2);
  border: 1px solid var(--brd);
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  padding: 1px 6px;
  margin-right: 4px;
  color: var(--accent);
}

/* -- POOL -- */
.pool-section { display: flex; flex-direction: column; gap: 8px; }

.sec-lbl { font-size: 0.62rem; color: var(--ink2); }

.pool { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }

.pool-num {
  width: var(--pool-sz, 44px); height: var(--pool-sz, 44px);
  border: 1px solid var(--brd);
  background: var(--surf);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: calc(var(--pool-sz, 44px) * 0.44);
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  user-select: none;
  position: relative;
}
.pool-num:hover:not(.used):not(.sel-num) { border-color: var(--ink2); background: var(--surf2); }
.pool-num.sel-num { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pool-num.used {
  opacity: 0.18;
  cursor: default;
  pointer-events: none;
}
/* strikethrough for used in classic mode */
.pool-num.used-classic { text-decoration: line-through; }

/* -- GRID AREA --
   Satir toplamlari kolonunun genisligi tek bir degiskende: sagdaki
   denge bosluğu ve JS'teki yer hesabi da ayni degiskeni okuyor, yoksa
   uc yerde ayri sayi tutulup biri unutuluyor. */
:root { --rsum-col: 42px; }
.grid-section { display: flex; gap: 0; align-items: flex-start; justify-content: center; }
/* Soldaki satir-toplami kolonunu dengele — grid gercekten ortada dursun */
.grid-section::after { content: ''; width: var(--rsum-col); flex-shrink: 0; }

/* Satir toplamlari hucrelerle ayni ritimde dizilmeli: bosluk grid'in
   kendi gap'i, ustten kaydirma da grid'in ic dolgusu kadar. Sabit 2px
   ile birakilinca (Cesur'un gap'i 7, dolgusu 9) rakamlar satirdan
   yukari kayiyordu ve asagi indikce sapma buyuyordu. */
.row-sums {
  display: flex; flex-direction: column;
  gap: var(--grid-gap, 2px);
  padding-right: 8px;
  padding-top: var(--grid-pad, 0px);
}

.rsum {
  width: calc(var(--rsum-col) - 8px); height: var(--sz);
  display: flex; align-items: center; justify-content: flex-end;
}

.sbadge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink3);
  transition: color 0.25s;
  text-align: right;
  min-width: 28px;
}
.sbadge.ok   { color: var(--ok); }
.sbadge.over { color: var(--accent); }
.sbadge.near { color: var(--warn); }
.sbadge.part { color: var(--ink2); }

.grid-wrap { display: flex; flex-direction: column; }

.grid {
  display: grid;
  gap: 2px;
  background: var(--brd);
  border: 2px solid var(--brd);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.cell {
  width: var(--sz); height: var(--sz);
  background: var(--surf);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
  position: relative;
}
.cell:hover:not(.locked) { background: var(--surf2); }
.cell.locked { background: var(--locked); cursor: default; }
.cell.sel-cell { background: var(--surf2); box-shadow: inset 0 0 0 2px var(--ink2); }
.cell.focused { box-shadow: inset 0 0 0 2px var(--accent); }
.cell.hint-cell { box-shadow: inset 0 0 0 2px var(--warn); }

/* In discovery mode, placed cells glow softly */
.cell.placed-disc { background: #1e2820; }

/* Error pulse for classic mode only */
.cell.flash-err { animation: ferr 0.4s ease; }
@keyframes ferr { 0%,100%{background:var(--surf)} 40%{background:#2e1e18} }
@keyframes ferr-light { 0%,100%{background:var(--surf)} 40%{background:#fde0d8} }

/* All-correct glow */
.cell.flash-ok { animation: fok 0.4s ease; }
@keyframes fok { 0%,100%{background:var(--surf)} 40%{background:#1a3328} }
@keyframes fok-light { 0%,100%{background:var(--surf)} 40%{background:#d4f0dc} }

/* Light theme: correct line flash */
@keyframes fline-light { 0%,100%{background:var(--surf)} 50%{background:#d4f0dc} }

.cell-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: calc(var(--sz) * 0.34); /* hucre buyudukce sayi da buyur */
  font-weight: 500;
  color: var(--ink);
  pointer-events: none;
}
.cell.locked .cell-val { color: var(--ink2); }

/* Small remove hint */
/* Hucreler artik her hamlede yeniden kurulmadigi icin bu isaret hep
   DOM'da duruyor; gorunurlugu sinifla degil kuralla yonetiliyor. */
.cell .remove-hint {
  position: absolute;
  top: 4px; right: 5px;
  font-size: 0.5rem;
  color: var(--ink3);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.cell:not(.locked).filled:hover .remove-hint { opacity: 1; }

/* Arsiv, Gunluk'un ALT SATIRI: ayri bir mod degil, gunlugun takvimi.
   Iceri girintili ve bir tik sonuk duruyor ki listede ayni agirlikta
   gorunmesin. */
.mode-card.mode-child {
  margin-left: 22px;
  /* .mode-card width:100% — girinti genisliktan dusulmezse kart 22px
     saga tasiyor, pencere de parmakla yana kayiyordu (19 Eki). */
  width: calc(100% - 22px);
  opacity: 0.82;
}
.mode-card.mode-child .mode-ic { transform: scale(0.85); }

/* ---- ADAY ISARETLERI (not modu) --------------------------------
   Hucrenin altina kucuk kucuk yazilan aday sayilar. Sayi konunca
   temizleniyor, yani gercek deger ile not ayni anda gorunmuyor. */
.cell .cell-notes {
  position: absolute;
  left: 3px; right: 3px; bottom: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: calc(var(--sz) * 0.17);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink3);
  text-align: center;
  pointer-events: none;
  overflow: hidden;
  max-height: calc(var(--sz) * 0.42);
}
.cell.has-notes { background: var(--surf2); }

/* Not modundayken tahtanin "yazi yazilacak" hali belli olsun. */
body.note-mode .cell:not(.locked):not(.filled) {
  box-shadow: inset 0 0 0 1px var(--ink3);
}
#noteBtn.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---- TAHTA DOLDU AMA TUTMADI -----------------------------------
   Hedefi tutturamayan toplam rozeti sarsiliyor. Eskiden tahta dolunca
   hicbir sey olmuyordu; oyuncu neyin yanlis oldugunu rozetlerin
   rengine bakip kendi bulmak zorundaydi. */
@keyframes shakeBad {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.shake-bad { animation: shakeBad 0.5s ease; }

/* ---- CIKMAZ ----------------------------------------------------
   Tahta kalan taslarla tamamlanamaz hale geldi. Yumusak bir uyari:
   oyunu durdurmuyor, sadece geri al dugmesini one cikariyor. */
body.dead-end #undoBtn {
  border-color: var(--warn);
  color: var(--warn);
  animation: backPulse 1.4s ease infinite;
}

/* Col sums — satir toplamlariyla ayni sebep: grid'in gap'i ve yan
   dolgusu kadar kaydirilmali, yoksa saga dogru kayarak sapiyor. */
.col-sums {
  display: flex; gap: var(--grid-gap, 2px); margin-top: 7px;
  padding-left: var(--grid-pad, 0px); padding-right: var(--grid-pad, 0px);
}
.csum {
  width: var(--sz);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.csum-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.5rem; color: var(--ink3); letter-spacing: 0.05em;
}

/* Diags */
.diag-row { display: flex; gap: 18px; margin-top: 8px; justify-content: center; }

/* Capraz (diagonal) toplamlari — kontrol satirinda, Hedef'in yaninda */
.diag-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surf);
  border: 1px solid var(--brd);
  padding: 8px 12px;
  border-radius: 8px;
}
.diag-box .diag-item { display: flex; align-items: center; gap: 4px; }
.diag-box .diag-icon { font-size: 0.8rem; color: var(--ink3); }
.diag-box .diag-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem; font-weight: 500;
  line-height: 1;
}

/* Oyun alani: havuz + grid. Havuz konumu Ayarlar'daki poolPos'a gore (html[data-pool]): ust / alt */
.play-area { display: flex; flex-direction: column; align-items: center; width: 100%; }
[data-pool="bottom"] .play-area .pool-section { order: 2; margin-top: 12px; }
.diag-item { display: flex; align-items: center; gap: 5px; font-size: 0.65rem; color: var(--ink2); }
.diag-icon { font-size: 0.75rem; }
.diag-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem; font-weight: 500;
  transition: color 0.25s;
  color: var(--ink2);
}
.diag-val.ok   { color: var(--ok); }
.diag-val.over { color: var(--accent); }
.diag-val.near { color: var(--warn); }
.diag-val.part { color: var(--ink); }

/* -- STATS BAR -- */
.stats-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--brd);
  padding-top: 14px;
}

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-l { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink2); }
.stat-v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.15rem; font-weight: 500; color: var(--ink); line-height: 1;
}

/* Progress bar (discovery mode) */
.progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-lbl { font-size: 0.58rem; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.1em; }
.progress-bar {
  height: 4px;
  background: var(--surf2);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--ok);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0%;
}

/* -- WIN OVERLAY -- */














/* -- GAME OVER (timed) -- */
.gameover-screen {
  position: fixed; inset: 0;
  background: rgba(22,24,28,0.96);
  z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.gameover-screen.show { opacity: 1; pointer-events: all; }
.go-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.6rem; font-weight: 400;
  letter-spacing: 0.06em; color: var(--accent);
}
.go-sub { font-size: 0.68rem; color: var(--ink2); letter-spacing: 0.1em; margin-bottom: 20px; }
.go-btn {
  background: var(--ink); color: var(--bg); border: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.08em; padding: 12px 28px;
  cursor: pointer; border-radius: 8px; transition: opacity 0.15s;
}
.go-btn:hover { opacity: 0.8; }

/* -- ANIMATIONS -- */
@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.anim-pop .cell-val { animation: pop 0.3s ease; }

/* Tas kaldirilinca hucre bir an icine coksun — sayinin sessizce yok
   olmasi hamlenin gectigini belli etmiyordu. */
@keyframes lift {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}
.cell.anim-lift { animation: lift 0.26s ease; }

/* Havuza donen tas: yerini bulurken kisa bir nabiz */
@keyframes backPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.pool-num.anim-back { animation: backPulse 0.32s ease; }


@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.anim-fade .cell-val { animation: fadeOut 0.15s ease; }

.cell.flash-line { animation: fline 0.5s ease; }
@keyframes fline { 0%,100%{background:var(--surf)} 50%{background:#1a3328} }

/* -- CONFETTI -- */
.confetti-container {
  position: fixed; inset: 0;
  z-index: 199;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  top: -10px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* -- SOUND TOGGLE -- */
.sound-btn {
  background: none; border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* -- STARS -- */

.star {
  font-size: 2rem;
  color: var(--ink3);
  transition: all 0.3s;
  opacity: 0;
  transform: scale(0.5);
}
.star svg { width: 1em; height: 1em; display: block; }
.star.earned { color: var(--warn); }
.star.visible { opacity: 1; transform: scale(1); }
.star.pop { transform: scale(1.3); }

/* -- STATS MODAL -- */






.stats-divider {
  grid-column: 1 / -1;
  border: none; border-top: 1px solid var(--brd);
  margin: 8px 0;
}



/* -- NICKNAME MODAL -- */
.nick-modal {
  position: fixed; inset: 0;
  background: rgba(22,24,28,0.96);
  z-index: 300;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
  /* Klavye acilinca gorunur alan kisaliyor ve dikey ortalanan icerik
     ekranin disina tasiyordu (buton klavyenin altinda kaliyordu).
     Kaydirilabilir + guvenli alan dolgusu. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 20px
           calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.nick-modal.show { opacity: 1; pointer-events: all; }
.nick-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--ink2);
  border-radius: 50%; cursor: pointer;
}
.nick-close:hover { color: var(--ink); background: var(--surf3); }
.nick-modal form {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.nick-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.6rem; font-weight: 400;
  letter-spacing: 0.06em; color: var(--ink);
}
.nick-sub {
  font-size: 0.65rem; color: var(--ink2);
  letter-spacing: 0.1em; margin-bottom: 8px;
}
/* Isim modalindaki "zaten hesabim var" baglantisi */
.nick-alt {
  margin-top: 18px;
  font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--ink3, var(--ink2));
  font-family: 'IBM Plex Mono', monospace;
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.nick-alt:hover { color: var(--accent); }


.nick-input {
  background: var(--surf);
  border: 1px solid var(--brd);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  width: 220px;
}
.nick-input:focus { border-color: var(--accent); outline: none; }
.nick-error { color: var(--accent); font-size: 0.65rem; min-height: 18px; }
.nick-btn {
  background: var(--ink); color: var(--bg); border: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.08em; padding: 12px 32px;
  cursor: pointer; border-radius: 8px;
  transition: transform 0.14s ease, opacity 0.15s;
  /* iOS basinca butonun UZERINE gri bir dikdortgen ciziyordu: yuvarlak
     kosenin disina tasan, saydam bir kutu gibi gorunuyordu. */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
.nick-btn:hover { opacity: 0.8; }
.nick-btn:active:not(:disabled) { transform: scale(0.96); opacity: 0.9; }
.nick-btn:disabled { opacity: 0.4; cursor: default; }

/* -- USER DISPLAY -- */
.user-display {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--ink2);
  cursor: pointer;
  letter-spacing: 0.05em;
}
.user-display:hover { color: var(--ink); }

/* -- LEADERBOARD MODAL -- */
.lb-modal {
  position: fixed; inset: 0;
  background: rgba(22,24,28,0.96);
  z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.lb-modal.show { opacity: 1; pointer-events: all; }
.lb-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.1rem; font-weight: 400;
  letter-spacing: 0.08em; color: var(--ink);
}
.lb-date { font-size: 0.6rem; color: var(--ink2); letter-spacing: 0.1em; margin-bottom: 6px; }
.lb-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.lb-tab {
  background: transparent; border: 1px solid var(--brd); color: var(--ink2);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem;
  padding: 5px 14px; border-radius: 6px; cursor: pointer;
  letter-spacing: 0.06em; transition: all 0.15s;
}
.lb-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lb-tab:hover:not(.active) { border-color: var(--ink2); }
.lb-list {
  width: 320px; max-width: 90vw;
  max-height: 400px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.lb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 0.72rem; color: var(--ink);
}
.lb-row.lb-top1 { background: rgba(255,215,0,0.08); }
.lb-row.lb-top2 { background: rgba(192,192,192,0.06); }
.lb-row.lb-top3 { background: rgba(205,127,50,0.06); }
.lb-row.lb-me { background: rgba(224,122,80,0.1); border: 1px solid var(--accent); }
.lb-pos {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500; width: 28px; text-align: right; color: var(--ink2);
}
.lb-stars { font-size: 0.68rem; color: var(--warn); letter-spacing: 1px; }
.lb-nick { flex: 1; display: flex; align-items: center; gap: 4px; }
.lb-rank-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.lb-moves {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem; color: var(--ink2); white-space: nowrap;
}
.lb-loading, .lb-empty {
  text-align: center; padding: 30px;
  font-size: 0.72rem; color: var(--ink2);
}
.lb-divider {
  text-align: center; font-size: 0.6rem; color: var(--ink2);
  padding: 8px 0 4px; letter-spacing: 0.1em;
}
.lb-close {
  background: var(--ink); color: var(--bg); border: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.08em; padding: 10px 24px;
  cursor: pointer; border-radius: 8px; transition: opacity 0.15s;
  margin-top: 12px;
}
.lb-close:hover { opacity: 0.8; }

/* -- USER PILL (header) -- */
.user-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.user-pill:hover { border-color: var(--ink2); }
.user-pill-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.user-pill-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* -- PROFILE MODAL -- */
.profile-modal {
  position: fixed; inset: 0;
  background: rgba(10,11,14,0.7);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.profile-modal.show { opacity: 1; pointer-events: all; }

/* Sheet (scrollable card) */
.prof-sheet {
  width: 92%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  background: var(--surf);
  border-radius: 20px;
  border: 1px solid var(--brd);
}
/* Kapatma X'i kaydirinca da gorunur kalsin (sheet'in icinde yapisik) */
/* Yapiskan kapatma dugmesi icerigin uzerinde kaliyor. Zemini --surf2
   iken, altindan gecen renkli kart (gorev karti gibi) uzerinde
   kayboluyordu; dolu zemin + ince golge her icerikte okunmasini
   sagliyor. */
.prof-sheet > .prof-banner-close {
  position: sticky;
  top: 10px;
  margin-left: auto;
  margin-right: 10px;
  background: var(--surf);
  box-shadow: 0 2px 8px rgba(var(--sh, 0,0,0), 0.18);
}
.prof-sheet::-webkit-scrollbar { width: 4px; }
.prof-sheet::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 2px; }

/* -- PROFILE CLOSE -- */
.prof-banner-close {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 1rem;
  color: var(--ink2);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer; z-index: 100;
  background: var(--surf2);
}
.prof-banner-close:hover { color: var(--ink); background: var(--surf3); }

/* -- PROFILE HEADER (Minimalist) -- */
.prof-header-wrap {
  padding: 24px 20px 16px;
  display: flex; align-items: center; gap: 16px;
  position: relative;
}
.prof-avatar {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 1.8rem; font-weight: bold;
}
.prof-header-info {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.prof-nick {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.4rem; font-weight: 600;
  color: var(--ink);
}
.prof-badges-wrap {
  display: flex; gap: 8px; align-items: center; margin-top: 6px;
}

.prof-level-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--ink); border: 1px solid var(--brd);
  padding: 3px 10px; border-radius: 6px; background: var(--surf2);
}
.prof-rank-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.55rem; padding: 2px 8px; border-radius: 4px;
  color: #000; font-weight: 600;
}
.prof-edit-btn {
  background: transparent; border: 1px solid var(--brd);
  color: var(--ink2); border-radius: 8px; padding: 6px 10px;
  cursor: pointer; font-size: 0.8rem; height: 32px;
}
.prof-edit-btn:hover { color: var(--ink); background: var(--surf2); }

/* -- TABS (BOX STYLE) -- */
.prof-tabs {
  display: flex; gap: 8px; padding: 0 20px 16px; 
}
.prof-tab-btn {
  flex: 1; padding: 10px; text-align: center;
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  color: var(--ink2); cursor: pointer; transition: 0.2s;
}
.prof-tab-btn.active {
  background: var(--surf2); color: var(--ink); border-color: var(--accent);
}
.prof-tab-content { display: none; padding: 0 16px 16px; flex-direction: column; overflow-y: auto; }
.prof-tab-content.active { display: flex; }

/* -- CHARTS TAB -- */
.chart-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.chart-title {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.chart-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}
.chart-canvas {
  width: 100%;
  height: 150px;
  display: block;
}
.chart-canvas.chart-sm {
  height: 120px;
}
.chart-row {
  display: flex;
  gap: 12px;
}
.chart-half {
  flex: 1;
  min-width: 0;
}


/* -- SETTINGS MODAL (MINIMAL) -- */
.set-sheet {
  width: 92%; max-width: 420px;
  background: var(--surf); border-radius: 20px;
  border: 1px solid var(--brd); padding: 20px; position: relative;
  display: flex; flex-direction: column; gap: 10px;
  /* Ayarlar hic kaydirilamiyormus — .prof-sheet'te bu ikisi vardi,
     burada hic olmamis. Icerik sigdigi surece fark edilmemis; hesap
     kurtarma/silme ve Hakkinda satirlari eklenince alt kisim
     erisilemez oldu (magazalarin istedigi gizlilik linkleri dahil). */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* iPhone'da alttaki ana ekran cubugunun altinda kalmasin */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
/* KRITIK: sheet bir flex sutunu. Yukseklik sinirli oldugunda flex
   cocuklari varsayilan olarak KUCULUR (flex-shrink:1) — tasip kaydirma
   uretmek yerine satirlar ezilir ve kirpilir. Gercek cihazda "Hesabimi
   Sil" satiri tamamen kayboldu, tema izgarasi yaridan kesildi.
   Cocuklar kucultulmeyince icerik dogru tasiyor ve sheet kayiyor. */
.set-sheet > * { flex-shrink: 0; }
.set-header {
  text-align: center; margin-bottom: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 1.2rem; color: var(--ink);
  font-weight: 600;
}
.set-section-tit {
  font-size: 0.65rem; color: var(--ink2); font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; margin: 8px 0 2px 4px; letter-spacing: 0.05em;
}
.set-box { background: var(--surf2); border-radius: 12px; border: 1px solid var(--brd); display: flex; flex-direction: column; overflow: hidden; }
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--brd); font-size: 0.8rem; }
.set-row:last-child { border-bottom: none; }
.set-icon-label { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.set-icon { font-size: 1.1rem; filter: grayscale(0.5); }
.set-ic { width: 1.05em; height: 1.05em; fill: currentColor; color: var(--ink2); display: block; }
.set-row-col { flex-direction: column; align-items: stretch; gap: 12px; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border-radius: 10px; cursor: pointer;
  background: var(--tb-bg); border: 1.5px solid var(--brd);
  transition: border-color 0.15s, transform 0.1s;
}
.theme-btn:hover { transform: translateY(-1px); }
/* NOT: color-mix Chrome/WebView 111+ ister. Desteklenmeyen surumde satir
   tamamen gecersiz sayilir, o yuzden her birinin onunde duz yedek var. */
.theme-btn.active { border-color: var(--tb-ac); box-shadow: 0 0 0 2px var(--brd); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tb-ac) 30%, transparent); }
.theme-btn-ic {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf);
  background: color-mix(in srgb, var(--tb-ac) 18%, transparent);
}
.theme-btn-ic .ic { width: 15px; height: 15px; fill: var(--tb-ac); color: var(--tb-ac); }
.theme-btn-name {
  font-size: 0.52rem; letter-spacing: 0.02em;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--tb-ac);
  color: color-mix(in srgb, var(--tb-ac) 75%, #888);
}
.theme-btn.active .theme-btn-name { color: var(--tb-ac); font-weight: 600; }
.set-btn { background: var(--surf); border: 1px solid var(--brd); color: var(--ink); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; }
.set-btn:hover { background: var(--bg); border-color: var(--accent); }
.set-btn.toggle { background: var(--ok); color: #fff; border-color: var(--ok); }
.set-select { background: var(--surf); border: 1px solid var(--brd); color: var(--ink); padding: 6px; border-radius: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; outline: none; }
.set-val { font-size: 0.7rem; color: var(--ink2); }
.set-version { text-align: right; font-size: 0.6rem; color: var(--ink2); margin-top: 10px; font-family: 'IBM Plex Mono', monospace; }

/* XP bar */
.prof-xp-wrap {
  padding: 12px 20px 8px;
  flex-shrink: 0;
}
.prof-xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: var(--ink2);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.prof-xp-bar {
  height: 6px;
  background: var(--surf2);
  border-radius: 3px;
  overflow: hidden;
}
.prof-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ok), var(--accent));
  border-radius: 3px;
  transition: width 0.5s ease;
}
.prof-next {
  font-size: 0.52rem;
  color: var(--ink2);
  letter-spacing: 0.06em;
  margin-top: 4px;
  text-align: right;
}

/* Stat cards */
.prof-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 20px 4px;
}
.prof-stat-card {
  background: var(--surf2);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.prof-stat-v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.3rem; font-weight: 500;
  color: var(--ink); line-height: 1;
  margin-bottom: 4px;
}
.prof-stat-l {
  font-size: 0.55rem;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Section titles */
.prof-section-title {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink2);
  padding: 14px 20px 6px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Weekly streak card */
.prof-streak-card {
  margin: 0 20px;
  background: var(--surf2);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: 12px 14px;
}
.prof-streak-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--ink);
  margin-bottom: 10px;
  font-family: 'IBM Plex Mono', monospace;
}
.prof-streak-header span:last-child {
  color: var(--ok);
  font-weight: 500;
}
.prof-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.prof-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.prof-week-dot {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surf);
  border: 1px solid var(--brd);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  color: var(--ink3);
  transition: all 0.2s;
}
.prof-week-dot.done {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.prof-week-lbl {
  font-size: 0.45rem;
  color: var(--ink2);
  letter-spacing: 0.04em;
  font-family: 'IBM Plex Mono', monospace;
}

/* Best / En iyi card */
.prof-best-card {
  margin: 0 20px;
  background: var(--surf2);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: 12px 14px;
}
.prof-best-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--ink2);
}
.prof-best-stars {
  font-size: 0.9rem;
  color: var(--warn);
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
}
.prof-best-val {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink);
  font-weight: 500;
}

/* Theme selector in profile */
.prof-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 20px;
}
.prof-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.prof-theme-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid var(--brd);
  transition: border-color 0.15s;
}
.prof-theme-btn.active .prof-theme-swatch { border-color: var(--accent); }
.prof-theme-btn:hover .prof-theme-swatch { border-color: var(--ink2); }
.prof-theme-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.5rem;
  color: var(--ink2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Achievements in profile */
.prof-achievements {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center;
  padding: 0 20px 8px;
}
.prof-season-info {
  font-size: 0.6rem; color: var(--ok);
  letter-spacing: 0.08em;
  padding: 8px 20px 0;
  text-align: center;
}
.prof-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center;
  padding: 6px 20px 20px;
}
.prof-badges-title {
  font-size: 0.58rem;
  color: var(--ink2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 20px 4px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
}


/* -- AD OVERLAY -- */
.ad-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 280;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.ad-overlay.show { opacity: 1; pointer-events: all; }
.ad-card {
  text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 12px;
}
.ad-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem; color: #888; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ad-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.2rem; color: #fff; font-weight: 500;
}
.ad-countdown {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 3rem; color: var(--accent); font-weight: 500;
}
.ad-sub { font-size: 0.6rem; color: #666; }

/* -- AD TOAST -- */
.ad-toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surf);
  border: 1px solid var(--ok);
  border-radius: 8px;
  padding: 8px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem; color: var(--ok);
  z-index: 290;
  transition: transform 0.3s ease;
  white-space: nowrap;
}
.ad-toast.show { transform: translateX(-50%) translateY(0); }

/* -- AD HINT BUTTON -- */
.ad-hint-btn {
  font-size: 0.7rem !important;
  padding: 6px 8px !important;
}

/* -- PREMIUM MODAL -- */


.prem-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}


.prem-features { margin: 8px 0; }
.prem-feat {
  font-size: 0.68rem; color: var(--ink2);
  padding: 3px 0; letter-spacing: 0.04em;
}
.prem-feat::before { content: '\u2713 '; color: var(--ok); }
.prem-themes {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; margin: 8px 0;
}




.prem-theme-dot {
  width: 10px; height: 10px; border-radius: 50%;
}

/* -- ACHIEVEMENT TOAST -- */
.achv-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%;
  /* Gizliyken tamamen ekran disina cik (safe-area kaymasini da asacak kadar) */
  transform: translateX(-50%) translateY(calc(-100% - 120px));
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  z-index: 300;
  transition: transform 0.4s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.achv-toast.show { transform: translateX(-50%) translateY(0); }
.achv-toast-icon { font-size: 1.6rem; display: flex; align-items: center; }
.achv-toast-icon .achv-ic { width: 26px; height: 26px; fill: currentColor; color: var(--accent); }
.achv-toast-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem; font-weight: 500;
  color: var(--ink); letter-spacing: 0.04em;
}
.achv-toast-desc {
  font-size: 0.58rem; color: var(--ink2); margin-top: 1px;
}

/* -- ACHIEVEMENTS (profile) -- */
.prof-achievements {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; margin: 10px 0;
}
.prof-featured-achv {
  display: flex; gap: 10px; justify-content: center;
  margin: 6px 20px 16px; border-radius: 12px;
  background: var(--surf2); border: 1px solid var(--brd);
  padding: 12px 6px;
}
.achv-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  width: 54px;
}
.achv-icon-bg {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surf); border: 1px solid var(--brd);
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1); opacity: 0.4; transition: 0.2s;
}
.achv-item.achv-done .achv-icon-bg {
  filter: grayscale(0); opacity: 1; background: var(--bg); border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.achv-icon { font-size: 1.2rem; }
.achv-ic {
  width: 19px; height: 19px;
  fill: currentColor;
  color: var(--ink2);
}
.achv-item.achv-done .achv-ic { color: var(--accent); }
.achv-label {
  font-size: 0.45rem; color: var(--ink2);
  text-align: center; letter-spacing: 0.02em;
  line-height: 1.2; font-family: 'IBM Plex Mono', monospace;
}
.achv-item.achv-done .achv-label { color: var(--ink); font-weight: 500; }

/* -- SEASON OVERLAY -- */
.season-overlay {
  position: fixed; inset: 0;
  background: rgba(22,24,28,0.96);
  z-index: 250;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.season-overlay.show { opacity: 1; pointer-events: all; }
.season-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.season-done {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.8rem; font-weight: 500;
  color: var(--ink); letter-spacing: 0.06em;
}
.season-done-sub {
  font-size: 0.7rem; color: var(--ink2);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.season-final-rank {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.2rem; font-weight: 500;
  letter-spacing: 0.06em;
}
.season-badge-big {
  font-size: 0.7rem !important;
  padding: 4px 12px !important;
  margin: 4px 0 12px;
}
.season-new {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem; color: var(--ok);
  letter-spacing: 0.08em; margin-bottom: 8px;
}

/* -- SEASON BADGES (profile) -- */
.prof-season-info {
  font-size: 0.6rem; color: var(--ok);
  letter-spacing: 0.08em; margin-top: 12px;
}
.prof-badges-title {
  font-size: 0.55rem; color: var(--ink2);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 12px;
}
.prof-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center; margin-top: 6px;
}
.season-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.48rem;
  padding: 2px 8px;
  border-radius: 4px;
  color: #000;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* -- RANK UP OVERLAY -- */
.rank-up-overlay {
  position: fixed; inset: 0;
  z-index: 250;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(22,24,28,0.96);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.rank-up-overlay.show { opacity: 1; pointer-events: all; }
.rank-up-badge {
  font-size: 3rem; margin-bottom: 8px;
}
.rank-up-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.2rem; color: var(--ink);
  letter-spacing: 0.06em;
}
.rank-up-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.6rem; font-weight: 500;
  letter-spacing: 0.08em;
}

/* -- RANK BADGE (inline) -- */
.rank-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.5rem;
  padding: 2px 6px;
  border-radius: 4px;
  color: #000;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* -- WIN SCREEN SP -- */


/* -- TUTORIAL MODAL -- */
.tut-modal {
  position: fixed; inset: 0;
  background: rgba(10,11,14,0.7);
  backdrop-filter: blur(6px);
  z-index: 320; /* nick modalin (300) ustunde — ilk aciliste once ogretici */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.tut-modal.show { opacity: 1; pointer-events: all; }

.tut-sheet {
  width: 92%; max-width: 380px;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 28px 24px 20px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
}

.tut-slide { display: none; flex-direction: column; align-items: center; gap: 14px; min-height: 220px; justify-content: center; }
.tut-slide.active { display: flex; }

.tut-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink);
}
.tut-body {
  font-size: 0.78rem; color: var(--ink2);
  line-height: 1.7; text-align: center;
}
.tut-body b { color: var(--ink); font-weight: 500; }
.tut-modes { text-align: left; }
.tut-icon-big { font-size: 2.2rem; color: var(--accent); }
.tut-icon-big svg { width: 1em; height: 1em; display: block; }

.tut-demo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tut-demo-target {
  font-size: 0.68rem; color: var(--ink2);
  font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.06em;
}
.tut-demo-target b { color: var(--accent); font-size: 0.9rem; }
.tut-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 2px;
  background: var(--brd);
  border: 2px solid var(--brd);
  border-radius: 8px;
  overflow: hidden;
}
.tut-demo-grid span {
  width: 44px; height: 44px;
  background: var(--locked);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem; color: var(--ink2);
}

.tut-dots { display: flex; gap: 6px; }
.tut-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brd);
  transition: background 0.2s;
}
.tut-dot.on { background: var(--accent); }

.tut-btns { display: flex; gap: 10px; width: 100%; }
.tut-skip {
  flex: 1;
  background: transparent;
  border: 1px solid var(--brd);
  color: var(--ink2);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.06em; padding: 12px 0;
  cursor: pointer; border-radius: 9px; transition: all 0.15s;
}
.tut-skip:hover { color: var(--ink); border-color: var(--ink2); }
.tut-next {
  flex: 2;
  background: var(--ink); color: var(--bg); border: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.08em; padding: 12px 0;
  cursor: pointer; border-radius: 9px; transition: opacity 0.15s;
}
.tut-next:hover { opacity: 0.8; }

/* -- RESPONSIVE -- */
@media (max-width: 420px) {
  header { padding: 20px 16px 0; }
  main { padding: 14px 16px; }
}

/* -- MOBILE: dikey dolgu — grid kalan bosluga ortalanir, bosluk alta yigilmaz -- */
@media (max-width: 859px) {
  .app-shell { flex: 1; }
  .game-col { flex: 1; display: flex; flex-direction: column; }
  /* main icerik yuksekliginde kalsin — grid dogal akista havuzun hemen altinda dursun,
     dikey bosluk iki yana yayilip "yuzen grid" gorunumu vermesin */
  main { justify-content: flex-start; }
  .play-area .grid-section { margin: 10px auto 0; }
  .pool { gap: 7px; }
  /* Diag kutusu telefonda kompakt: Hedef'in hemen sagina otursun, sarkmasin */
  .ctrl-row .diag-box { padding: 6px 10px; gap: 8px; }

  /* Header: ikonlar + mod etiketi tek satira sigmiyor — etiketi kendi satirina indir */
  header { flex-wrap: wrap; row-gap: 2px; padding-top: 28px; }
  header .wordmark { font-size: 1.3rem; }
  header .level-tag { width: 100%; order: 5; text-align: left; padding: 2px 0 0; }

  /* Kontrol satiri = 3 duzenli satir:
     1) Hedef + capraz kutusu   2) 3x3/4x4/5x5   3) ipucu + reklam ... Yeni */
  .ctrl-row { row-gap: 8px; }
  .ctrl-row .sz-btns { order: 5; width: 100%; display: flex; gap: 8px; }
  .ctrl-row .sz-btn { flex: 1; text-align: center; }
  .ctrl-row #hintBtn,
  .ctrl-row #adHintBtn,
  .ctrl-row #newGameBtn { order: 6; }
  .ctrl-row #hintBtn { margin-left: 0; }
  .ctrl-row #newGameBtn { margin-left: auto; }
}

/* -- MOBILE MODALS -- */
@media (max-width: 600px) {
  /* Leaderboard modal — tam sayfa: baslik ustte sabit, liste kayar */
  .lb-modal {
    justify-content: flex-start;
    align-items: stretch;
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    text-align: center;
  }
  .lb-title {
    font-size: 1rem;
  }
  .lb-tabs { justify-content: center; }
  .lb-list {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    max-height: none;
    padding: 0 4px;
  }
  .lb-row {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .lb-tab {
    padding: 8px 20px;
    font-size: 0.65rem;
  }
  .lb-close {
    width: auto;
    align-self: stretch;
    padding: 14px;
    font-size: 0.75rem;
    border-radius: 12px;
    margin: auto 12px 12px;
  }

  /* Profile modal */
  .profile-modal {
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
  }
  /* Sayfalar ekrana tam otursun: tam genislik, alta yapisik bottom sheet */
  .prof-sheet, .set-sheet {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    max-height: 88vh;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .ss-style {
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    border-bottom: none;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
  }
  .prof-stats {
    gap: 12px;
  }
  .profile-modal .lb-close {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
  }

  /* Stats modal */
  
  
  
  
  
  

  /* Win screen — keep centered but wider */
  
  
  
  
}

/* =========================================================
   ORTAK YAPI KATMANI (html[data-v2])
   Mono yazi, ince cizgiler, kutu yerine bosluk. Tum temalar
   bunu paylasiyor; renk her temanin kendi token blogundan.
   ========================================================= */
/* mono yazi her yerde */
html[data-v2],
html[data-v2] body,
html[data-v2] button,
html[data-v2] input,
html[data-v2] select {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --- kutulari duzlestir: seffaf zemin, sacteli kenar, golgesiz --- */
html[data-v2] .sidebar-card,
html[data-v2] .mode-banner,
html[data-v2] .diag-box,
html[data-v2] .timer-box,
html[data-v2] .set-box {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
html[data-v2] .sidebar-card { border-bottom: 1px solid var(--brd); border-radius: 0; }

/* --- Hedef kutusu: cerceve yok, buyuk ince sayi --- */
html[data-v2] .target-box {
  background: transparent;
  border: 0;
  padding: 0 4px;
  border-radius: 0;
}
html[data-v2] .t-lbl { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.55rem; color: var(--ink3); }
html[data-v2] .t-val { color: var(--ink); font-size: 2rem; font-weight: 300; }

/* --- kucuk butonlar: seffaf + ince kenar --- */

html[data-v2] .sz-btn,
html[data-v2] .new-btn,
html[data-v2] .set-btn,
html[data-v2] .set-select,
html[data-v2] .sb-open-lb-btn {
  background: transparent;
  border: 1px solid var(--brd);
  border-radius: 6px;
  color: var(--ink2);
}
/* (sz-btn.on eski koyu-pill stili kaldirildi — Faz-tools'ta altcizgi metin) */

/* --- Sayi havuzu: altcizgi tarzi, kutucuk yok --- */
html[data-v2] .pool-num {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--brd);
  border-radius: 0;
  color: var(--ink);
}
html[data-v2] .pool-num:hover:not(.used):not(.sel-num) {
  background: transparent;
  border-bottom-color: var(--ink2);
}
html[data-v2] .pool-num.sel-num {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
}

/* --- Izgara: sadece sacteli cizgiler, golge yok --- */
html[data-v2] .grid {
  box-shadow: none;
  border: 1px solid var(--brd);
  border-radius: 0;
  gap: 1px;
  background: var(--brd);
}
html[data-v2] .cell.sel-cell { box-shadow: inset 0 0 0 1px var(--ink2); }
html[data-v2] .cell.focused  { box-shadow: inset 0 0 0 1px var(--accent); }
html[data-v2] .cell-val { font-weight: 400; color: var(--ink2); }
html[data-v2] .cell:not(.locked) .cell-val { color: var(--ink); }

/* --- Ilerleme cizgisi: sacteli + mavi dolgu --- */
html[data-v2] .progress-bar { height: 1px; background: var(--brd); border-radius: 0; }
html[data-v2] .progress-fill { background: var(--accent); border-radius: 0; }
html[data-v2] .diag-val.over { color: var(--warn); }

/* --- Modallar / overlay: sicak beyaz zemin, yumusak kenar --- */

html[data-v2] .gameover-screen { background: var(--bg); }
html[data-v2] .prof-sheet,
html[data-v2] .lb-modal,
html[data-v2] .set-modal{
  border-radius: 0;
}



/* =========================================================
   SAKIN — Faz 2: OYUN EKRANI yerlesimi (mockup ile bire bir)
   Sadece html[data-v2]. Diger temalar etkilenmez.
   ========================================================= */

/* --- Baslik: [menu]  ...  kesen  ...  (avatar) --- */
html[data-v2] header {
  position: relative;
  align-items: center;
}
html[data-v2] header .wordmark {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: lowercase;
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  color: var(--ink3);
  padding-left: 0.34em;
  white-space: nowrap;
}
@media (min-width: 860px) {
  html[data-v2] header .wordmark { top: 36px; }
}
/* kupa + disli basliktan kalksin (menude zaten var) */
html[data-v2] header .sound-btn { display: none; }
/* profil pill'i sade avatar dairesine indir */
html[data-v2] .user-pill {
  background: transparent;
  border: 0;
  padding: 0;
}
html[data-v2] .user-pill-name { display: none; }
html[data-v2] .user-pill-avatar {
  width: 30px; height: 30px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--ink2);
}
/* tarih / mod satiri ortada */
html[data-v2] header .level-tag {
  text-align: center;
  letter-spacing: 0.16em;
  color: var(--ink3);
  padding-top: 6px;
}

/* --- Kontrol satiri: dikey, ortali; hedef buyuk + altinda etiket --- */
html[data-v2] .ctrl-row {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* reklam-ipucu: seritte, ipucu'nun hemen yaninda kucuk sessiz bir izle-butonu */
html[data-v2] .ctrl-tools #adHintBtn {
  display: inline-flex;
  align-items: center;
  margin-left: -17px;
  padding: 3px 4px;
  color: var(--ink3);
  opacity: 0.7;
}
html[data-v2] .ctrl-tools #adHintBtn:hover { color: var(--accent); opacity: 1; }
/* mode-banner: gizleme (haftalik tema bilgisi / gunluk-bitti / challenge
   daveti burada) — sadece sadelestir */
html[data-v2] .mode-banner {
  text-align: center;
  color: var(--ink3);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  line-height: 1.6;
  padding: 2px 0 0;
}
html[data-v2] .mode-banner b { color: var(--ink2); font-weight: 400; }
html[data-v2] .mode-banner .tag {
  background: transparent;
  border: 0;
  color: var(--accent);
  padding: 0;
  margin-right: 3px;
}

/* Boyut + ipucu + yeni: hedef bloguyla oyun alani arasinda,
   tanimli bir kontrol seridi (ustte/altta sacteli, hepsi ayni dilde metin) */
html[data-v2] .ctrl-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 22px;
  width: 100%;
  margin-top: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--brd);
  border-bottom: 1px solid var(--brd);
}
html[data-v2] .ctrl-row .sz-btns { display: flex; gap: 10px; width: auto; order: 0; }
html[data-v2] .ctrl-row #hintBtn,
html[data-v2] .ctrl-row #adHintBtn,
html[data-v2] .ctrl-row #newGameBtn { order: 0; }
/* hepsi: cerceve/kutu yok, kucuk buyuk-harf tracked metin */
html[data-v2] .sz-btn,
html[data-v2] #hintBtn,
html[data-v2] #adHintBtn,
html[data-v2] #newGameBtn {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 3px 2px;
  color: var(--ink3);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-v2] .sz-btn { border-bottom: 1px solid transparent; letter-spacing: 0.06em; }
html[data-v2] .sz-btn.on {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  border-bottom-color: var(--accent);
}
html[data-v2] .sz-btn:hover:not(.on),
html[data-v2] #hintBtn:hover,
html[data-v2] #newGameBtn:hover { color: var(--ink); }

html[data-v2] .target-box {
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  padding: 0;
}
html[data-v2] .t-val { font-size: 1.8rem; font-weight: 300; color: var(--ink); line-height: 1; }
html[data-v2] .t-lbl {
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink3);
}
html[data-v2] .diag-box {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 22px;
}
html[data-v2] .diag-box .diag-icon { color: var(--ink3); font-size: 0.7rem; }
html[data-v2] .diag-box .diag-val { color: var(--ink2); font-weight: 400; font-size: 0.85rem; }

/* --- Alt bar: ince ilerleme cizgisi ustte, sonra "N HAMLE ... geri/ileri" --- */
html[data-v2] .stats-bar {
  flex-wrap: wrap;
  gap: 10px 16px;
  border-top: 0;
  padding-top: 10px;
}
html[data-v2] .progress-wrap {
  order: -1;
  flex-basis: 100%;
}
html[data-v2] .stats-bar .stat {
  flex-direction: row-reverse;
  align-items: baseline;
  gap: 6px;
}
html[data-v2] .stat-l { letter-spacing: 0.12em; }
html[data-v2] .stat-v { font-size: 0.9rem; font-weight: 400; }
html[data-v2] #undoBtn { margin-left: auto !important; }
html[data-v2] #undoBtn,
html[data-v2] #redoBtn {
  border: 0 !important;
  background: transparent !important;
  color: var(--ink3) !important;
}

/* =========================================================
   SAKIN — Faz 3: renk / efekt duzeltmeleri
   ("tamamlaninca garip yesil" + koyu scrim'ler + grafikler)
   Hepsi html[data-v2] ile kapali.
   ========================================================= */

/* Satir/hedef tamamlaninca: koyu yesil flash -> yumusak mavi wash */
/* Yedekler (--brd) eski WebView'da flash'in tamamen kaybolmasini onler:
   mavi/kirmizi yerine notr bir nabiz, ama geri bildirim duruyor. */
@keyframes fok-sakin   { 0%,100%{ background: var(--surf); } 45%{ background: var(--brd); background: color-mix(in srgb, var(--accent) 15%, var(--surf)); } }
@keyframes fline-sakin { 0%,100%{ background: var(--surf); } 50%{ background: var(--brd); background: color-mix(in srgb, var(--accent) 22%, var(--surf)); } }
@keyframes ferr-sakin  { 0%,100%{ background: var(--surf); } 40%{ background: var(--brd); background: color-mix(in srgb, var(--warn) 20%, var(--surf)); } }
html[data-v2] .cell.flash-ok   { animation: fok-sakin  0.4s ease; }
html[data-v2] .cell.flash-line { animation: fline-sakin 0.5s ease; }
html[data-v2] .cell.flash-err  { animation: ferr-sakin 0.4s ease; }

/* Kesif modu: dogru yerlestirilen hucrenin kalici koyu yesil zemini -> soguk acik ton */
/* Yedek sart: bu zemin olmazsa oyuncunun yerlestirdigi hucre verilen
   hucreden ayirt edilemez — kozmetik degil, oynanabilirlik meselesi. */
html[data-v2] .cell.placed-disc { background: var(--brd); background: color-mix(in srgb, var(--accent) 13%, var(--surf)); }

/* Yildizlar mockup'taki gibi mavi */
html[data-v2] .star.earned { color: var(--accent); }

/* Tum overlay / modal scrim'leri: temanin kendi zeminine gore */
/* Yedeksiz kalirsa ogretici penceresi saydam olur ve yazi okunmaz;
   overlay de karartmaz. Yedekte opak zemin / duz siyah scrim. */
html[data-v2] .tut-modal      { background: var(--bg); background: color-mix(in srgb, var(--bg) 80%, transparent); }

html[data-v2] .nick-modal,
html[data-v2] .lb-modal,
html[data-v2] .profile-modal,
html[data-v2] .season-overlay,
html[data-v2] .rank-up-overlay,
html[data-v2] .ad-overlay     { background: var(--bg); }

/* Birincil butonlar (nick / gameover / ogretici): koyu pill -> hayalet mavi */
html[data-v2] .nick-btn,
html[data-v2] .go-btn,
html[data-v2] .tut-next {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
}

/* Grafik bolumu: acik zemine uygun renkler */
html[data-v2] .chart-section { background: transparent; border-color: var(--brd); }
html[data-v2] .chart-title { color: var(--ink2); }
html[data-v2] .chart-desc  { color: var(--ink3); }

/* =========================================================
   SAKIN — Faz 4: ekrani telefona gore tam doldur
   (alttaki bos alan gitsin, footer en alta yaslanssin)
   Sadece telefon genisligi + html[data-v2].
   ========================================================= */
@media (max-width: 859px) {
  html[data-v2] body {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html[data-v2] .app-shell { flex: 1 0 auto; }
  html[data-v2] .game-col {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
    max-width: 580px;
  }
  html[data-v2] main {
    flex: 1 1 auto;
    padding-bottom: 6px;
  }
  /* footer'i (hamle + ilerleme + geri/ileri) ekranin altina yasla */
  html[data-v2] .stats-bar { margin-top: auto; }
}

/* =========================================================
   SAKIN — Faz 5: istisnasiz her yerde mono yazi
   (bazi ogeler CSS'te acikca 'IBM Plex Sans' ile
   tanimlanmisti; hepsini mono'ya cek). Dosyanin sonunda
   oldugu icin ayni ozgulluk seviyesinde kazanir.
   ========================================================= */
html[data-v2] *,
html[data-v2] *::before,
html[data-v2] *::after {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* =========================================================
   SAKIN — Faz 6: yan menu (drawer) yapisal gecis
   Kutu/hover-arkaplan yerine sacteli satirlar, kucuk
   kucuk baslik. Sadece html[data-v2].
   ========================================================= */










/* bos durum kutusuna sag ok, aktifte tik */



/* =========================================================
   SAKIN — Faz 7: kalan ekranlarin yapisal gecisi
   Profil / Liderlik / Ayarlar / Kazanma
   Kutu-kart -> sacteli satir/sutun. html[data-v2].
   ========================================================= */

/* ---------- PROFIL ---------- */
html[data-v2] .prof-sheet { border-radius: 0; }
/* Kapatma X'i: sticky oldugu icin arkasi opak olmali —
   yoksa grafikler kaydirilirken altindan icerik geciyor */
html[data-v2] .prof-sheet > .prof-banner-close,
html[data-v2] .prof-banner-close {
  background: var(--surf);
  background: color-mix(in srgb, var(--accent) 16%, var(--surf));
  color: var(--accent);
}
html[data-v2] .prof-avatar {
  background: transparent;
  border: 1px solid var(--brd);
  color: var(--ink2);
  font-weight: 300;
}
html[data-v2] .prof-nick { font-weight: 300; }
html[data-v2] .prof-level-tag {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink3);
}
html[data-v2] .prof-rank-pill {
  background: transparent;
  color: var(--ink2);
  padding: 0;
  font-weight: 400;
}
/* sekmeler: kutu -> altcizgi */
html[data-v2] .prof-tabs { gap: 22px; }
html[data-v2] .prof-tab-btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 0;
  color: var(--ink3);
}
html[data-v2] .prof-tab-btn.active {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--accent);
}
/* XP cizgisi */
html[data-v2] .prof-xp-bar { height: 1px; background: var(--brd); border-radius: 0; }
html[data-v2] .prof-xp-fill { background: var(--accent); border-radius: 0; }
/* istatistik: bej kartlar -> cizgiyle ayrilmis sutunlar */
html[data-v2] .prof-stat-cards {
  border-top: 1px solid var(--brd);
  border-bottom: 1px solid var(--brd);
  gap: 0;
  margin: 12px 20px 0;
  padding: 0;
}
html[data-v2] .prof-stat-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 4px;
}
html[data-v2] .prof-stat-card:not(:last-child) { border-right: 1px solid var(--brd); }
html[data-v2] .prof-stat-v { font-weight: 300; font-size: 1.5rem; }
/* haftalik / en iyi kartlari duz */
html[data-v2] .prof-streak-card,
html[data-v2] .prof-best-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
}
html[data-v2] .prof-week-dot {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--brd);
}
html[data-v2] .prof-week-dot.done {
  background: var(--brd);
  background: color-mix(in srgb, var(--accent) 15%, var(--surf));
  border-color: var(--accent);
  color: var(--ink);
}

/* ---------- LIDERLIK ---------- */
html[data-v2] .lb-tabs { gap: 26px; justify-content: center; margin-bottom: 4px; }
html[data-v2] .lb-tab {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 0;
  color: var(--ink3);
}
html[data-v2] .lb-tab.active {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--accent);
}
html[data-v2] .lb-list { width: 340px; gap: 0; }
html[data-v2] .lb-row {
  border-radius: 0;
  padding: 14px 6px;
  border-bottom: 1px solid var(--brd);
}
html[data-v2] .lb-row.lb-top1,
html[data-v2] .lb-row.lb-top2,
html[data-v2] .lb-row.lb-top3 { background: transparent; }
html[data-v2] .lb-row.lb-me {
  background: var(--surf2);
  border: 0;
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-v2] .lb-close {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
}

/* ---------- AYARLAR ---------- */
html[data-v2] .set-sheet { border-radius: 0; }
html[data-v2] .set-box {
  background: transparent;
  border: 0;
  border-radius: 0;
}
html[data-v2] .set-section-tit { letter-spacing: 0.18em; color: var(--ink3); }

/* ---------- KAZANMA ---------- */

html[data-v2] .go-title { font-weight: 300; }


/* profil/ayarlar tam-ekran sicak beyaz olunca ic kart cercevesi gereksiz */
html[data-v2] .prof-sheet,
html[data-v2] .set-sheet { border: 0; }

/* =========================================================
   SAKIN — Faz 8: isim (nick) modali — kalan eski stiller
   ========================================================= */
html[data-v2] .nick-title {
  text-transform: lowercase;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  color: var(--ink3);
}
html[data-v2] .nick-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--brd);
  border-radius: 0;
  padding: 10px 4px;
  width: 200px;
}
html[data-v2] .nick-input:focus { border-bottom-color: var(--accent); }
html[data-v2] .nick-sub { letter-spacing: 0.14em; color: var(--ink3); }

/* =========================================================
   SAKIN — Faz 9: bitis (kazanma) ekrani yeniden duzenleme
   Yatay sutunlar -> sacteli dikey satirlar; butonlar dikey.
   ========================================================= */

html[data-v2] .gameover-screen { gap: 0; }

html[data-v2] .go-title { font-size: 1.5rem; font-weight: 300; letter-spacing: 0.04em; }



html[data-v2] .star { font-size: 1.5rem; }
html[data-v2] .star.earned { color: var(--accent); }

/* sonuc: yatay -> dikey sacteli satirlar (etiket sol / deger sag) */





/* butonlar: dikey; birincil tam genislik hayalet, digerleri metin */




/* kazanilmayan yildiz: dolu gri yerine ince cerceve */
html[data-v2] .star:not(.earned) svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* =========================================================
   SAKIN — Faz 10: kalan overlay'ler + basarim ikonlari
   (stats / rank-up / sezon / premium + profil basarimlar)
   ========================================================= */

html[data-v2] .rank-up-badge { color: var(--accent); font-size: 2.2rem; }
html[data-v2] .season-done,
html[data-v2] .season-final-rank,
html[data-v2] .rank-up-name{ font-weight: 300; }

html[data-v2] .season-new { color: var(--accent); }

/* basarim ikonlari: dolu daire yerine sade — kazanilinca ince mavi halka */
html[data-v2] .achv-icon-bg {
  background: transparent;
  border: 0;
}
html[data-v2] .achv-item.achv-done .achv-icon-bg {
  background: transparent;
  border: 1px solid var(--accent);
  box-shadow: none;
}

/* =========================================================
   SÜRÜKLE-BIRAK (js/dragdrop.js)
   ========================================================= */
.pool-num, .cell { touch-action: none; }
/* Birakilan tas: kaynagi aninda %30 opakliga dusuyordu, sicrama gibi
   duruyordu. Artik hafifce kuculup soluyor. */
.pool-num.dragging-src, .cell.dragging-src .cell-val {
  opacity: 0.25;
  transform: scale(0.92);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.cell.drop-target {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--surf2);
}

/* --- SURUKLENEN TAS ---
   Iki katman: dis katman parmagi takip ediyor (transform, her karede
   JS yaziyor), ic katman gorunum + "kaldirma" animasyonu. Ayrilmasinin
   sebebi: takibin gecis suresi olmamali, kaldirmanin olmali. */
.drag-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 500;
  pointer-events: none;
  will-change: transform;
}
.dg-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pool-sz, 44px);
  height: var(--pool-sz, 44px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: calc(var(--pool-sz, 44px) * 0.44);
  font-weight: 500;
  color: var(--ink);
  background: var(--surf);
  border: 1px solid var(--ink2);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  animation: ghostLift 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Elden birakilip yerine ucarken buyume geri aliniyor */
/* Inis: tas kuculurken soluyor. Opaklik ve gecis JS'ten satir ici
   veriliyor (CSS'teki kurali satir ici eziyordu). Golge gecisi yok —
   pahali ve zaten goze carpmiyor. */
.drag-ghost.landing .dg-tile {
  animation: none;
  transform: scale(0.92);
  transition: transform 0.11s ease-in;
}
@keyframes ghostLift {
  from { transform: scale(0.86); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-tile { animation: none; transform: scale(1); }
  .pool-num.dragging-src, .cell.dragging-src .cell-val { transition: none; }
}
html[data-v2] .dg-tile { border-radius: 0; border-color: var(--accent); }

/* Cesur ailesinde surukledigin sey tahtadaki tasin ta kendisi gibi
   gorunmeli: ayni yazi tipi, ayni koseler, temanin golgesi. Eskiden
   mono yazili, 1px cerceveli, sert siyah golgeli bir kutuydu — tasarim
   diliyle hicbir ilgisi yoktu. */
html[data-fam="c"] .dg-tile {
  font-family: inherit;
  font-weight: 800;
  font-size: calc(var(--pool-sz, 44px) * 0.5);
  border: 0;
  border-radius: 13px;
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 14px 26px -8px rgba(var(--sh),0.45),
              0 3px 6px rgba(var(--sh),0.18),
              inset 0 1.5px 0 var(--hi);
}

/* Hedef hucre: sabit cerceve yerine nefes alan bir vurgu */
html[data-fam="c"] .cell.drop-target {
  background: color-mix(in srgb, var(--accent) 12%, var(--surf));
  box-shadow: inset 0 0 0 2.5px var(--accent);
  animation: dropPulse 1s ease-in-out infinite;
}
@keyframes dropPulse {
  0%, 100% { box-shadow: inset 0 0 0 2.5px var(--accent); }
  50%      { box-shadow: inset 0 0 0 2.5px var(--accent), 0 0 0 6px rgba(var(--ac-rgb),0.18); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-fam="c"] .cell.drop-target { animation: none; }
}

/* Yikici eylemler (hesap silme). Sakin paletinde uyari rengi --warn;
   kirmizi yoksa ondan turetiyoruz ki tum temalarda okunur kalsin. */
.set-btn.danger,
.nick-btn.danger {
  color: var(--warn, #c0392b);
  border-color: var(--warn, #c0392b);
}
.set-btn.danger:hover,
.nick-btn.danger:hover {
  background: var(--warn, #c0392b);
  color: var(--bg);
}



/* Ayarlar'daki hukuki linkler */
.set-link {
  color: var(--ink2); text-decoration: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  border-bottom: 1px solid var(--brd); padding-bottom: 2px;
}
.set-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* =========================================================
   SAKIN — masaustu duzeltmeleri
   ========================================================= */

/* Profil avatari basligin ustune biniyordu. Sebep: header space-between
   ile 3 ogeyi dagitiyor (menu | avatar | mod etiketi) ve ortadaki oge
   tam ortaya dusuyor — "kesen" yazisi da mutlak konumla tam ortada.
   Telefonda cakismiyor cunku 859px altinda mod etiketi kendi satirina
   iniyor ve avatar saga kayiyor. Ayni duzeni masaustune de veriyoruz;
   tasarimin amaci zaten [menu] ... kesen ... (avatar) + altinda mod. */
@media (min-width: 860px) {
  html[data-v2] header { flex-wrap: wrap; row-gap: 2px; }
  html[data-v2] header .level-tag {
    width: 100%; order: 5;
    text-align: center;
    padding-top: 8px;
  }
}

/* Masaustunde arayuz %125 olceklenir. Emre'nin talebi: tarayicida %125
   zoom yapinca cok daha iyi duruyordu, sabitlensin.
   ESIK NEDEN 1200: zoom, medya sorgularinin baktigi genisligi
   kucultuyorsa 1200px pencere 960px gibi davranir — bu hala 860
   masaustu esiginin ustunde, yani duzen mobile dusup titremez.
   Daha dusuk bir esik (or. 1000) bu riski dogururdu. */
@media (min-width: 1200px) {
  html[data-v2] { zoom: 1.25; }
}

/* Liderlik listesi telefonda sola yapisiyordu. Sebep: max-width:600'de
   modal tam sayfa olsun diye align-items:stretch veriliyor, ama .lb-list'in
   sabit genisligi var (v2'de 340px) — esnemiyor ve capraz eksende basa
   hizalaniyor. Sonuc: satirlarin sagi bos kaliyor, "Henuz kimse cozmemis"
   ortali gorunmuyor. Otomatik kenar boslugu esnek kutuda ortalar. */
.lb-list,
#lbMyRank,
#weeklyLbList,
#weeklyLbMyRank {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   COZUM SONRASI KARSILASTIRMA (kazanma ekrani)
   ========================================================= */
.win-compare {
  width: 100%; max-width: 300px;
  margin: 4px auto 16px;
  font-family: 'IBM Plex Mono', monospace;
  text-align: center;
}
.cmp-lead {
  font-size: 0.78rem; color: var(--ink);
  letter-spacing: 0.04em;
}
.cmp-sub {
  font-size: 0.66rem; color: var(--ink2);
  letter-spacing: 0.04em; margin-top: 3px;
}
.cmp-dist-tit {
  font-size: 0.56rem; letter-spacing: 0.18em; color: var(--ink3);
  margin: 14px 0 6px;
}
.cmp-dist { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.cmp-bar-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.62rem; color: var(--ink2);
}
.cmp-bar-lbl { width: 40px; text-align: right; flex-shrink: 0; }
.cmp-bar {
  flex: 1; height: 10px;
  background: var(--surf2, var(--surf));
  border-radius: 2px; overflow: hidden;
}
.cmp-bar-fill {
  display: block; height: 100%;
  background: var(--ink3);
  border-radius: 2px;
}
.cmp-bar-n { width: 22px; text-align: left; flex-shrink: 0; }
/* Kendi kovan vurgulu — grafikte kendini bir bakista bul */
.cmp-bar-row.cmp-mine { color: var(--ink); }
.cmp-bar-row.cmp-mine .cmp-bar-fill { background: var(--accent); }
.cmp-bar-row.cmp-mine .cmp-bar-lbl { font-weight: 600; }


/* =========================================================
   THEME: CESUR — redesign'in (design/redesign-v2) uygulamasi
   Sadece renk degil: YERLESIM de degisiyor. Tahta fiziksel bir
   tepsi, tasar kabarik, bos hucreler basik, hedef sayi buyuk ve
   accent renginde, havuz taslari tombul.
   Hepsi html[data-fam="c"] ile kapili — diger 4 tema
   (Sakin/Gece/Retro/Kutup) bu bloktan ETKILENMEZ.
   ========================================================= */
/* ===== TEMA AILESI "c" =====================================
   Yapisal CSS'in tamami html[data-fam="c"] altinda; her tema
   yalnizca token tanimliyor. Yeni tema eklemek = asagiya bir
   blok + THEMES/SHOP_THEMES kaydi. Golge/parlaklik da token
   oldugu icin ayni yapi koyu paletle de dogru duruyor.
     --sh       golge rengi (r,g,b — alfa kullanildigi yerde eklenir)
     --ac-rgb   accent'in r,g,b hali (halka/parlama efektleri)
     --warn-rgb ayni sey, uyari rengi icin
     --hi       kabarik yuzeylerin ust kenar isigi
     --scrim    tam ekran panel arkasi karartma
     --tray     grid tepsisinin zemini (bos hucreden bir ton koyu)
   ============================================================ */
[data-theme="cesur"] {
  --bg:      #f6f2e9;
  --surf:    #fffdf8;
  --surf2:   #ece4d2;
  --brd:     #e2d9c5;
  --ink:     #1a1a1a;
  --ink2:    #5f5a50;
  --ink3:    #8a8273;
  --accent:  #2e4fa8;
  --ok:      #3d7a5a;
  --warn:    #c08a3a;
  --locked:  #ece4d2;
  --tray:    #e4d9c1;
  --sh:      120,95,60;
  --ac-rgb:  46,79,168;
  --warn-rgb: 192,138,58;
  --hi:      rgba(255,255,255,0.75);
  --scrim:   rgba(15,12,8,0.32);
  --grid-gap: 7px;
  --grid-pad: 9px;
}

/* -- MONO: notr gri, tek vurgu siyah -- */
[data-theme="mono"] {
  --bg:      #f4f4f5;
  --surf:    #ffffff;
  --surf2:   #e7e7ea;
  --brd:     #dededf;
  --ink:     #141416;
  --ink2:    #5c5c63;
  --ink3:    #85858d;
  --accent:  #18181b;
  --ok:      #3f7d5c;
  --warn:    #8a8a92;
  --locked:  #e7e7ea;
  --tray:    #e0e0e3;
  --sh:      60,60,70;
  --ac-rgb:  24,24,27;
  --warn-rgb: 138,138,146;
  --hi:      rgba(255,255,255,0.9);
  --scrim:   rgba(12,12,14,0.32);
  --grid-gap: 7px;
  --grid-pad: 9px;
}

/* -- ORMAN: sicak yesil -- */
[data-theme="orman"] {
  --bg:      #eef3ec;
  --surf:    #fbfdfa;
  --surf2:   #dce8d8;
  --brd:     #d2e0ce;
  --ink:     #13201a;
  --ink2:    #4f6355;
  --ink3:    #7b8f80;
  --accent:  #22704a;
  --ok:      #22704a;
  --warn:    #b5803a;
  --locked:  #dce8d8;
  --tray:    #d0e0cb;
  --sh:      48,86,60;
  --ac-rgb:  34,112,74;
  --warn-rgb: 181,128,58;
  --hi:      rgba(255,255,255,0.8);
  --scrim:   rgba(10,20,14,0.32);
  --grid-gap: 7px;
  --grid-pad: 9px;
}

/* -- GUN BATIMI: seftali zemin, mercan vurgu -- */
[data-theme="gunbatimi"] {
  --bg:      #fbefe7;
  --surf:    #fffaf6;
  --surf2:   #f5dccd;
  --brd:     #f0d5c6;
  --ink:     #2a1810;
  --ink2:    #6f5245;
  --ink3:    #a0806f;
  --accent:  #c2462a;
  --ok:      #3d7a5a;
  --warn:    #d98a2b;
  --locked:  #f5dccd;
  --tray:    #f2d2c0;
  --sh:      150,80,55;
  --ac-rgb:  194,70,42;
  --warn-rgb: 217,138,43;
  --hi:      rgba(255,255,255,0.8);
  --scrim:   rgba(40,18,10,0.32);
  --grid-gap: 7px;
  --grid-pad: 9px;
}

/* -- LAVANTA: soguk mor -- */
[data-theme="lavanta"] {
  --bg:      #f2f0fa;
  --surf:    #fcfbff;
  --surf2:   #e2dcf5;
  --brd:     #dcd5f0;
  --ink:     #1d1730;
  --ink2:    #585079;
  --ink3:    #8a82a8;
  --accent:  #5f43c2;
  --ok:      #3d7a5a;
  --warn:    #b07ac8;
  --locked:  #e2dcf5;
  --tray:    #dbd3f2;
  --sh:      80,62,140;
  --ac-rgb:  95,67,194;
  --warn-rgb: 176,122,200;
  --hi:      rgba(255,255,255,0.85);
  --scrim:   rgba(20,14,40,0.34);
  --grid-gap: 7px;
  --grid-pad: 9px;
}

/* -- GECE: koyu palet. Ayni yapi, isik yonu ters: kabarik yuzeyler
      bos hucreden ACIK, golge yerine kontrast calisiyor. -- */
[data-theme="gece"] {
  --bg:      #101319;
  --surf:    #262c38;
  --surf2:   #1a1e27;
  --brd:     #3b4356;
  --ink:     #f0f1f4;
  --ink2:    #a3a9b6;
  --ink3:    #6f7686;
  --accent:  #6cb8ec;
  --ok:      #4fae82;
  --warn:    #e6b762;
  --locked:  #161920;
  --tray:    #0b0d11;
  --sh:      0,0,0;
  --ac-rgb:  108,184,236;
  --warn-rgb: 230,183,98;
  --hi:      rgba(255,255,255,0.07);
  --scrim:   rgba(0,0,0,0.55);
  --grid-gap: 7px;
  --grid-pad: 9px;
}

/* Bricolage/DM Sans yerine zaten yuklu olan Outfit — ayni "bold
   geometrik" ruh, ekstra font indirmeden. html[data-v2]'nin ortak mono
   kuralindan SONRA geldigi icin sadece Cesur'da onu eziyor. */
html[data-fam="c"],
html[data-fam="c"] body,
html[data-fam="c"] button,
html[data-fam="c"] input,
html[data-fam="c"] select {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* --- Baslik: wordmark kalin ve koyu (tracked ince yazi degil) --- */
html[data-fam="c"] header .wordmark {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-left: 0;
  color: var(--ink);
}
html[data-fam="c"] header .level-tag { font-weight: 600; }
html[data-fam="c"] .user-pill-avatar {
  border-radius: 999px;
  border-color: var(--brd);
  background: var(--surf);
  font-weight: 700;
}

/* --- Hedef: buyuk, accent renginde --- */
html[data-fam="c"] .t-val {
  font-size: clamp(2.6rem, 13vw, 3.9rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 0.92;
}
html[data-fam="c"] .t-lbl { font-weight: 700; }
html[data-fam="c"] .diag-box .diag-val { font-weight: 700; }

/* --- Kontrol seridi: sac teli cizgiler yerine bosluk --- */
html[data-fam="c"] .ctrl-tools {
  border-top: 0;
  border-bottom: 0;
  padding: 4px 0 0;
  gap: 8px 14px;
}
/* boyut sekmeleri: aktif olan kalin + kalin accent alt cizgi */
html[data-fam="c"] .sz-btn {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 3px 4px 6px;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}
html[data-fam="c"] .sz-btn.on {
  color: var(--ink);
  font-weight: 800;
  border-bottom-color: var(--accent);
}
/* ipucu / yeni / reklam: cerceveli tombul butonlar */
html[data-fam="c"] #hintBtn,
html[data-fam="c"] #newGameBtn {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 7px 13px;
  color: var(--ink2);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 2px rgba(var(--sh),0.1);
}
html[data-fam="c"] .ctrl-tools #adHintBtn {
  margin-left: 0;
  padding: 7px 9px;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 12px;
  opacity: 1;
  color: var(--ink2);
}

/* Satir toplamlari kolonu daralttildi: solda 42px + sagda 42px denge
   bosluğu telefonda tahtaya kalan yerin dortte birini yiyordu ve grid
   gereksiz kucuk kaliyordu. Rakamlar en fazla iki hane. */
html[data-fam="c"] { --rsum-col: 30px; }

/* --- TAHTA: tepsi + kabarik/basik taslar (tasarimin ana farki) --- */
html[data-fam="c"] .grid {
  gap: var(--grid-gap);
  padding: var(--grid-pad);
  background: var(--tray);
  border: 0;
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 14px 34px -12px rgba(var(--sh),0.34);
}
/* bos hucre: basik (ice golge) */
html[data-fam="c"] .cell {
  background: var(--locked);
  border-radius: 13px;
  box-shadow: inset 0 2px 5px rgba(var(--sh),0.16);
  /* box-shadow BILEREK gecisli degil: hucre dolunca buyuk bulanik
     golge kare kare yeniden boyaniyor ve telefonda tam yerlestirme
     aninda takilma yapiyordu. Renk gecisi kaliyor, kabarma anlik. */
  transition: background-color 0.12s;
}
/* dolu tas: kabarik (dis golge + ust ic parlama) */
html[data-fam="c"] .cell.filled,
html[data-fam="c"] .cell.locked {
  background: var(--surf);
  box-shadow: 0 2px 3px rgba(var(--sh),0.16), inset 0 1.5px 0 var(--hi);
}
html[data-fam="c"] .cell:hover:not(.locked):not(.filled) {
  background: color-mix(in srgb, var(--accent) 8%, var(--locked));
}
html[data-fam="c"] .cell-val {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
}
/* oyuncunun koydugu sayi accent renginde, verilenler notr */
html[data-fam="c"] .cell.filled:not(.locked) .cell-val { color: var(--accent); }
html[data-fam="c"] .cell.locked .cell-val { color: var(--ink); }
/* secili/odakli hucre: accent halka */
html[data-fam="c"] .cell.sel-cell,
html[data-fam="c"] .cell.focused {
  background: color-mix(in srgb, var(--accent) 12%, var(--surf));
  box-shadow: 0 0 0 2.5px var(--accent), 0 0 0 6px rgba(var(--ac-rgb),0.14);
}
html[data-fam="c"] .cell.hint-cell {
  box-shadow: 0 0 0 2.5px var(--warn), 0 0 0 6px rgba(var(--warn-rgb),0.16);
}
html[data-fam="c"] .cell.placed-disc {
  background: var(--surf);
  box-shadow: 0 2px 3px rgba(var(--sh),0.16), inset 0 1.5px 0 var(--hi);
}

/* --- Havuz: tombul taslar --- */
html[data-fam="c"] .pool-num {
  border-radius: 13px;
  background: var(--surf);
  border: 1px solid var(--brd);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(var(--sh),0.12);
}
html[data-fam="c"] .pool-num.used {
  background: var(--locked);
  border-color: transparent;
  box-shadow: none;
  opacity: 0.45;
}
html[data-fam="c"] .pool-num.sel-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surf);
  box-shadow: 0 6px 14px -6px rgba(var(--ac-rgb),0.55);
}

/* --- Alt bar: geri/ileri cerceveli kare butonlar --- */
html[data-fam="c"] #undoBtn,
html[data-fam="c"] #redoBtn {
  background: var(--surf) !important;
  border: 1px solid var(--brd) !important;
  border-radius: 12px !important;
  color: var(--ink2) !important;
  padding: 8px 12px !important;
}
html[data-fam="c"] .stat-v { font-weight: 800; font-size: 1rem; }

/* --- Birincil CTA'lar dolu accent blok (redesign'daki "Solve") --- */




/* --- Kart yuzeyler: modal/sheet'ler yuvarlak (v2 hepsini 0 yapiyordu) --- */
html[data-fam="c"] .prof-sheet,
html[data-fam="c"] .lb-modal,
html[data-fam="c"] .set-modal{
  border-radius: 22px 22px 0 0;
}

/* .win-head: sadece Cesur'da anlamli bir sarmalayici. Diger temalarda
   display:contents — cocuklar eskisi gibi .win-screen'in dogrudan
   cocugu gibi dizilir, hicbir sey degismez. (.ctrl-tools ile ayni desen.) */


/* ---------- CESUR: KAZANMA EKRANI (redesign Win) ---------- */


/* dekoratif konfeti kareleri (mockup'taki gibi) */













html[data-fam="c"] #nextBtn { order: -1; }


/* ---------- CESUR: PROFIL (redesign Profile) ---------- */
html[data-fam="c"] .prof-avatar {
  background: var(--accent);
  color: var(--surf);
  border: 0;
  border-radius: 22px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
}
html[data-fam="c"] .prof-nick {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
html[data-fam="c"] .prof-rank-pill {
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--surf)) !important;
}
html[data-fam="c"] .prof-level-tag { font-weight: 700; }
html[data-fam="c"] .prof-tab-btn { font-weight: 700; }
html[data-fam="c"] .prof-tab-btn.active {
  color: var(--ink);
  font-weight: 800;
  border-bottom: 3px solid var(--accent);
}
html[data-fam="c"] .prof-xp-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
}
html[data-fam="c"] .prof-xp-fill { background: var(--accent); border-radius: 999px; }
/* istatistik ucluisu + kartlar: beyaz, yuvarlak, cerceveli */
html[data-fam="c"] .prof-stat-card,
html[data-fam="c"] .prof-streak-card,
html[data-fam="c"] .prof-best-card,
html[data-fam="c"] .prof-featured-achv {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(var(--sh),0.08);
}
html[data-fam="c"] .prof-stat-card { padding: 14px 8px; }
html[data-fam="c"] .prof-stat-v {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
}
html[data-fam="c"] .prof-stat-l { font-weight: 600; }
html[data-fam="c"] .prof-section-title { font-weight: 700; color: var(--ink2); }

/* ---------- CESUR: SERI (redesign Streak) ---------- */
html[data-fam="c"] .prof-week-dot {
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--brd);
  background: var(--surf);
  color: var(--ink3);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
html[data-fam="c"] .prof-week-dot.done {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--surf);
}
html[data-fam="c"] .prof-week-lbl { font-weight: 600; }

/* Tek yazi tipi: bazi bilesenler kendi kuralinda 'IBM Plex Mono' yaziyor
   (.stat-l, .prof-*, .win-stat-* ...). Cesur'da hepsi govdeden miras
   alsin — tasarim bastan sona tek sans kullaniyor. Ikonlar SVG oldugu
   icin bu kural hicbir simgeyi bozmaz. */
html[data-fam="c"] * { font-family: inherit; }
html[data-fam="c"] .prof-stat-cards { border-top: 0; border-bottom: 0; }

/* =========================================================
   SHOP · ALT NAV · SERI EKRANI · KES rozeti
   Yapi tum temalarda calisir; renkler token'lardan gelir.
   ========================================================= */
.kes-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surf); border: 1px solid var(--brd);
  color: var(--ink); padding: 5px 11px 5px 8px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.kes-pill.big { font-size: 0.8rem; padding: 7px 14px 7px 10px; }
.kes-ic { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* --- Shop --- */
.shop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.shop-title { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.shop-tabs .prof-tab-btn.soon { opacity: 0.4; cursor: default; }
.shop-progress { margin: 6px 0 14px; }
.shop-prog-bar {
  height: 8px; border-radius: 999px; background: var(--surf2); overflow: hidden;
}
.shop-prog-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.shop-prog-lbl { margin-top: 6px; font-size: 0.66rem; font-weight: 700; color: var(--accent); text-align: right; padding-right: 2px; }
.shop-list { display: flex; flex-direction: column; }
.shop-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 2px; border-bottom: 1px solid var(--brd);
}
.shop-row:last-child { border-bottom: 0; }
.shop-sw { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }
.shop-name { flex: 1; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.shop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surf); color: var(--ink);
  border: 1px solid var(--brd); border-radius: 11px;
  padding: 8px 14px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
}
.shop-btn.buy { background: var(--accent); border-color: var(--accent); color: var(--surf); }
.shop-btn.poor { opacity: 0.55; }
.shop-owned { font-size: 0.72rem; font-weight: 700; color: var(--ink3); }
.shop-owned.shop-eq { color: var(--ok); }
/* Listenin altindaki not. Onceden listeye 18px yapisikti ve listenin
   son satirinin devami gibi okunuyordu; ayri bir not oldugu belli
   olsun diye ince bir cizgiyle ayrilip nefes payi verildi. */
.shop-hint {
  margin: 28px auto 0; padding-top: 16px;
  max-width: 30em;
  border-top: 1px solid var(--brd);
  font-size: 0.7rem; line-height: 1.65;
  color: var(--ink3); text-align: center;
}
/* kilitli tema kutucugu (Ayarlar izgarasi) */
.theme-btn.locked { opacity: 0.5; position: relative; }
.theme-btn-lock {
  position: absolute; top: 5px; right: 5px;
  width: 13px; height: 13px; color: var(--ink2);
}
.theme-btn-lock svg { width: 100%; height: 100%; }

/* --- Seri ekrani --- */
.streak-sheet { text-align: center; }
.stk-badge {
  width: 62px; height: 62px; margin: 10px auto 0;
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--surf));
  color: var(--accent);
}
.stk-badge svg { width: 30px; height: 30px; }
.stk-big { margin-top: 16px; font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.stk-sub { margin-top: 4px; font-size: 0.74rem; color: var(--ink2); }
.stk-row {
  display: flex; justify-content: space-between; gap: 5px;
  margin: 24px 0 20px;
}
.stk-day { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.stk-dot {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--brd); background: var(--surf);
  display: flex; align-items: center; justify-content: center;
  color: var(--surf);
}
.stk-dot svg { width: 17px; height: 17px; }
.stk-dot.done { background: var(--ok); border-color: var(--ok); }
.stk-dot.today {
  background: color-mix(in srgb, var(--accent) 16%, var(--surf));
  border-color: var(--accent); border-width: 2px;
}
.stk-lbl { font-size: 0.6rem; color: var(--ink3); font-weight: 600; }
.stk-bonus { font-size: 0.58rem; color: var(--accent); font-weight: 800; min-height: 12px; }
#streakClaim { width: 100%; }
#streakClaim:disabled { opacity: 0.5; cursor: default; }

/* --- Alt nav: yuzen pill (redesign) --- */
.bnav {
  position: fixed; left: 14px; right: 14px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  height: 58px; z-index: 150;
  display: none;
  align-items: center; justify-content: space-around;
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: 20px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.28);
}
.bnav-item {
  display: flex; align-items: center; gap: 0;
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 13px; border-radius: 14px;
  color: var(--ink3); font-size: 0.68rem; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.26s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.2s ease,
              transform 0.14s ease;
}
.bnav-item.on { gap: 6px; }
/* dokununca hafif bastir — dokunsal geri bildirim */
.bnav-item:active { transform: scale(0.92); }
.bnav-item svg { transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bnav-item.on svg { transform: translateY(-1px) scale(1.06); }
.bnav-item svg { width: 21px; height: 21px; flex-shrink: 0; }
/* Etiket display ile degil, genislik/opaklikla aciliyor — display
   animasyona girmez, "kalas gibi" gecisin sebebi oydu. */
.bnav-item span {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.bnav-item.on { background: var(--accent); color: var(--surf); }
.bnav-item.on span { max-width: 90px; opacity: 1; }
/* Alt nav yalnizca telefon genisliginde; masaustu/web sidebar duzeni ayni kalir */
@media (max-width: 859px) {
  .bnav { display: flex; }
  /* Alt nav 58px + 10px alt bosluk + safe-area; ustune 4px pay
     (tahta hesabi app.js'te zaten ayrica nefes payi birakiyor).
     html[data-v2] body de sayilmali: Faz 4'teki (yukarida) o kural daha
     ozgul oldugu icin bunu eziyordu, dolgu 0'a dusuyor ve hamle/geri-al
     seridi alt nav'in arkasinda kaliyordu. */
  body,
  html[data-v2] body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Icerik ekrana sigiyor; iOS/Android'in lastik gibi esnemesi "sayfa kayiyor"
     hissi veriyordu. (iOS'ta ayrica capacitor.config: ios.scrollEnabled=false) */
  html, body { overscroll-behavior: none; }
   .gameover-screen { padding-bottom: 84px; }
}

/* Shop / Seri sheet'leri: .prof-sheet'in kendi dolgusu yok, iceriklerini
   kendimiz bosluklandiriyoruz. Alt nav'in altinda kalmasin diye de
   asagida ekstra pay birakiyoruz. */
.shop-sheet, .streak-sheet { padding: 0 20px 26px; }
@media (max-width: 859px) {
  /* Sira onemli: .shop-sheet elemani ayni zamanda .prof-sheet, o yuzden
     genel kural once, ozel olan sonra gelmeli. Alt nav + home cubugu
     icin safe-area da hesaba katiliyor. */
  .prof-sheet, .set-sheet {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .shop-sheet, .streak-sheet {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
}
/* Seri sheet'i digerleri gibi alta yapismasin: icerigi kisa oldugu icin
   ustunde yarim ekran bos zemin kaliyordu. Zemin zaten opak (bkz.
   html[data-v2] .profile-modal) yani arkada oyun gorunmuyor — bosluk
   "sayfa yuklenmemis" gibi duruyordu. Kisa sheet'i ortalayip dort
   kosesini de yuvarliyoruz: artik karta benziyor. */
@media (max-width: 859px) {
  #streakModal { justify-content: center; }
  #streakModal .streak-sheet {
    width: calc(100% - 24px);
    margin: 0 12px;
    border-radius: 20px;
    border: 1px solid var(--brd);
    box-shadow: 0 6px 24px rgba(var(--sh), 0.1);
    padding-bottom: 26px;
    max-height: calc(100vh - 160px);
  }
}

.shop-sheet .shop-head { padding-right: 40px; }
.shop-sheet .shop-head .kes-pill { flex-shrink: 0; }
.streak-sheet .stk-badge { margin-top: 0; }
/* Alt nav modallerin ustunde kalsin — tasarimda her ekranda gorunuyor */
.bnav { z-index: 400; }

/* =========================================================
   GECISLER: sheet'ler asagidan kaysin, pat diye belirmesin
   ========================================================= */
.profile-modal {
  transition: opacity 0.26s ease, backdrop-filter 0.26s ease;
}
.prof-sheet, .set-sheet {
  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.24s ease;
}
.profile-modal.show .prof-sheet,
.profile-modal.show .set-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}
/* Telefonda alt sheet: asagidan yukari kaysin */
@media (max-width: 859px) {
  .prof-sheet, .set-sheet { transform: translateY(30px); }
  .profile-modal.show .prof-sheet,
  .profile-modal.show .set-sheet { transform: translateY(0); }
}
/* Shop satirlari ve seri noktalari sirayla gelsin */
.shop-row, .stk-day {
  animation: sheetIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.shop-row:nth-child(1), .stk-day:nth-child(1) { animation-delay: 0.02s; }
.shop-row:nth-child(2), .stk-day:nth-child(2) { animation-delay: 0.05s; }
.shop-row:nth-child(3), .stk-day:nth-child(3) { animation-delay: 0.08s; }
.shop-row:nth-child(4), .stk-day:nth-child(4) { animation-delay: 0.11s; }
.shop-row:nth-child(5), .stk-day:nth-child(5) { animation-delay: 0.14s; }
.stk-day:nth-child(6) { animation-delay: 0.17s; }
.stk-day:nth-child(7) { animation-delay: 0.20s; }
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Dukkan butonlari: basinca geri bildirim */
.shop-btn, .theme-btn{
  transition: transform 0.14s ease, background-color 0.2s ease,
              border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.shop-btn:active, .theme-btn:active{ transform: scale(0.96); }
/* Tema degisimi ani renk sicramasi yapmasin */
body, .prof-sheet, .set-sheet, .bnav, .kes-pill {
  transition-property: background-color, color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.22s;
  transition-timing-function: ease;
}
/* Hareketi azalt tercihine saygi */
@media (prefers-reduced-motion: reduce) {
  .shop-row, .stk-day { animation: none; }
  .prof-sheet, .set-sheet, .bnav-item, .bnav-item span, .bnav-item svg {
    transition-duration: 0.01ms;
  }
}

/* =========================================================
   CESUR — kalan ekranlar (menu, siralama, ayarlar, basarimlar,
   isim modali, ogretici, sure doldu). Ana ekran/kazanma/profil/
   dukkan/seri zaten gecmisti; bunlar hala eski sac-teli dildeydi.
   ========================================================= */

/* --- Yan menu (drawer) --- */
/* Mod satirlari alt nav'a tasininca menude 4 kisayol kaldi; tam boy
   panel bos duruyordu. Artik icerigi kadar yuksek, sol ustten inen bir
   menu karti. */











/* --- Siralama (leaderboard) --- */
html[data-fam="c"] .lb-modal { border-radius: 24px 24px 0 0; }
html[data-fam="c"] .lb-title { font-size: 1.4rem; font-weight: 800; }
html[data-fam="c"] .lb-tabs { gap: 6px; }
html[data-fam="c"] .lb-tab {
  border: 0; border-radius: 999px;
  padding: 8px 15px; font-weight: 700;
  background: var(--surf2); color: var(--ink2);
}
html[data-fam="c"] .lb-tab.active {
  background: var(--accent); color: var(--surf);
}
html[data-fam="c"] .lb-row {
  border: 0 !important;
  border-radius: 14px;
  margin-bottom: 6px;
  padding: 12px 13px;
  background: var(--surf);
  box-shadow: 0 1px 2px rgba(var(--sh),0.08);
}
html[data-fam="c"] .lb-row.lb-me {
  background: color-mix(in srgb, var(--accent) 12%, var(--surf)) !important;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
html[data-fam="c"] .lb-pos { font-weight: 800; color: var(--ink2); }
html[data-fam="c"] .lb-nick { font-weight: 700; }
html[data-fam="c"] .lb-moves { font-weight: 800; color: var(--ink); }
html[data-fam="c"] .lb-close, html[data-fam="c"] .sb-open-lb-btn {
  border-radius: 14px; font-weight: 700;
}

/* --- Ayarlar --- */
html[data-fam="c"] .set-header { font-size: 1.4rem; font-weight: 800; }
html[data-fam="c"] .set-section-tit { font-weight: 700; }
html[data-fam="c"] .set-row {
  border: 0 !important;
  border-radius: 16px;
  margin-bottom: 7px;
  padding: 13px 14px;
  background: var(--surf);
  box-shadow: 0 1px 2px rgba(var(--sh),0.08);
}
html[data-fam="c"] .set-icon-label { font-weight: 600; }
html[data-fam="c"] .set-ic { color: var(--accent); }
html[data-fam="c"] .set-btn,
html[data-fam="c"] .set-select {
  border-radius: 11px; border: 1px solid var(--brd);
  background: var(--surf2); color: var(--ink);
  font-weight: 700; padding: 7px 13px;
}
html[data-fam="c"] .set-btn.toggle.on,
html[data-fam="c"] .set-btn.on {
  background: var(--accent); border-color: var(--accent); color: var(--surf);
}
html[data-fam="c"] .set-btn.danger {
  color: #c0392b; border-color: color-mix(in srgb, #c0392b 30%, var(--brd));
  background: color-mix(in srgb, #c0392b 8%, var(--surf));
}
html[data-fam="c"] .set-link { font-weight: 600; color: var(--accent); }
html[data-fam="c"] .set-box { border-radius: 16px; }

/* --- Basarimlar --- */
html[data-fam="c"] .achv-item {
  border: 0 !important;
  border-radius: 16px;
  padding: 13px 8px;
  background: var(--surf);
  box-shadow: 0 1px 2px rgba(var(--sh),0.08);
}
html[data-fam="c"] .achv-item.achv-done {
  background: color-mix(in srgb, var(--accent) 10%, var(--surf));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-fam="c"] .achv-icon-bg {
  border-radius: 14px;
  background: var(--surf2);
}
html[data-fam="c"] .achv-item.achv-done .achv-icon-bg {
  background: color-mix(in srgb, var(--accent) 18%, var(--surf));
}
html[data-fam="c"] .achv-label { font-weight: 700; }
html[data-fam="c"] .achv-toast {
  border-radius: 18px; border: 1px solid var(--brd);
  box-shadow: 0 14px 30px -12px rgba(var(--sh),0.4);
}

/* --- Isim modali / ogretici / sure doldu --- */
html[data-fam="c"] .nick-modal form,
html[data-fam="c"] .tut-modal {
  border-radius: 24px;
}
html[data-fam="c"] .nick-title { font-size: 1.5rem; font-weight: 800; text-transform: none; }
html[data-fam="c"] .nick-input {
  border-radius: 14px; border: 1px solid var(--brd);
  background: var(--surf2); font-weight: 700; padding: 13px 15px;
}
html[data-fam="c"] .nick-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
html[data-fam="c"] .nick-btn {
  border-radius: 14px; font-weight: 700; padding: 14px 20px;
  background: var(--accent); border-color: var(--accent); color: var(--surf);
}
html[data-fam="c"] .nick-btn.danger {
  background: #c0392b; border-color: #c0392b;
}
/* Gizleme, bildirmenin alternatifi — dolu accent blok olursa ekranin
   asil eylemi o sanilir. Cerceveli/sessiz kaliyor. */
html[data-fam="c"] .nick-btn.ghost,
html[data-v2] .nick-btn.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--brd);
}
html[data-fam="c"] .nick-alt { font-weight: 600; color: var(--accent); }
html[data-fam="c"] .go-title { font-weight: 800; }
html[data-fam="c"] .go-btn {
  border-radius: 14px; font-weight: 700;
  background: var(--accent); border-color: var(--accent); color: var(--surf);
}

/* --- MODLAR ekrani (alt nav "Oyna") --- */
.modes-sheet { padding: 0 20px 26px; overflow-x: hidden; overscroll-behavior: contain; }
@media (max-width: 859px) {
  .modes-sheet { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}
.modes-title {
  font-size: 1.4rem; font-weight: 800; color: var(--ink);
  margin: 0 40px 16px 0;
}
.modes-list { display: flex; flex-direction: column; gap: 8px; }
.mode-card {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: 16px; padding: 14px 15px;
  box-shadow: 0 1px 2px rgba(var(--sh),0.08);
  transition: transform 0.14s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Giris animasyonu: menudeki (drawer) satirlarla ayni dil — yandan
   kayarak tek tek geliyorlar. Yalnizca .mds-in varken oynuyor; o sinifi
   openModes() takip birakiyor, boylece tahta boyutu/zorluk degisince
   liste yeniden "ucusmuyor". */
.modes-sheet.mds-in .modes-title,
.modes-sheet.mds-in .mode-card,
.modes-sheet.mds-in .modes-size {
  animation: dwIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modes-sheet.mds-in .modes-title { animation-delay: 0.02s; }
.modes-sheet.mds-in .mode-card:nth-child(1) { animation-delay: 0.06s; }
.modes-sheet.mds-in .mode-card:nth-child(2) { animation-delay: 0.10s; }
.modes-sheet.mds-in .mode-card:nth-child(3) { animation-delay: 0.14s; }
.modes-sheet.mds-in .mode-card:nth-child(4) { animation-delay: 0.18s; }
.modes-sheet.mds-in .mode-card:nth-child(5) { animation-delay: 0.22s; }
.modes-sheet.mds-in .mode-card:nth-child(6) { animation-delay: 0.26s; }
/* nth-of-type burada ise yaramaz: sheet'in tum cocuklari <div>, o yuzden
   sayac tutmuyordu (gecikme 0 kaliyordu). Sinifla hedefleniyor. */
.modes-sheet.mds-in .modes-size { animation-delay: 0.30s; }
.modes-sheet.mds-in .modes-size.modes-diff { animation-delay: 0.34s; }
.mode-card:active { transform: scale(0.98); }
.mode-card.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surf));
  border-color: var(--accent);
}
.mode-ic { color: var(--accent); display: flex; flex-shrink: 0; }
.mode-ic .ic { width: 21px; height: 21px; }
.mode-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mode-name { font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.mode-sub {
  font-size: 0.7rem; color: var(--ink2); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mode-go { color: var(--ink3); font-size: 1.3rem; line-height: 1; }
.mode-cur { font-size: 0.66rem; font-weight: 800; color: var(--accent); }
.mode-done { color: var(--ok); display: flex; }
.mode-done svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) {
  .modes-sheet.mds-in .modes-title,
  .modes-sheet.mds-in .mode-card,
  .modes-sheet.mds-in .modes-size { animation: none; }
}

/* =========================================================
   Kazanma / sure-doldu ekrani: tam ekran his
   - Alt nav bu ekranlarda gizleniyor (body.overlay-open)
   - Sonuc satirindaki sac teli cizgiler kalkti
   - Icerik ekrana yayiliyor, altta bos alan kalmiyor
   ========================================================= */
body.overlay-open .bnav { display: none !important; }

/* Mockup: accent blok ekranin TEPESINDE, tam genislik, alt koseleri
   yuvarlak. Altinda kart yok — icerik dogrudan zeminde. */

html[data-fam="c"] .gameover-screen {
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow-y: auto;
}

html[data-fam="c"] .win-compare { width: 100%; }
/* sonuc satiri: cizgisiz, sade */
/* sonuc: mockup'taki gibi YATAY uclu (Hamle | Sure | Hata) */





/* .win-body: yalnizca Cesur'da anlamli bir sarmalayici; diger temalarda
   cocuklar eskisi gibi dogrudan .win-screen'in cocugu gibi dizilir. */






/* =========================================================
   MENU ACILISI — "kalas gibi" kaymayi yumusat
   Panel yaylanarak geliyor, perde bulaniklasarak koyuluyor,
   satirlar sirayla iceri suzuluyor, menu butonu basilinca cokuyor.
   ========================================================= */




/* satirlar tek tek gelsin */









@keyframes dwIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* menu butonu: basinca cok, acikken accent */









/* Alt nav'in altindan kayan icerik kenarlardan sizmasin: nav'in
   arkasinda zemine karisan yumusak bir perde. ("Ana" yazisinin
   ustunde gorunen yarim 'İ' bundandi.) */
@media (max-width: 859px) {
  .bnav::before {
    content: '';
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(96px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom,
                rgba(0,0,0,0) 0%, var(--bg) 26%, var(--bg) 100%);
    pointer-events: none;
    z-index: -1;
  }
}

/* --- Kazanma: kazanilan KES + buton duzeni --- */




/* birincil tam genislik, ikincililer 2 sutun */

html[data-fam="c"] #nextBtn { grid-column: 1 / -1; }


/* --- Seri: gun basina odul + kazanma satiri --- */
.stk-bonus {
  font-size: 0.58rem; font-weight: 800;
  color: var(--ink3); min-height: 12px;
}
.stk-bonus.hi { color: var(--accent); }
.stk-lbl.hi { color: var(--accent); font-weight: 800; }
.stk-dot.today { color: var(--surf); }
html[data-fam="c"] .stk-dot.today {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.stk-dot.today svg { width: 15px; height: 15px; }
.stk-claim {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%;
  background: color-mix(in srgb, var(--accent) 12%, var(--surf));
  border-radius: 14px; padding: 14px 16px;
  margin: 4px 0 14px;
}
.stk-claim-t { font-size: 0.78rem; color: var(--ink2); }
.stk-claim-t b { color: var(--ink); font-weight: 800; }
.stk-claim-v { font-size: 0.95rem; font-weight: 800; color: var(--accent); }
.stk-row { align-items: flex-end; }
.stk-day { gap: 4px; }

/* --- Dukkan: one cikan kart + satir alti ilerleme --- */
.shop-featured {
  background: var(--accent);
  border-radius: 22px;
  padding: 18px;
  margin: 4px 0 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 16px 34px -14px rgba(var(--ac-rgb),0.5);
}
.shop-feat-lbl {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--surf); opacity: 0.85;
}
.shop-feat-main { display: flex; align-items: center; gap: 15px; }
.shop-feat-prev {
  width: 66px; height: 66px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 7px;
}
.shop-feat-prev i { width: 18px; height: 18px; border-radius: 4px; display: block; }
.shop-feat-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.shop-feat-txt b { font-size: 1.15rem; font-weight: 800; color: var(--surf); }
.shop-feat-txt em {
  font-style: normal; font-size: 0.74rem; line-height: 1.45;
  color: var(--surf); opacity: 0.9;
}
.shop-feat-foot { display: flex; align-items: center; justify-content: space-between; }
.shop-feat-price {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 1.15rem; font-weight: 800; color: var(--surf);
}
.shop-feat-price .kes-ic { color: var(--surf); width: 17px; height: 17px; }
.shop-feat-btn {
  background: var(--surf); color: var(--accent);
  border: 0; border-radius: 13px; padding: 11px 26px;
  font-size: 0.82rem; font-weight: 800; cursor: pointer;
  transition: transform 0.14s ease, opacity 0.2s ease;
}
.shop-feat-btn:active { transform: scale(0.96); }
.shop-feat-btn.poor { opacity: 0.6; }
.shop-all-lbl {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--ink3); text-transform: uppercase; margin-bottom: 4px;
}
.shop-item { border-bottom: 1px solid var(--brd); }
.shop-item:last-child { border-bottom: 0; }
.shop-item .shop-row { border-bottom: 0; }
.shop-row-prog { display: flex; align-items: center; gap: 10px; padding: 0 2px 13px; }
.shop-row-prog .shop-prog-bar { flex: 1; }
.shop-row-prog .shop-prog-lbl { margin: 0; white-space: nowrap; }
.shop-owned.shop-eq { display: inline-flex; align-items: center; gap: 4px; }

/* --- Tema onizlemesi: zemin + tepsi + accent ---
   Tek renk nokta yerine temanin uc ana rengini birden gosteriyor,
   boylece satin almadan once ekranin nasil duracagi anlasiliyor. */
.shop-prev {
  position: relative; width: 38px; height: 38px; border-radius: 11px;
  flex-shrink: 0; overflow: hidden; border: 1px solid var(--brd);
  box-shadow: 0 2px 5px rgba(var(--sh),0.14);
}
.shop-prev .sp-tray {
  position: absolute; left: 5px; right: 5px; bottom: 5px; height: 16px;
  border-radius: 5px; display: block;
}
.shop-prev .sp-ac {
  position: absolute; top: 5px; left: 5px; width: 13px; height: 13px;
  border-radius: 4px; display: block;
}
.shop-prev.big {
  width: 66px; height: 66px; border-radius: 16px; border: 0;
}
.shop-prev.big .sp-tray { left: 9px; right: 9px; bottom: 9px; height: 27px; border-radius: 8px; }
.shop-prev.big .sp-ac { top: 9px; left: 9px; width: 22px; height: 22px; border-radius: 7px; }

/* --- KES KAZAN sekmesi --- */
.earn-item .shop-row { gap: 12px; align-items: center; }
.earn-ic {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--ac-rgb),0.12); color: var(--accent);
}
.earn-ic .ic { width: 16px; height: 16px; fill: currentColor; }
.earn-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.earn-name { font-size: 0.87rem; font-weight: 700; color: var(--ink); }
.earn-sub { font-size: 0.7rem; color: var(--ink2); }
.earn-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  flex-shrink: 0;
}
.earn-amt {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 0.85rem; font-weight: 800; color: var(--accent);
}
.earn-amt .kes-ic { width: 14px; height: 14px; }
.earn-right .shop-btn { padding: 6px 16px; font-size: 0.74rem; }
.earn-auto { font-size: 0.66rem; color: var(--ink3); font-weight: 600; }
.earn-item.is-done .earn-ic { background: var(--surf2); color: var(--ink3); }
.earn-item.is-done .earn-amt { color: var(--ink3); }

/* =========================================================
   ANA EKRAN — mockup duzeni
   ctrl-tools artik main'in dogrudan cocugu (tahtanin altinda).
   Diger temalarda eski sirasi 'order' ile korunuyor.
   ========================================================= */
main > .ctrl-row     { order: 0; }
main > .ctrl-tools   { order: 1; }   /* eski yeri: hedefin hemen altinda */
main > .mode-banner  { order: 2; }
main > .play-area    { order: 3; }
main > .home-streak  { order: 4; }
main > .stats-bar    { order: 5; }
/* Boyut secimi "Oyna" sayfasina tasindiktan sonra seritte yalnizca
   eylemler (ipucu / reklam / yeni) kaldi. Tahtanin hemen altinda
   duruyorlardi ve oynarken yanlislikla basiliyordu — hedefin altina,
   tahtadan uzaga alindi (varsayilan sira). */

/* logo isareti + sol hizali wordmark */
.wm-mark { display: none; }
html[data-fam="c"] .wm-mark {
  display: inline-flex; width: 21px; height: 21px; color: var(--ink); flex-shrink: 0;
}
html[data-fam="c"] .wm-mark svg { width: 100%; height: 100%; }
html[data-fam="c"] .hdr-left { display: flex; align-items: center; gap: 9px; }
html[data-fam="c"] header .wordmark {
  position: static;
  transform: none;
  left: auto; top: auto;
  order: 3;
  font-size: 1.25rem;
}
/* profil avatari basliktan kalksin — alt nav'da "Ben" var */
html[data-fam="c"] header .user-pill { display: none !important; }

/* ana ekran seri rozeti */
.home-streak {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surf));
  border: 0; border-radius: 999px;
  padding: 9px 16px; cursor: pointer;
  font-size: 0.76rem; color: var(--ink2);
  transition: transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-streak:active { transform: scale(0.97); }
.home-streak b { color: var(--ink); font-weight: 800; }
.home-streak span { color: var(--accent); font-weight: 700; }
.home-streak .hs-ic { width: 15px; height: 15px; color: var(--accent); }

/* --- Kazanma: blok icindeki buyuk KES + altindaki bakiye --- */







/* karsilastirma: mockup'taki cubuk listesi */
html[data-fam="c"] .win-compare { width: 100%; }
html[data-fam="c"] .cmp-lead { font-size: 0.8rem; color: var(--ink2); }
html[data-fam="c"] .cmp-lead b { color: var(--ink); font-weight: 800; }
html[data-fam="c"] .cmp-bar { height: 11px; border-radius: 999px; background: var(--surf2); }
html[data-fam="c"] .cmp-bar-fill { border-radius: 999px; background: var(--brd); }
html[data-fam="c"] .cmp-bar-row.cmp-mine .cmp-bar-fill { background: var(--accent); }
html[data-fam="c"] .cmp-bar-lbl,
html[data-fam="c"] .cmp-bar-n { font-weight: 700; }
/* 0 hata yesil (mockup) */
html[data-fam="c"] #wErr { color: var(--ok) !important; }

/* --- Cesur: sadelestirme (kullanicinin istegi) --- */
/* sutun etiketleri (C1/C2/C3) gereksiz — sayilar zaten altta */
html[data-fam="c"] .csum-lbl { display: none; }
/* boyut secimi artik "Oyna" sayfasinda; serittte yalnizca eylemler kalsin */
html[data-fam="c"] .ctrl-tools .sz-btns { display: none; }
/* seri rozeti basliga tasindi */
html[data-fam="c"] .home-streak { display: none !important; }
html[data-fam="c"] .streak-pill {
  gap: 5px; padding: 5px 12px 5px 9px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surf));
  border-color: transparent; color: var(--ink);
}
html[data-fam="c"] .streak-pill .hs-ic { width: 14px; height: 14px; color: var(--accent); }
html[data-fam="c"] .streak-pill span { font-weight: 800; }

/* --- "Oyna" sayfasinda tahta boyutu --- */
.modes-size {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: 16px; padding: 13px 15px;
}
.modes-size-lbl { font-size: 0.82rem; font-weight: 700; color: var(--ink2); }
.modes-size-btns { display: flex; gap: 6px; }
.msz-btn {
  background: var(--surf2); border: 0; border-radius: 11px;
  padding: 8px 13px; font-size: 0.78rem; font-weight: 700;
  color: var(--ink2); cursor: pointer;
  transition: transform 0.14s ease, background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.msz-btn:active { transform: scale(0.95); }
.msz-btn.on { background: var(--accent); color: var(--surf); }

/* Siralama yalnizca menude kaliyordu, bulunamiyordu — basliga geri
   kondu (kupa butonu, KES/seri rozetlerinin yaninda). */
html[data-fam="c"] header #lbBtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: 11px; color: var(--ink2); cursor: pointer;
  transition: transform 0.14s ease, color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
html[data-fam="c"] header #lbBtn:active { transform: scale(0.9); }
html[data-fam="c"] header #lbBtn .ic { width: 16px; height: 16px; }
.prof-lb-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 16px; cursor: pointer;
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: 16px; padding: 15px 16px;
  font-size: 0.9rem; font-weight: 700; color: var(--ink);
  transition: transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.prof-lb-btn:active { transform: scale(0.98); }
.prof-lb-btn .ic { width: 18px; height: 18px; color: var(--accent); }
.prof-lb-btn span { flex: 1; text-align: left; }
.prof-lb-btn em { font-style: normal; color: var(--ink3); font-size: 1.2rem; }

/* Siralama: sag ust kapatma X'i (alttaki "Kapat" nav'in altinda
   kaliyordu, gorunmuyordu) */
.lb-x {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px;
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surf));
  color: var(--accent); font-size: 0.95rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.lb-x:active { transform: scale(0.9); }
/* NOT: .lb-modal zaten position:fixed — 'relative' yazmak panelin
   tam ekran yerlesimini bozuyordu, .lb-x fixed'e gore konumlaniyor. */

/* --- Profil: mockup duzeni --- */
/* baslik ortali (avatar / ad / rozet alt alta) */
html[data-fam="c"] .prof-header-wrap {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  position: relative;
  padding-top: 6px;
}
html[data-fam="c"] .prof-header-info {
  align-items: center;
  text-align: center;
}
html[data-fam="c"] .prof-badges-wrap { justify-content: center; }
html[data-fam="c"] .prof-edit-btn {
  position: absolute; top: 6px; right: 0;
}
html[data-fam="c"] .prof-avatar { width: 76px; height: 76px; font-size: 1.9rem; }

/* ucluk: kart yerine ince ayraclarla sade (mockup) */
html[data-fam="c"] .prof-stat-cards {
  gap: 0;
  margin-top: 18px;
}
html[data-fam="c"] .prof-stat-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-right: 1px solid var(--brd);
  padding: 6px 4px;
}
html[data-fam="c"] .prof-stat-cards > .prof-stat-card:last-child { border-right: 0; }
html[data-fam="c"] .prof-stat-card:nth-child(2) .prof-stat-v { color: var(--accent); }

/* en iyi sureler kartlari */
.prof-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prof-time-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: 14px; padding: 13px 6px;
}
.prof-time-card b { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.prof-time-card span { font-size: 0.62rem; color: var(--ink2); font-weight: 600; }
html[data-fam="c"] .prof-xp-labels { font-weight: 700; }
/* kalem butonu kapatma X'iyle cakisiyordu; baslik zaten tiklanabilir
   (isim degistirme oradan aciliyor). LV. etiketi de ucluide zaten var. */
html[data-fam="c"] .prof-edit-btn { display: none; }
html[data-fam="c"] .prof-level-tag { display: none; }

/* =========================================================
   EFEKTLER — hamburger morph + "basilan yerden buyume"
   ========================================================= */
/* 3 cizgi: Cesur'da SVG yerine gercek cizgiler (X'e donebilsin diye) */







/* menu acikken X */







/* --- Grafikler: kart gorunumu (Cesur) --- */
html[data-fam="c"] .chart-section {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 18px;
  padding: 15px 15px 10px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(var(--sh),0.08);
}
html[data-fam="c"] .chart-title {
  font-size: 0.86rem; font-weight: 800; color: var(--ink);
  letter-spacing: 0; text-transform: none;
}
html[data-fam="c"] .chart-desc {
  font-size: 0.66rem; color: var(--ink3); font-weight: 500; margin-top: 2px;
}
html[data-fam="c"] .chart-row { gap: 12px; }
html[data-fam="c"] .chart-half { margin-bottom: 0; }
/* Cizgi tamamlaninca: kabarik tas bir an tepsiye basilip geri kalksin.
   Yalnizca arka plan rengi degismesi bu tasarim dilinde zayif kaliyordu
   — taslarin kabarik olmasinin anlami yok gibiydi. */
@keyframes tilePress {
  0%   { transform: translateY(0)   scale(1); }
  30%  { transform: translateY(2px) scale(0.955); }
  100% { transform: translateY(0)   scale(1); }
}
html[data-fam="c"] .cell.flash-line { animation: fline-sakin 0.52s ease, tilePress 0.44s ease; }

/* Kazanma dalgasi: tas yukselip accent'e boyanir, sonra yerine oturur.
   flash-line'dan ayri tutuldu — o "cizgi tamamlandi", bu "oyun bitti". */
@keyframes winWave {
  0%   { transform: translateY(0)    scale(1);    }
  40%  { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(0)    scale(1);    }
}
.cell.win-wave { animation: winWave 0.48s cubic-bezier(0.34, 1.4, 0.64, 1); z-index: 2; }
html[data-fam="c"] .cell.win-wave {
  animation: winWave 0.48s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow: 0 10px 20px -8px rgba(var(--ac-rgb),0.55),
              inset 0 1.5px 0 var(--hi);
}

/* Tema gecisi — yalnizca setTheme()'in taktigi kisa an boyunca acik.
   Kalici olsaydi her hamlenin geri bildirimi de gecikirdi. */
html.theme-xfade,
html.theme-xfade body,
html.theme-xfade .cell,
html.theme-xfade .grid,
html.theme-xfade .pool-num,
html.theme-xfade header,
html.theme-xfade .bnav,
html.theme-xfade .t-val,
html.theme-xfade .sbadge {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ---------------------------------------------------------
   HAREKET AZALT — tek blok.
   Onceden dort ayri yerde parca parca yaziliydi ve oyun ici
   animasyonlarin hicbirini kapsamiyordu.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cell.anim-lift,
  .cell.flash-line,
  .cell.flash-err,
  .cell.flash-ok,
  .cell.win-wave,
  .pool-num.anim-back,
  .anim-pop .cell-val,
  .confetti-piece {
    animation: none !important;
  }
  html.theme-xfade,
  html.theme-xfade * { transition: none !important; }
}

/* Zorluk aciklamasi: "zor" soyut, "9 kutudan 4'u acik" somut.
   Not kartin DISINDA duruyordu: hem karta yapisiyordu hem de kime ait
   oldugu belli olmuyordu. Artik ayni kartin ikinci satiri. */
.modes-size.modes-diff {
  flex-direction: column; align-items: stretch; gap: 11px;
}
.modes-size-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modes-diff-note {
  font-size: 0.72rem; color: var(--ink3); line-height: 1.5;
  padding-top: 10px; border-top: 1px solid var(--brd);
}

/* --- Gunun gorevleri (Shop > KES Kazan) --- */
.shop-featured.ms-card { gap: 10px; }
.ms-row {
  display: flex; align-items: center; gap: 10px;
}
.ms-tick {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--accent); background: var(--surf);
  opacity: 0.35;
}
.ms-row.is-done .ms-tick { opacity: 1; }
.ms-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ms-txt b { font-size: 0.82rem; font-weight: 700; color: var(--surf); }
.ms-txt em {
  font-style: normal; font-size: 0.68rem; color: var(--surf); opacity: 0.8;
}
.ms-bar {
  display: block; height: 3px; border-radius: 2px; margin-top: 2px;
  background: rgba(255,255,255,0.25); overflow: hidden;
}
.ms-bar i { display: block; height: 100%; background: var(--surf); border-radius: 2px; }
.ms-amt {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 0.8rem; font-weight: 800; color: var(--surf);
}
.ms-amt .kes-ic { width: 13px; height: 13px; }
.ms-row.is-done .ms-txt b,
.ms-row.is-done .ms-amt { text-decoration: line-through; opacity: 0.75; }

/* =========================================================
   KOZMETIKLER — tahta deseni / sayi yazi tipi / unvan
   Tema gibi <html> uzerindeki data-* ile secildi; boylece
   gorunum tek yerden yonetiliyor ve her tema ile calisiyor.
   ========================================================= */

/* --- Tahta desenleri: tepsinin uzerine ince doku --- */
html[data-fam="c"] .grid { position: relative; }
html[data-fam="c"] .grid::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; opacity: 0.5;
  z-index: 0;
}
/* Desen TEPSININ dokusu; taslar onun uzerinde durmali. z-index
   verilmezse desen hucrelerin uzerine de biniyor ve tas "uzerine
   cizilmis" gibi duruyor. */
html[data-fam="c"] .cell { position: relative; z-index: 1; }
html[data-fam="c"][data-board="cizgi"] .grid::before {
  background: repeating-linear-gradient(45deg,
    rgba(var(--sh),0.10) 0 1px, transparent 1px 9px);
}
html[data-fam="c"][data-board="nokta"] .grid::before {
  background-image: radial-gradient(rgba(var(--sh),0.18) 1.2px, transparent 1.2px);
  background-size: 11px 11px;
}
html[data-fam="c"][data-board="kare"] .grid::before {
  background-image:
    linear-gradient(rgba(var(--sh),0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--sh),0.10) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* --- Sayi yazi tipleri --- */
html[data-numfont="mono"]  .cell-val,
html[data-numfont="mono"]  .pool-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
html[data-numfont="serif"] .cell-val,
html[data-numfont="serif"] .pool-num { font-family: Georgia, 'Times New Roman', serif; }
html[data-numfont="hafif"] .cell-val,
html[data-numfont="hafif"] .pool-num { font-weight: 400; letter-spacing: 0.06em; }

/* --- Dukkan kategori seridi --- */
.shop-cats {
  display: flex; gap: 7px; margin: 2px 0 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cat {
  flex-shrink: 0; border: 1px solid var(--brd); background: var(--surf);
  color: var(--ink2); border-radius: 999px; padding: 7px 14px;
  font-size: 0.74rem; font-weight: 700; cursor: pointer;
  font-family: inherit;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.shop-cat.on { background: var(--accent); color: var(--surf); border-color: var(--accent); }

/* --- Kategoriye gore onizleme --- */
.shop-prev.bprev { background: var(--tray); }
.shop-prev.bprev::after {
  content: ''; position: absolute; inset: 0; opacity: 0.6;
}
.shop-prev.bprev[data-board="cizgi"]::after {
  background: repeating-linear-gradient(45deg,
    rgba(var(--sh),0.22) 0 1px, transparent 1px 7px);
}
.shop-prev.bprev[data-board="nokta"]::after {
  background-image: radial-gradient(rgba(var(--sh),0.32) 1.2px, transparent 1.2px);
  background-size: 8px 8px;
}
.shop-prev.bprev[data-board="kare"]::after {
  background-image:
    linear-gradient(rgba(var(--sh),0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--sh),0.22) 1px, transparent 1px);
  background-size: 10px 10px;
}
.shop-prev.nprev, .shop-prev.tprev {
  display: flex; align-items: center; justify-content: center;
  background: var(--surf2); color: var(--ink);
  font-size: 1rem; font-weight: 800;
}
.shop-prev.nprev.big, .shop-prev.tprev.big { font-size: 1.7rem; }
.shop-prev.nprev[data-numfont="mono"]  { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.shop-prev.nprev[data-numfont="serif"] { font-family: Georgia, serif; }
.shop-prev.nprev[data-numfont="hafif"] { font-weight: 400; letter-spacing: 0.06em; }

/* --- Profildeki unvan --- */
.prof-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent); margin-top: 1px;
}

/* "Dene" butonu — satin alma butonunun solunda, ondan daha sessiz */
.shop-row .shop-btn.try {
  background: transparent; color: var(--ink2);
  border: 1px solid var(--brd); margin-right: 6px;
}
.shop-feat-acts { display: inline-flex; align-items: center; gap: 10px; }
.shop-feat-try {
  background: transparent; color: var(--surf);
  border: 1.5px solid var(--surf); border-radius: 13px;
  padding: 10px 18px; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: transform 0.14s ease;
}
.shop-feat-try:active { transform: scale(0.96); }

/* --- Seri koruma satiri (Seri ekrani) --- */
.stk-freeze {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 13px 15px;
  background: var(--surf); border: 1px solid var(--brd); border-radius: 16px;
}
.fz-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fz-dots { display: flex; gap: 4px; flex-shrink: 0; }
.fz-dot { width: 22px; height: 22px; color: var(--ink3); opacity: 0.45; }
.fz-dot.on { color: var(--accent); opacity: 1; }
.fz-dot svg { width: 100%; height: 100%; display: block; }
.fz-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fz-txt b { font-size: 0.84rem; font-weight: 700; color: var(--ink); }
.fz-txt em { font-style: normal; font-size: 0.68rem; color: var(--ink2); line-height: 1.4; }
.fz-full { font-size: 0.72rem; font-weight: 700; color: var(--ok); white-space: nowrap; }

/* --- Arsiv listesi --- */
.arch-list { display: flex; flex-direction: column; }
.arch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 4px; background: none; border: 0;
  border-bottom: 1px solid var(--brd); cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.arch-row:last-child { border-bottom: 0; }
.arch-row:active { opacity: 0.6; }
.arch-date { display: flex; flex-direction: column; gap: 1px; }
.arch-date b { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.arch-date em { font-style: normal; font-size: 0.68rem; color: var(--ink3); }
.arch-row.today .arch-date b { color: var(--accent); }
.arch-stars {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--warn); letter-spacing: 0.06em;
}
.arch-stars em { font-style: normal; font-size: 0.72rem; color: var(--ink3); }
.arch-go { color: var(--ink3); font-size: 1.1rem; }
.arch-row.done .arch-date b { color: var(--ink2); }

/* Ipucunun isaretledigi hucre: sayiyi acmadan "buraya bak" diyor */
.cell.hint-target {
  box-shadow: inset 0 0 0 2.5px var(--warn) !important;
  animation: hintPulse 1.4s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { box-shadow: inset 0 0 0 2.5px var(--warn); }
  50%      { box-shadow: inset 0 0 0 2.5px var(--warn), 0 0 0 5px rgba(var(--warn-rgb),0.22); }
}
@media (prefers-reduced-motion: reduce) { .cell.hint-target { animation: none; } }
#hintBtn.hint-armed { color: var(--warn); border-color: var(--warn); }

/* Secili hucrenin satiri/sutunu/kosegeni. Cok hafif: amac dikkati
   toplamak, tahtayi renklendirmek degil. Secili hucrenin kendisi zaten
   .sel-cell / .focused ile cerceveli, o kurallar bunu eziyor. */
html[data-fam="c"] .cell.in-line:not(.sel-cell):not(.focused):not(.hint-target) {
  /* oklab: srgb karisimi lacivertle krem arasinda gri-camur veriyordu */
  background: color-mix(in oklab, var(--accent) 11%, var(--locked));
}
html[data-fam="c"] .cell.in-line.filled:not(.sel-cell):not(.focused):not(.hint-target),
html[data-fam="c"] .cell.in-line.locked:not(.sel-cell):not(.focused):not(.hint-target) {
  background: color-mix(in srgb, var(--accent) 7%, var(--surf));
}

/* Kontrol seridi: ipucu + "reklam izle" bir grup (reklam butonu
   ipucunun devami, ayri bir eylem degil), "Yeni" seridin oteki
   ucunda. Ortada toplanmak yerine iki uca yaslanmalari ikisinin ayri
   isler oldugunu gosteriyor. */
.hint-group { display: flex; align-items: center; gap: 6px; }
html[data-fam="c"] .ctrl-tools {
  gap: 8px 14px;
  justify-content: space-between;
  padding-left: 4px;
  padding-right: 4px;
}

/* Kart sonundaki durum (tamamlandi / oynaniyor / ok) tek bir kapsayicida
   duruyor: yerinde guncelleme icin sabit bir yuva gerekiyordu. */
.mode-state { display: flex; align-items: center; flex-shrink: 0; }

/* --- Arkadaslar sekmesi (siralama modali) --- */
.fr-add { display: flex; gap: 8px; margin: 0 0 14px; }
.fr-input {
  flex: 1; min-width: 0;
  background: var(--surf); color: var(--ink);
  border: 1px solid var(--brd); border-radius: 12px;
  padding: 10px 13px; font-size: 0.85rem; font-family: inherit;
}
.fr-input::placeholder { color: var(--ink3); }
.fr-input:focus { outline: none; border-color: var(--accent); }
.fr-add-btn {
  flex-shrink: 0;
  background: var(--accent); color: var(--surf);
  border: 0; border-radius: 12px; padding: 10px 18px;
  font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.fr-add-btn:active { transform: scale(0.96); }
.fr-empty {
  font-size: 0.78rem; line-height: 1.6; color: var(--ink2);
  text-align: center; padding: 26px 12px;
}
.fr-row { position: relative; }
/* Cozmemis arkadas listede kaliyor ama one cikmiyor */
.fr-row.fr-pending .lb-stars,
.fr-row.fr-pending .lb-moves { color: var(--ink3); }
.fr-x {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--ink3); font-size: 0.75rem; padding: 4px 2px 4px 8px;
  flex-shrink: 0;
}
.fr-x:active { color: var(--warn); }

/* -- BILDIR / GIZLE (App Store 1.2: kullanici uretimi icerik) -- */
/* Satirdaki bayrak takma adin yaninda durur ama satiri kalabaliklastirmaz:
   normalde soluk, dokununca belirginlesiyor. Dokunma alani ikonun
   kendisinden buyuk (padding) — 11px'lik bir hedefe parmakla basilamaz. */
.lb-report {
  background: none; border: 0; cursor: pointer;
  padding: 8px 4px 8px 10px; flex-shrink: 0; line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.lb-report-ic {
  width: 14px; height: 14px; fill: var(--ink3); opacity: 0.8;
  transition: opacity 0.15s, fill 0.15s;
}
.lb-report:hover .lb-report-ic { opacity: 1; }
.lb-report:active .lb-report-ic { fill: var(--warn); opacity: 1; }

.rep-reasons {
  display: flex; flex-direction: column; gap: 8px;
  width: 270px; max-width: 82vw; margin: 6px 0 2px;
}
.rep-reason {
  background: var(--surf); border: 1px solid var(--brd); color: var(--ink);
  font-family: inherit; font-size: 0.72rem; line-height: 1.4;
  text-align: left; padding: 11px 14px; border-radius: 10px; cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.rep-reason:hover { border-color: var(--accent); }
.rep-reason:active { transform: scale(0.98); }

.rep-or {
  font-size: 0.62rem; color: var(--ink3);
  letter-spacing: 0.08em; margin: 8px 0 10px;
}

/* Gizleme bildirmenin alternatifi, devami degil — bu yuzden ana
   butondan (dolu) daha sessiz duruyor. */
.nick-btn.ghost {
  background: none; color: var(--ink); border: 1px solid var(--brd);
}
.nick-btn.ghost:hover { border-color: var(--accent); opacity: 1; }








/* Takma ad ekranindaki bilgi satiri (kalan hak) */
.nick-note {
  font-size: 0.72rem; line-height: 1.5; color: var(--ink3);
  text-align: center; margin: 2px 0 10px;
}

/* Ad degistirme ekrani: baslik marka yazisi degil, normal bir baslik.
   "KESEN" icin ayarlanmis genis harf araligi uzun metinde tasiyordu. */



/* Ad degistirme hakki satin alma */
.nick-buy {
  margin-top: 8px; background: var(--accent); color: var(--surf);
  border: 0; border-radius: 12px; padding: 9px 18px;
  font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.nick-buy:active { transform: scale(0.96); }
.nick-buy.poor { opacity: 0.45; }
.nick-buy-poor { margin-top: 5px; font-size: 0.68rem; color: var(--ink3); }

/* "En Iyi Sureler" basliginda hangi zorlugun rekoru gosteriliyor */
.prof-title-dif {
  font-size: 0.72em; font-weight: 700; color: var(--accent);
  margin-left: 6px; text-transform: none; letter-spacing: 0;
}

/* Zamanli mod: ilk hamleyi beklerken saat sonuk ve nabiz atiyor —
   durdugu belli olsun, "bozuk mu" diye dusunulmesin. */
.timer-box.waiting { opacity: 0.55; animation: timerWait 1.6s ease-in-out infinite; }
@keyframes timerWait { 0%,100% { opacity: 0.55; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .timer-box.waiting { animation: none; } }

/* =========================================================
   TELEFON: tahta k152'deki boyunda kalsin diye ustten yer ac.
   Alt nav'a yer birakinca (body alt dolgusu) tahta kuculuyordu;
   o yeri tahtadan degil hedef bolumunden ve aralıklardan aliyoruz.
   ========================================================= */
@media (max-width: 859px) {
  html[data-v2] header { padding-top: 16px; }
  html[data-v2] main { padding-top: 12px; gap: 10px; }
  /* capraz toplamlar hedefin altinda degil saginda, alt alta */
  html[data-v2] .ctrl-row {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 22px;
  }
  html[data-v2] .ctrl-row .diag-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  html[data-fam="c"] .t-val { font-size: clamp(2.2rem, 11vw, 3.2rem); }
}

/* =====================================================================
   KAZANMA EKRANI v3 (js/win.js)
   Ayri sinif adi (.win3): eski .win-screen kurallari tema bloklarinda
   uc katman ust uste binmisti; yeni ekran onlardan hicbirini tasimiyor.
   Yalnizca tema degiskenleri kullaniliyor, alti tema da ayni yapida.
   ===================================================================== */
.win3 {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; flex-direction: column;
  background: var(--bg);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.win3.show { opacity: 1; pointer-events: all; }
/* konfeti eski ekranin ARKASINDA kaliyordu (199 < 200) */
body.win-open .confetti-container { z-index: 205; }
/* Gorev / reklam bildirimi: normalde ekranin dibinde, burada alttaki
   dugmelerin ustune binerdi; en ustte de basligi ortuyordu. Dugmelerin
   hemen ustunde, gizliyken saydam duruyor. */
body.win-open .ad-toast {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
body.win-open .ad-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.w3-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 30px) 20px 8px;
}

/* --- baslik --- */
.w3-head { display: block; text-align: left; margin-bottom: 18px; }
.w3-eyebrow {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink3);
}
.w3-title {
  margin-top: 6px;
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* --- tahta karti --- */
.w3-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 22px;
  padding: 14px 16px 14px 14px;
  box-shadow: 0 1px 0 var(--hi, transparent) inset, 0 10px 28px rgba(var(--sh, 0,0,0), 0.08);
}
.w3-boardwrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.w3-board {
  --bw: 156px;
  width: var(--bw);
  display: grid;
  grid-template-columns: repeat(var(--wn, 3), 1fr);
  gap: 4px; padding: 5px;
  background: var(--tray, var(--surf2));
  border-radius: 12px;
}
.w3-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  font-weight: 800;
  font-size: calc(var(--bw) / var(--wn, 3) * 0.36);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.w3-board[style*="--wn: 5"] .w3-cell { border-radius: 5px; }
.w3-cell.given { background: var(--surf); color: var(--ink); box-shadow: 0 1px 0 rgba(var(--sh, 0,0,0), 0.10); }
.w3-cell.placed {
  background: color-mix(in srgb, var(--accent) 13%, var(--surf));
  color: var(--accent);
}
.w3-target {
  max-width: 160px;
  font-size: 0.62rem; font-weight: 600; line-height: 1.3;
  color: var(--ink3); text-align: center;
}

.w3-verdict { flex: 1 1 auto; min-width: 0; }
.w3-stars { display: flex; gap: 2px; margin: 0 0 8px -2px; }
.w3-stars .star { font-size: 1.55rem; }
.w3-stars .star.earned { color: var(--warn); }
.w3-moves { display: flex; align-items: baseline; gap: 6px; }
.w3-moves b {
  font-size: 2.3rem; font-weight: 800; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.w3-moves span { font-size: 0.8rem; font-weight: 700; color: var(--ink2); }
.w3-par { margin-top: 3px; font-size: 0.76rem; font-weight: 600; color: var(--ink3); }
.w3-extra { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 0.74rem; color: var(--ink2); }
.w3-extra:empty, .w3-extra:not(:has(> span:not([style*="none"]))) { display: none; }
.w3-extra b { color: var(--ink); font-weight: 800; }

/* --- oduller --- */
.w3-rewards {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin-top: 18px;
}
.w3-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 15px;
  border-radius: 999px;
  background: var(--surf);
  border: 1px solid var(--brd);
  color: var(--ink);
  font-size: 1rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.w3-chip .kes-ic { width: 17px; height: 17px; color: var(--accent); }
.w3-chip span { font-size: 0.72rem; font-weight: 700; color: var(--ink2); }
.w3-chip.ad {
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  font-size: 0.8rem; cursor: pointer;
}
.w3-chip.ad svg { width: 12px; height: 12px; }
.w3-chip.ad span { color: inherit; font-size: inherit; font-weight: 800; }
.w3-chip.ad.done { border-style: solid; opacity: 0.6; }
.w3-bal { margin-top: 7px; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--ink3); }
.w3-bal:empty { display: none; }

/* --- ilerleme --- */
.w3-progress { margin-top: 18px; }
.w3-prow { padding: 14px 2px; border-top: 1px solid var(--brd); }
.w3-plabel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.w3-plabel b {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.95rem; font-weight: 800; color: var(--ink);
}
.w3-plabel b[style*="--rc"]::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 25%, transparent);
}
.w3-plabel span { font-size: 0.74rem; font-weight: 600; color: var(--ink3); }
.w3-bar {
  position: relative; height: 10px; margin-top: 10px;
  border-radius: 6px; overflow: hidden;
  background: var(--surf2);
}
.w3-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.w3-bar i.old { background: color-mix(in srgb, var(--accent) 45%, var(--surf2)); }
.w3-bar i.gain {
  left: var(--from);
  width: calc(var(--to) - var(--from));
  background: var(--accent);
  border-radius: 0 6px 6px 0;
}
.w3-pnote { margin-top: 7px; font-size: 0.72rem; font-weight: 600; color: var(--ink2); }
.w3-pnote.solo { padding: 14px 2px 0; border-top: 1px solid var(--brd); margin-top: 0; }
.w3-fire { width: 15px; height: 15px; fill: currentColor; color: var(--warn); }
.w3-dots { display: flex; gap: 7px; margin-top: 10px; }
.w3-dots i {
  flex: 1 1 0; height: 8px; border-radius: 4px;
  background: var(--surf2);
}
.w3-dots i.on { background: var(--warn); }

.w3-nudge {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 4px;
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--surf);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--brd));
  color: var(--ink); text-align: left; cursor: pointer;
}
.w3-nudge .ic { width: 20px; height: 20px; fill: currentColor; color: var(--accent); flex: 0 0 auto; }
.w3-nudge span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.w3-nudge b { font-size: 0.9rem; font-weight: 800; }
.w3-nudge small { font-size: 0.72rem; font-weight: 600; color: var(--ink2); }
.w3-nudge em { font-style: normal; font-weight: 800; color: var(--accent); }

.win3 .win-compare { max-width: none; margin: 16px 0 0; }

/* --- alt dugmeler --- */
.w3-foot {
  flex: 0 0 auto;
  width: 100%; max-width: 440px; margin: 0 auto;
  padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: linear-gradient(to bottom, transparent, var(--bg) 14px);
}
.w3-nextdaily {
  margin-bottom: 10px; text-align: center;
  font-size: 0.76rem; font-weight: 700; color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.w3-btn {
  height: 46px; padding: 0 14px;
  border-radius: 14px;
  background: var(--surf);
  border: 1px solid var(--brd);
  color: var(--ink2);
  font-size: 0.84rem; font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.w3-btn:active, .w3-chip.ad:active, .w3-nudge:active { transform: scale(0.97); }
.w3-btn.pri {
  width: 100%; height: 54px;
  background: var(--accent); border-color: transparent;
  color: var(--surf);
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(var(--ac-rgb, 0,0,0), 0.25);
}
.w3-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.w3-row .w3-btn { flex: 1 1 0; }
/* Gunlukte "Sonraki" yok; Paylas ana dugme olup satirin ustune cikiyor */
.w3-row .w3-btn.pri { flex: 1 0 100%; order: -1; }
#nextBtn[style*="none"] + .w3-row { margin-top: 0; }

/* --- giris --- */
@keyframes w3-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes w3-pop  { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes w3-grow { from { width: 0; } }
@keyframes w3-dot  { 0% { transform: scaleY(0.4); opacity: 0.4; } 60% { transform: scaleY(1.5); } 100% { transform: none; opacity: 1; } }
.win3.play .w3-head     { animation: w3-rise 0.42s cubic-bezier(.2,.8,.2,1) both; }
.win3.play .w3-card     { animation: w3-rise 0.42s 0.07s cubic-bezier(.2,.8,.2,1) both; }
.win3.play .w3-cell     { animation: w3-pop 0.34s calc(0.18s + var(--d, 0ms)) cubic-bezier(.2,.8,.2,1) both; }
.win3.play .w3-rewards,
.win3.play .w3-bal      { animation: w3-rise 0.4s 0.45s cubic-bezier(.2,.8,.2,1) both; }
.win3.play .w3-progress { animation: w3-rise 0.4s 0.6s cubic-bezier(.2,.8,.2,1) both; }
.win3.play .w3-bar i.gain { animation: w3-grow 0.8s 1s cubic-bezier(.3,.7,.2,1) both; }
.win3.play .w3-dots i.on  { animation: w3-dot 0.4s calc(1s + var(--d, 0ms)) ease-out both; }
.win3.play .w3-foot     { animation: w3-rise 0.36s 0.15s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .win3.play * { animation: none !important; }
}

/* kisa ekranlar (iPhone SE): tahta ve baslik kuculsun */
@media (max-height: 700px) {
  .w3-scroll { padding-top: calc(env(safe-area-inset-top, 0px) + 18px); }
  .w3-title { font-size: 2.1rem; }
  .w3-board { --bw: 124px; }
}

/* =====================================================================
   19 EKI — ALT BAR TURU
   ===================================================================== */

/* Ana ekran: hamle seridi ekranin dibine yaslaniyordu (margin-top:auto),
   havuzla arasinda uzun telefonlarda ~140px bos kaliyordu. Tahta
   kuculmeden bos alan tahtanin ustune ve seridin altina esit
   dagitiliyor; serit havuzun hemen altinda. */
html[data-v2] main > .play-area { margin-top: auto; }
html[data-v2] main > .stats-bar { margin-top: 14px; margin-bottom: auto; }

/* Profil: sol ustte ayarlar (☰ menu kalkti) */
.prof-gear {
  position: absolute; top: 12px; left: 14px; z-index: 100;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 16%, var(--surf));
  color: var(--accent);
}
.prof-gear .ic { width: 15px; height: 15px; fill: currentColor; }
.prof-sheet { position: relative; }

/* Ayarlar: "Nasil Oynanir" satiri */
.set-row.set-tap { cursor: pointer; }
.set-go { font-size: 1.2rem; font-weight: 700; color: var(--ink3); line-height: 1; }

/* Ust bardaki alev: seri yokken sonuk */
html[data-fam="c"] .streak-pill.zero .hs-ic { color: var(--ink3); }
html[data-fam="c"] .streak-pill.zero span { color: var(--ink3); }

/* Basarimlar: izgara yerine liste (bkz. js/achievements.js) */
html .prof-achievements, html[data-fam="c"] .prof-achievements {
  display: flex !important; flex-direction: column; gap: 8px;
  grid-template-columns: none !important;
  padding: 4px 16px 16px; margin: 0;
}
.achv-head {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink3);
  padding: 6px 4px 2px;
}
.achv-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  background: var(--surf);
  border: 1px solid var(--brd);
}
.achv-row .achv-icon-bg {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf2);
}
.achv-row .achv-ic { width: 20px; height: 20px; fill: currentColor; color: var(--ink3); }
.achv-row.achv-done { background: color-mix(in srgb, var(--accent) 8%, var(--surf)); border-color: color-mix(in srgb, var(--accent) 30%, var(--brd)); }
.achv-row.achv-done .achv-icon-bg { background: color-mix(in srgb, var(--accent) 18%, var(--surf)); }
.achv-row.achv-done .achv-ic { color: var(--accent); }
.achv-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.achv-txt b { font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.achv-txt > span { font-size: 0.76rem; font-weight: 600; color: var(--ink2); }
.achv-row:not(.achv-done) .achv-txt b { color: var(--ink2); }
.achv-prog { height: 5px; margin-top: 6px; border-radius: 3px; background: var(--surf2); overflow: hidden; }
.achv-prog i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.achv-num { font-size: 0.66rem; font-weight: 700; color: var(--ink3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.achv-check { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }

/* Istatistik vitrini: 4 rozet, okunur ad */
html[data-fam="c"] .prof-featured-achv { gap: 8px; padding: 12px 8px; }
html[data-fam="c"] .prof-featured-achv .achv-item { flex: 1 1 0; min-width: 0; }
html[data-fam="c"] .prof-featured-achv .achv-label { font-size: 0.66rem; line-height: 1.2; }

/* Dukkan: tema onizlemesi minik 3x3 tahta (bkz. js/shop.js -> shopPreview) */
.shop-prev.tmini { display: flex; align-items: center; justify-content: center; padding: 0; }
.shop-prev.tmini .spg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  width: 74%; aspect-ratio: 1; padding: 2px;
  background: var(--tr); border-radius: 5px;
}
.shop-prev.tmini .spc { border-radius: 2px; }
.shop-prev.tmini .spc.g { box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.shop-prev.tmini.big .spg { gap: 3px; padding: 3px; border-radius: 8px; }
.shop-prev.tmini.big .spc { border-radius: 4px; }
html[data-fam="c"] .achv-row .achv-icon-bg { border-radius: 12px; background: var(--surf2); }
html[data-fam="c"] .achv-row.achv-done .achv-icon-bg { background: color-mix(in srgb, var(--accent) 18%, var(--surf)); }
html[data-fam="c"] .achv-row .achv-ic { color: var(--ink3); }
html[data-fam="c"] .achv-row.achv-done .achv-ic { color: var(--accent); }
/* .achv-icon-bg tabani gri+soluk (filter); listede acilanlar renkli */
.achv-row .achv-icon-bg { border: 0; box-shadow: none; opacity: 0.7; }
.achv-row.achv-done .achv-icon-bg { filter: none; opacity: 1; }


/* =====================================================================
   KUCUK PENCERELER v2 (19 Eki) — takma ad, kurtarma, silme, bildirme,
   gizlenenler. Alttan acilan kart; solda baslik; tam genislik dugmeler.
   Eski kurallar (koyu tam ekran, ortali, harf aralikli gri baslik)
   tema katmanlarinda ust uste binmisti; burasi hepsini eziyor.
   ===================================================================== */
html .nick-modal {
  z-index: 450;                       /* alt nav (400) ve Ayarlar'in ustunde */
  background: var(--scrim, rgba(15,12,8,0.36)) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex !important; flex-direction: column;
  justify-content: flex-end !important; align-items: center !important;
  padding: 0 !important; gap: 0 !important;
}
.nm-card {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto;
  background: var(--bg);
  border-radius: 26px 26px 0 0;
  padding: 26px 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.18);
  text-align: left;
  transform: translateY(24px);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.nick-modal.show .nm-card { transform: none; }
@media (prefers-reduced-motion: reduce) { .nm-card { transition: none; transform: none; } }

html .nm-card .nm-x, html .nm-card .nick-close {
  position: absolute !important; top: 16px !important; right: 16px !important; left: auto !important;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; font-size: 0.95rem; line-height: 1;
  background: color-mix(in srgb, var(--accent) 14%, var(--surf));
  color: var(--accent);
}
html .nm-card .nick-title {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 1.55rem !important; font-weight: 800 !important;
  letter-spacing: -0.015em !important; text-transform: none !important;
  color: var(--ink) !important; opacity: 1 !important;
  text-align: left !important; max-width: none !important;
  margin: 0 44px 8px 0 !important; padding: 0 !important; line-height: 1.15;
}
html .nm-card .nick-sub {
  font-size: 0.9rem !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  line-height: 1.5 !important; color: var(--ink2) !important;
  text-align: left !important; max-width: none !important;
  margin: 0 0 18px !important;
}
html .nm-card .nick-sub:empty { display: none; }
html .nm-card form { display: flex; flex-direction: column; gap: 10px; width: 100% !important; align-items: stretch !important; margin: 0 !important; }
html .nm-card .nick-input {
  width: 100% !important; height: 54px; margin: 0 !important;
  padding: 0 64px 0 16px !important;
  border-radius: 14px !important;
  background: var(--surf) !important;
  border: 1.5px solid var(--brd) !important;
  color: var(--ink) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 1.1rem !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-align: left !important;
  box-shadow: none !important; outline: none;
}
html .nm-card .nick-input::placeholder { color: var(--ink3); font-weight: 600; }
html .nm-card .nick-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
html .nm-card .nick-input.nm-code { letter-spacing: 0.3em !important; font-variant-numeric: tabular-nums; }
.nm-field { position: relative; }
.nm-count {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 0.75rem; font-weight: 700; color: var(--ink3);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.nm-hint { font-size: 0.74rem; font-weight: 600; color: var(--ink3); margin: -2px 2px 2px; }
html .nm-card .nick-error { font-size: 0.82rem; font-weight: 700; color: #c0392b; text-align: left !important; max-width: none !important; margin: 0; min-height: 0; }
html .nm-card .nick-error:empty { display: none; }
html .nm-card .nick-note {
  font-size: 0.8rem; font-weight: 600; line-height: 1.5; color: var(--ink2);
  text-align: left; margin: 0;
  padding: 11px 13px; border-radius: 12px;
  background: var(--surf2);
}
html .nm-card .nick-note:empty { display: none; }
html .nm-card .nick-btn {
  width: 100% !important; height: 54px; margin: 6px 0 0 !important;
  border-radius: 15px !important; border: 0 !important;
  background: var(--accent) !important; color: var(--surf) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.98rem !important; font-weight: 800 !important;
  letter-spacing: 0.01em !important; text-transform: none !important;
  box-shadow: 0 8px 20px rgba(var(--ac-rgb, 0,0,0), 0.22) !important;
  cursor: pointer; transition: transform 0.12s ease, opacity 0.2s;
}
html .nm-card .nick-btn:active { transform: scale(0.98); }
html .nm-card .nick-btn:disabled { opacity: 0.45; box-shadow: none !important; cursor: default; }
html .nm-card .nick-btn.danger { background: #c0392b !important; color: #fff !important; box-shadow: 0 8px 20px rgba(192,57,43,0.25) !important; }
html .nm-card .nick-btn.ghost {
  background: var(--surf) !important; color: var(--ink) !important;
  border: 1px solid var(--brd) !important; box-shadow: none !important;
}
html .nm-card .nick-alt {
  display: block; width: 100%; margin-top: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 0.86rem; font-weight: 700; color: var(--accent);
  text-decoration: none; letter-spacing: 0; text-align: center;
}
.nm-badge {
  width: 48px; height: 48px; border-radius: 15px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
}
.nm-badge svg { width: 24px; height: 24px; }
.nm-badge.danger { background: rgba(192,57,43,0.12); color: #c0392b; }
.nm-badge.ok { background: color-mix(in srgb, var(--ok) 16%, var(--surf)); color: var(--ok); }

/* Bildirme: sebepler secilebilir satirlar */
html .nm-card .rep-reasons { display: flex; flex-direction: column; gap: 8px; width: 100% !important; margin: 0 0 6px; }
html .nm-card .rep-reason {
  display: flex; align-items: center; gap: 12px;
  width: 100% !important; min-height: 52px; padding: 0 14px !important;
  border-radius: 14px !important;
  background: var(--surf) !important; border: 1.5px solid var(--brd) !important;
  color: var(--ink) !important; text-align: left !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.92rem !important; font-weight: 700 !important; letter-spacing: 0 !important;
  cursor: pointer;
}
.rep-dot {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink3); position: relative;
}
html .nm-card .rep-reason.on { border-color: #c0392b !important; background: rgba(192,57,43,0.05) !important; }
.rep-reason.on .rep-dot { border-color: #c0392b; }
.rep-reason.on .rep-dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #c0392b;
}
html .nm-card .rep-or {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 4px; font-size: 0.74rem; font-weight: 700; color: var(--ink3);
  letter-spacing: 0.04em; text-transform: none;
}
html .nm-card .rep-or::before, html .nm-card .rep-or::after { content: ''; flex: 1; height: 1px; background: var(--brd); }

/* Gizlenenler listesi */
.nm-list { display: flex; flex-direction: column; gap: 8px; }
.nm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--surf); border: 1px solid var(--brd);
}
.nm-av, .set-av {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--surf));
  color: var(--accent); font-weight: 800; font-size: 0.95rem;
}
.nm-name { flex: 1 1 auto; min-width: 0; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-pill, .set-pill {
  flex: 0 0 auto; height: 32px; padding: 0 13px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--accent) 13%, var(--surf));
  color: var(--accent); font-size: 0.78rem; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center;
}
.nm-empty {
  padding: 22px 14px; border-radius: 14px; text-align: center;
  background: var(--surf2); color: var(--ink2); font-size: 0.86rem; font-weight: 600;
}

/* --- AYARLAR --- */
html[data-fam="c"] .set-box {
  background: var(--surf) !important; border: 1px solid var(--brd) !important;
  border-radius: 18px !important; overflow: hidden; padding: 0 !important; gap: 0 !important;
  box-shadow: none !important;
}
html[data-fam="c"] .set-box > .set-row {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important;
  min-height: 54px; padding: 10px 16px !important;
  border-bottom: 1px solid var(--brd) !important;
  font-size: 0.92rem !important; font-weight: 700;
}
html[data-fam="c"] .set-box > .set-row:last-child { border-bottom: 0 !important; }
html[data-fam="c"] .set-section-tit {
  font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.1em !important;
  color: var(--ink3) !important; margin: 22px 4px 8px !important;
}
html[data-fam="c"] .set-icon-label { gap: 11px; font-weight: 700; }
html[data-fam="c"] .set-ic { color: var(--accent); width: 17px; height: 17px; }
.set-me { gap: 12px; justify-content: flex-start !important; }
.set-me-name { flex: 1 1 auto; font-size: 1rem; font-weight: 800; color: var(--ink); }
html[data-fam="c"] .set-btn:not(.sw) {
  height: 32px; padding: 0 13px !important; border-radius: 999px !important; border: 0 !important;
  background: color-mix(in srgb, var(--accent) 13%, var(--surf)) !important;
  color: var(--accent) !important; font-family: inherit !important;
  font-size: 0.76rem !important; font-weight: 800 !important; letter-spacing: 0.02em;
}
/* Ac/kapa dugmeleri anahtar gorunumunde. .toggle = acik (js/profile.js). */
html[data-fam="c"] .set-btn.sw {
  position: relative; flex: 0 0 auto;
  width: 50px; height: 30px; padding: 0 !important;
  border-radius: 999px !important; border: 0 !important;
  background: var(--surf2) !important;
  font-size: 0 !important; color: transparent !important;
  transition: background 0.2s ease;
  box-shadow: inset 0 0 0 1px var(--brd);
}
html[data-fam="c"] .set-btn.sw::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1);
}
html[data-fam="c"] .set-btn.sw.toggle { background: var(--accent) !important; box-shadow: none; }
html[data-fam="c"] .set-btn.sw.toggle::after { transform: translateX(20px); }
html[data-fam="c"] .set-select {
  height: 34px; border-radius: 999px; border: 0;
  background-color: color-mix(in srgb, var(--accent) 13%, var(--surf));
  color: var(--accent); font-weight: 800; font-size: 0.8rem; padding: 0 30px 0 13px;
}
.set-danger { margin-top: 22px; }
html[data-fam="c"] .set-box > .set-del {
  width: 100%; justify-content: center !important; cursor: pointer;
  color: #c0392b !important; font-weight: 800 !important; font-family: inherit;
}
html[data-fam="c"] .set-version {
  text-align: center; margin: 18px 0 6px; font-size: 0.72rem; font-weight: 600; color: var(--ink3);
  letter-spacing: 0.02em;
}
html[data-fam="c"] .set-box a.set-link { color: var(--ink) !important; font-weight: 700; text-decoration: none; }
html .nm-card .rep-reasons { max-width: none !important; }
html[data-fam="c"] .set-header { text-align: left; display: flex; align-items: center; justify-content: space-between; margin: 4px 0 4px; }
html[data-fam="c"] .set-title { font-family: 'Outfit', system-ui, sans-serif; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
html[data-fam="c"] .set-header .prof-banner-close { position: static !important; }
html[data-fam="c"] .set-box a.set-link {
  font-family: inherit !important; font-size: 0.92rem !important;
  border: 0 !important; padding: 0 !important; width: 100%;
}

/* Dukkan: basarimla acilan unvan satiri */
.shop-lock {
  flex: 0 0 auto; max-width: 52%;
  font-size: 0.72rem; font-weight: 700; line-height: 1.25; text-align: right;
  color: var(--ink3);
}
/* "KES Kazan" sekmesinde kategori seritleri anlamsiz */
#shopModal.earn-tab .shop-cats { display: none; }

/* Rutbe atlama: gri yildiz + mono yazi yerine kademe renginde rozet.
   Tiklayinca kapanir (js/rank.js); kazanma ekraninin ustunde 2,5 sn. */
html[data-fam="c"] .rank-up-overlay { background: color-mix(in srgb, var(--bg) 94%, transparent); gap: 6px; }
html[data-fam="c"] .rank-up-badge {
  width: 96px; height: 96px; border-radius: 30px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem; line-height: 1;
  background: color-mix(in srgb, currentColor 16%, var(--surf));
  box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 10%, transparent);
}
html[data-fam="c"] .rank-up-overlay.show .rank-up-badge { animation: w3-pop 0.5s cubic-bezier(.2,.8,.2,1) both; }
html[data-fam="c"] .rank-up-text {
  font-family: 'Outfit', system-ui, sans-serif; font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3);
}
html[data-fam="c"] .rank-up-name {
  font-family: 'Outfit', system-ui, sans-serif; font-size: 2.2rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink);
}

/* Egitim: "Nereden baslamali?" tek satirlik ornek */
.tut-demo-row { grid-template-columns: repeat(3, 44px) !important; }
.tut-demo-row span.q { background: color-mix(in srgb, var(--accent) 14%, var(--surf)); color: var(--accent); font-weight: 800; }
.tut-demo-eq { font-size: 0.95rem; font-weight: 700; color: var(--ink2); margin-top: 2px; }
.tut-demo-eq b { color: var(--accent); font-weight: 800; }

/* Kisa bildirimler (ipucu, gorev, "kaldigin yerden") alt navin
   ARKASINDA kaliyordu: toast bottom 30px / z 290, nav bottom 10px,
   58px yuksek, z 400. Hicbiri oyunda gorunmuyordu. Navin ustune. */
.ad-toast {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  z-index: 420;
  max-width: calc(100vw - 32px);
  white-space: normal !important;
  text-align: center;
  line-height: 1.4;
}
html[data-fam="c"] .ad-toast {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--ink); background: var(--surf);
  border: 1px solid var(--brd); border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 10px 28px -10px rgba(var(--sh, 0,0,0), 0.45);
}
/* gizliyken tamamen ekran disinda kalsin (yukari tasindi) */
.ad-toast:not(.show) { transform: translateX(-50%) translateY(calc(100% + 120px)); }
body.overlay-open .ad-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
body.win-open.overlay-open .ad-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); }
.ad-toast { width: max-content; max-width: min(340px, calc(100vw - 32px)); }

/* Dukkan fiyat dugmesi: KES simgesi vurgu renginde, "buy" dugmesinin
   zemini de vurgu renginde — simge zeminde kayboluyordu (19 Eki). */
.shop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.shop-btn.buy .kes-ic { color: var(--surf); }
.shop-btn .kes-ic { width: 14px; height: 14px; }

/* Tahta desenleri GORUNMUYORDU (19 Eki): yalnizca taslar arasindaki
   7px'lik bosluga, %50 opaklikla, rgba(golge,0.10) ile ciziliyordu; Gece'de
   golge rengi siyah oldugu icin koyu zeminde tamamen kayboluyordu.
   150-300 KES'e satilan bir sey gorunmeli: desen artik BOS hucrelere de
   ciziliyor (dolu taslar temiz kaliyor) ve rengi yazi renginden
   turuyor — acik temada koyu, koyu temada acik cizgi. */
html[data-fam="c"] { --pat: color-mix(in srgb, var(--ink) 10%, transparent); --pat-dot: color-mix(in srgb, var(--ink) 20%, transparent); }
html[data-fam="c"] .grid::before { opacity: 1; }
html[data-fam="c"][data-board="cizgi"] .grid::before,
html[data-fam="c"][data-board="cizgi"] .cell:not(.filled) {
  background-image: repeating-linear-gradient(45deg, var(--pat) 0 1.3px, transparent 1.3px 8px);
}
html[data-fam="c"][data-board="nokta"] .grid::before,
html[data-fam="c"][data-board="nokta"] .cell:not(.filled) {
  background-image: radial-gradient(var(--pat-dot) 1.4px, transparent 1.7px);
  background-size: 10px 10px;
  background-position: 3px 3px;
}
html[data-fam="c"][data-board="kare"] .grid::before,
html[data-fam="c"][data-board="kare"] .cell:not(.filled) {
  background-image:
    linear-gradient(var(--pat) 1px, transparent 1px),
    linear-gradient(90deg, var(--pat) 1px, transparent 1px);
  background-size: 12px 12px;
}
/* Hucre boyu olculurken bos alan dagitimi kapali (bkz. js/app.js -> updateCellSize) */
html.cell-sizing[data-v2] main > .play-area { margin-top: 0 !important; }
html.cell-sizing[data-v2] main > .stats-bar { margin-bottom: 0 !important; }

/* Hesap acarken kosul onayi (App Store 1.2) */
.nm-legal { margin-top: 10px; font-size: 0.72rem; font-weight: 600; line-height: 1.5; color: var(--ink3); text-align: center; }
.nm-legal a { color: var(--accent); font-weight: 800; text-decoration: none; }
/* Ilk acilista once egitim, sonra takma ad: kucuk pencereler 450'ye
   cikinca takma ad karti egitimin ustune biniyordu. */
.tut-modal { z-index: 460 !important; }

/* Mod etiketi + tahta boyutu hapi ayni satirda (bkz. index.html .lvl-line) */
header .lvl-line {
  width: 100%; order: 5;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-top: 6px;
}
html header .lvl-line .level-tag { width: auto !important; order: 0 !important; padding: 0 !important; text-align: center; }
.size-pill {
  height: 24px; padding: 0 10px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--accent) 13%, var(--surf));
  color: var(--accent);
  font-family: inherit; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  cursor: pointer; line-height: 24px;
}
.size-pill:active { transform: scale(0.94); }

/* Satin alma onayi: ilk dokunusta dugme "Onayla"ya donuyor (js/shop.js) */
.shop-btn.confirm, .shop-feat-btn.confirm {
  background: var(--ok) !important; color: #fff !important; border-color: var(--ok) !important;
  animation: shopConfirm 0.9s ease-in-out infinite;
}
@keyframes shopConfirm { 50% { transform: scale(1.05); } }