/* ============================================================
   Chef Eli — map.css  (Lezzet Yolu)
   Candy Crush duygusu: alttan yukarı patika, kilitli/aktif/temiz
   pinler, seçili seviyeye odak, alt sabit "Oyna" CTA'sı.
   ============================================================ */

#scene-map {
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(197, 106, 43, .18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 30px),
    linear-gradient(180deg, #1e1309 0%, var(--bg) 60%, #150c05 100%);
}

.map-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 8px;
}
.map-title { text-align: center; }
.map-title h2 { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 800; color: var(--cream); }
.map-title span { font-family: 'Caveat', cursive; color: var(--copper-hi); font-size: 1rem; }

.back-chip {
  font-size: .8rem; font-weight: 700; color: var(--cream);
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(242, 193, 78, .3);
  border-radius: 999px; padding: 7px 12px;
}

#map-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#map-track { position: relative; width: 100%; }
#map-svg { position: absolute; inset: 0; width: 100%; pointer-events: none; }

.map-path {
  fill: none; stroke-width: 10; stroke-linecap: round;
  stroke: rgba(255, 255, 255, .08);
  stroke-dasharray: 1 20;
}
.map-path.live {
  stroke: rgba(242, 193, 78, .55);
  stroke-dasharray: 1 18;
  animation: pathmarch 1.4s linear infinite;
}
.map-path.cleared { stroke: var(--copper); stroke-dasharray: none; opacity: .85; }
@keyframes pathmarch { to { stroke-dashoffset: -38; } }

/* ---------- Pinler ---------- */
.map-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 96px;
}
.mn-disc {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.35rem;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .5), var(--shadow);
  transition: transform .15s ease;
}
.map-node:active .mn-disc { transform: scale(.93); }
.mn-num { color: var(--ink); }
.mn-lock { position: absolute; font-size: 1.15rem; display: none; }
.mn-name {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1rem; line-height: 1;
  color: var(--cream); text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
}
.mn-stars { display: flex; gap: 2px; height: 14px; }
.mini-star { width: 14px; height: 14px; }
.mini-star path { fill: rgba(255, 255, 255, .14); }
.mini-star.lit path { fill: var(--butter); filter: drop-shadow(0 0 3px rgba(242, 193, 78, .7)); }

/* durumlar */
.map-node.locked .mn-disc { background: linear-gradient(180deg, #3c281668, #241507); border: 2px solid rgba(255,255,255,.08); }
.map-node.locked .mn-num { display: none; }
.map-node.locked .mn-lock { display: block; }
.map-node.locked .mn-name { opacity: .45; }
.map-node.locked .mn-stars { visibility: hidden; }

.map-node.active .mn-disc {
  background: radial-gradient(circle at 32% 28%, var(--copper-hi), var(--copper) 62%, #8a4416);
  border: 3px solid var(--butter);
}
.map-node.active .mn-num { color: #fff7e6; }
.map-node.active .mn-stars { visibility: hidden; }
.map-node.active.sel .mn-disc { animation: nodepulse 1.5s ease-in-out infinite; }
@keyframes nodepulse {
  0%, 100% { box-shadow: 0 5px 0 rgba(0, 0, 0, .5), 0 0 0 0 rgba(242, 193, 78, .55); }
  50% { box-shadow: 0 5px 0 rgba(0, 0, 0, .5), 0 0 0 14px rgba(242, 193, 78, 0); }
}

.map-node.cleared .mn-disc { background: radial-gradient(circle at 32% 28%, #ffe9ad, var(--butter) 60%, #c08d22); border: 2px solid #fff3cf; }
.map-node.cleared.sel .mn-disc { outline: 3px solid var(--copper-hi); outline-offset: 2px; }

.map-node.deny { animation: deny .35s ease; }
@keyframes deny { 25% { transform: translate(-50%, -50%) rotate(-5deg); } 65% { transform: translate(-50%, -50%) rotate(4deg); } }

/* YENİ rozeti */
.mn-badge {
  display: none; position: absolute; top: -10px; right: -4px; z-index: 2;
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  color: #fff; background: var(--paprika);
  padding: 3px 7px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  transform: rotate(8deg);
}
.map-node.isnew .mn-badge { display: block; animation: badgejump 1.2s ease-in-out infinite; }
@keyframes badgejump { 50% { transform: rotate(8deg) translateY(-3px); } }

/* ---------- Alt CTA ---------- */
.map-foot {
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: linear-gradient(180deg, transparent, rgba(21, 12, 5, .96) 34%);
}
#map-cta {
  width: 100%; font-weight: 800; font-size: 1.08rem; letter-spacing: .02em;
  color: var(--ink); background: linear-gradient(180deg, var(--butter), #d9a52f);
  padding: 16px; border-radius: 18px;
  box-shadow: 0 5px 0 #8a6a18, var(--shadow);
}
#map-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6a18; }
#map-cta .play-ic { margin-right: 6px; }
#map-cta.replay { background: linear-gradient(180deg, var(--copper-hi), var(--copper)); color: #fff7e6; box-shadow: 0 5px 0 #6e3413, var(--shadow); }
#map-cta.replay:active { box-shadow: 0 1px 0 #6e3413; }

#map-toast {
  position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(8px);
  font-family: 'Caveat', cursive; font-size: 1.25rem; color: #ffb9a8;
  background: rgba(0, 0, 0, .65); padding: 8px 16px; border-radius: 999px;
  opacity: 0; transition: all .25s ease; pointer-events: none; z-index: 20;
}
#map-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Haritadaki Şef Eli — seçili seviyenin üstünde */
#map-chef {
  position: absolute; width: 50px; z-index: 4; pointer-events: none;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .55));
  transition: left .38s cubic-bezier(.3, .9, .35, 1.15), top .38s cubic-bezier(.3, .9, .35, 1.15);
}
#map-chef svg { width: 100%; height: auto; display: block; }
#map-chef.hop { animation: chef-hop .42s ease; }
@keyframes chef-hop {
  0%, 100% { transform: translate(-50%, -100%); }
  40% { transform: translate(-50%, -122%); }
}


/* Bölüm pankartları (Lezzet Yolu durakları) */
.map-chapter {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: #3a2312; color: #f2c14e; border: 2px solid #8a5a2e;
  border-radius: 999px; padding: 7px 20px 8px; white-space: nowrap;
  font: 700 .82rem 'DM Sans', sans-serif; letter-spacing: .1em;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .5); z-index: 2; pointer-events: none;
}
.map-chapter small {
  display: block; text-align: center; margin-bottom: 1px;
  color: #b98a4e; font: 700 .58rem 'DM Sans', sans-serif; letter-spacing: .26em;
}
/* Kategori aksan rengi: aktif pin halkası */
.map-node.active .mn-disc { box-shadow: 0 0 0 3px var(--acc, #f2c14e), 0 8px 16px rgba(0, 0, 0, .5); }
.mn-lock svg { width: 17px; height: 17px; display: block; margin: 0 auto; }