/* Critical styles extracted from index.html */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.toast { display: flex; align-items: center; background: white; color: #1f2937; border-radius: 8px; padding: 16px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateX(100%); transition: transform 0.3s ease; }
.toast.show { transform: translateX(0); }
.toast.success { border-left: 4px solid #10b981; }
.toast.error { border-left: 4px solid #ef4444; }
.toast.info { border-left: 4px solid #3b82f6; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); overflow-y: auto; }
.modal-content { background-color: #1f2937; margin: 5% auto; padding: 20px; border-radius: 12px; width: 90%; max-width: 600px; color: white; position: relative; max-height: 90vh; overflow-y: auto; }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-btn:hover { color: white; }
.modal.modal-above-hunt { z-index: 10001 !important; }
.status-banner { position: sticky; top: 0; z-index: 100; }
.hidden { display: none !important; }
#mobile-menu.open { display: block !important; }
#live-hunt-mode-container.active { display: block !important; }
#live-hunt-mode-container { display: none !important; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: #000; }
#live-hunt-mode-container.active { display: block !important; }
#live-hunt-map-wrapper { width: 100%; height: 100%; position: relative; }
#close-hunt-mode-btn { position: absolute; top: 20px; right: 20px; background: rgba(239, 68, 68, 0.9); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 10000; display: flex; align-items: center; justify-content: center; }
#live-hunt-hud { position: absolute; top: 20px; left: 20px; background: rgba(31, 41, 55, 0.9); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px; color: white; z-index: 10000; min-width: 200px; }
.hud-item { margin-bottom: 12px; }
.hud-item label { display: block; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #9ca3af; margin-bottom: 4px; }
.hud-item .value { font-size: 18px; font-weight: bold; color: #10b981; }
.hud-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.toggle-switch { position: relative; width: 40px; height: 20px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #374151; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(20px); }
#live-hunt-mode-container.active #live-hunt-clues-container,
#live-hunt-mode-container.active #live-hunt-chat-container,
#live-hunt-mode-container.active #chat-messages,
#live-hunt-mode-container.active .chat-input-area,
#live-hunt-mode-container.active #live-hunt-hud,
#live-hunt-mode-container.active #live-hunt-infobar { display: block !important; }
#live-hunt-mode-container.active .chat-input-area { display: flex !important; }
#live-hunt-infobar { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(31, 41, 55, 0.9); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px; color: white; z-index: 10000; max-height: 300px; overflow-y: auto; }
.chat-input-area { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) { #live-hunt-infobar { bottom: 5px; left: 5px; right: 5px; max-height: 40vh; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; font-size: 12px; -webkit-overflow-scrolling: touch; }
  #live-hunt-clues-container { flex-shrink: 0; margin-bottom: 8px; max-height: 15vh; overflow-y: auto; }
  #live-hunt-chat-container { flex-shrink: 0; width: 100%; display: flex; flex-direction: column; }
  #live-hunt-chat-messages { max-height: 80px !important; min-height: 60px !important; overflow-y: auto; margin-bottom: 6px; font-size: 11px; -webkit-overflow-scrolling: touch; }
  .chat-input-area { flex-direction: column !important; gap: 4px !important; margin-top: 6px; }
  #live-hunt-chat-nickname,
  #live-hunt-chat-message-input { width: 100% !important; font-size: 14px !important; padding: 8px !important; box-sizing: border-box; }
  #live-hunt-chat-send-btn { width: 100% !important; font-size: 16px !important; font-weight: bold !important; padding: 12px !important; box-sizing: border-box; cursor: pointer !important; touch-action: manipulation !important; min-height: 48px !important; -webkit-tap-highlight-color: transparent !important; background-color: #ea580c !important; border: none !important; border-radius: 8px !important; flex-shrink: 0 !important; margin-top: 4px !important; }
  .chat-input-area { position: sticky !important; bottom: 0 !important; background: rgba(31, 41, 55, 0.95) !important; padding: 4px 0 !important; z-index: 10 !important; }
  #live-hunt-hud { top: 5px; left: 5px; right: auto; max-width: calc(100vw - 60px); padding: 8px; font-size: 12px; }
  #live-hunt-hud .hud-item { margin-bottom: 8px; }
  #live-hunt-hud .hud-item label { font-size: 10px; }
  #live-hunt-hud .hud-item .value { font-size: 14px; }
  #live-hunt-hud .hud-toggle { font-size: 11px; }
  #live-hunt-hud button { padding: 8px !important; font-size: 12px !important; }
  #close-hunt-mode-btn { top: 5px; right: 5px; width: 36px; height: 36px; font-size: 20px; }
  #found-drop-btn-modal { cursor: pointer !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; }
  #chat { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  #chat-messages { height: 12rem !important; }
  #chat-form { position: relative !important; }
  #chat-send-btn { min-height: 44px !important; touch-action: manipulation !important; }
}
#map-container,
#map-container-placeholder { border-radius: 12px; overflow: hidden; }
.step-marker { width: 60px; height: 60px; margin: 0 auto 16px; background: rgba(59, 130, 246, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(59, 130, 246, 0.3); }
.drop-card { background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9)); border: 1px solid rgba(75, 85, 99, 0.3); transition: all 0.3s ease; }
.drop-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.gradient-text { background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (min-width: 768px) { #desktop-nav { display: flex !important; } }
#map-container-placeholder { min-height: 500px; background: #374151; border: 2px solid #4b5563; }
/* Prevent horizontal scrolling on mobile */
html,
body { overflow-x: hidden; max-width: 100vw; }
/* Ensure all sections don't cause overflow */
* { max-width: 100%; }
/* Fix mobile dropdown positioning */
@media (max-width: 768px) {
  #user-dropdown-content { position: fixed; right: 1rem; left: auto; width: calc(100vw - 2rem); max-width: 300px; }
  #user-auth-container-mobile { display: block !important; }
  #user-auth-container-mobile .relative { width: 100%; }
  #user-auth-container-mobile #user-dropdown-btn { width: 100%; text-align: center; }
}

/* Flipper-style Countdown Timer */
#next-drop-countdown { font-family: 'Courier New', monospace; }
.flip-card-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flip-card { width: 48px; height: 64px; perspective: 200px; font-size: 32px; font-weight: bold; display: inline-flex; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card.flipping .flip-card-inner { animation: flip 0.6s ease-in-out; }
@keyframes flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1f2937 0%, #111827 100%); border: 2px solid #374151; border-radius: 6px; color: #f59e0b; text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.flip-card-back { transform: rotateX(180deg); }
.flip-separator { font-size: 32px; font-weight: bold; color: #f59e0b; align-self: center; margin: 0 4px; text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.flip-label { font-size: 10px; text-transform: uppercase; color: #9ca3af; font-weight: 600; letter-spacing: 1px; margin-top: 4px; }
@media (max-width: 640px) {
  .flip-card { width: 40px; height: 56px; font-size: 28px; }
  .flip-separator { font-size: 24px; }
  .flip-label { font-size: 8px; }
}


/* Hero section fallback styles for faster LCP */
#hero.hero-section { background-color: #0f172a; color: #f9fafb; padding-top: 6rem; padding-bottom: 8rem; text-align: center; }
#hero .hero-title { font-size: 3rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
#hero .hero-lead { font-size: 1.25rem; color: #d1d5db; margin-bottom: 2rem; }
#hero .hero-subheadline { font-size: 2rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 2.5rem; }
@media (min-width: 640px) {
  #hero .hero-title { font-size: 3.75rem; }
  #hero .hero-lead { font-size: 1.5rem; }
  #hero .hero-subheadline { font-size: 2.75rem; }
}
@media (min-width: 1024px) {
  #hero .hero-title { font-size: 4.5rem; }
#hero .hero-subheadline { font-size: 3.25rem; }
}
.countdown-unit { display:flex; flex-direction:column; align-items:center; gap:.75rem; min-width:96px; }
.countdown-digits { display:flex; gap:.45rem; }
.countdown-label { font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:#cbd5f5; }
.countdown-separator { font-size:2.25rem; font-weight:700; align-self:center; color:#f97316; }
.map-popup { background:#0f172a; color:#f8fafc; padding:1rem; border-radius:0.75rem; box-shadow:0 20px 35px rgba(15,23,42,0.35); max-width:280px; font-size:0.95rem; line-height:1.4; }
.map-popup h3 { margin-bottom:0.75rem; font-size:1.1rem; color:#f97316; }
.map-popup p { margin:0.35rem 0; }
.map-popup .map-popup-label { font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:#cbd5f5; }
.map-popup .map-popup-value { font-weight:600; color:#f8fafc; }
.map-popup .map-popup-actions { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.75rem; }
.map-popup button { font-size:0.75rem; }
.past-drop-popup .leaflet-popup-content { margin:0 !important; min-width:280px; max-width:400px; font-size:14px; }
.past-drop-popup .leaflet-popup-content-wrapper { background:linear-gradient(135deg,#1f2937 0%,#111827 100%) !important; color:#f3f4f6; box-shadow:0 10px 40px rgba(0,0,0,0.6),0 0 0 1px rgba(249,115,22,0.3) !important; border:2px solid #374151 !important; border-radius:12px !important; padding:0 !important; }
.past-drop-popup .leaflet-popup-tip { background-color:#1f2937 !important; box-shadow:0 3px 14px rgba(0,0,0,0.4); border:2px solid #374151 !important; }
.past-drop-popup .leaflet-container a.leaflet-popup-close-button { color:#f3f4f6; font-size:20px; width:28px; height:28px; line-height:28px; background:rgba(0,0,0,0.2); border-radius:4px; margin:4px; transition:all 0.2s; }
.past-drop-popup .leaflet-container a.leaflet-popup-close-button:hover { background:rgba(239,68,68,0.8); color:#fff; }
.map-popup-container { font-family:system-ui,-apple-system,sans-serif; background:linear-gradient(to bottom,#1f2937 0%,#111827 100%); border-radius:10px; padding:14px; color:#f3f4f6; }
.map-popup-header { margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid #374151; background:linear-gradient(90deg,rgba(249,115,22,0.1),transparent); margin:-14px -14px 12px -14px; padding:12px 14px; border-radius:10px 10px 0 0; }
.map-popup-title { font-size:17px; font-weight:700; color:#fb923c; margin:0 0 6px 0; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,0.3); }
.map-popup-finder { font-size:13px; color:#d1d5db; font-weight:500; display:flex; align-items:center; gap:4px; }
.map-popup-finder::before { content:"👤"; font-size:12px; }
.map-popup-body { margin-bottom:14px; background:rgba(17,24,39,0.5); padding:10px; border-radius:6px; border:1px solid #374151; }
.map-popup-info-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:14px; }
.map-popup-info-row:last-child { margin-bottom:0; }
.map-popup-icon { flex-shrink:0; font-size:16px; line-height:1.4; opacity:0.9; }
.map-popup-text { color:#e5e7eb; line-height:1.5; word-break:break-word; font-weight:400; }
.map-popup-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.map-popup-btn { flex:1; min-width:80px; padding:6px 10px; font-size:12px; font-weight:600; border-radius:6px; border:none; cursor:pointer; transition:all 0.2s ease; white-space:nowrap; }
.map-popup-btn-primary { background-color:#ea580c; color:#fff; }
.map-popup-btn-primary:hover { background-color:#f97316; transform:translateY(-1px); box-shadow:0 2px 8px rgba(249,115,22,0.4); }
.map-popup-btn-secondary { background-color:#2563eb; color:#fff; }
.map-popup-btn-secondary:hover { background-color:#3b82f6; transform:translateY(-1px); box-shadow:0 2px 8px rgba(59,130,246,0.4); }
.map-popup-btn-success { background-color:#16a34a; color:#fff; }
.map-popup-btn-success:hover { background-color:#22c55e; transform:translateY(-1px); box-shadow:0 2px 8px rgba(34,197,94,0.4); }
.map-popup-btn-danger { background-color:#dc2626; color:#fff; }
.map-popup-btn-danger:hover { background-color:#ef4444; transform:translateY(-1px); box-shadow:0 2px 8px rgba(239,68,68,0.4); }
.map-popup-expanded { max-height:500px; overflow-y:auto; }
.map-popup-image { width:100%; margin:-14px -14px 12px -14px; border-radius:10px 10px 0 0; overflow:hidden; position:relative; }
.map-popup-image img { width:100%; height:180px; object-fit:cover; display:block; transition:transform 0.3s ease; }
.map-popup-image-clickable { cursor:pointer; }
.map-popup-image-clickable:hover img { transform:scale(1.05); }
.map-popup-image-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,0.8),transparent); padding:8px 12px; opacity:0; transition:opacity 0.3s ease; }
.map-popup-image-clickable:hover .map-popup-image-overlay { opacity:1; }
.map-popup-image-overlay span { color:#fff; font-size:12px; font-weight:600; }
.map-popup-link { color:#60a5fa; text-decoration:underline; word-break:break-all; }
.map-popup-link:hover { color:#93c5fd; }
.map-popup-story { margin-top:12px; padding:12px; background:rgba(249,115,22,0.1); border-left:3px solid #f97316; border-radius:6px; }
.map-popup-story-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:#fb923c; font-size:14px; }
.map-popup-story-text { font-style:italic; color:#d1d5db; font-size:13px; line-height:1.6; margin:0; }
.map-popup-text strong { color:#f3f4f6; font-weight:600; margin-right:4px; }
img { content-visibility:auto; max-width:100%; height:auto; }
.skeleton { background:linear-gradient(90deg,#1f2937 25%,#374151 50%,#1f2937 75%); background-size:200% 100%; animation:loading 1.5s ease-in-out infinite; }
@keyframes loading { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.transition, .transition-all { will-change:transform; }
.loading-hidden { opacity:0; pointer-events:none; }
.loaded { animation:fadeIn 0.3s ease-in; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }