/* ============================================================
   BISTRO BOULEVARD — Arayüz Stilleri
   Palet: sıcak kremler, ahşap, terracotta, adaçayı; vurgu hardal
   ============================================================ */

:root {
  --rc-cream: #f6ead8;
  --rc-cream-deep: #eaddc4;
  --rc-wood: #c98d5a;
  --rc-wood-dark: #8f5f3a;
  --rc-terracotta: #e2725b;
  --rc-terracotta-dark: #b5543f;
  --rc-sage: #8fae8b;
  --rc-leaf: #5f8d5a;
  --rc-gold: #f2b53a;
  --rc-gold-deep: #d99a1b;
  --rc-gem: #57c785;
  --rc-charcoal: #4a3f38;
  --rc-xp: #a978d1;
  --rc-premium: #f0648c;
  --color-cream: var(--rc-cream);
  --color-cream-deep: var(--rc-cream-deep);
  --color-wood: #b08d61;
  --color-wood-dark: #8a6a45;
  --color-terracotta: #c96f4a;
  --color-sage: var(--rc-sage);
  --color-mustard: #e0a83a;
  --color-coral: var(--rc-terracotta);
  --color-ink: var(--rc-charcoal);
  --color-ink-soft: #7a654e;
  --panel-bg: linear-gradient(168deg, rgba(255, 253, 248, 0.97) 0%, rgba(248, 238, 222, 0.95) 100%);
  --panel-border: 2.5px solid rgba(176, 141, 97, 0.55);

  /* Katmanlı yükseklik gölgeleri: sıkı temas + geniş yumuşak düşüş +
     üstte ince ışık kenarı + altta iç gölge. Tek düz gölge yerine bu
     dörtlü, arayüz elemanlarına gerçek malzeme hissi verir. */
  --panel-shadow:
    0 1px 2px rgba(74, 52, 32, 0.16),
    0 6px 16px rgba(74, 52, 32, 0.14),
    0 16px 34px rgba(74, 52, 32, 0.10),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(176, 141, 97, 0.18);
  --panel-shadow-raised:
    0 2px 4px rgba(74, 52, 32, 0.18),
    0 10px 24px rgba(74, 52, 32, 0.18),
    0 24px 48px rgba(74, 52, 32, 0.12),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(176, 141, 97, 0.2);
  --panel-shadow-pressed:
    0 1px 1px rgba(74, 52, 32, 0.14),
    inset 0 2px 5px rgba(122, 88, 54, 0.22);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-card: 20px;
  --radius-chip: 999px;
  --font-main: 'Nunito', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-title: 'Baloo 2', 'Fredoka', 'Nunito', sans-serif;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  color: var(--color-ink);
  /* Sahne arka planı: sıcak gün ışığı degradesi */
  background: radial-gradient(ellipse at 50% 30%, #fbf3e4 0%, #f0e0c6 55%, #e3cca6 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------ Oyun Sahnesi */

#game-canvas {
  position: fixed;
  inset: 0;
  display: block;
  cursor: grab;
  touch-action: none; /* Pinch/pan'i tarayıcı değil oyun yönetsin */
}

/* 3B render katmanı — 2B canvas'ın ÜSTÜNDE, aynı kadraj. Girdi olaylarını
   2B canvas yönetmeye devam eder (pan/zoom/tıklama mantığı orada), o yüzden
   burada pointer-events yok. Varsayılan display:none (index.html'de). */
#game-canvas-3d {
  position: fixed;
  inset: 0;
  pointer-events: none;
  touch-action: none;
}

/* Dünya-uzayı üst katmanı — 3B canvas'ın ÜSTÜNDE, arayüzün ALTINDA.
   Boş olduğunda görünmez (saydam), 2B kipte hiç çizilmez. */
#game-canvas-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  touch-action: none;
}

#game-canvas:active {
  cursor: grabbing;
}

/* Çok hafif kenar koyulaşması. Asıl vinyet artık canvas post-fx'inde
   (Gfx._gradeOverlay) uygulanıyor; bu katman yalnızca arayüz elemanlarının
   ekran kenarlarında yüzmesini engelleyen ince bir çerçeve bırakır. */
#ui-root::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%,
    transparent 70%,
    rgba(110, 74, 40, 0.06) 100%);
}

/* ------------------------------------------------ HUD Üst Bar */

#ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none; /* Sadece çocuk paneller tıklanabilir */
}

#hud-top {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

#hud-top > * {
  pointer-events: auto;
}

.hud-level-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Seviye rozeti: madeni para hissi — üstte parlak, altta koyu, üzerinde
   ince bir cam yansıması yayı. */
.level-badge {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #ffe08a 0%, transparent 55%),
    linear-gradient(165deg, #f5bf46 0%, var(--color-mustard) 45%, #b87d14 100%);
  border: 3px solid #fff6e6;
  box-shadow:
    0 2px 4px rgba(120, 80, 10, 0.30),
    0 8px 18px rgba(120, 80, 10, 0.22),
    inset 0 -3px 6px rgba(122, 78, 8, 0.45),
    inset 0 2px 3px rgba(255, 240, 190, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1.5px 2px rgba(120, 80, 10, 0.55);
  flex-shrink: 0;
}

/* Üst yarıya cam parlaması */
.level-badge::after {
  content: '';
  position: absolute;
  inset: 3px 6px auto 6px;
  height: 40%;
  border-radius: 50% 50% 40% 40% / 100% 100% 30% 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}

/* XP çubuğu: içe gömülü oluk */
.xp-bar {
  position: relative;
  width: clamp(110px, 18vw, 200px);
  height: 22px;
  background: linear-gradient(180deg, #e8d9be 0%, #f6ecda 100%);
  border-radius: var(--radius-chip);
  box-shadow:
    inset 0 2px 4px rgba(122, 88, 54, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(74, 52, 32, 0.14);
  overflow: hidden;
}

.xp-fill {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 0%;
  max-width: calc(100% - 6px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(90deg, var(--color-mustard), var(--color-coral));
  border-radius: var(--radius-chip);
  box-shadow:
    0 0 8px rgba(242, 181, 58, 0.55),
    inset 0 -1px 2px rgba(150, 70, 40, 0.28);
  transition: width 0.5s ease;
}

.xp-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.02em;
}

.hud-resources {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.resource-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  background: var(--panel-bg);
  border: 1px solid rgba(176, 141, 97, 0.30);
  border-radius: var(--radius-chip);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.chip-icon {
  font-size: 17px;
  filter: drop-shadow(0 1px 1px rgba(74, 52, 32, 0.28));
}

.icon-button {
  width: 46px;
  height: 46px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(176, 141, 97, 0.30);
  border-radius: 50%;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.16s var(--ease-pop), box-shadow 0.16s ease;
}

.icon-button:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--panel-shadow-raised);
}
.icon-button:active {
  transform: translateY(1px) scale(0.95);
  box-shadow: var(--panel-shadow-pressed);
}

/* ---- Dar ekran (telefon) HUD düzeni ----
   Tek satırda seviye + XP + 3 kaynak çipi + ayar butonu 375 px'e sığmıyordu;
   çipler alt alta sarmalanıp HUD'u 116 px yükseltiyor ve sahnenin üstünü
   kapatıyordu. Burada HUD iki satıra ayrılır: üstte seviye ve ayarlar,
   altta ortalanmış tek sıra kaynak çipi. */
@media (max-width: 560px) {
  #hud-top {
    flex-wrap: wrap;
    row-gap: 7px;
    column-gap: 8px;
  }

  .hud-level-group { order: 1; flex: 1 1 auto; min-width: 0; }
  #hud-top > .icon-button { order: 2; flex-shrink: 0; }

  .hud-resources {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* Çipleri sıkılaştır: üçü yan yana kalmalı */
  .resource-chip {
    padding: 5px 9px 5px 7px;
    gap: 4px;
    font-size: 13px;
    min-width: 0;
  }
  .resource-chip .chip-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .level-badge { width: 44px; height: 44px; font-size: 19px; }
  .xp-bar { height: 20px; }
  .icon-button { width: 44px; height: 44px; font-size: 18px; }
}

/* ------------------------------------------------ Malzeme Ambarı Paneli */

.warehouse-crates {
  margin-left: auto;
  margin-right: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  background: rgba(176, 141, 97, 0.18);
  border: 1px solid rgba(176, 141, 97, 0.35);
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-wood-dark);
}

.warehouse-capacity { padding: 0 14px 10px; }

/* Doluluk oluğu: içe gömülü, XP çubuğuyla aynı malzeme dili */
.warehouse-bar {
  position: relative;
  height: 26px;
  border-radius: var(--radius-chip);
  background: linear-gradient(180deg, #e8d9be 0%, #f6ecda 100%);
  box-shadow:
    inset 0 2px 4px rgba(122, 88, 54, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.warehouse-bar-fill {
  position: absolute;
  inset: 3px auto 3px 3px;
  max-width: calc(100% - 6px);
  border-radius: var(--radius-chip);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(90deg, #8fae8b, #5f8d5a);
  transition: width 0.35s ease, background 0.3s ease;
}

/* Kritik (neredeyse boş) ve dolu durumları renk + metinle birlikte anlatılır */
.warehouse-bar-low {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(90deg, #e2725b, #b5543f);
}
.warehouse-bar-full {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(90deg, var(--color-mustard), #c98d22);
}

.warehouse-capacity-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.warehouse-warning {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rc-terracotta-dark);
}

.warehouse-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px 14px;
}

/* --- Yükseltme kartı --- */
.warehouse-upgrade {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 2px solid rgba(176, 141, 97, 0.40);
  border-radius: 14px;
  background: linear-gradient(160deg, #f8efdc, #efe0c4);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.8);
}

.warehouse-upgrade-maxed {
  text-align: center;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.warehouse-upgrade-head {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 9px;
}

.warehouse-upgrade-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.warehouse-upgrade-button {
  flex: 1 1 140px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid rgba(122, 88, 54, 0.35);
  border-radius: 11px;
  background: linear-gradient(160deg, #f6e8cc, #e9d2a6);
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-ink);
  cursor: pointer;
  transition: transform 0.14s var(--ease-pop), box-shadow 0.14s ease;
}

.warehouse-upgrade-button:hover:not(:disabled) { transform: translateY(-2px); }
.warehouse-upgrade-button:active:not(:disabled) { transform: translateY(1px) scale(0.97); }
.warehouse-upgrade-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Elmas kısayolu ayrı renkte: kıymetli kaynak harcandığı belli olsun */
.warehouse-upgrade-gems {
  background: linear-gradient(160deg, #dff3e6, #b9e3c9);
  border-color: rgba(60, 140, 95, 0.42);
  color: #245c3c;
}

/* --- Malzeme satırları --- */
.warehouse-list { display: flex; flex-direction: column; gap: 6px; }

.warehouse-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(176, 141, 97, 0.24);
}

.warehouse-row-info { flex: 1; min-width: 0; }
.warehouse-row-name {
  font-family: var(--font-title);
  font-size: 13.5px;
  font-weight: 800;
}
.warehouse-row-stock {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.warehouse-row-actions { display: flex; gap: 6px; }

.warehouse-buy-button {
  min-width: 40px;
  min-height: 34px;
  border: 2px solid rgba(122, 88, 54, 0.32);
  border-radius: 10px;
  background: linear-gradient(160deg, #f6e8cc, #e9d2a6);
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-ink);
  cursor: pointer;
  transition: transform 0.14s var(--ease-pop);
}
.warehouse-buy-button:hover { transform: translateY(-2px); }
.warehouse-buy-button:active { transform: translateY(1px) scale(0.94); }

@media (pointer: coarse) {
  .warehouse-buy-button { min-width: 44px; min-height: 44px; }
  .warehouse-upgrade-button { min-height: 44px; }
}

/* ------------------------------------------------ Dükkan Tabelası

   Restoran kapısındaki asma tabela hissi: kalın çerçeve, iç gölge, hafif
   sallanma. Oyundaki en önemli tek karar olduğu için panelde saklı değil,
   HUD'da sürekli görünür. */

.hud-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-sign {
  min-width: 72px;
  min-height: 38px;
  padding: 7px 14px;
  border: 2.5px solid rgba(122, 88, 54, 0.55);
  border-radius: 12px;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
  transition: transform 0.16s var(--ease-pop), box-shadow 0.16s ease, background 0.2s ease;
}

.shop-sign:hover { transform: translateY(-2px) scale(1.04); }
.shop-sign:active { transform: translateY(1px) scale(0.96); box-shadow: var(--panel-shadow-pressed); }

.shop-sign-open {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #6fae68, #477c43);
  text-shadow: 0 1.5px 2px rgba(30, 60, 28, 0.55);
  box-shadow:
    0 2px 4px rgba(40, 70, 36, 0.30),
    0 8px 18px rgba(40, 70, 36, 0.20),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(30, 60, 28, 0.35);
}

.shop-sign-closed {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #9a8878, #6d5c4d);
  text-shadow: 0 1.5px 2px rgba(50, 40, 30, 0.55);
  box-shadow:
    0 2px 4px rgba(60, 45, 32, 0.28),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
    inset 0 -3px 6px rgba(50, 38, 26, 0.38);
}

/* Açık ama stok yok: tabela kırmızıya döner ve nabız atar — "beni kapat" */
.shop-sign-warning {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #e2725b, #b5543f);
  animation: shop-sign-alarm 1.5s ease-in-out infinite;
}

@keyframes shop-sign-alarm {
  0%, 100% { box-shadow: 0 2px 4px rgba(120, 50, 36, 0.30), inset 0 1.5px 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 2px 4px rgba(120, 50, 36, 0.30), inset 0 1.5px 0 rgba(255,255,255,0.5), 0 0 0 5px rgba(226, 114, 91, 0.24); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-sign-warning { animation: none; }
}

@media (pointer: coarse) {
  .shop-sign { min-height: 44px; }
}

/* ------------------------------------------------ Dikkat Rozetleri

   HUD'un hemen altında, yalnızca aksiyon gerektiren bir durum varken dolan
   sıra. Boşken hiç yer kaplamaz (`:empty` → display:none), böylece sahne
   normalde tamamen açık kalır. */

#alert-chips {
  position: absolute;
  top: var(--world-guide-bottom, calc(max(10px, env(safe-area-inset-top)) + 62px));
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  z-index: 2;
}

#alert-chips:empty { display: none; }

.alert-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 13px 6px 10px;
  border: 1.5px solid rgba(176, 141, 97, 0.42);
  border-radius: var(--radius-chip);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s var(--ease-pop), box-shadow 0.16s ease;
  animation: alert-chip-in 0.34s var(--ease-pop) both;
}

.alert-chip:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--panel-shadow-raised);
}
.alert-chip:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--panel-shadow-pressed);
}

.alert-chip .svg-icon { flex-shrink: 0; }
.alert-chip-label { white-space: nowrap; }

/* Önem dereceleri renkle DEĞİL, renk + kenarlık + nabız ile ayrışır
   (renk körlüğü için tek başına renge güvenilmez). */
.alert-chip-critical {
  border-color: rgba(181, 84, 63, 0.75);
  color: var(--rc-terracotta-dark);
  animation:
    alert-chip-in 0.34s var(--ease-pop) both,
    alert-pulse 2.2s ease-in-out 0.34s infinite;
}
.alert-chip-warn {
  border-color: rgba(217, 154, 27, 0.70);
  color: #9a6a08;
}
.alert-chip-info {
  border-color: rgba(122, 101, 78, 0.45);
  color: var(--color-ink-soft);
}

@keyframes alert-chip-in {
  from { opacity: 0; transform: translateX(-10px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Kritik rozetin dikkat çeken ama rahatsız etmeyen nabzı */
@keyframes alert-pulse {
  0%, 100% { box-shadow: var(--panel-shadow); }
  50%      { box-shadow: var(--panel-shadow), 0 0 0 4px rgba(226, 114, 91, 0.16); }
}

/* İşletim sistemi "hareketi azalt" diyorsa nabız ve giriş animasyonu kapanır */
@media (prefers-reduced-motion: reduce) {
  .alert-chip,
  .alert-chip-critical { animation: none; }
}

/* Dokunmatik cihazlarda rozet ≥44 px yüksekliğe çıkar (iOS dokunma hedefi).
   Fare kullanılan masaüstünde 34 px yeterli ve HUD'u daha az meşgul eder. */
@media (pointer: coarse) {
  .alert-chip {
    min-height: 44px;
    padding: 10px 15px 10px 12px;
  }
}

@media (max-width: 560px) {
  /* Telefonda HUD iki satıra çıkıyor; rozetleri onun altına indir */
  #alert-chips {
    top: var(--world-guide-bottom, calc(max(10px, env(safe-area-inset-top)) + 100px));
    right: 12px;
  }
  .alert-chip { font-size: 12px; }
}

/* ------------------------------------------------ Alt Eylem Çubuğu */

#action-bar {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow-raised);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  pointer-events: auto;
  max-width: calc(100vw - 16px);
  overflow-x: auto;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 58px;
  padding: 8px 6px 6px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.action-button:hover {
  background: rgba(224, 168, 58, 0.18);
  transform: translateY(-2px);
}
.action-button:active {
  transform: translateY(1px) scale(0.95);
  background: rgba(224, 168, 58, 0.26);
  box-shadow: var(--panel-shadow-pressed);
}

.action-icon {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 1.5px 1.5px rgba(74, 52, 32, 0.25));
}

.action-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.action-edit {
  background: linear-gradient(160deg, #f6e8cc, #e9d2a6);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(176, 141, 97, 0.22);
}

/* Aktif düzenleme modu: içeriden aydınlanan hardal buton */
.action-edit-active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--color-mustard), #c98d22);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 80, 10, 0.5);
  box-shadow:
    0 0 14px rgba(242, 181, 58, 0.5),
    inset 0 1.5px 0 rgba(255, 240, 190, 0.7),
    inset 0 -2px 4px rgba(122, 78, 8, 0.35);
}

/* Dar ekranda 7 eylem butonu yatay kaydırma gerektirmeden sığsın */
@media (max-width: 560px) {
  #action-bar { gap: 2px; padding: 6px 4px; }
  /* 8 buton 375 px'e sigar: 8×44 + 7×2 + 8 = 374. Dokunma hedefi 44 px (iOS/Android kilavuzu). */
  .action-button { min-width: 44px; min-height: 48px; padding: 6px 2px 4px; flex: 1 1 0; }
  .action-icon { width: 22px; height: 22px; }
  .action-label { font-size: 9.5px; letter-spacing: 0; }
}

/* ------------------------------------------------ Bildirimler */

#notification-area {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 64px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 40;
}

/* Bildirim: koyu cam hap — üstte ince ışık kenarı, arkasında bulanıklık */
.toast {
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(88, 66, 46, 0.94), rgba(62, 45, 30, 0.94));
  color: #fff6e6;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-chip);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 2px 6px rgba(40, 26, 12, 0.30),
    0 12px 28px rgba(40, 26, 12, 0.28),
    inset 0 1px 0 rgba(255, 236, 200, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-12px) scale(0.92);
  transition: opacity 0.3s ease, transform 0.34s var(--ease-pop);
  max-width: min(86vw, 420px);
  text-align: center;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ------------------------------------------------ Modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  /* Merkezde daha açık, kenarlara doğru koyulaşan perde: bakışı modala çeker */
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(60, 42, 26, 0.34) 0%,
      rgba(44, 30, 18, 0.58) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 50;
  backdrop-filter: blur(5px) saturate(0.9);
  -webkit-backdrop-filter: blur(5px) saturate(0.9);
  animation: overlay-fade 0.22s ease;
}

.modal {
  width: min(90vw, 360px);
  background:
    radial-gradient(ellipse at 50% -10%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, #fdf2e0 100%);
  border: var(--panel-border);
  border-radius: var(--radius-card);
  box-shadow:
    0 4px 8px rgba(58, 46, 40, 0.20),
    0 20px 44px rgba(58, 46, 40, 0.28),
    0 40px 80px rgba(58, 46, 40, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(176, 141, 97, 0.20);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: modal-pop 0.32s var(--ease-pop);
  max-height: 88vh;
  overflow-y: auto;
}

@keyframes overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.88) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal h2 {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
  color: var(--color-ink);
}

/* ------------------------------------------------ Dil Seçici (Settings Modal) */
.settings-lang-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
  background: rgba(234, 221, 196, 0.45);
  padding: 10px;
  border-radius: 14px;
}

.settings-section-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.lang-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lang-chip {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 80px;
  padding: 8px 10px;
  border: 2px solid rgba(176, 141, 97, 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8efdf 100%);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s var(--ease-pop), background 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow:
    0 1px 2px rgba(74, 52, 32, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.lang-chip:hover {
  background: linear-gradient(180deg, #fffaf0 0%, var(--color-cream) 100%);
  border-color: var(--color-wood);
  transform: translateY(-1px);
}

.lang-chip-active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #e08a6e 0%, var(--color-terracotta) 100%);
  color: #fff;
  border-color: rgba(150, 70, 45, 0.5);
  text-shadow: 0 1px 2px rgba(120, 50, 30, 0.4);
  box-shadow:
    0 3px 10px rgba(201, 111, 74, 0.42),
    inset 0 1.5px 0 rgba(255, 220, 200, 0.6),
    inset 0 -2px 3px rgba(140, 60, 38, 0.35);
}

.modal-button {
  padding: 13px 16px;
  border: 1px solid rgba(176, 141, 97, 0.26);
  border-radius: 14px;
  background: linear-gradient(180deg, #f4e7cf 0%, #e6d5b4 100%);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(74, 52, 32, 0.12),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75);
  transition: background 0.15s ease, transform 0.14s var(--ease-pop),
              box-shadow 0.14s ease;
}

.modal-button:hover {
  background: linear-gradient(180deg, #f8eddb 0%, #e2d0ae 100%);
  transform: translateY(-1px);
}
.modal-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--panel-shadow-pressed);
}

.modal-button-danger {
  background: #f6ded6;
  color: #a4472c;
}

.modal-button-danger:hover { background: #f0cdc0; }

.modal-button-primary {
  background: linear-gradient(180deg, #f08a72 0%, var(--rc-terracotta) 45%, var(--rc-terracotta-dark) 100%);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 0 rgba(90, 40, 20, 0.25);
  box-shadow: 0 3px 0 var(--rc-terracotta-dark), 0 4px 12px rgba(181, 84, 63, 0.35);
  border: 2px solid rgba(255,255,255,0.25);
}

.modal-button-primary:hover {
  background: linear-gradient(180deg, #f39a85 0%, #e8836c 45%, #c45f48 100%);
}
.modal-button-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--rc-terracotta-dark);
}

/* ------------------------------------------------ SVG İkonlar */

.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.svg-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.action-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
}

.action-icon svg {
  width: 100%;
  height: 100%;
}

.modal-button {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ------------------------------------------------ Mağaza Paneli */

#shop-panel {
  position: absolute;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  width: min(96vw, 560px);
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow-raised);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.26s var(--ease-pop);
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: min(46vh, 340px);
}

#shop-panel.shop-panel-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.shop-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}

.shop-title {
  font-size: 17px;
  font-weight: 800;
}

.shop-atmosphere {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-soft);
  background: rgba(143, 174, 139, 0.16);
  padding: 4px 10px;
  border-radius: var(--radius-chip);
}

.shop-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-cream-deep);
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Panel basliginda kapat dugmesinin 44px hedefini koru. */
  flex-shrink: 0;
  position: relative;
}

.shop-close:hover { background: #e2d0ae; }

.shop-tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  overflow-x: auto;
  /*
   * flex-shrink: 0 — panel bir yukseklik-kisitli flex KOLON (mobilde ~340px).
   * Varsayilan flex-shrink:1 ile sekme seridi, kaydirilabilir `.shop-items`
   * grid'iyle birlikte dikey baskida eziliyordu: mobilde 30px yerine 20px'e
   * inip 13px sekme metnini 2px'e sikistiriyor ve KIRPIYORDU (box-sizing:
   * border-box). Serit dogal yuksekligini korumali; dikey alani grid emer.
   */
  flex-shrink: 0;
}

/* Sekmeler: pasifken hafif içe gömülü, aktifken kabarık ve ışıklı */
.shop-tab {
  border: 1px solid rgba(176, 141, 97, 0.28);
  padding: 7px 14px;
  border-radius: var(--radius-chip);
  background: linear-gradient(180deg, #f2e6cf, #e6d5b4);
  color: var(--color-ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.15s var(--ease-pop), box-shadow 0.15s ease;
}

.shop-tab:hover { transform: translateY(-1px); }

.shop-tab-active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--color-mustard), #c98d22);
  color: #fff;
  border-color: rgba(150, 100, 16, 0.45);
  text-shadow: 0 1px 2px rgba(120, 80, 10, 0.45);
  box-shadow:
    0 2px 8px rgba(201, 141, 34, 0.42),
    inset 0 1.5px 0 rgba(255, 240, 190, 0.7),
    inset 0 -2px 3px rgba(122, 78, 8, 0.30);
}

.shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  padding: 2px 14px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Ürün kartı: hafif kabarık, üstünde ışık kenarı; imleçle yükselir */
.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border: 2px solid rgba(176, 141, 97, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffefa 0%, #f7eeda 100%);
  box-shadow:
    0 1px 2px rgba(90, 62, 40, 0.12),
    0 4px 10px rgba(90, 62, 40, 0.10),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-family: inherit;
  color: var(--color-ink);
  transition: transform 0.16s var(--ease-pop), border-color 0.15s ease,
              box-shadow 0.16s ease;
}

.shop-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-mustard);
  box-shadow:
    0 2px 4px rgba(90, 62, 40, 0.14),
    0 10px 22px rgba(90, 62, 40, 0.16),
    0 0 0 3px rgba(242, 181, 58, 0.18),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
}

.shop-card:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--panel-shadow-pressed);
}

.shop-card:active { transform: scale(0.96); }

.shop-card-disabled {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.shop-card-preview {
  width: 72px;
  height: 64px;
}

.shop-card-name {
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.shop-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-ink-soft);
  flex-wrap: wrap;
  justify-content: center;
}

/* İşlevsel fayda rozeti (pişirme/içecek hızı, oturak) — mağaza kartında */
.shop-card-bonus {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(95, 138, 82, 0.16);
  color: #4a6b40;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* ------------------------------------------------ Yerleştirme İpucu */

#placement-hint {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 64px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  background: var(--panel-bg);
  border-radius: var(--radius-chip);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  z-index: 30;
  max-width: 94vw;
}

.hint-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hint-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: none;
  border-radius: var(--radius-chip);
  background: var(--color-cream-deep);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.hint-button:hover { background: #e2d0ae; }

.hint-button-cancel {
  background: #f6ded6;
  color: #a4472c;
}

.hint-button-cancel:hover { background: #f0cdc0; }

/* ------------------------------------------------ Seçim Araç Çubuğu */

#selection-toolbar {
  position: absolute;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  z-index: 25;
  max-width: 96vw;
}

.selection-name {
  font-size: 13px;
  font-weight: 800;
  padding: 0 8px;
  white-space: nowrap;
}

.selection-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--color-cream-deep);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.selection-button:hover { background: #e2d0ae; }
.selection-button:active { transform: scale(0.95); }

/* ------------------------------------------------ Personel Paneli */

.sheet-panel {
  position: absolute;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  width: min(96vw, 600px);
  background: var(--panel-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: min(50vh, 380px);
}

.sheet-panel-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.staff-hire-row {
  display: flex;
  flex-wrap: wrap;          /* dar ekranda 3. buton alt satıra insin (taşma yok) */
  gap: 8px;
  padding: 0 14px 10px;
}

.staff-hire-button {
  flex: 1 1 150px;          /* min 150px; sığmazsa sarar */
  min-width: 0;            /* içerik taşmasını engelle */
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 9px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.10);
  cursor: pointer;
  font-family: inherit;
  color: var(--color-ink);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.staff-hire-button:hover { border-color: var(--color-mustard); }
.staff-hire-button:active { transform: scale(0.97); }

.staff-hire-label {
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-hire-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-ink-soft);
}

.staff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.staff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.08);
}

.staff-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
  flex-shrink: 0;
}

.staff-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.staff-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.energy-bar {
  height: 8px;
  background: var(--color-cream-deep);
  border-radius: var(--radius-chip);
  overflow: hidden;
}

.energy-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-sage), #a8c4a2);
  border-radius: var(--radius-chip);
  transition: width 0.6s ease;
}

.staff-fire-button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: #f6ded6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-fire-button:hover { background: #f0cdc0; }

/* ------------------------------------------------ Menü / Tarif Paneli */

.sheet-panel-tall {
  max-height: min(62vh, 460px);
}

.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px 14px;
  overflow-y: auto;
  flex: 1;          /* panel içinde kalan alanı kapla... */
  min-height: 0;    /* ...ve içerik taşarsa panel içinde kaydır (kesilmesin) */
}

.recipe-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.08);
}

.recipe-card-locked {
  opacity: 0.75;
  background: #f7f0e3;
}

.recipe-preview {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.recipe-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.recipe-name {
  font-size: 13.5px;
  font-weight: 800;
}

.mastery-stars {
  display: flex;
  gap: 3px;
}

.mastery-star {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-cream-deep);
  border: 1.5px solid #d8cbb2;
}

.mastery-star-earned {
  background: linear-gradient(160deg, var(--color-mustard), #c98d22);
  border-color: #b07d1e;
}

.recipe-stats {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.recipe-progress,
.recipe-requirements {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.recipe-action {
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--color-cream-deep);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.recipe-action:hover { background: #e2d0ae; }

.recipe-action-active {
  background: linear-gradient(160deg, var(--color-sage), #74936f);
  color: #fff;
}

.recipe-action-unlock {
  background: linear-gradient(160deg, var(--color-mustard), #c98d22);
  color: #fff;
}

/* ------------------------------------------------ Bahçe Paneli */

.garden-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.garden-section-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.seed-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.seed-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-chip);
  background: #fffdf8;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
}

.seed-chip-active {
  border-color: var(--color-mustard);
  background: rgba(224, 168, 58, 0.14);
}

.ingredient-swatch {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Çizilmiş malzeme ikonu. Kaynak görsel zaten kare, yuvarlak köşeli bir rozet
   olduğu için daire kırpması uygulanmaz; gradyan yedeği daire kalmaya devam
   eder (aynı sınıfı paylaşıyorlar). */
.ingredient-icon {
  border-radius: 8px;
  object-fit: contain;
}

.plots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Ekim alanı illüstrasyonu: kartın üstünde, isim ve sayaçtan önce.
   Kart yüksekliğini şişirmesin diye sabit yükseklikte ve orantı korumalı. */
.plot-art {
  width: auto;
  height: 54px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: -2px;
  filter: drop-shadow(0 2px 3px rgba(90, 62, 40, 0.18));
}

.plot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(143, 174, 139, 0.14);
  border: 2px dashed rgba(116, 147, 111, 0.4);
  min-height: 86px;
  justify-content: center;
}

.plot-name {
  font-size: 12.5px;
  font-weight: 800;
}

.plot-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-align: center;
}

.market-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.market-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #fffdf8;
}

.market-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
}

.market-stock {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-ink-soft);
}

.market-buy {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-chip);
  background: var(--color-cream-deep);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-ink);
  cursor: pointer;
}

.market-buy:hover { background: #e2d0ae; }

/* ------------------------------------------------ Görev Paneli */

.quest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.08);
}

.quest-card-claimed {
  opacity: 0.6;
}

.quest-description {
  font-size: 13px;
}

.quest-progress-bar {
  position: relative;
  height: 16px;
  background: var(--color-cream-deep);
  border-radius: var(--radius-chip);
  overflow: hidden;
  margin: 3px 0;
}

.quest-progress-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  max-width: calc(100% - 4px);
  background: linear-gradient(90deg, var(--color-sage), #a8c4a2);
  border-radius: var(--radius-chip);
  transition: width 0.4s ease;
}

.quest-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--color-ink);
}

.quest-reward-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.quest-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  background: rgba(224, 168, 58, 0.14);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--color-ink-soft);
}

.quest-done-mark {
  color: var(--color-sage);
  display: inline-flex;
  flex-shrink: 0;
}

/* ------------------------------------------------ Temalı Etkinlik */

.event-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 12px;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 14px rgba(90, 62, 40, 0.2);
}

.event-banner-title {
  font-size: 18px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(80, 50, 20, 0.35);
}

.event-banner-countdown {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.92;
}

.event-banner-points {
  margin-top: 4px;
  padding: 3px 12px;
  border-radius: var(--radius-chip);
  background: rgba(255, 255, 255, 0.25);
  font-size: 12.5px;
  font-weight: 800;
}

.event-final-card {
  border: 2px solid var(--color-mustard);
  background: linear-gradient(160deg, #fffdf8, #fdf3dd);
}

.event-item-chip {
  background: rgba(224, 168, 58, 0.22) !important;
  color: #a4772a !important;
}

/* Daily festival tasks share the existing journal, with readable touch targets. */
#quest-panel { max-height: min(740px, calc(100dvh - 150px)); }
#quest-panel .shop-header { flex: 0 0 auto; justify-content: space-between; }
#quest-panel .festival-list { gap: 16px; }
#quest-panel .festival-list .event-banner { padding: 14px; color: #30271f; text-shadow: none; }
#quest-panel .event-banner-title { font-size: 20px; text-shadow: none; }
#quest-panel .event-banner-countdown, #quest-panel .event-banner-points { font-size: 14px; opacity: 1; }
.festival-section-title { margin: 4px 0 8px; font-family: var(--font-title); font-size: 22px; line-height: 1.2; color: var(--color-ink); }
.festival-hint, .festival-schedule, .festival-reset { font-size: 14px; line-height: 1.45; color: #67533e; }
.festival-reset { margin: 8px 0 4px; font-weight: 800; color: #43694d; font-variant-numeric: tabular-nums; }
.festival-task { display: grid; grid-template-columns: minmax(0, 1fr) minmax(108px, 34%); gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid #d9c9ad; }
.festival-task-info { min-width: 0; }
.festival-task h4 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.festival-progress-label { display: block; margin: 6px 0 5px; font-size: 14px; color: #67533e; font-variant-numeric: tabular-nums; }
.festival-task progress { display: block; width: 100%; height: 7px; border: 0; border-radius: 6px; overflow: hidden; background: #e3d6c0; accent-color: #497655; }
.festival-task progress::-webkit-progress-bar { background: #e3d6c0; border-radius: 6px; }
.festival-task progress::-webkit-progress-value { background: #497655; border-radius: 6px; }
.festival-task progress::-moz-progress-bar { background: #497655; border-radius: 6px; }
.festival-claim, .festival-menu { min-height: 44px; padding: 10px 12px; border: 1px solid #547755; border-radius: 12px; font: 800 14px/1.3 var(--font-main); cursor: pointer; }
.festival-claim { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fffdf8; background: #456e4e; overflow-wrap: normal; text-align: center; }
.festival-claim:not(:disabled):hover { background: #355c40; }
.festival-claim:disabled { cursor: default; color: #69563f; background: #e9deca; border-color: #c8b795; }
.festival-reward { font-size: 13px; font-weight: 700; }
.festival-menu { margin: 14px 0 10px; color: #365d40; background: #f5f0e5; }
.festival-menu:hover { background: #e8eddf; }
.festival-schedule { font-size: 13px; }
.festival-complete { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.4; color: #365d40; }
.festival-complete svg { flex: 0 0 auto; }
.festival-status { flex: 0 0 auto; min-width: 0; margin: 0; padding: 8px 14px; font-size: 14px; line-height: 1.4; color: #365d40; overflow-wrap: anywhere; }
.festival-status:empty { display: none; }
#quest-panel button:focus-visible, #quest-panel .quest-card:focus-visible, .festival-task:focus-visible { outline: 3px solid #365d40; outline-offset: 3px; }
#quest-panel .shop-tab { min-height: 44px; }
#quest-panel .shop-close { min-width: 44px; min-height: 44px; }
#quest-panel .festival-list .recipe-name { font-size: 15px; white-space: normal; }
#quest-panel .festival-list .quest-reward-chip { font-size: 12px; }
#quest-panel .recipe-action { min-width: 44px; min-height: 44px; white-space: normal; }
@media (max-width: 360px) {
  .festival-task { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .festival-claim { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: start; gap: 8px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  #quest-panel { max-height: calc(100dvh - 92px); }
  #quest-panel .shop-header { padding-block: 4px; }
  #quest-panel .shop-tabs { padding-bottom: 4px; }
  #quest-panel .festival-list { gap: 6px; padding-bottom: 8px; }
  #quest-panel .festival-list .event-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 10px; text-align: start; }
  #quest-panel .event-banner-title { font-size: 16px; }
  #quest-panel .event-banner-countdown { font-size: 13px; }
  #quest-panel .event-banner-points { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  #quest-panel .festival-daily > .festival-section-title { display: inline-block; font-size: 18px; margin: 6px 0; }
  #quest-panel .festival-daily > .festival-intro { display: none; }
  #quest-panel .festival-reset { float: inline-end; margin: 6px 0; font-size: 13px; }
  #quest-panel .festival-task { clear: both; padding-block: 10px; }
}

/* ------------------------------------------------ Profil / İstatistik */

.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 6px;
}

.profile-level-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--color-mustard), #c98d22);
  border: 3px solid #fff6e6;
  box-shadow: var(--panel-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.profile-name-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-restaurant-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-days {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px;
  border-radius: 12px;
  background: var(--color-cream-deep);
}

.profile-stat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-ink);
}

.profile-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-ink-soft);
  text-align: center;
  line-height: 1.2;
}

/* ------------------------------------------------ Günlük Giriş */

.daily-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 8px;
}

.daily-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--color-cream-deep);
}

.daily-box-claimed { opacity: 1; }

.daily-box-today {
  border-color: var(--color-mustard);
  background: linear-gradient(160deg, #fdf3dd, #f9e7c3);
  box-shadow: 0 2px 10px rgba(224, 168, 58, 0.3);
}

.daily-box-future {
  opacity: 1;
}

.daily-day {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-ink-soft);
}

.daily-reward {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-ink);
}

.daily-check {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  color: var(--color-sage);
  display: inline-flex;
}

.daily-login-modal .modal-button { min-height: 44px; flex-shrink: 0; text-align: center; }
.daily-login-actions { display: grid; gap: 8px; }
.daily-login-modal .welcome-message { font-size: 16px; }
.daily-login-modal .daily-day { overflow-wrap: anywhere; text-align: center; }
.daily-login-modal .modal-button:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.daily-login-modal .modal-button:disabled { color: var(--color-ink-soft); background: var(--color-cream-deep); border-color: transparent; box-shadow: none; text-shadow: none; transform: none; cursor: default; }
.daily-login-status { color: var(--color-ink); font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-height: 480px) and (min-width: 600px) {
  .daily-login-modal { width: min(92vw, 720px); }
  .daily-login-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------ Hoş Geldin Modalı */

.welcome-modal {
  text-align: center;
  align-items: center;
}

/* Marka logosu: modalın üstünde, başlıktan önce. Genişliğe göre ölçeklenir
   ki dar telefon ekranlarında taşmasın. */
.welcome-logo {
  width: min(240px, 72%);
  height: auto;
  margin: 2px auto 6px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(90, 62, 40, 0.22));
}

.welcome-message {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-soft);
  line-height: 1.45;
}

.welcome-earnings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
  font-weight: 800;
  color: #c8891f;
  padding: 10px 0;
}

/* ------------------------------------------------ Cadde Paneli */

.street-strip {
  display: flex;
  gap: 10px;
  padding: 4px 14px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.street-card {
  flex: 0 0 168px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.10);
}

.street-card-own {
  border: 2px solid var(--color-mustard);
}

.street-facade {
  width: 148px;
  height: 96px;
}

/* Gerçek cephe görseli: prosedürel canvas ile aynı kutuyu doldurur ama
   orantısını korur, böylece farklı boyutlardaki sanat aynı hizada durur. */
.street-facade-art {
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(90, 62, 40, 0.20));
}

.street-name {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.street-owner {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.street-helped {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-sage);
}

.street-social {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-ink-soft);
}

.street-social .svg-icon {
  margin-left: 4px;
}
.street-social .svg-icon:first-child {
  margin-left: 0;
}

/* Ziyaret bandı */
#visit-banner {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 64px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  background: var(--panel-bg);
  border-radius: var(--radius-chip);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  z-index: 30;
  max-width: 94vw;
}

/* ------------------------------------------------ Öğretici */

#tutorial-banner {
  width: min(94vw, 560px);
  position: absolute;
  top: var(--world-guide-top, calc(max(10px, env(safe-area-inset-top)) + 64px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  background: linear-gradient(160deg, #fffbf3, #fdf3dd);
  border: 2px solid var(--color-mustard);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  z-index: 35;
  max-width: 94vw;
}

.tutorial-step-badge {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: var(--radius-chip);
  background: linear-gradient(160deg, var(--color-mustard), #c98d22);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.tutorial-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
}

.tutorial-skip {
  min-height: 44px;
  flex-shrink: 0;
  padding: 6px 11px;
  border: none;
  border-radius: var(--radius-chip);
  background: var(--color-cream-deep);
  color: var(--color-ink-soft);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Hedef butonun yumuşak nabzı */
@keyframes tutorial-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 168, 58, 0.55); }
  50%      { box-shadow: 0 0 0 9px rgba(224, 168, 58, 0); }
}

.tutorial-pulse {
  animation: tutorial-pulse 1.4s ease-in-out infinite;
  border-radius: 14px;
  background: rgba(224, 168, 58, 0.18) !important;
}

/* ------------------------------------------------ Premium Mağaza */

.chip-plus {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--color-sage), #74936f);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  position: relative;   /* dokunma hedefi genisletme pseudo'su icin */
  /*
   * Beyaz "+", sage-yesil zeminde tek basina ~2.4:1 kontrast (WCAG AA 4.5
   * altinda; olculdu). Paleti degistirmeden okunabilirligi artirmak icin koyu
   * golge — proje zaten 11 yerde ayni legibility desenini kullaniyor.
   */
  text-shadow: 0 1px 1px rgba(35, 55, 30, 0.6);
}

.chip-plus:hover { transform: scale(1.15); }
.chip-plus .svg-icon { filter: drop-shadow(0 1px 1px rgba(35, 55, 30, 0.6)); }

/*
 * DOKUNMA HEDEFI (mobil): gorsel daire 20px kaliyor ama dokunmatik cihazda
 * tiklanabilir alan gorunmez bir ::after ile ~44px'e cikariliyor (Apple HIG /
 * Material minimumu). Para/elmas satin-alma "+" butonlari birincil; 20px hedef
 * parmakla isabetsiz. Yalniz `pointer: coarse`ta acilir — fareyle masaustunde
 * kompakt 20px korunur; sag'a genisleme komsu cip'i CALMAZ (olculdu: 168 < 178).
 */
@media (pointer: coarse) {
  .chip-plus::after {
    content: '';
    position: absolute;
    inset: -12px;   /* 20px + 12+12 = 44px dokunma hedefi */
    border-radius: 50%;
  }
}

.premium-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.starter-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;        /* kaydirilabilir sutunda EZILMESIN: 30 px'e sikisip icerik kesiliyordu */
  align-items: center;
  gap: 6px;
  padding: 14px 12px 12px;
  border: 2.5px solid var(--color-mustard);
  border-radius: 16px;
  background: linear-gradient(160deg, #fdf3dd, #f9e7c3);
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: transform 0.15s ease;
}

.starter-banner:hover { transform: scale(1.015); }

.starter-ribbon {
  position: absolute;
  top: 8px;
  right: -30px;
  transform: rotate(35deg);
  background: var(--color-coral);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 34px;
  letter-spacing: 0.03em;
}

.starter-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
}

.starter-contents {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.starter-price {
  font-size: 14px;
  color: var(--color-ink-soft);
}

.starter-price strong {
  font-size: 17px;
  color: #a4472c;
}

.gem-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.gem-pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 6px 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.10);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.gem-pack-card:hover { transform: translateY(-2px); border-color: #8fd0e2; }

.gem-pack-popular { border-color: var(--color-mustard); }
.gem-pack-best { border-color: var(--color-coral); }

.gem-pack-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: var(--radius-chip);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

.gem-pack-popular .gem-pack-badge { background: linear-gradient(160deg, var(--color-mustard), #c98d22); }
.gem-pack-best .gem-pack-badge { background: linear-gradient(160deg, var(--color-coral), #c4543e); }

.gem-pack-amount {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-ink);
}

.gem-pack-bonus {
  font-size: 9.5px;
  font-weight: 800;
  color: #4a8a48;
  background: rgba(143, 174, 139, 0.2);
  padding: 2px 7px;
  border-radius: var(--radius-chip);
}

.gem-pack-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-soft);
  margin-top: 2px;
}

.coin-pack-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: none;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.08);
  cursor: pointer;
  font-family: inherit;
}

.coin-pack-row:hover { background: #fff8ea; }

.coin-pack-amount {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-ink);
}

.coin-pack-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--radius-chip);
  background: rgba(143, 208, 226, 0.25);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-ink);
}

.premium-item-card {
  flex: 0 0 118px;
  scroll-snap-align: center;
}

.premium-note {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-align: center;
  opacity: 0.75;
}

/* ------------------------------------------------ Genişletme Araç Çubuğu */

#expansion-toolbar {
  position: absolute;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  z-index: 25;
}

/* ------------------------------------------------ Bulut / Online */

.street-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  background: rgba(122, 149, 184, 0.16);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #4a6a98;
}

.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5aa35a;
  box-shadow: 0 0 0 2.5px rgba(90, 163, 90, 0.25);
  flex-shrink: 0;
}

.online-dot-off {
  background: #b3a48d;
  box-shadow: 0 0 0 2.5px rgba(179, 164, 141, 0.25);
}

.cloud-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

/* ------------------------------------------------ Liderlik Tablosu */

.street-leaderboard-button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(242, 193, 78, 0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.street-leaderboard-button:hover { transform: scale(1.1); }

.leaderboard-list {
  gap: 5px;
}

.leaderboard-empty {
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(90, 62, 40, 0.08);
}

.leaderboard-row-me {
  background: linear-gradient(160deg, #fdf3dd, #f9e7c3);
  border: 2px solid var(--color-mustard);
}

.leaderboard-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  background: var(--color-ink-soft);
}

.leaderboard-rank-1 { background: linear-gradient(160deg, #f2c14e, #d99c2b); }
.leaderboard-rank-2 { background: linear-gradient(160deg, #c4c9cf, #9aa3ad); }
.leaderboard-rank-3 { background: linear-gradient(160deg, #d79a63, #b07a43); }
.leaderboard-rank-other { background: var(--color-cream-deep); color: var(--color-ink-soft); }

.leaderboard-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.leaderboard-name {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.leaderboard-likes,
.leaderboard-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-ink-soft);
  flex-shrink: 0;
}

/* ------------------------------------------------ Personel Detay */

.staff-info-clickable {
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.staff-info-clickable:hover {
  background: rgba(224, 168, 58, 0.10);
}

.staff-detail-modal {
  gap: 12px;
}

.staff-detail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.staff-detail-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-ink);
}

.staff-avatar-canvas {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  border: none !important;
  box-shadow: 0 2px 6px rgba(74, 52, 32, 0.16);
}

.staff-detail-avatar-canvas {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50%;
  display: block;
  border: none !important;
  box-shadow: 0 4px 12px rgba(74, 52, 32, 0.22);
}

.staff-detail-role {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.staff-detail-level {
  display: flex;
  align-items: center;
  gap: 10px;
}

.staff-detail-level-badge {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  background: linear-gradient(160deg, var(--color-mustard), #c98d22);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.staff-detail-level .quest-progress-bar {
  flex: 1;
  height: 18px;
}

.staff-detail-bonuses {
  display: flex;
  gap: 8px;
}

.staff-bonus-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(143, 174, 139, 0.16);
}

.staff-bonus-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.staff-bonus-value {
  font-size: 16px;
  font-weight: 800;
  color: #4a8a48;
}

.staff-detail-section {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.staff-accent-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.staff-accent-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.staff-accent-swatch:hover { transform: scale(1.12); }

.staff-accent-active {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px #fffbf3, 0 0 0 4px var(--color-ink);
}

/* Optional employee appearance editor, in the existing cream-and-wood sheet. */
.staff-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto 44px;gap:8px}
.staff-info-clickable{min-height:44px;border:0;padding:5px 4px;background:transparent;color:inherit;font:inherit;text-align:start}
.staff-info-clickable .energy-bar,.staff-info-clickable .energy-fill{display:block;width:100%}
.staff-appearance-button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;max-width:170px;padding:8px 10px;border:1px solid #c7b797;border-radius:10px;background:#f6ecd9;color:#554632;font:800 12px/1.35 var(--font-main);cursor:pointer}
.staff-appearance-button .svg-icon{flex:none}
.staff-appearance-button span:last-child{min-width:0;overflow-wrap:anywhere}
.staff-row .staff-fire-button{width:44px;height:44px}
.staff-detail-modal{width:min(94vw,720px);max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));padding:20px;gap:10px;overscroll-behavior:contain}
.staff-detail-head{display:grid;grid-template-columns:68px minmax(0,1fr) 44px;gap:12px;align-items:center;margin-bottom:4px}
.staff-detail-identity{min-width:0}
.staff-detail-modal .staff-detail-title{margin:0 0 3px;font-size:25px;line-height:1.15;text-align:start;overflow-wrap:anywhere;color:#3d5547}
.staff-detail-dismiss{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #cdbda0;border-radius:12px;background:#f9f0df;cursor:pointer}
.staff-detail-name-label{font-size:13px;font-weight:800;color:#584b39;margin-bottom:-5px}
.staff-detail-modal .rename-input{min-height:44px;flex:none}
.staff-detail-modal .staff-bonus-value{color:#3d653b}
.staff-appearance-section{border-top:1px solid #d4c4a8;border-bottom:1px solid #d4c4a8;margin-top:6px}
.staff-appearance-summary{display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 2px;color:#3d5547;font:800 19px/1.3 var(--font-title);cursor:pointer;list-style:none}
.staff-appearance-summary::-webkit-details-marker{display:none}
.staff-appearance-summary-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.staff-appearance-identity{color:#665843;font:700 13px/1.35 var(--font-main);overflow-wrap:anywhere}
.staff-appearance-chevron{margin-inline-start:auto;transform:rotate(-90deg);flex:none}
.staff-appearance-section[open] .staff-appearance-chevron{transform:rotate(90deg)}
.staff-appearance-hint,.staff-look-hint{margin:0 0 12px;color:#665843;font:600 12px/1.5 var(--font-main)}
.staff-appearance-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start;padding-bottom:16px}
.staff-look-preview-pane{min-width:0;position:sticky;top:0}
.staff-look-stage{display:flex;justify-content:center;min-width:0;overflow:hidden;border:1px solid #d8c7a9;border-radius:18px;background:radial-gradient(ellipse at 50% 36%,#fffdf3,#eee0c6)}
.staff-appearance-preview{display:block;width:100%;height:260px;touch-action:none;cursor:grab}
.staff-appearance-preview:active{cursor:grabbing}
.staff-appearance-fallback{display:block;width:260px;max-width:100%;height:260px}
.staff-look-stage [hidden]{display:none!important}
.staff-look-hint{margin:8px 0}
.staff-look-controls{display:flex;flex-wrap:wrap;gap:6px}
.staff-look-control{flex:1;min-width:68px;min-height:44px;border:1px solid #c8b695;border-radius:10px;padding:7px;background:#fcf6e9;color:#554632;font:800 11.5px/1.3 var(--font-main);cursor:pointer}
.staff-look-control:disabled{color:#706657;background:#eee5d5;cursor:default}
.staff-look-group{min-width:0;margin:0 0 15px;padding:0;border:0}
.staff-detail-modal .staff-detail-section{padding:0;margin-bottom:8px;font-size:13px;line-height:1.35;text-transform:none;letter-spacing:normal;color:#584b39}
.staff-look-choice-row{display:flex;flex-wrap:wrap;gap:7px}
.staff-look-choice{flex:1 1 calc(33.333% - 7px);min-width:72px;min-height:44px;padding:8px;border:1px solid #c8b695;border-radius:10px;background:#fffcf3;color:#554632;font:800 12px/1.3 var(--font-main);cursor:pointer;overflow-wrap:anywhere}
.staff-look-choice[aria-pressed=true]{background:#dce9d8;border-color:#52704a;color:#2d4927;box-shadow:inset 0 0 0 1px #52704a}
.staff-hair-current{display:block;margin:-2px 0 9px;color:#36553c;font:800 13px/1.4 var(--font-main);overflow-wrap:anywhere}
.staff-hair-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));max-height:276px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a49473 #f7edda;padding:4px;margin:-4px}
.staff-hair-choice{position:relative;min-width:0;min-height:48px;padding:9px 24px 9px 10px;text-align:start;overflow-wrap:anywhere;hyphens:auto}
[dir=rtl] .staff-hair-choice{padding:9px 10px 9px 24px}
.staff-hair-selected-mark{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);font-size:14px;opacity:0}
.staff-hair-choice[aria-pressed=true] .staff-hair-selected-mark{opacity:1}
.staff-detail-modal .staff-accent-row{flex-wrap:wrap;justify-content:flex-start;gap:9px;padding:3px}
.staff-detail-modal .staff-accent-swatch{flex:none;width:44px;height:44px;border:3px solid #f4ead8;box-shadow:0 1px 4px #57452c25}
.staff-detail-modal .staff-accent-swatch[aria-pressed=true]{border-color:#3c5548;box-shadow:0 0 0 2px #fffaf0,0 0 0 4px #3c5548}
.staff-detail-footer{position:sticky;bottom:-20px;margin:0 -2px -2px;padding:7px 2px 2px;background:#fdf2e0;z-index:1}
.staff-appearance-status{min-height:18px;margin:0 0 6px;color:#345a36;font:800 12px/1.45 var(--font-main)}
.staff-appearance-status:empty{display:none}
.staff-appearance-status[data-state=error]{color:#943f29}
.staff-detail-footer .modal-button{width:100%;min-height:44px}
.staff-detail-modal button:focus-visible,.staff-detail-modal input:focus-visible,.staff-appearance-summary:focus-visible,.staff-appearance-preview:focus-visible,.staff-appearance-button:focus-visible,.staff-info-clickable:focus-visible{outline:3px solid #365e46;outline-offset:3px}
.staff-look-choice:hover,.staff-look-control:not(:disabled):hover,.staff-appearance-button:hover{border-color:#596d45}
@media(max-width:560px){
 .staff-row{grid-template-columns:38px minmax(0,1fr) 44px}
 .staff-row .staff-appearance-button{grid-column:2/4;max-width:none;justify-self:stretch}
 .staff-row .staff-fire-button{grid-column:3;grid-row:1}
 .staff-detail-modal{padding:16px}
 .staff-appearance-editor{grid-template-columns:minmax(0,1fr);gap:16px}
 .staff-look-preview-pane{position:static}
 .staff-appearance-preview,.staff-appearance-fallback{height:220px}
 .staff-appearance-fallback{width:220px}
 .staff-detail-footer{bottom:-16px}
 .staff-detail-modal .staff-detail-title{font-size:23px}
}
@media(max-height:500px) and (min-width:561px){
 .staff-appearance-preview,.staff-appearance-fallback{height:140px}
 .staff-appearance-fallback{width:140px}
 .staff-look-hint{margin:5px 0;font-size:11px}
 .staff-appearance-summary{padding-block:6px}
 .staff-appearance-hint{margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
 .staff-detail-overlay,.staff-detail-modal{animation:none}
 .staff-detail-modal .staff-accent-swatch{transition:none}
 .staff-detail-modal .staff-accent-swatch:hover{transform:none}
}

/* ------------------------------------------------ Ad Değiştirme */

.rename-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--color-cream-deep);
  border-radius: 12px;
  background: #fffdf8;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  outline: none;
  box-sizing: border-box;
}

.rename-input:focus { border-color: var(--color-mustard); }

/* ------------------------------------------------ Mobil İnce Ayar */

@media (max-width: 600px) {
  .xp-bar { width: 96px; }
  .resource-chip { padding: 6px 10px 6px 8px; font-size: 13px; }
  .level-badge { width: 44px; height: 44px; font-size: 18px; }
  /*
   * Dokunma hedefi 44 px korunarak sigdirma (olculdu, 375 px ekran):
   * dis pay 8 + panel siniri 4 + dolgu 8 + 8 buton x 44 = 372 px < 375.
   * Onceki hesap max-width'in dis payini ve panel sinirini unutuyordu;
   * son buton kirpiliyordu (Duzenle'nin yarisi ekran disindaydi).
   * gap 0: butonlar flex 1 ile esit dagildigi icin gorsel bosluk
   * buton ici dolgudan geliyor.
   */
  #action-bar { gap: 0; padding: 6px 4px; max-width: calc(100vw - 8px); }
  .action-button { min-width: 44px; min-height: 48px; padding: 6px 1px 4px; gap: 1px; flex: 1 1 0; }
  .action-icon { width: 22px; height: 22px; }
  .action-label { font-size: 9px; }
}

/* ------------------------------------------------ Yatay / Kısa Ekran
   Telefon yan yatınca (düşük yükseklik): alt paneller üst HUD ve alt eylem
   çubuğu arasına sığar (içerik kaydırılır) ve panel açıkken öğretici bandı
   gizlenerek çakışma önlenir. */
@media (max-height: 520px) {
  .sheet-panel,
  .sheet-panel-tall,
  #shop-panel {
    max-height: calc(100vh - 140px);
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 70px);
  }

  /* Bir alt panel açıkken öğretici bandını gizle (o alanı panele bırak) */
  #ui-root:has(.sheet-panel, #shop-panel) #tutorial-banner {
    opacity: 0;
    pointer-events: none;
  }

  /* Etkinlik banner'ı kısa ekranda kompaktlaşsın (daha çok kademe görünür) */
  .event-banner { padding: 8px 12px; }
  .event-banner-title { font-size: 15px; }
  .event-banner-countdown,
  .event-banner-points { font-size: 11px; }
  .event-banner-points { margin-top: 2px; padding: 2px 10px; }
}

/* ============================================================
   ORTAK KART YÜZEYİ
   Paneller boyunca aynı düz "beyaz kart + tek gölge" kalıbı 12 ayrı
   kuralda tekrarlanıyordu. Burada hepsi tek noktadan, HUD ile aynı
   katmanlı yükseklik diline getiriliyor: degradeli yüzey, üstte ışık
   kenarı, altta ince oturma gölgesi. Bu blok dosyanın sonunda olduğu
   için önceki düz tanımları geçersiz kılar.
   ============================================================ */

.staff-row,
.market-row,
.leaderboard-row,
.staff-hire-button,
.recipe-card,
.seed-chip,
.quest-card,
.street-card,
.gem-pack-card,
.coin-pack-row {
  background: linear-gradient(180deg, #fffefa 0%, #f7eeda 100%);
  box-shadow:
    0 1px 2px rgba(90, 62, 40, 0.12),
    0 4px 10px rgba(90, 62, 40, 0.09),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
}

/* Tıklanabilir kartlar: imleçle yükselir, basılınca içe çöker */
.staff-hire-button,
.recipe-card,
.seed-chip,
.quest-card,
.street-card,
.gem-pack-card,
.coin-pack-row {
  transition: transform 0.16s var(--ease-pop), border-color 0.15s ease,
              box-shadow 0.16s ease;
}

.staff-hire-button:hover,
.recipe-card:hover,
.seed-chip:hover,
.street-card:hover,
.gem-pack-card:hover,
.coin-pack-row:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(90, 62, 40, 0.14),
    0 10px 22px rgba(90, 62, 40, 0.16),
    0 0 0 3px rgba(242, 181, 58, 0.16),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
}

.staff-hire-button:active,
.recipe-card:active,
.seed-chip:active,
.street-card:active,
.gem-pack-card:active,
.coin-pack-row:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--panel-shadow-pressed);
}

/* Personel avatarı ve enerji çubuğu: hacim ve gömülü oluk */
.staff-avatar {
  box-shadow:
    0 2px 5px rgba(74, 52, 32, 0.22),
    inset 0 -3px 6px rgba(74, 52, 32, 0.16),
    inset 0 2px 3px rgba(255, 255, 255, 0.55);
}

.energy-bar {
  background: linear-gradient(180deg, #e8d9be 0%, #f6ecda 100%);
  box-shadow:
    inset 0 2px 3px rgba(122, 88, 54, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}

.energy-fill {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, var(--rc-leaf), var(--rc-sage));
  box-shadow: inset 0 -1px 2px rgba(60, 90, 55, 0.28);
}

/* ============================================================
   HAREKETİ AZALT (prefers-reduced-motion)
   İşletim sisteminde "hareketi azalt" açık olan oyuncular için tüm
   dekoratif geçiş ve animasyonlar kapatılır. Canvas tarafındaki karşılığı
   Gfx.reducedMotion'dır (bulut, salınım, alev, toz donar). Bilgi taşıyan
   hareket — yürüyen personel, ilerleme çubuğu dolumu — korunur.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Yükselme/ölçek dönüşümleri de kapansın: geri bildirim rengi üstlenir */
  .icon-button:hover,
  .action-button:hover,
  .shop-card:hover,
  .shop-tab:hover,
  .lang-chip:hover,
  .modal-button:hover,
  .staff-hire-button:hover,
  .recipe-card:hover,
  .seed-chip:hover,
  .street-card:hover,
  .gem-pack-card:hover,
  .coin-pack-row:hover {
    transform: none;
  }
}

/* Tarif kartında porsiyon maliyeti: menü seçimi artık bir stok kararı */
.recipe-portion {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Stok yetmiyorsa hem renk hem de kalınlıkla uyar (yalnız renge güvenme) */
.recipe-portion-missing {
  color: var(--rc-terracotta-dark);
  font-weight: 800;
}

/* Net kâr göstergesi: marja göre renk (yalnız renge güvenmeden, "%N" da var) */
.recipe-profit {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.recipe-profit-high { color: #4a8a40; }
.recipe-profit-low { color: var(--rc-terracotta-dark); }

/* Popülerlik kırılımı modalı — hangi bileşen artırıyor/azaltıyor (şeffaflık) */
.popularity-modal { max-width: 340px; }
.pop-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 10px 0 6px;
}
.pop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.pop-row:nth-child(odd) { background: rgba(0, 0, 0, 0.035); }
.pop-row-label { color: var(--color-ink-soft); }
.pop-row-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.pop-plus { color: #4a8a40; }
.pop-minus { color: var(--rc-terracotta-dark); }
.pop-divider {
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  margin: 5px 10px;
  border-radius: 2px;
}
.pop-row-total { font-size: 15px; background: none !important; }
.pop-row-total .pop-row-label,
.pop-row-total .pop-row-value { font-weight: 900; color: var(--color-ink); }
.pop-note {
  font-size: 11px;
  color: var(--color-ink-soft);
  text-align: center;
  margin: 6px 4px 0;
  line-height: 1.4;
}
.chip-interactive { cursor: pointer; }

/* Depo sekmesi: boş durum ve adet rozeti */
.shop-storage-empty {
  grid-column: 1 / -1;
  padding: 22px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* Depodaki eşyada fiyat değil ADET yazar — parası zaten ödendi */
.shop-card-meta-storage {
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--color-wood-dark);
}

/* Bahçe ekim/hasat butonlarındaki araç ikonu */
.garden-tool-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: -4px;
  image-rendering: pixelated;
}

/* Ayarlar modalının sağ üst kapatma düğmesi */
.modal { position: relative; }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* ============================================================ Pazar Yeri */
.street-market-button {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(226, 114, 91, 0.18); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 0.15s ease; margin-right: 6px;
}
.street-market-button:hover { transform: scale(1.1); }
.market-tabs { margin-bottom: 8px; }
.market-body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 4px; }
.market-empty {
  padding: 28px 16px; text-align: center; color: #8a7a62; font-size: 14px;
  background: rgba(255, 253, 247, 0.6); border-radius: 14px;
}
.market-card {
  display: flex; align-items: center; gap: 10px;
  background: #fffdf7; border-radius: 14px; padding: 8px 10px;
  box-shadow: 0 2px 0 rgba(138, 106, 69, 0.18);
}
.market-card-sold { opacity: 0.55; }
.market-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; background: rgba(233, 214, 183, 0.35); }
.market-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.market-name { font-weight: 700; font-size: 14px; color: #4a3828; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-meta { font-size: 12px; color: #8a7a62; }
.market-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.market-price { display: flex; align-items: center; gap: 3px; font-weight: 800; color: #a07d28; font-size: 14px; }
.market-action { min-height: 44px; padding: 0 14px; }   /* mobil dokunma hedefi */
.market-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.market-input {
  width: 84px; min-height: 34px; border-radius: 10px; border: 1.5px solid #d9c7a9;
  padding: 0 8px; font: inherit; font-size: 13px; color: #4a3828; background: #fff;
}
.market-input:focus { outline: none; border-color: #c8891f; }
.market-kinds { display: flex; gap: 8px; margin-bottom: 4px; }
.market-pending {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, #fff3cf, #ffe4a6); border-radius: 14px; padding: 10px 12px;
  font-weight: 700; color: #6b4f1a; box-shadow: 0 2px 0 rgba(200, 137, 31, 0.25);
}
.market-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #e2725b; margin-left: 6px; vertical-align: middle;
}
@media (max-width: 520px) {
  .market-card { flex-wrap: wrap; }
  .market-right { flex-direction: row; width: 100%; justify-content: space-between; }
  .market-input { width: 72px; }
}

/* Premium paket gorselleri (imagine.art) */
.pack-art { object-fit: contain; display: block; margin: 2px auto 4px; filter: drop-shadow(0 2px 2px rgba(90, 60, 20, 0.25)); }
.coin-pack-row .pack-art { margin: 0 6px 0 0; flex-shrink: 0; }

/* Kaydirilabilir panel govdesinde hicbir cocuk ezilmez (flex-shrink:1 varsayilan icerigi kesiyordu) */
.garden-body > * { flex-shrink: 0; }

/* ------------------------------------------------ Sanat Yükleme Rozeti */
/* Soğuk açılışta sprite yüklemesi sürerken sol altta küçük bilgi pili.
   Bitince .art-loading-done ile yumuşakça söner (main.js kaldırır). */
#art-loading-badge {
  position: absolute;
  left: 12px;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow-raised);
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--color-ink);
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.5s ease;
}
#art-loading-badge.art-loading-done { opacity: 0; }

/* ------------------------------------------------ Günün Yemeği rozeti */
/* Menü panelinde bugünün spesiyal tarifini vurgular. Bal sarısı-terracotta
   degrade, oyunun sıcak paletiyle uyumlu; küçük ve okunur. */
.special-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0a83a, #e0762e);
  color: #fffdf8;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 3px rgba(122, 78, 8, 0.28);
  width: fit-content;
}

/* ------------------------------------------------ Mutlu Saat çipi */
/* Akın penceresi boyunca görünen, geri sayımlı bağımsız gösterge.
   Enerjik terracotta-bal degrade + nazik nabız; dikkat çeker ama
   rahatsız etmez. prefers-reduced-motion'da nabız kapanır. */
#happy-hour-chip {
  position: absolute;
  /* alert-chips alanının altında; onun temizlenmesinden etkilenmesin diye
     ayrı konumlanır (tur 73). */
  top: calc(var(--world-guide-bottom, calc(max(10px, env(safe-area-inset-top)) + 62px)) + 44px);
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0762e, #e0a83a);
  color: #fffdf8;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(200, 104, 63, 0.4);
  pointer-events: none;
  animation: happy-pulse 1.4s ease-in-out infinite;
}
@keyframes happy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  #happy-hour-chip { animation: none; }
}

/* ------------------------------------------------ Dekorasyon Set Bonusu rozeti */
/* Mağaza başlığında atmosfer puanının yanında, aktif renk-set bonusunu
   gösterir. Sage-yeşil, atmosfer temasıyla uyumlu, küçük. */
.shop-setbonus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5f8a52, #74936f);
  color: #fffdf8;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Menü Çeşitliliği göstergesi (menü panelinde, sekmeler ile liste arasında) */
.menu-variety {
  flex-shrink: 0;
  margin: 0 14px 8px;
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  background: linear-gradient(180deg, #f2e6cf, #e6d5b4);
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.menu-variety-full {
  background: linear-gradient(90deg, #5f8a52, #74936f);
  color: #fffdf8;
  text-shadow: 0 1px 1px rgba(35, 55, 30, 0.55);
}

/* ---------- Oyun Merkezi (GameHub) — kariyer + takvim ---------- */
.game-hub { position: relative; width: min(440px, 92vw); padding: 22px 22px 18px; }
.game-hub h2 { margin: 0 0 12px; text-align: center; }
.game-hub .modal-close { position: absolute; top: 12px; right: 12px; min-width: 0; padding: 6px 12px; }
.game-hub-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.game-hub-tab {
  flex: 1; padding: 10px 12px; border-radius: 14px; border: 2px solid rgba(120, 80, 40, 0.18);
  background: rgba(255, 250, 240, 0.85); color: #5a3d24; font: inherit; font-weight: 700; cursor: pointer;
}
.game-hub-tab-active { background: #f2a03a; border-color: #d8842a; color: #3d2510; }
.game-hub-body { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.game-hub-body h3 { margin: 10px 0 2px; font-size: 1rem; color: #7a5a3a; }
.game-hub-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 12px; border-radius: 12px; background: rgba(120, 80, 40, 0.07);
}
.game-hub-row span { color: #6b4e33; }
.game-hub-row strong { color: #3d2510; text-align: right; }
.game-hub-desc { margin: 4px 0; color: #6b4e33; line-height: 1.4; }