@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: swap; src: url('fonts/baloo-2-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122; }
@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: swap; src: url('fonts/baloo-2-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-0130, U+0132-02BA; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('fonts/baloo-2-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('fonts/baloo-2-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-0130, U+0132-02BA; }

:root {
  --ink: #151b33;
  --paper: #ffffff;
  --cream: #fff4dc;
  --blue: #1f6dff;
  --red: #ff3d4f;
  --gold: #ffc21a;
  --green: #22c55e;
  --violet: #5b2bd9;
  --muted: #5b6480;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  font-family: 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); overscroll-behavior: none; }
body {
  background: radial-gradient(120% 70% at 50% 0%, #8d5cff 0%, #5b2bd9 45%, #2d1680 100%) fixed, #3a1c9e;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .14;
  background-image: radial-gradient(#fff 1.4px, transparent 1.6px);
  background-size: 26px 26px;
}
canvas#board { position: fixed; inset: 0; display: block; z-index: 1; }
[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }

/* ---------- düğmeler (Slalom ile aynı dil) ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 8px 18px;
  border-radius: 16px; border: 3px solid var(--ink);
  font-weight: 800; font-size: 19px; letter-spacing: .02em;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--gold); font-size: 24px; min-height: 60px; }
.btn.ghost { background: rgba(255,255,255,.94); }
.btn.small { min-height: 46px; font-size: 17px; box-shadow: 0 4px 0 var(--ink); }
.btn.toggle[aria-pressed='true'] { background: #b9f5cf; }
.btn.toggle[aria-pressed='false'] { background: #eceff6; color: var(--muted); text-decoration: line-through; }
.price { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 10px; background: rgba(21,27,51,.12); }
.price em { font-style: normal; }
.icon-btn {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.icon-btn svg { fill: var(--ink); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

.coin { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffc21a 45%, #e58e00); border: 2px solid var(--ink); flex: 0 0 auto; }
.heart { display: inline-block; width: 22px; height: 20px; background: var(--red); flex: 0 0 auto;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1.5 14.5 1.5 7.3C1.5 3.6 4.4 1 7.4 1c2 0 3.6 1 4.6 2.6C13 2 14.6 1 16.6 1c3 0 5.9 2.6 5.9 6.3C22.5 14.5 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1.5 14.5 1.5 7.3C1.5 3.6 4.4 1 7.4 1c2 0 3.6 1 4.6 2.6C13 2 14.6 1 16.6 1c3 0 5.9 2.6 5.9 6.3C22.5 14.5 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ad-badge { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 1px 7px; border-radius: 6px; background: var(--ink); color: var(--gold); }

/* ---------- ekranlar ---------- */
.screen { position: fixed; inset: 0; z-index: 20; }
.panel-screen {
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--top) + 16px) 16px calc(var(--bottom) + 16px);
  background: rgba(16, 8, 50, .6);
  touch-action: pan-y; overflow-y: auto;
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.panel {
  width: 100%; max-width: 400px; margin: auto;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 24px;
  box-shadow: 0 8px 0 var(--ink);
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
  animation: pop .24s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes pop { from { transform: scale(.85); } }
.panel.center { text-align: center; }
.panel h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.1; }
.panel p { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.3; color: #333b58; }
.muted { color: var(--muted) !important; font-weight: 600; }
.small-text { font-size: 13px !important; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.error { color: #c4122a !important; }

/* ---------- harita ---------- */
.map {
  display: flex; flex-direction: column;
  padding: calc(var(--top) + 10px) 16px calc(var(--bottom) + 14px);
}
.topbar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pill {
  display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
  border-radius: 14px; border: 3px solid var(--ink); background: rgba(255,255,255,.95); box-shadow: 0 3px 0 var(--ink);
}
.pill strong { font-weight: 800; font-size: 20px; line-height: 1; }
.pill small { font-weight: 800; font-size: 13px; color: var(--muted); }
.pill.coins { margin-left: auto; }
.pill.coins b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--green); color: #fff; font-size: 18px; line-height: 1; border: 2px solid var(--ink); }
.logo {
  margin: 8px 0 0; text-align: center; flex: 0 0 auto;
  font-weight: 800; font-size: clamp(46px, 15vw, 70px); line-height: .95;
  color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink); transform: rotate(-3deg);
}
.logo span { color: var(--gold); }
.level-path {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; padding: 18px 0 24px;
  scrollbar-width: none;
}
.level-path::-webkit-scrollbar { display: none; }
.node {
  position: relative; flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 26px; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff, #ffe7b0 60%, #ffcd6b);
  border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.node.done { background: radial-gradient(circle at 35% 30%, #d6ffe4, #6ee79a 60%, #22c55e); }
.node.locked { background: #b9b3d6; color: #6e6891; box-shadow: 0 5px 0 #3c3566; border-color: #3c3566; }
.node.current { background: radial-gradient(circle at 35% 30%, #fff8c9, #ffd23e 60%, #ffb100); animation: bob 1.1s ease-in-out infinite; width: 78px; height: 78px; font-size: 30px; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.node .nstars { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; }
.mini-star { width: 16px; height: 16px; background: #5a5480;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1-5.4-4.9 7.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1-5.4-4.9 7.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.mini-star.on { background: var(--gold); }
.node-gap { flex: 0 0 auto; width: 10px; height: 26px; border-radius: 5px; background: rgba(255,255,255,.35); }
.map-foot { flex: 0 0 auto; }
@media (min-width: 720px) { .map { align-items: center; } .map-foot, .topbar, .level-path { width: 100%; max-width: 460px; } }

/* ---------- seviye kartı ---------- */
.goal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.goal-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #f3efff; border: 3px solid var(--ink); font-weight: 800; font-size: 17px; text-align: left; }
.goal-list.compact li { padding: 4px 10px; font-size: 15px; }
.goal-list li .gi { flex: 0 0 auto; }
.stars-row { display: flex; justify-content: center; gap: 4px; }
.stars-row .mini-star { width: 26px; height: 26px; }
.pre-title { font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pre-boosters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pre {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px; border-radius: 14px; border: 3px solid var(--ink); background: #f6f4fb; font-weight: 800; font-size: 13px; line-height: 1.1;
}
.pre[aria-pressed='true'] { background: #b9f5cf; box-shadow: 0 3px 0 var(--ink); transform: translateY(-2px); }
.pre .count { position: absolute; top: -9px; right: -7px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: var(--red); color: #fff; border: 2px solid var(--ink); font-size: 13px; display: grid; place-items: center; }
.pre .count.zero { background: var(--muted); }

/* ---------- ikonlar (hedef ve güçlendirici) ---------- */
.gi { position: relative; width: 34px; height: 34px; border-radius: 9px; border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 19px; line-height: 1; background: var(--cream); }
.gi.ice { background: linear-gradient(135deg, #e9f9ff, #9fdcff); }
.gi.stone { background: linear-gradient(#b8c0d2, #7d879e); }
.gi.score { background: var(--gold); font-size: 15px; }
.gi.words { background: #b9f5cf; font-size: 13px; }
.gi.long { background: #ffd0d5; font-size: 14px; }
.ico { width: 26px; height: 26px; display: block; }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: stretch; gap: 8px;
  padding: calc(var(--top) + 8px) 12px 0;
}
.moves {
  flex: 0 0 auto; width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 16px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}
.moves strong { font-weight: 800; font-size: 32px; line-height: 1; }
.moves small { font-weight: 800; font-size: 12px; color: var(--muted); }
.moves.low strong { color: var(--red); animation: beat .6s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.15); } }
.goals {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 16px; border: 3px solid var(--ink); background: rgba(255,255,255,.95); box-shadow: 0 4px 0 var(--ink);
  min-height: 62px;
}
.goal { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 18px; }
.goal .n { min-width: 22px; text-align: left; }
.goal.done .n { color: var(--green); }
.goal.bump .gi { animation: gbump .3s ease-out; }
@keyframes gbump { 40% { transform: scale(1.3); } }
.scorebar {
  position: absolute; left: 12px; right: 12px; top: calc(var(--top) + 82px);
  display: flex; align-items: center; gap: 8px;
}
.scorebar strong { min-width: 64px; text-align: right; font-weight: 800; font-size: 20px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.scorebar-track { position: relative; flex: 1 1 auto; height: 16px; border-radius: 9px; border: 3px solid var(--ink); background: rgba(21,27,51,.45); overflow: visible; }
#scoreFill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #ffe36b, #ffb100); transition: width .35s ease-out; }
.scorebar .mark { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: #5a5480;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1-5.4-4.9 7.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1-5.4-4.9 7.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.scorebar .mark.on { background: #fff; }

.preview {
  position: absolute; left: 50%; top: calc(var(--top) + 114px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px;
  border-radius: 23px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 4px 0 var(--ink);
  font-weight: 800; white-space: nowrap; pointer-events: none;
  transition: opacity .12s, transform .12s; opacity: 0;
}
.preview.on { opacity: 1; }
.preview span { font-size: 26px; letter-spacing: .06em; line-height: 1; }
.preview em { font-style: normal; font-size: 16px; color: var(--muted); }
.preview b { font-size: 12px; letter-spacing: .06em; padding: 2px 8px; border-radius: 8px; color: #fff; border: 2px solid var(--ink); }
.preview b:empty { display: none; }
.preview.valid { background: #b9f5cf; }
.preview.valid em { color: #12733a; }
.preview.bad { animation: shake .3s; background: #ffd0d5; }
@keyframes shake { 20%, 60% { transform: translateX(calc(-50% - 8px)); } 40%, 80% { transform: translateX(calc(-50% + 8px)); } }
.preview b.bomb { background: var(--red); }
.preview b.rocket { background: var(--blue); }
.preview b.mega { background: #7b3dff; }
.preview b.star { background: #ff9a1f; }

.mode-bar {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--bottom) + 96px);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  border-radius: 16px; border: 3px solid var(--ink); background: var(--gold); box-shadow: 0 4px 0 var(--ink);
  font-weight: 800; font-size: 16px;
}
.mode-bar span { flex: 1 1 auto; }
.mode-bar .btn { width: auto; min-height: 40px; }

.boosters {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: 10px;
  padding: 0 12px calc(var(--bottom) + 12px);
}
.booster {
  position: relative; width: 66px; height: 66px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(255,255,255,.95); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-weight: 800; font-size: 11px; line-height: 1;
}
.booster:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.booster[aria-pressed='true'] { background: var(--gold); }
.booster .count { position: absolute; top: -9px; right: -8px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: var(--red); color: #fff; border: 2px solid var(--ink); font-size: 13px; display: grid; place-items: center; }
.booster .count.buy { background: var(--green); font-size: 17px; }

.banner {
  position: fixed; left: 50%; top: 42%; z-index: 15; pointer-events: none;
  transform: translate(-50%, -50%) scale(.5); opacity: 0;
  font-weight: 800; font-size: clamp(38px, 12vw, 60px); line-height: 1; white-space: nowrap;
  color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink);
}
.banner.show { animation: banner 1.1s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-8deg); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1) rotate(-3deg); }
}
.toast {
  position: fixed; left: 50%; top: calc(var(--top) + 112px); z-index: 30; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; font-size: 15px !important; border-radius: 14px; border: 3px solid var(--ink);
  background: var(--paper); box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 16px; text-align: center; line-height: 1.25;
  animation: fade .2s;
}

/* ---------- sonuç ---------- */
.big-stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 74px; }
.big-stars .mini-star { width: 58px; height: 58px; }
.big-stars .mini-star:nth-child(2) { width: 72px; height: 72px; }
.big-stars .mini-star.on { animation: starIn .45s cubic-bezier(.2, 1.8, .4, 1) both; }
.big-stars .mini-star:nth-child(2).on { animation-delay: .25s; }
.big-stars .mini-star:nth-child(3).on { animation-delay: .5s; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.res-score strong { display: block; font-weight: 800; font-size: 44px; line-height: 1; }
.record { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 10px; background: var(--red); color: #fff; font-weight: 800; font-size: 14px; }
.reward { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 26px; }
.reward .coin { width: 28px; height: 28px; }
.broken-heart { width: 72px; height: 66px; margin: 0 auto; background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1.5 14.5 1.5 7.3C1.5 3.6 4.4 1 7.4 1c2 0 3.6 1 4.6 2.6l-1.6 4 2.6 2.2-1.8 3.6 2.4-3.8-2.4-2.2L13.6 3C14.6 1.7 15.4 1 16.6 1c3 0 5.9 2.6 5.9 6.3C22.5 14.5 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1.5 14.5 1.5 7.3C1.5 3.6 4.4 1 7.4 1c2 0 3.6 1 4.6 2.6l-1.6 4 2.6 2.2-1.8 3.6 2.4-3.8-2.4-2.2L13.6 3C14.6 1.7 15.4 1 16.6 1c3 0 5.9 2.6 5.9 6.3C22.5 14.5 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- mağaza ---------- */
.demo-note { font-size: 13px !important; color: var(--muted) !important; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 10px;
  border-radius: 16px; border: 3px solid var(--ink); background: #fff8e3; box-shadow: 0 4px 0 var(--ink); font-weight: 800;
}
.pack strong { font-size: 22px; line-height: 1; }
.pack .pp { padding: 2px 10px; border-radius: 9px; background: var(--green); color: #fff; border: 2px solid var(--ink); font-size: 15px; }
.pack .tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0 8px; border-radius: 8px; background: var(--red); color: #fff; font-size: 11px; border: 2px solid var(--ink); }
.pack .coins-ico { display: flex; }
.pack .coins-ico .coin { width: 22px; height: 22px; margin-left: -6px; }
.starter, .noads { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 3px solid var(--ink); }
.starter { background: linear-gradient(135deg, #ffe36b, #ff9a1f); }
.noads { background: #eef1f8; }
.starter div, .noads div { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.2; }
.starter strong, .noads strong { font-weight: 800; font-size: 17px; }
.starter span, .noads span { font-weight: 600; font-size: 13px; }
.starter .btn, .noads .btn { width: auto; flex: 0 0 auto; }

.picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.picker-grid button { height: 46px; border-radius: 10px; border: 3px solid var(--ink); background: var(--cream); font-weight: 800; font-size: 22px; }
.picker-grid button:active { background: var(--gold); }

/* ---------- deneme reklamı ---------- */
.ad-screen { z-index: 40; display: grid; place-items: center; background: #0d0d14; color: #fff; }
.ad-box { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.ad-box p { margin: 0; font-weight: 600; font-size: 17px; max-width: 280px; color: #c9cbe0; }
.ad-count { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; border: 5px solid var(--gold); font-weight: 800; font-size: 42px; }
.ad-box .btn { width: 180px; }