/* ============================================
   BEIT HAMIKDASH — Styles
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; font-family: 'Segoe UI', system-ui, sans-serif; background: #1a1a2e; color: #2c3e50; }
canvas { display: block; }

/* Login Screen */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a3c5e 0%, #2c5f8a 50%, #d4a853 100%);
}
.login-box {
  background: rgba(255,255,255,0.95); border-radius: 20px; padding: 40px;
  text-align: center; max-width: 420px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-box h1 { font-size: 42px; color: #1a3c5e; margin-bottom: 4px; }
.login-box h2 { font-size: 18px; color: #d4a853; font-weight: 600; margin-bottom: 8px; }
.login-subtitle { color: #7f8c8d; font-size: 14px; margin-bottom: 20px; }

#profile-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.profile-card {
  display: flex; align-items: center; justify-content: space-between;
  background: #f8f4e8; border: 2px solid #d4c4a8; border-radius: 12px;
  padding: 12px 16px; cursor: pointer; transition: all 0.2s;
}
.profile-card:hover { border-color: #d4a853; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.profile-name { font-weight: 700; color: #1a3c5e; }
.profile-info { font-size: 12px; color: #7f8c8d; }
.profile-delete { background: none; border: none; cursor: pointer; font-size: 16px; opacity: 0.4; }
.profile-delete:hover { opacity: 1; color: #e74c3c; }

.btn { padding: 12px 24px; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.btn-gold { background: linear-gradient(135deg, #d4a853, #c4943e); color: white; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,168,83,0.4); }
.btn-stone { background: #e8e0d0; color: #1a3c5e; }

/* Modal */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); }
.modal-content { background: white; border-radius: 20px; padding: 30px; max-width: 400px; width: 90%; text-align: center; }
.modal-content h2 { color: #1a3c5e; margin-bottom: 16px; }
.modal-content input { width: 100%; padding: 12px; border: 2px solid #d4c4a8; border-radius: 10px; font-size: 16px; text-align: center; margin-bottom: 16px; }
.modal-content input:focus { outline: none; border-color: #d4a853; }
.level-select { margin-bottom: 16px; }
.level-select label { display: block; color: #7f8c8d; margin-bottom: 8px; font-size: 14px; }
.level-btn { display: block; width: 100%; padding: 10px; margin: 4px 0; border: 2px solid #d4c4a8; border-radius: 8px; background: white; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.level-btn.selected { border-color: #d4a853; background: #fef9e7; font-weight: 700; }
.modal-actions { display: flex; gap: 8px; justify-content: center; }

.hidden { display: none !important; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#hud-top-left { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; }
#coins-display, #level-display, #korbanot-display {
  background: rgba(26,60,94,0.85); color: white; padding: 6px 14px;
  border-radius: 8px; font-weight: 700; font-size: 14px;
  backdrop-filter: blur(4px);
}
#hud-top-right { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.hud-btn {
  width: 44px; height: 44px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.3);
  background: rgba(26,60,94,0.85); color: white; font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: all 0.2s;
}
.hud-btn:hover { background: rgba(212,168,83,0.9); border-color: #d4a853; }

#hud-top-center { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); text-align: center; }
#interaction-prompt {
  background: rgba(26,60,94,0.9); color: white; padding: 8px 20px;
  border-radius: 10px; font-size: 15px; font-weight: 600;
  backdrop-filter: blur(4px); white-space: nowrap;
}
#avodah-steps {
  display: flex; gap: 4px; margin-top: 8px; justify-content: center;
}
.avodah-step {
  background: rgba(26,60,94,0.7); color: rgba(255,255,255,0.5); padding: 6px 12px;
  border-radius: 6px; font-size: 12px; font-weight: 600; transition: all 0.3s;
}
.avodah-step.active { background: rgba(212,168,83,0.9); color: white; transform: scale(1.1); }
.avodah-step.done { background: rgba(39,174,96,0.9); color: white; }
#status-effects {
  margin-top: 8px;
  background: rgba(26, 60, 94, 0.8);
  color: #e7f8ff;
  border: 1px solid rgba(90, 183, 255, 0.55);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
}

#hotbar {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; background: rgba(26,60,94,0.85); padding: 6px;
  border-radius: 12px; backdrop-filter: blur(4px);
}
.hotbar-slot {
  width: 52px; height: 52px; background: rgba(255,255,255,0.1); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid transparent; transition: all 0.2s; position: relative;
}
.hotbar-slot.selected { border-color: #d4a853; background: rgba(212,168,83,0.3); }
.slot-emoji { font-size: 22px; }
.slot-count { font-size: 10px; color: rgba(255,255,255,0.8); font-weight: 700; }

/* Panels */
.panel-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
}
.panel {
  background: #faf7f0; border-radius: 16px; max-width: 500px; width: 92%;
  max-height: 80vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: #1a3c5e; color: white;
}
.panel-header h2 { font-size: 18px; }
.panel-close { background: none; border: none; color: white; font-size: 22px; cursor: pointer; }
.panel-body { padding: 16px; overflow-y: auto; max-height: 60vh; }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.shop-card {
  background: white; border: 2px solid #e8e0d0; border-radius: 12px; padding: 12px;
  text-align: center; transition: all 0.2s; cursor: default;
}
.shop-card:hover { border-color: #d4a853; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.shop-emoji { font-size: 32px; margin-bottom: 4px; }
.shop-name { font-weight: 700; font-size: 13px; color: #1a3c5e; }
.shop-price { font-size: 12px; color: #7f8c8d; margin: 4px 0; }
.shop-btn {
  width: 100%; padding: 8px; border: none; border-radius: 8px; font-weight: 700;
  font-size: 13px; cursor: pointer; transition: all 0.2s;
  background: linear-gradient(135deg, #d4a853, #c4943e); color: white;
}
.shop-btn:hover { transform: translateY(-1px); }
.shop-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.shop-btn.sell-btn { background: #e67e22; }
.shop-btn.sell-btn:hover { background: #d35400; }
.shop-desc { font-size: 0.75em; color: #888; margin-top: 2px; }
.shop-section-title { font-weight: 700; color: #1a3c5e; margin: 12px 0 8px; font-size: 15px; }

/* Achievement cards */
.achieve-card {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  background: white; border-radius: 10px; margin-bottom: 8px;
  border: 2px solid #e8e0d0;
}
.achieve-card.unlocked { border-color: #d4a853; background: #fef9e7; }
.achieve-emoji { font-size: 28px; }
.achieve-name { font-weight: 700; color: #1a3c5e; font-size: 14px; }
.achieve-desc { font-size: 12px; color: #7f8c8d; }
.achieve-locked { opacity: 0.4; }

/* Korban select */
.korban-option {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: white; border: 2px solid #e8e0d0; border-radius: 12px;
  margin-bottom: 8px; cursor: pointer; transition: all 0.2s;
}
.korban-option:hover { border-color: #d4a853; transform: translateX(4px); }
.korban-option-emoji { font-size: 28px; }
.korban-option-name { font-weight: 700; color: #1a3c5e; }
.korban-option-desc { font-size: 12px; color: #7f8c8d; }
.korban-option-category { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.korban-option-category.kk { background: #fde8e8; color: #c0392b; }
.korban-option-category.kl { background: #e8f8f0; color: #27ae60; }

/* Summary */
#summary-body { text-align: center; }
.summary-emoji { font-size: 48px; margin-bottom: 8px; }
.summary-title { font-size: 20px; font-weight: 700; color: #1a3c5e; margin-bottom: 4px; }
.summary-detail { font-size: 13px; color: #555; margin: 4px 0; }
.summary-source { font-size: 12px; color: #d4a853; font-weight: 600; margin: 8px 0; }
.summary-coins { font-size: 18px; color: #27ae60; font-weight: 700; margin: 8px 0; }
.summary-btn { margin-top: 12px; }

/* Educational popup */
#edu-popup {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(26,60,94,0.95); color: white; padding: 12px 24px;
  border-radius: 12px; z-index: 30; max-width: 500px; text-align: center;
  font-size: 14px; line-height: 1.4; backdrop-filter: blur(4px);
  border: 2px solid #d4a853;
  animation: eduSlideUp 0.3s ease-out;
}
#edu-popup .source { color: #d4a853; font-weight: 600; font-size: 12px; margin-top: 6px; }
@keyframes eduSlideUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Mobile */
#mobile-controls { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; pointer-events: none; }
#mobile-controls > * { pointer-events: auto; }
#joystick-zone { position: absolute; bottom: 20px; left: 20px; }
#joystick-base {
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(26,60,94,0.4); border: 3px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
}
#joystick-thumb {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(212,168,83,0.8); border: 2px solid rgba(255,255,255,0.5);
}
.mobile-btn {
  position: absolute; bottom: 30px; right: 30px;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(212,168,83,0.85); border: 3px solid rgba(255,255,255,0.4);
  color: white; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Toast */
#toast-container { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast {
  background: rgba(26,60,94,0.95); color: white; padding: 10px 20px;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  animation: toastIn 0.3s ease-out;
  backdrop-filter: blur(4px); border: 1px solid rgba(212,168,83,0.4);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 600px) {
  .login-box { padding: 24px; }
  .login-box h1 { font-size: 32px; }
  .panel { width: 96%; }
  .hotbar-slot { width: 44px; height: 44px; }
  .slot-emoji { font-size: 18px; }
  #hud-top-left { top: env(safe-area-inset-top, 12px); left: env(safe-area-inset-left, 12px); }
}

/* ─── Compass ─── */
#compass {
  position: fixed;
  bottom: 100px;
  right: 16px;
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}
#compass-arrow {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.1s linear;
  color: #ff4444;
}
#compass-label {
  font-size: 9px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

/* ─── Zone Indicator ─── */
#zone-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4em;
  font-weight: 700;
  color: #FF4444;
  text-shadow: 0 0 10px rgba(255,68,68,0.8);
  pointer-events: none;
  display: none;
  background: rgba(0,0,0,0.5);
  padding: 6px 14px;
  border-radius: 8px;
  border: 2px solid #FF4444;
}

/* ─── World Labels ─── */
.world-label {
  position: fixed;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: opacity 0.2s;
}
.label-npc {
  background: rgba(100,60,20,0.75);
  color: #FFD700;
  border: 1px solid rgba(255,215,0,0.4);
}
.label-place {
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.label-zone {
  background: rgba(180,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,68,68,0.4);
  font-size: 11px;
}

/* ─── Edu popup dismiss on click ─── */
#edu-popup { cursor: pointer; }
.source {
  margin-top: 8px;
  font-size: 0.85em;
  color: #C0976F;
  font-style: italic;
}

/* ─── Shop section title ─── */
.shop-section-title {
  font-size: 1em;
  font-weight: 700;
  color: #FFD700;
  margin: 12px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,215,0,0.3);
}