* {
  margin: 0; padding: 0; box-sizing: border-box;
  /* Mobilde uzun basınca çıkan kopyala/yapıştır menüsünü ve metin seçimini kapat */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
html, body {
  width: 100%; height: 100%; overflow: hidden;
  /* Çift tıklama zoom'unu ve pull-to-refresh / overscroll yaylanmasını engelle */
  touch-action: none; overscroll-behavior: none;
}
/* Merkezden dışa açılan degrade: Three.js sahnesi (alpha) bunun üstüne çizilir */
body {
  background: radial-gradient(120% 95% at 50% 26%, #33286b 0%, #1c1440 45%, #0c091c 100%);
}
#app { width: 100%; height: 100%; touch-action: none; }

/* ---- Üst panel ---- */
#hud {
  position: fixed;
  /* Status bar gizlenmese bile (çentik vb.) panelin ekrana gömülmesini engelle */
  top: calc(12px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 16px;
  background: rgba(28, 20, 56, 0.72);
  border: 1px solid rgba(255, 233, 168, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: "Segoe UI", system-ui, sans-serif; color: #ffe9a8;
  pointer-events: none; user-select: none;
}
.stat { text-align: center; min-width: 58px; }
.stat .label {
  font-size: 10px; letter-spacing: 2px; opacity: 0.65;
  text-transform: uppercase; margin-bottom: 2px;
}
.stat .value {
  font-size: 24px; font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.stat.targets { border-left: 1px solid rgba(255, 233, 168, 0.15); padding-left: 14px; }
.target-list { display: flex; gap: 12px; justify-content: center; margin-top: 4px; }
.target { display: flex; align-items: center; gap: 5px; }
.target .count { font-size: 17px; font-weight: 700; min-width: 22px; text-align: left; }
.target .count.done { color: #7dffb0; }
.chip {
  width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.35), 0 0 6px rgba(255, 255, 255, 0.15);
}
.chip-red { background: radial-gradient(circle at 35% 30%, #ff8a7a, #e74c3c 60%, #a1261c); }
.chip-blue { background: radial-gradient(circle at 35% 30%, #8ec9ff, #3498db 60%, #1c5f8f); }

#hint {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px;
  color: rgba(255, 233, 168, 0.55); pointer-events: none;
}

/* ---- Oyun sonu modalı ---- */
#modal {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 6, 24, 0.7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.25s ease-out;
}
#modal.hidden { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  text-align: center; padding: 36px 44px; border-radius: 22px;
  background: linear-gradient(160deg, #2c2250, #1a1233);
  border: 1px solid rgba(255, 233, 168, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 200, 80, 0.08);
  font-family: "Segoe UI", system-ui, sans-serif; color: #ffe9a8;
  animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: min(88vw, 420px);
}
@keyframes pop-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-card h1 { font-size: 26px; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.modal-card p { font-size: 15px; opacity: 0.8; margin-bottom: 24px; }

#restart-btn {
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.5px;
  color: #2b1d05; cursor: pointer;
  padding: 12px 30px; border: none; border-radius: 12px;
  background: linear-gradient(180deg, #ffe08a, #e8a92e);
  box-shadow: 0 4px 0 #9c6d12, 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
#restart-btn:hover { transform: translateY(-1px); }
#restart-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c6d12, 0 4px 12px rgba(0, 0, 0, 0.45); }

@media (max-width: 480px) {
  #hud { gap: 6px; padding: 8px 12px; }
  .stat { min-width: 44px; }
  .stat .value { font-size: 19px; }
  .target .count { font-size: 15px; }
}