html, body {
    overscroll-behavior-y: none; 
    overflow: hidden; /* Only scroll internal divs, not the whole body */
    height: 100%;
    width: 100%;
    -webkit-user-select: none; /* Disables selecting text (feels more like app UI) */
    user-select: none;
}
  
  
body {
    /* 1. Layout & Scroll Locking */
    margin: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden; /* Prevents sideways scrolling */
    
    /* 2. Typography & Color */
    font-family: 'Quicksand', sans-serif;
    color: var(--dark);
    
    /* 3. Mobile Polish */
    -webkit-tap-highlight-color: transparent;

    /* 4. The Global Background (Gradient) */
    /* This creates the nice moving colors for the start screen */
    background: linear-gradient(-45deg, #D1FAE5, #BFDBFE, #e0f2fe, #dcfce7);
    background-size: 400% 400%;
    animation: pan 30s ease infinite;
}


input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* 2. The "Inner" Room (Your Game) */
#game-container {
    margin: 0 auto;
    position: relative;
    aspect-ratio: 16/9; 
    height: 100%;

    /* PUT A SOLID COLOR HERE */
    /* This acts as the "drywall" behind your SVG so the prairie doesn't show through */
    background-color: #6d5445; /* I color-picked this brown from your screenshot */
    
    /* Optional: A shadow to make the room stand out */
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
  
  /* --- NEW: Certificate Styles (from i37) --- */
    .certificate-container {
        /* This is the printable area */
        width: 100%;
        max-width: 800px;
        margin: 2rem auto;
        background: #fdfbf5; /* Parchment color */
        border: 10px solid #c0a060; /* Gold border */
        padding: 2.5rem;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        position: relative;
    }
    .certificate-seal {
        position: absolute;
        bottom: 2.5rem;
        right: 2.5rem;
        width: 100px;
        height: 100px;
        opacity: 0.8;
    }
    .fancy-font {
        font-family: 'Great Vibes', cursive;
        color: #5d4037; /* Brown color */
        font-size: 4rem;
        line-height: 1.2;
        border-bottom: 2px solid #c0a060;
        padding: 0 0.5rem;
    }
    .certificate-input {
        font-family: 'Great Vibes', cursive;
        color: #5d4037;
        font-size: 4rem;
        line-height: 1.2;
        border: none;
        border-bottom: 2px solid #c0a060;
        background: transparent;
        text-align: center;
        width: 100%;
        outline: none;
    }
    .certificate-input:focus {
        background: #fdfbf5;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
/* --- FIXED PRINT STYLES (Safari/Mobile Compatible) --- */
@media print {
    @page { 
        size: landscape; 
        margin: 0;
    }
    
    /* 1. FORCE RESET EVERYTHING (Unlock the page height) */
    html, body, body.modal-open, #root {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: static !important;
        background: white !important;
        display: block !important;
    }

    /* 2. HIDE THE WORLD (But keep layout space collapsed) */
    body * {
        visibility: hidden;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* 3. RESURRECT THE MODAL (And allow it to take space) */
    /* We target the overlay and ALL its descendants */
    .modal-overlay, 
    .modal-overlay * {
        visibility: visible !important;
        height: auto !important; /* Restore natural height */
        overflow: visible !important; /* Allow content to flow */
    }

   /* --- BULLETPROOF MODAL OVERLAY (iPhone/Notch Safe) --- */
.modal-overlay {
    /* 1. Pin to all 4 corners (Stronger than 'inset:0' on older iOS) */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* 2. FORCE FULL HEIGHT (Key for Mobile Safari) */
    /* '100dvh' adapts to the expanding/collapsing URL bar instantly */
    height: 100dvh;
    width: 100vw;
    
    /* 3. Visuals */
    background: rgba(106, 140, 175, 0.85); /* Darker opacity to hide background clutter */
    backdrop-filter: blur(12px); /* Stronger blur for focus */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    
    /* 4. Layout & Safe Areas */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    
    /* 5. RESPECT THE NOTCH (This adds padding so modal doesn't touch the edges) */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: 1rem;
    padding-right: 1rem;
    
    /* 6. Lock Scrolling */
    overscroll-behavior: none;
    touch-action: none; /* Stops taps from passing through to map */
}

    /* 5. RESTORE CONTAINER DIMENSIONS */
    .modal-box-rigid, 
    .certificate-modal-box {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        display: block !important;
        background: transparent !important;
    }

    .modal-scroll-rigid, 
    .certificate-scroll {
        display: block !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* 6. CERTIFICATE SPECIFICS (Fit to Page) */
    .certificate-container {
        width: 10in !important;
        height: 7.5in !important;
        margin: 0.25in auto !important;
        border: 5px solid #c0a060 !important;
        
        /* Scale it down slightly to ensure headers/footers don't clip it */
        transform: scale(0.9) !important;
        transform-origin: center top !important;
        box-shadow: none !important;
    }

    /* 7. NOTEBOOK SPECIFICS */
    .printable-content {
        display: block !important;
        width: 100% !important;
    }

    /* 8. HIDE UI ELEMENTS */
    .no-print, 
    .modal-header-rigid, 
    .certificate-actions, 
    button,
    .map-ctl, 
    .certificate-input {
        display: none !important;
    }
    
    /* 9. SHOW NAME INPUT AS TEXT */
    input.certificate-input {
        display: block !important;
        height: auto !important; /* Un-collapse */
        border: none !important;
        background: transparent !important;
        text-align: center;
        visibility: visible !important;
    }
}

/* Add this to the very top of your CSS file */
/* --- NEW CODE (Paste this instead) --- */

/* 1. Import the font from Google */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

/* 2. Apply it to the icons */
.badge-icon {
  /* Use the imported name 'Noto Color Emoji' first */
  font-family: 'Noto Color Emoji', "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  
  /* Ensure the browser renders it as color emoji */
  font-variant-emoji: emoji; 
  
  font-size: 2.5rem;
  line-height: 1;
}
.badge-icon {
  /*
   * This is the key change!
   * It tells the browser to use the font file you loaded FIRST.
   * The other fonts are just fallbacks in case it fails.
   */
  font-family: 'NotoAppEmoji', "Segoe UI Emoji", "Apple Color Emoji", sans-serif;

  /* Adjust the size as needed */
  font-size: 2.5rem; 
}
    :root{--primary:#82c99f;--secondary:#6a8caf;--highlight:#ffb74d;--dark:#333;--cute-bg:#f0f9ff;--grass:#dcfce7}
body.modal-open {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%;
    user-select: none;          /* Standard */
    -webkit-user-select: none;  /* Safari/Chrome */
    -moz-user-select: none;     /* Firefox */
}
    
    @keyframes pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    @keyframes popIn{0%{transform:scale(0.9);opacity:0}80%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
    @keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-8px)}}
    @keyframes jiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
    @keyframes bounce-slight{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    #root{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
    
    
    /* SAFE ICON SIZE CONTROL */
.custom-icon {
  display: inline-block;
  width: 32px;          /* reasonable default size */
  height: 32px;
  object-fit: contain;  /* preserve aspect ratio */
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: none; /* never block clicks in inputs */
  user-select: none;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

/* Slightly smaller in text-heavy elements */
input .custom-icon,
label .custom-icon,
button .custom-icon {
  width: 24px;
  height: 24px;
}

/* Optional subtle hover effect (for fun, not required) */
button:hover .custom-icon,
label:hover .custom-icon {
  transform: scale(1.05);
  opacity: 0.95;
}


    /* --- MAIN LAYOUT & MAP --- */
    #map-wrapper-stable{position:relative;height:550px;width:100%;z-index:5;transition:all 0.3s ease; border-radius:32px; overflow:hidden; border:5px solid white; box-shadow:0 20px 40px rgba(106,140,175,0.25);}
    #map-wrapper-stable.fullscreen{position:fixed!important;top:0;left:0;width:100%!important;height:100vh!important;z-index:5000!important;border-radius:0!important;border:none!important}
    .map-character {
        position:absolute;
        bottom:-5px;
        left:5px;
        width:300px;
        z-index:5001;
        pointer-events:none;
        filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
        animation:popIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s backwards;
        
        /* --- ADDED FOR SMOOTH HIDE/SHOW --- */
        transform: translateY(0);
        opacity: 1;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }
    .map-character.hidden {
        transform: translateY(100%); /* Slide down */
        opacity: 0; /* Fade out */
    }
    #map{height:100%;width:100%;background-color:#aadaff}
    
    /* --- KAWAII CONTROLS --- */
    .map-ctl{position:absolute;z-index:9999!important;background:white;padding:12px 20px;border-radius:99px;box-shadow:0 8px 0 #e0e7ff, 0 15px 20px rgba(0,0,0,0.15);font-weight:800;color:var(--secondary);cursor:pointer;transition:all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);display:flex;align-items:center;gap:10px; border: 3px solid white; font-size: 15px;}
    .map-ctl:active{transform:translateY(8px); box-shadow:0 0 0 #e0e7ff, 0 5px 5px rgba(0,0,0,0.1);}
    .map-ctl:hover{color:var(--primary); transform:translateY(1px);}
    .ctl-tl {top: calc(env(safe-area-inset-top) + 50px); left: 24px;}
    .ctl-tr{top:24px;right:24px}
    .ctl-bl{bottom:30px;left:24px}
    .ctl-br{bottom:30px;right:55px}
    .ctl-bc{
        bottom:30px;
        left:50%;
        transform:translateX(-50%);
    }
    .ctl-bc:hover {
        color: var(--primary);
        transform: translateX(-50%) translateY(1px);
    }
    .ctl-bc:active {
        transform: translateX(-50%) translateY(8px);
        box-shadow: 0 0 0 #e0e7ff, 0 5px 5px rgba(0,0,0,0.1);
    }

    .gamified-marker{width:22px!important;height:22px!important;margin-left:-11px!important;margin-top:-11px!important;border-radius:50%;border:3px solid white;box-shadow:0 4px 8px rgba(0,0,0,0.3);transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:popIn 0.5s backwards}
    .gamified-marker:hover{transform:scale(2);z-index:9999!important}

    .slider-container{@apply bg-white/90 backdrop-blur-md rounded-[36px] p-6 shadow-xl mt-8 border-4 border-white max-w-2xl mx-auto relative z-[500]}
    input[type=range]{-webkit-appearance:none;width:100%;height:20px;border-radius:99px;background:linear-gradient(to right,var(--primary),#fcd34d,var(--highlight),#f87171,var(--secondary));outline:none;border:4px solid white;box-shadow:0 4px 10px rgba(0,0,0,0.05)}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:#fff;border:6px solid var(--secondary);cursor:pointer;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow:0 4px 10px rgba(0,0,0,0.2)}
    input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
    
    /* --- MODALS & DASHBOARD --- */
    .modal-overlay{position:fixed;inset:0;background:rgba(106,140,175,0.6);display:flex;align-items:center;justify-content:center;z-index:11000;backdrop-filter:blur(8px);padding:1rem}
    .modal-box-rigid{background:var(--cute-bg);border-radius:48px;box-shadow:0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.3);width:100%;max-height:88vh;display:flex;flex-direction:column;animation:popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);overflow:hidden; border:6px solid white;}
    .modal-header-rigid{flex-shrink:0;padding:1.5rem 3rem;border-bottom:3px dashed #c7d2fe;display:flex;justify-content:space-between;align-items:center; background:white;}
    .modal-scroll-rigid{flex:1 1 auto;overflow-y:auto;min-height:0;padding:2.5rem;-webkit-overflow-scrolling:touch}

    .dash-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:12000;backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 0.3s}
    .dash-overlay.open{opacity:1;pointer-events:auto}
    .dash{position:fixed;top:16px;left:16px;bottom:16px;width:360px;max-width:calc(100vw - 32px);background:white;z-index:12001;transform:translateX(-115%);transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);box-shadow:20px 0 60px rgba(106,140,175,0.3);display:flex;flex-direction:column;border-radius:40px; overflow:hidden; border:5px solid #f0f9ff;}
    .dash.open{transform:translateX(0)}
    
    /* --- NEW LIGHTBOX --- */
    .lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:20000;backdrop-filter:blur(10px);padding:1rem;animation:popIn 0.3s}
    .lightbox-content{
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-content img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  border: 6px solid white;
}
    .lightbox-close{position:absolute;top:-16px;right:-16px;width:48px;height:48px;background:white;border-radius:50%;color:var(--secondary);font-size:32px;line-height:48px;text-align:center;font-weight:800;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,0.3);transition:all 0.2s;transform:rotate(0deg)}
   
    .lightbox-close:hover{transform:scale(1.1) rotate(90deg);color:var(--primary)}

    /* --- TOASTS & EFFECTS --- */
    #badge-toast{position:fixed;bottom:40px;right:40px;z-index:13000;background:white;padding:20px 30px;border-radius:30px;border-left:15px solid var(--highlight);box-shadow:0 25px 50px rgba(0,0,0,0.25);display:flex;align-items:center;gap:25px;transform:translateY(250%) scale(0.8) rotate(-5deg);transition:all 0.7s cubic-bezier(0.68,-0.55,0.27,1.55)}
    #badge-toast.show{transform:translateY(0) scale(1) rotate(0deg)}
    #confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:14000;pointer-events:none}
    
    /* --- ICONS & HELPERS --- */
    .custom-icon{display:inline-block;object-fit:contain;vertical-align:middle}
    .btn-icon{height:32px;width:32px}
    .award-icon{height:24px;width:24px;vertical-align:text-bottom}
    .leaflet-popup-content{font-family:'Quicksand',sans-serif;text-align:center;font-size:15px; font-weight:700; color: var(--secondary);}
    .leaflet-container {font-family: 'Quicksand', sans-serif !important;}
    .no-scrollbar::-webkit-scrollbar {display: none;}
    .no-scrollbar {-ms-overflow-style: none; scrollbar-width: none;}
    .custom-scrollbar::-webkit-scrollbar {width: 8px;}
    .custom-scrollbar::-webkit-scrollbar-track {background: transparent;}
    .custom-scrollbar::-webkit-scrollbar-thumb {background-color: rgba(130,201,159,0.5); border-radius: 20px; border: 2px solid transparent; background-clip: content-box;}

    .mascot-peek { position: absolute !important; z-index: 30 !important; pointer-events: none !important; transition: transform 0.3s ease-out; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
    .bincho-peek  { width: 140px; top: -110px !important; right: -30px !important; transform: rotate(8deg); animation: float 5s ease-in-out infinite; }
    .prof-peek  { width: 120px; top: -100px !important; left: -30px !important; transform: rotate(-8deg); animation: jiggle 7s ease-in-out infinite; }

/* --- SPLASH & COIN --- */
#splash-screen{
  position:fixed;
  inset:0;
  z-index:15000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(rgba(106,140,175,0.4),rgba(106,140,175,0.6)),
    url('https://all105.com/images/land.webp');
  background-size:cover;
  background-position:center;
  transition:opacity 0.8s ease-out, visibility 0.8s;
}

#splash-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* The big rounded “card” */
#splash-screen > div{
  width: min(900px, 100%);
  max-height: calc(100dvh - 24px);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: clamp(8px, 2vh, 20px);
  padding: clamp(12px, 3vw, 40px);

  transform-origin: center;
  transition: transform 0.3s ease;
}

/* Mascot container */
.splash-char-container{
  position:relative;
  max-width: min(520px, 55vw);
  margin-bottom: clamp(8px, 2vh, 24px);
  animation: float 6s ease-in-out infinite;
}

/* Titles */
#splash-screen h1{
  font-size: clamp(32px, 6vw, 80px);
  line-height: 0.95;
  margin: 0;
}

#splash-screen h2{
  font-size: clamp(18px, 4vw, 42px);
  line-height: 1.05;
  margin: 0;
}

/* Start Button */
#splash-start-btn{
  font-size: clamp(18px, 3vw, 32px);
  padding: clamp(12px, 2vw, 22px) clamp(24px, 4vw, 60px);
}

/* === LANDSCAPE FIT FIX === */
@media (orientation: landscape) and (max-height: 520px){

  #splash-screen > div{
    padding: 18px !important;
    border-radius: 40px !important;
    gap: 10px;
    transform: scale(0.92);
  }

  .splash-char-container{
    max-width: min(320px, 55vw) !important;
    margin-bottom: 10px !important;
  }

  .splash-char-container img.w-\[450px\]{
    width: min(320px, 55vw) !important;
    height: auto !important;
  }

  #splash-screen h1{
    font-size: clamp(30px, 5.5vw, 54px) !important;
    margin-bottom: 6px !important;
  }

  #splash-screen h2{
    font-size: clamp(18px, 3.6vw, 34px) !important;
    margin-bottom: 12px !important;
  }

  #splash-start-btn{
    font-size: 20px !important;
    padding: 12px 34px !important;
    border-width: 6px !important;
  }
}

/* Extra-short landscape */
@media (orientation: landscape) and (max-height: 420px){
  #splash-screen > div{ transform: scale(0.84); }

  .splash-char-container{
    max-width: min(260px, 50vw) !important;
  }

  .splash-char-container img.w-\[450px\]{
    width: min(260px, 50vw) !important;
  }
}

/* --- COIN --- */
#coin-ol{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  z-index:14001;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
  animation:popIn 0.5s ease-out
}

.coin-s{width:260px;height:260px;perspective:1000px;margin-bottom:3rem}
.coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:cF 4s ease-out forwards}
.coin-f{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#FFD700,#DAA520 60%,#B8860B 100%);
  border:16px solid #DAA520;
  box-shadow:0 0 120px rgba(255,215,0,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:130px
}
.coin-b{transform:rotateY(180deg)}
@keyframes cF{
  0%{transform:rotateY(0deg) scale(0.5);opacity:0}
  10%{opacity:1}
  80%{transform:rotateY(1440deg) scale(1.1)}
  100%{transform:rotateY(2160deg) scale(1);opacity:1}
}
  
@keyframes markerBounce {
  0% { transform: translate(0, 0) scale(0.7); opacity: 0; }
  60% { transform: translate(0, -15px) scale(1.1); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); }
}  
  
  /* Animation for a subtle glow */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0px rgba(130, 201, 159, 0.4); }
  100% { box-shadow: 0 0 0 10px rgba(130, 201, 159, 0); }
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.result-card-animated {
   /* 'backwards' ensures it starts in the hidden state */
   animation: slide-in-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

@keyframes shine-effect {
  0% { transform: translateX(-150%) skewX(-25deg); }
  100% { transform: translateX(150%) skewX(-25deg); }
}

/* This targets the unlocked badges by their green border color */
.grid .border-\[\#82c99f\] {
  position: relative; /* Required for the pseudo-element */
  overflow: hidden;  /* Clips the shine effect */
}

/* This creates the shine element itself */
.grid .border-\[\#82c99f\]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.7;
  transform: translateX(-150%) skewX(-25deg);
  
  /* Run the animation 3s, wait 5s, and repeat */
  animation: shine-effect 3s ease-in-out 5s infinite;
}
/* Apply your existing pulseGlow to inputs on focus */
input.w-full:focus {
  /* This runs the pulse animation once, which is perfect */
  animation: pulseGlow 1.2s forwards;
  
  /* This is important! 
    It ensures your existing Tailwind focus:border-xxx still works.
  */
  border-color: var(--primary) !important;
  outline: none;
}

@keyframes pulse-look {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* This overrides the 'fa-bounce' behavior */
#root .fa-binoculars {
  animation: pulse-look 1.8s ease-in-out infinite;
}

/* --- NEW: Professor Certificate Overlay (from i37) --- */
 #prof-overlay {
        position: fixed;
        inset: 0;
        z-index: 14500; /* Just above coin, below certificate */
        display: flex;
        align-items: center; /* <-- THIS IS THE FIX */
        justify-content: center;
        /* Transparent background so you can see the app */
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(4px);
        opacity: 0;
        animation: profFadeIn 0.5s ease-out forwards;
    }
    @keyframes profFadeIn {
        to { opacity: 1; }
    }

    .prof-container {
        position: relative;
        /* Animation: slide in, wait, slide out */
        animation: profSlide 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        transform: translateY(100%);
    }
    @keyframes profSlide {
        0% { transform: translateY(50vh); } /* Start from bottom of screen */
        15%, 85% { transform: translateY(0%); } /* Rest at center */
        100% { transform: translateY(50vh); } /* Exit to bottom */
    }

    .prof-container img {
        width: 300px; /* Big_ger size for impact */
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
    }

    .prof-bubble {
        position: absolute;
        top: -140px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        padding: 1.5rem 2.5rem;
        border-radius: 40px;
        border-bottom-left-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        width: 350px;
        text-align: center;
        border: 4px solid #ffb74d;
        opacity: 0;
        /* Animation: pop in, wait, fade out */
        animation: bubblePop 4.5s ease-out forwards;
    }
    @keyframes bubblePop {
        0%, 15% { transform: translateX(-50%) scale(0.5); opacity: 0; }
        25%, 85% { transform: translateX(-50%) scale(1); opacity: 1; }
        100% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    }
    
    /* --- NEW: Field Station Animations --- */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}
@keyframes float-cloud {
    0% { transform: translateX(0px); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(0px); }
}
.star-anim { animation: twinkle 3s infinite ease-in-out; }
.cloud-anim { animation: float-cloud 8s infinite ease-in-out; }

/* AC Style Speech Bubble */
.ac-bubble {
    background: #fff;
    border-radius: 20px;
    padding: 15px 25px;
    position: absolute;
    bottom: 140px; /* Position above the mascot */
    left: 20px;
    max-width: 200px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    border: 4px solid #6a8caf; /* Nook Blue */
    font-family: 'Quicksand', sans-serif;
    font-weight: 800;
    color: #555;
    z-index: 50;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ac-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 40px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #6a8caf transparent;
    display: block;
    width: 0;
}

/* --- PASTE THIS IN YOUR <style> SECTION --- */
@keyframes floatBy {
    0% { right: -100px; transform: translateY(0px) rotate(5deg); }
    50% { transform: translateY(-20px) rotate(-5deg); }
    100% { right: 120%; transform: translateY(0px) rotate(5deg); }
}
.balloon-present {
    position: absolute;
    top: 15%;
    width: 60px;
    cursor: pointer;
    z-index: 100;
    animation: floatBy 15s linear forwards;
}
.balloon-present:active {
    transform: scale(0.9);
}

/* 2. STANDARD MODAL BOX (Desktop Default) */
.modal-box-rigid {
    background: var(--cute-bg);
    border-radius: 32px; /* Smoother corners */
    box-shadow: 0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px; /* Default width limit */
    display: flex;
    flex-direction: column;
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden; 
    border: 6px solid white;
    
    /* Desktop: Natural height based on content */
    height: auto; 
    max-height: 85vh; 
    
    /* VITAL: Ensure content sits ON TOP of the overlay */
    position: relative; 
    z-index: 20001; 
}
    
/* 4. COMPACT MODAL UTILITY (For Search/Login) */
/* Apply this class to small modals to stop them from stretching */
@media (min-width: 769px) {
.compact-modal {
    max-width: 450px !important;
    width: 90%;
}
}

/* === FINAL MOBILE DRAG FIXES === */

/* 1. The Drag "Ghost" Container */
.dnd-poly-drag-image {
    /* Force transparency to kill the black box */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    
    /* Positioning */
    position: fixed !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    
    /* Visuals */
    opacity: 1 !important;
    transform-origin: 0 0;
    will-change: transform;
}

/* 2. The Image INSIDE the Ghost */
.dnd-poly-drag-image img {
    background: transparent !important;
    box-shadow: none !important;
    /* Make it pop slightly so you see what you are dragging */
    transform: scale(1.15) !important; 
    opacity: 1 !important;
}

/* 3. Hide the default drag icon */
.dnd-poly-drag-icon { 
    display: none !important; 
}

/* 4. The Item on the Shelf/Room (The Source) */
.draggable-item {
    /* VITAL: Kills the black "tap highlight" box on Android/iOS */
    -webkit-tap-highlight-color: transparent !important; 
    
    /* VITAL: Prevents the "Copy/Save Image" menu from popping up */
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    
    /* VITAL: Tells browser "Don't scroll when I touch this" */
    touch-action: none !important; 
}

/* 5. Highlight for "Tap-to-Move" Mode */
.item-selected {
    filter: drop-shadow(0 0 8px #fcd34d) brightness(1.2);
    animation: pulse-select 1s infinite;
    z-index: 100 !important;
}

@keyframes pulse-select {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Fix for Radio Animation Conflict */
.jiggle-active {
    animation: jiggle 0.5s infinite;
    transform-origin: center center;
}

/* Fix for Lamp/Lantern Conflict */
.glow-active {
    filter: drop-shadow(0 0 15px #fcd34d) brightness(1.2);
    will-change: filter; /* Helps mobile performance */
}

/* --- UPGRADED: JUICY ANIMATIONS --- */
    /* 1. Spring Pop (Used for Modals & Badges) */
    @keyframes popIn {
        0% { transform: scale(0.5); opacity: 0; }
        60% { transform: scale(1.05); opacity: 1; }
        100% { transform: scale(1); }
    }

    /* 2. Waterfall Drop (Used for Map Markers) */
    @keyframes pinDrop {
        0% { transform: translateY(-100px) scale(0); opacity: 0; }
        50% { transform: translateY(0) scale(1.2); opacity: 1; }
        70% { transform: translateY(-10px) scale(0.9); }
        100% { transform: translateY(0) scale(1); }
    }

    /* 3. Gentle Float (Used for Mascots/Clouds) */
    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        25% { transform: translateY(-6px) rotate(2deg); }
        75% { transform: translateY(4px) rotate(-2deg); }
    }

    /* 4. Attention Pulse (Used for Buttons) */
    @keyframes attention {
        0% { box-shadow: 0 0 0 0 rgba(255, 183, 77, 0.7); transform: scale(1); }
        70% { box-shadow: 0 0 0 15px rgba(255, 183, 77, 0); transform: scale(1.05); }
        100% { box-shadow: 0 0 0 0 rgba(255, 183, 77, 0); transform: scale(1); }
    }

    /* 5. Background Pan (Slower, smoother) */
    @keyframes pan {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* --- UPDATED CLASSES --- */
    /* Improved Marker Style */
    .gamified-marker {
        width: 30px !important;
        height: 30px !important;
        margin-left: -15px !important;
        margin-top: -30px !important; /* Anchor to bottom tip */
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg); /* Tear drop shape */
        border: 3px solid white;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
        animation: pinDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Inner dot for the marker to make it look like a map pin */
    .gamified-marker::after {
        content: '';
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
    }
    
    /* --- CUTE MAP PINS --- */
.cute-marker {
    width: 36px !important;
    height: 36px !important;
    /* Shape: Teardrop pointing down-left, then rotated */
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); 
    
    border: 3px solid white;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Reuse the drop animation we made earlier */
    animation: pinDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Correct the icon rotation so it stands up straight inside the pin */
.cute-marker i {
    transform: rotate(45deg); 
    color: white;
    font-size: 18px;
    margin-bottom: 2px; /* Optical alignment */
}

/* --- 1. KANSAS SHADOW (The "Floating Map" Effect) --- */
/* This makes the county lines look like they are hovering above the background */
.map-feature-shadow path {
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.3));
    stroke-linecap: round;
    transition: all 0.5s ease;
}

/* --- 2. BOUNCY POPUPS (Zoom Animation) --- */
/* Instead of just appearing, popups will spring open */
.leaflet-popup {
    animation: popupSpring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transform-origin: bottom center;
}

@keyframes popupSpring {
    0% { transform: scale(0.5) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Style the popup to look like a rounded game card */
.leaflet-popup-content-wrapper {
    border-radius: 24px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border: 4px solid white;
    overflow: hidden;
}
.leaflet-popup-tip {
    box-shadow: none !important;
    background: white;
}

/* --- MAP POLISH: SHADOWS & ANIMATIONS --- */

/* 1. The "Floating Map" Effect */
/* This targets the SVG path of Kansas to give it a drop shadow */
.map-feature-shadow path {
    filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.4));
    stroke-linecap: round;
    transition: all 0.5s ease;
}

/* 2. Bouncy Popups */
/* Makes the info windows spring open instead of just appearing */
.leaflet-popup {
    animation: popupSpring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transform-origin: bottom center;
}

@keyframes popupSpring {
    0% { transform: scale(0.5) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 3. Rounded Popup Cards */
.leaflet-popup-content-wrapper {
    border-radius: 20px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border: 3px solid white;
    overflow: hidden;
}
.leaflet-popup-tip {
    box-shadow: none !important;
    background: white;
}

/* --- NEW GAMIFICATION STYLES --- */

/* 1. Map Themes (Apply these classes to the #map div) */
.map-theme-retro .leaflet-tile-pane {
    filter: contrast(1.2) saturation(1.3) hue-rotate(-10deg);
}
.map-theme-paper .leaflet-tile-pane {
    filter: sepia(0.5) contrast(1.1) brightness(0.9);
}
.map-theme-vibrant .leaflet-tile-pane {
    filter: saturate(1.5) contrast(1.1); /* Makes greens pop! */
}

/* 2. Supply Drop Animations */
@keyframes dropBounce {
    0% { transform: translateY(-50px) scale(0); opacity: 0; }
    50% { transform: translateY(0) scale(1.2); opacity: 1; }
    70% { transform: translateY(-10px) scale(0.9); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes floatCloud {
    0% { 
        transform: translate(-40vw, 10px) scale(0.85); 
        opacity: 0; 
    }
    15% { opacity: 0.45; } /* Fade in slowly */
    50% { 
        transform: translate(50vw, -20px) scale(1); /* Lift up in middle */
        opacity: 0.45;
    } 
    85% { opacity: 0.45; }
    100% { 
        transform: translate(140vw, 10px) scale(1.15); /* Drift down at end */
        opacity: 0; 
    }
}

/* 2. Bird: Aerodynamic Gliding (Smoother rotations) */
@keyframes flyNatural {
    0% { left: -20%; top: 40%; transform: rotate(-8deg) scale(1); }
    
    30% { top: 25%; transform: rotate(-12deg) scale(0.95); } /* Gentle climb */
    
    50% { top: 30%; transform: rotate(5deg) scale(1); } /* Glide down */
    
    70% { top: 20%; transform: rotate(-10deg) scale(0.9); } /* Another climb */
    
    100% { left: 120%; top: 35%; transform: rotate(0deg) scale(1); }
}

/* Keep particles safe */
.weather-particle {
    position: absolute;
    pointer-events: none;
    z-index: 400;
    will-change: transform;
}

/* --- NEW: SEASONAL & INTERACTION EFFECTS --- */

/* 1. Falling Snow */
@keyframes fallSnow {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: translateY(110vh) translateX(20px) rotate(180deg); opacity: 0; }
}

/* 2. Falling Leaves */
@keyframes fallLeaf {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translateY(110vh) translateX(-50px) rotate(360deg); opacity: 0; }
}

/* 3. Click Ripple Effect */
@keyframes rippleEffect {
    0% { transform: scale(0); opacity: 0.6; border-width: 4px; }
    100% { transform: scale(3); opacity: 0; border-width: 0px; }
}

.click-ripple {
    position: absolute;
    border: 2px solid #82c99f; /* Green Ripple */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    pointer-events: none;
    animation: rippleEffect 0.6s linear forwards;
    z-index: 9999;
    margin-left: -20px; /* Center it */
    margin-top: -20px;
}

/* --- KANSAS GLOW EFFECT --- */

/* 1. The Border Animation */
@keyframes borderPulse {
    0% { stroke-width: 3px; stroke-opacity: 0.8; filter: drop-shadow(0 0 2px #fbbf24); }
    50% { stroke-width: 5px; stroke-opacity: 1; filter: drop-shadow(0 0 8px #f59e0b); }
    100% { stroke-width: 3px; stroke-opacity: 0.8; filter: drop-shadow(0 0 2px #fbbf24); }
}

/* 2. Apply to the SVG Path */
.kansas-border-glow {
    animation: borderPulse 3s infinite ease-in-out;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- THE WORLD MASK CONTAINER --- */
.world-mask {
    /* We define the animation here so it runs automatically */
    animation: voidPulse 8s infinite ease-in-out; 
    transition: all 0.5s ease;
    
    /* REMOVED mix-blend-mode: multiply */
    /* Normal blending works best for "foggy" white/light colors */
}

/* --- ANIMATION: SUNLIGHT TO MIST --- */
@keyframes voidPulse {
    0% { 
        fill: #fffbeb;      /* Warm White/Yellow (Amber-50) */
        fill-opacity: 0.5;  /* Light fog */
    }  
    50% { 
        fill: #cbd5e1;      /* Light Blue-Gray (Slate-300) */
        fill-opacity: 0.7;  /* Thicker cloud cover */
    } 
    100% { 
        fill: #fffbeb;      /* Back to Warm Sun */
        fill-opacity: 0.5; 
    }
}

/* 2. Move the border dashes (Marching Ants) */
@keyframes borderMarch {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 200; }
}

/* 3. The Class we will apply to the mask */
.gamified-mask-path {
    /* Combine both animations: Breathing Fill + Moving Border */
    animation: voidPulse 8s ease-in-out infinite, borderMarch 20s linear infinite;
    
    /* Border Style */
    stroke: #ffffff;       /* White border */
    stroke-width: 3px;     /* Thick line */
    stroke-dasharray: 12 8; /* Dashes: 12px line, 8px gap */
    stroke-opacity: 0.5;   /* Semi-transparent border */
    
    /* Ensure the fill transition is smooth */
    transition: all 0.5s ease;
}

/* --- JEWEL BORDER (Safari Optimized) --- */

.jewel-base {
    /* Base Properties */
    stroke: var(--jewel-color, #4ade80) !important; 
    stroke-width: 4px; 
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    
    /* Animation */
    animation: jewelPulse 3s infinite ease-in-out;
    
    /* 1. FORCE GPU ACCELERATION (Critical for Safari) */
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0);
    
    /* 2. Inform browser of changes to prevent caching artifacts */
    will-change: stroke-width, filter, stroke-opacity;
}

@keyframes jewelPulse {
    0% { 
        stroke-opacity: 0.6; 
        stroke-width: 1px; /* Base width */
        
        /* Standard */
        filter: drop-shadow(0 0 2px var(--jewel-color));
        /* Safari Required */
        -webkit-filter: drop-shadow(0 0 2px var(--jewel-color));
    }
    50% { 
        stroke-opacity: 1.0; 
        stroke-width: 3px; /* Tiny expansion forces Safari redraw */
        
        /* Standard */
        filter: drop-shadow(0 0 12px var(--jewel-color));
        /* Safari Required */
        -webkit-filter: drop-shadow(0 0 12px var(--jewel-color));
    }
    100% { 
        stroke-opacity: 0.6; 
        stroke-width: 2px;
        
        /* Standard */
        filter: drop-shadow(0 0 2px var(--jewel-color));
        /* Safari Required */
        -webkit-filter: drop-shadow(0 0 2px var(--jewel-color));
    }
}

/* --- RAINBOW ATMOSPHERE --- */
.rainbow-container {
    position: absolute;
    top: 50px;       /* Adjust to place it in the sky */
    right: 50px;     /* Position it on the right side */
    width: 500px;
    height: 250px;
    overflow: hidden; /* Cut off the bottom half to make an arch */
    pointer-events: none;
    z-index: 300;     /* Behind the clouds/birds */
    
    /* Animation: Lasts 30s, waits 2s to start, repeats infinitely */
    animation: rainbowFadeInOut 30s ease-in-out infinite;
    animation-delay: 2s;
}

/* --- THE RAINBOW WATERFALL (Prismatic Mist) --- */

@keyframes waterfallShimmer {
    0% { background-position: 0% 50%; opacity: 0.2; }
    50% { background-position: 100% 50%; opacity: 0.4; }
    100% { background-position: 0% 50%; opacity: 0.2; }
}

@keyframes verticalFlow {
    0% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
    100% { transform: translateY(-5%); }
}

.rainbow-waterfall-container {
    position: absolute;
    inset: 0; /* Cover entire map */
    pointer-events: none;
    z-index: 300;
    overflow: hidden;
    /* Soft fade in/out at top and bottom so it doesn't look like a hard wall */
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.rainbow-curtain {
    width: 200%; /* Wider than screen to allow movement */
    height: 120%; /* Taller to allow flow */
    position: absolute;
    top: -10%;
    left: -50%;
    
    /* The Colors */
    background: linear-gradient(
        90deg, 
        rgba(255, 0, 0, 0.1),
        rgba(255, 154, 0, 0.1),
        rgba(208, 222, 33, 0.1),
        rgba(79, 220, 74, 0.1),
        rgba(63, 218, 216, 0.1),
        rgba(47, 201, 226, 0.1),
        rgba(28, 127, 238, 0.1),
        rgba(95, 21, 242, 0.1),
        rgba(186, 12, 248, 0.1),
        rgba(255, 0, 0, 0.1)
    );
    background-size: 200% 100%;
    
    /* The Magic: Blur breaks the lines into a "Mist" */
    filter: blur(60px); 
    mix-blend-mode: overlay; /* Blends with the map colors beautifully */
    
    /* Animations */
    animation: waterfallShimmer 15s ease-in-out infinite, verticalFlow 8s ease-in-out infinite;
}


/* --- 1. iOS SAFE AREA FIXES --- */
/* Pushes the bottom dock/tools up so the home bar doesn't cover them */
.tools-tray, .mobile-shop-height, .slider-container {
    padding-bottom: env(safe-area-inset-bottom) !important; 
    margin-bottom: env(safe-area-inset-bottom) !important;
}

/* Fix for the fullscreen room */
/* =========================================
   TRUE FULLSCREEN BASE CAMP (GLOBAL FIX)
   Applies to Desktop AND Mobile when isFS=true
========================================= */
.modal-box-rigid.mobile-fullscreen {
    /* 1. Force absolute edge-to-edge positioning */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    
    /* 2. Force dimensions to fill the screen */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important; /* Remove centering margins */
    
    /* 3. DESTROY ALL CARD STYLING (Square corners, no border) */
    border-radius: 0 !important; 
    border: none !important;
    box-shadow: none !important;
    
    /* 4. iOS Safe Area Padding (Crucial for iPhone notch) */
    /* On Desktop, these values are 0px, so it changes nothing. */
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    
    /* 5. Ensure layering */
    z-index: 25000 !important;
    background-color: #f0f9ff; /* Ensure solid background so nothing bleeds through */
}

/* Ensure the container wrapping it doesn't add padding */
.modal-overlay:has(.mobile-fullscreen) {
   padding: 0 !important;
}

/* --- 2. MAP SMOOTHNESS --- */
/* Hardware acceleration for map pane */
.leaflet-map-pane {
    will-change: transform;
    transform: translate3d(0,0,0); 
}
.leaflet-fade-anim .leaflet-tile {
    will-change: opacity;
}

/* --- 3. GRADIENT ANIMATIONS --- */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient-text {
    background: linear-gradient(270deg, #6a8caf, #82c99f, #ffb74d, #6a8caf);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 8s ease infinite;
}

/* --- 4. SLIDER FIX FOR MOBILE --- */
/* Hide the full month list on small screens, show active only */
@media (max-width: 640px) {
    .month-label-row span { display: none; }
    .month-label-row span.active-month { display: block; width: 100%; text-align: center; font-size: 1.2rem; transform: scale(1) !important; }
}

/* === MASTER MOBILE OPTIMIZATIONS (Consolidated) === */
@media (max-width: 768px) {
    
    /* 1. MAP VIEW: Shrink to top 45% so controls are visible */
    #map-wrapper-stable { 
        height: 45vh !important; 
        border-radius: 0 0 32px 32px !important; 
        border-width: 0 0 4px 0 !important; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    }
    
    /* 2. MODAL CONTAINER: Align to bottom for "Drawer" effect */
    .modal-overlay { 
        align-items: flex-end !important; 
        padding: 0 !important; 
    }
    
    /* 3. SMART MODAL LOGIC (The Core Fix) */
    
    /* TYPE A: Standard Modals (Search, Settings, etc.) -> Bottom Sheets */
    .modal-box-rigid:not(.mobile-fullscreen) { 
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 0 !important; 
        
        /* Rounded Top Corners Only */
        border-radius: 32px 32px 0 0 !important; 
        max-height: 85vh !important; 
        border-bottom: none !important;
        
        /* Animation */
        animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        position: absolute;
        bottom: 0;
    }

.compact-modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        
        /* Rounded top corners */
        border-radius: 36px 36px 0 0 !important;
        
        /* Anchor to bottom */
        bottom: 0 !important;
        left: 0 !important;
        position: absolute !important; 
        
        /* CRITICAL: Push content up so the 'Go' button isn't hidden */
        padding-bottom: 160px !important; 
        
        /* CRITICAL: Force it ON TOP of the bottom dock (which is z-15000) */
        z-index: 25000 !important;
        
        /* Ensure background is solid so you can't see the map/dock through it */
        background: var(--cute-bg) !important; 
        box-shadow: 0 -10px 40px rgba(0,0,0,0.2) !important;
    }
    
    /* TYPE B: Fullscreen Apps (Base Camp, Notebook) -> Native App Feel */
    .modal-box-rigid.mobile-fullscreen {
        /* Force Full Screen Coverage */
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important; /* Fixes "Dashes" gap */
        max-height: none !important;
        
        /* Square Corners */
        border-radius: 0 !important; 
        border: none !important;
        
        /* NOTCH & HOME BAR FIX */
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        
        z-index: 9999 !important;
    }

    /* 4. BASE CAMP INTERNALS (Consolidated here) */
    .mobile-room-height {
        min-height: 55dvh !important; /* Slightly taller for better view */
    }
    .mobile-shop-height {
        height: 35dvh !important; /* Fixed height for shop drawer */
    }

    /* 5. TYPOGRAPHY SCALING */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    .text-4xl { font-size: 1.75rem !important; }
    .text-5xl { font-size: 2rem !important; }
    
    /* 6. GENERAL PADDING FIXES */
    .p-8, .p-10, .p-12 { padding: 1.25rem !important; } 
    .modal-header-rigid { padding: 1rem 1.25rem !important; }
    
    /* 7. MASCOT SCALING */
    .map-character {
        width: 150px !important;
        left: 0px !important;
        bottom: -5px !important;
    }

    /* 8. DRAWER MENU (Full width) */
    .dash {
        top: 0 !important; bottom: 0 !important; left: 0 !important;
        width: 100% !important; max-width: none !important;
        border-radius: 0 !important; border: none !important;
    }

    /* Animation Reference */
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* --- FIELD PAD (SLIDE-UP DRAWER) --- */
.field-pad-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    z-index: 2000; /* Above everything */
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.field-pad-drawer.open {
    transform: translateY(0%);
}

.pad-handle {
    width: 40px;
    height: 5px;
    background: #e0e7ff;
    border-radius: 10px;
    margin: 12px auto;
}

/* --- SMART DOCK ANIMATIONS --- */
@keyframes dockSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- COMBINED SPIN & SPARKLE ANIMATION --- */
@keyframes iconSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); } /* Slight swell */
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes sparklePulse {
    0% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 15px 5px rgba(251, 191, 36, 0.6), 0 0 30px 10px rgba(56, 189, 248, 0.4); }
    100% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0); }
}

.dock-content-enter {
    animation: dockSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-switch-anim {
    /* Run BOTH animations together */
    animation: iconSpin 0.5s ease-in-out, sparklePulse 0.5s ease-out;
    /* Ensure sharpness */
    backface-visibility: hidden;
    transform: translateZ(0);
}



/* --- UPGRADED DOCK STYLING (Field Kit HUD) --- */
.smart-dock-base {
    /* 1. The Glass */
    background: rgba(255, 255, 255, 0.85); /* Slightly more transparent */
    backdrop-filter: blur(16px) saturate(180%); /* Heavy blur + color boost for "premium" feel */
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    
    /* 2. The Shape */
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 -10px 40px rgba(106, 140, 175, 0.15), /* Soft blue glow */
        0 -1px 0 rgba(255, 255, 255, 0.5) inset; /* Inner highlight */
        
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    
/* === NEW: Gentle Lighting Pulse === */
    animation: sparklePulse 6s ease-in-out infinite; 
    /* Adjust the box-shadow from the original to ensure the animation has room */
    box-shadow: 0 -10px 40px rgba(106, 140, 175, 0.15), 0 -1px 0 rgba(255, 255, 255, 0.5) inset; 
}

/* 3. The Toggle Notch (Floating Button Container) */
.dock-notch {
    background: rgba(255, 255, 255, 0.95);
    border: 4px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 20px rgba(106, 140, 175, 0.2);
    backdrop-filter: blur(10px);
}

@keyframes flyAcross {
    0% { left: -20%; transform: translateY(0) rotate(5deg); }
    25% { transform: translateY(-30px) rotate(0deg); }
    50% { transform: translateY(0) rotate(-5deg); }
    75% { transform: translateY(30px) rotate(0deg); }
    100% { left: 120%; transform: translateY(0) rotate(5deg); }
}

/* --- SMOOTHING & SPARKLES --- */
.smooth-spin-image {
    /* 1. Force GPU Rendering */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* 2. Anti-aliasing Trick: Transparent border forces smooth edges */
    outline: 1px solid transparent; 
    
    /* 3. High Quality Scaling */
    image-rendering: -webkit-optimize-contrast; 
    will-change: transform;
}

/* The Magic Sparkle Glow */
@keyframes sparklePulse {
    0% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 15px 5px rgba(251, 191, 36, 0.6), 0 0 30px 10px rgba(56, 189, 248, 0.4); } /* Gold & Cyan */
    100% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0); }
}

.sparkle-active {
    animation: sparklePulse 0.6s ease-out;
}
/* --- GLOBAL DOCK & ANIMATION FIXES (Paste at Very End) --- */
@keyframes iconSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); } 
    100% { transform: rotate(360deg) scale(1); }
}

.dock-switch-anim {
    animation: iconSpin 0.5s ease-in-out !important;
}

.smart-dock-base {
    background: rgba(255, 255, 255, 0.95) /* Fix Transparency */
    backdrop-filter: blur(20px) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    z-index: 15000 !important;
}

@keyframes stampSlam {
  0% { transform: scale(3) rotate(15deg); opacity: 0; }
  50% { transform: scale(0.9) rotate(-15deg); opacity: 1; }
  70% { transform: scale(1.05) rotate(-12deg); }
  100% { transform: scale(1) rotate(-12deg); }
}

/* --- UPDATED GLIMMER CSS --- */
@keyframes pass-shine {
    0% { transform: translateX(-100%) skewX(-20deg); }
    20% { transform: translateX(200%) skewX(-20deg); } 
    100% { transform: translateX(200%) skewX(-20deg); } 
}

/* This is the container that holds the shine */

.glimmer-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;   /* Fits the parent width */
    height: 100%;  /* Fits the parent height */
    overflow: hidden; 
    z-index: 0; 
    pointer-events: none;
    border-radius: inherit;
}

.glimmer-layer::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 50%;
    height: 100%;
    
    /* UPDATED: Uses the variable, or falls back to Blue if missing */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        var(--glimmer-color, rgba(56, 189, 248, 0.4)) 50%, 
        transparent 100%
    );
    
    transform: translateX(-150%);
    animation: pass-shine 6s infinite ease-in-out;
    z-index: 1; 
}
/* --- ULTIMATE MOBILE SAFE ZONE FIX (MASTER BLOCK) --- */
    
    /* 1. DESKTOP (Screens wider than 768px) */
    /* Keeps buttons tight in the corners on your computer */
    .notch-top-left  { top: 24px !important; left: 24px !important; }
    .notch-top-right { top: 24px !important; right: 24px !important; }
    .notch-prof      { top: 120px !important; left: 24px !important; }
    .notch-close     { top: 24px !important; right: 24px !important; }

    /* 2. ALL MOBILE PHONES (Screens narrower than 768px) */
    /* Forces buttons down 80px to clear the Dynamic Island/Clock */
    @media only screen and (max-width: 768px) {
        .notch-top-left {
            /* Handles Dashboard Button AND Camp Points */
            top: 80px !important; 
            left: 20px !important;
        }
        .notch-top-right {
            /* Handles Zoom Buttons AND Camp Close Button */
            top: 80px !important;
            right: 20px !important;
        }
        .notch-prof {
            /* Handles the Professor */
            top: 180px !important; 
            left: 20px !important;
        }
        .notch-close {
            /* Handles Modal X buttons */
            top: 80px !important;
            right: 20px !important;
        }
    }
    
    /* --- BUTTON GLIMMER EFFECT --- */
@keyframes glimmer-gold {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shine-sweep {
    0% { left: -100%; opacity: 0; }
    50% { opacity: 0.5; }
    100% { left: 200%; opacity: 0; }
}

.btn-gold-glimmer {
    /* Moving Gold Gradient */
    background: linear-gradient(45deg, #f59e0b, #fbbf24, #fcd34d, #fbbf24, #f59e0b);
    background-size: 200% 200%;
    animation: glimmer-gold 3s infinite linear;
    position: relative;
    overflow: hidden;
    border: 4px solid white;
}

/* The "Sheen" bar that wipes across */
.btn-gold-glimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine-sweep 3s infinite ease-in-out;
    animation-delay: 1s; /* Slight delay so it doesn't look crazy */
}

/* Float Animation for the Icon inside */
.float-icon {
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 2px rgba(0,0,0,0.2));
}

/* --- Extracted from App.jsx (coin / shelf animations) --- */
@keyframes cF{0%{transform:rotateY(0deg) scale(0.5);opacity:0}50%{transform:rotateY(1080deg) scale(1.2);opacity:1}100%{transform:rotateY(2160deg) scale(1);opacity:1}}.coin-s{width:220px;height:220px;perspective:1000px;margin-bottom:2.5rem}.coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:cF 4s ease-out forwards}.coin-f{position:absolute;inset:0;backface-visibility:hidden;border-radius:50%;background:radial-gradient(circle at 30% 30%,#FFD700,#DAA520 60%,#B8860B 100%);border:12px solid #DAA520;box-shadow:0 0 80px rgba(255,215,0,0.6);display:flex;align-items:center;justify-content:center;font-size:110px}.coin-ft{transform:rotateY(0deg)}.coin-bk{transform:rotateY(180deg)}#coin-ol{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:14001;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(8px);animation:popIn 0.5s ease-out} .custom-scrollbar::-webkit-scrollbar {width: 8px;} .custom-scrollbar::-webkit-scrollbar-track {background: transparent;} .custom-scrollbar::-webkit-scrollbar-thumb {background-color: rgba(130,201,159,0.5); border-radius: 20px; border: 2px solid transparent; background-clip: content-box;}

/* === LIGHTBOX FORCE-FIT OVERRIDE (put at very bottom) === */
.lightbox-overlay{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  z-index: 20000 !important;
}

.lightbox-content{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100vh - 2rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.lightbox-content img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* === FORCE LIGHTBOX CLOSE BUTTON POSITION === */
.lightbox-close{
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 12px) !important;
  right: calc(env(safe-area-inset-right) + 12px) !important;
  left: auto !important;
  bottom: auto !important;

  width: 48px !important;
  height: 48px !important;
  line-height: 48px !important;

  z-index: 20002 !important; /* above overlay + image */
}

/* FORCE avatar to be clickable */
.avatar-click-fix,
.avatar-click-fix * {
  pointer-events: auto !important;
}

.avatar-click-fix {
  position: relative;
  z-index: 999999 !important;
  cursor: pointer !important;
}


/* Smooth mascot hover enlarge with border */
.mascot-hover-zoom {
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.28s ease,
    filter 0.28s ease;
  position: relative;
  z-index: 1;
}

.mascot-hover-zoom:hover {
  transform: scale(2.1);
  z-index: 9999;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.35));
}
.mascot-hover-zoom:hover ~ .mascot-hover-zoom {
  filter: brightness(0.85);
}

.profile-sky-card{
  border-radius: 32px;
  border: 3px solid #e0e7ff;
  overflow: hidden;

  /* Cloudy sky look (no image) */
  background:
    radial-gradient(60% 40% at 18% 28%, rgba(255,255,255,0.95) 0 55%, rgba(255,255,255,0) 60%),
    radial-gradient(55% 35% at 42% 22%, rgba(255,255,255,0.90) 0 50%, rgba(255,255,255,0) 58%),
    radial-gradient(70% 45% at 78% 30%, rgba(255,255,255,0.92) 0 52%, rgba(255,255,255,0) 62%),
    radial-gradient(65% 40% at 28% 70%, rgba(255,255,255,0.90) 0 48%, rgba(255,255,255,0) 60%),
    radial-gradient(75% 45% at 72% 78%, rgba(255,255,255,0.88) 0 46%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #7db7ff 0%, #bfe3ff 55%, #eaf6ff 100%);
}

/* =====================================================
   KSE Player Avatar (Map HUD) — Glow + Animation
   ===================================================== */
.kse-player-avatar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  cursor: pointer;
  overflow: visible;
  transform: translateZ(0);
  user-select: none;
  -webkit-user-select: none;
}

.kse-player-avatar-glow{
  position: absolute;
  inset: -10px;
  border-radius: 9999px;
  background: radial-gradient(circle,
    rgba(255,183,77,0.55) 0%,
    rgba(56,189,248,0.28) 35%,
    rgba(130,201,159,0.18) 55%,
    rgba(255,255,255,0.00) 72%
  );
  filter: blur(2px);
  opacity: 0.95;
  animation: kseAvatarGlow 2.8s ease-in-out infinite;
  pointer-events: none;
}

.kse-player-avatar-img{
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  object-fit: contain;
  transform: translateY(-4px) scale(1.08);
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,0.12))
    drop-shadow(0 2px 3px rgba(0,0,0,0.14));
  animation: kseAvatarFloat 3.6s ease-in-out infinite;
  pointer-events: none;
}

.kse-player-avatar-level{
  position: absolute;
  bottom: -10px;
  right: -10px;
  z-index: 3;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 9999px;
  background: #fffbeb;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 10px 18px rgba(0,0,0,0.14);
  color: #7c2d12;
  white-space: nowrap;
}

.kse-player-avatar-bubble{
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(14px,-50%);
  z-index: 3;
  background: rgba(255,255,255,0.95);
  border: 3px solid rgba(224,231,255,1);
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #6a8caf;
  box-shadow: 0 12px 20px rgba(0,0,0,0.12);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.kse-player-avatar-bubble:before{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:12px;
  height:12px;
  background:rgba(255,255,255,0.95);
  border-left:3px solid rgba(224,231,255,1);
  border-bottom:3px solid rgba(224,231,255,1);
}

.kse-player-avatar:hover .kse-player-avatar-bubble{opacity:1;}
.kse-player-avatar:hover .kse-player-avatar-img{transform: translateY(-6px) scale(1.10);}

.kse-player-avatar-bump{
  transform: scale(1.06) rotate(-2deg);
}

@keyframes kseAvatarGlow{
  0%,100%{ transform: scale(0.98); opacity: 0.85; }
  50%{ transform: scale(1.06); opacity: 1; }
}

@keyframes kseAvatarFloat{
  0%,100%{ transform: translateY(-4px) scale(1.08); }
  50%{ transform: translateY(-8px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce){
  .kse-player-avatar-glow,
  .kse-player-avatar-img{
    animation: none !important;
  }
}


/* =====================================================
   Modal Button Glimmer (Quick Actions + Change Mascot)
   ===================================================== */
.kse-glimmer-btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.kse-glimmer-btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:45%;
  height:180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity:0;
  pointer-events:none;
}

.kse-glimmer-btn:hover::after{
  opacity:1;
  animation: kseGlimmerSweep .8s ease-out;
}

@keyframes kseGlimmerSweep{
  from { left:-60%; }
  to { left:120%; }
}

/* gold button shimmer */
.kse-glimmer-btn--gold::after{
  opacity:.25;
  animation: kseGlimmerIdle 3s ease-in-out infinite;
}

@keyframes kseGlimmerIdle{
  0%,100%{ left:-60%; opacity:.15; }
  50%{ left:120%; opacity:.35; }
}

@media (prefers-reduced-motion: reduce){
  .kse-glimmer-btn::after,
  .kse-glimmer-btn:hover::after,
  .kse-glimmer-btn--gold::after{
    animation: none !important;
    opacity: 0 !important;
  }
}