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. Local-only emoji stack (no remote font import) */
.badge-icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji; 
  font-size: 2.5rem;
  line-height: 1;
}
    :root{--primary:#82c99f;--secondary:#6a8caf;--highlight:#ffb74d;--dark:#333;--cute-bg:#f0f9ff;--grass:#dcfce7}
body.modal-open {
    overflow: hidden !important;
    height: auto;
    min-height: 100%;
    max-height: none;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    user-select: none;          /* Standard */
    -webkit-user-select: none;  /* Safari/Chrome */
    -moz-user-select: none;     /* Firefox */
}

html[data-kse-device-tier="phone"] body.modal-open {
    position: static !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    background: #eaf1ff !important;
}
    
    @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:visible; 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;overflow:visible!important}
    #map-wrapper-stable #map{border-radius:32px; overflow:hidden;}
    #map-wrapper-stable.fullscreen #map{border-radius:0;}
    .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);}
.map-ctl.map-ctl-img{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;overflow:visible !important;}
.map-ctl.map-ctl-img:active{transform:translateY(2px); box-shadow:none !important;}
.map-ctl.map-ctl-img:hover{transform:translateY(0);}
.map-ctl.map-ctl-img:hover img{
    filter:
        drop-shadow(0 6px 10px rgba(0,0,0,0.18))
        drop-shadow(0 0 24px rgba(255, 210, 130, 0.95))
        drop-shadow(0 0 48px rgba(255, 170, 80, 0.7)) !important;
}
.map-ctl.map-ctl-img:hover{
    filter:
        drop-shadow(0 0 22px rgba(255, 210, 130, 0.7))
        drop-shadow(0 0 42px rgba(255, 170, 80, 0.5)) !important;
}
.map-ctl-img-lg{width:160px; height:auto; display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.18));}
.map-ctl-img-sm{width:56px; height:auto; display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.18));}
@media (max-width: 820px){
  .map-ctl-img-lg{width:128px;}
  .map-ctl-img-sm{width:44px;}
}
@media (max-width: 640px){
  .map-ctl-img-lg{width:108px;}
  .map-ctl-img-sm{width:40px;}
}
    .ctl-tl {top: calc(env(safe-area-inset-top) + 50px); left: 24px;}
    .ctl-tr{top:32px;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)}
    /* Custom month slider uses its own ring/orb, so hide native thumbs to prevent Safari drift/double-rings */
    input[type=range].kse-month-range::-webkit-slider-thumb{
        -webkit-appearance:none;
        appearance:none;
        width:44px;
        height:44px;
        border:0;
        border-radius:50%;
        background:transparent;
        box-shadow:none;
    }
    input[type=range].kse-month-range::-moz-range-thumb{
        width:44px;
        height:44px;
        border:0;
        border-radius:50%;
        background:transparent;
        box-shadow:none;
    }
    input[type=range].kse-month-range::-ms-thumb{
        width:44px;
        height:44px;
        border:0;
        border-radius:50%;
        background:transparent;
        box-shadow:none;
    }
    
    /* --- 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-overlay.kse-passport-overlay{
      background:
        radial-gradient(110% 110% at 50% 12%, rgba(255, 223, 152, 0.26) 0%, rgba(239, 158, 71, 0.14) 34%, rgba(70, 38, 21, 0.56) 74%),
        rgba(64, 37, 22, 0.52);
      backdrop-filter: blur(9px) saturate(110%);
      -webkit-backdrop-filter: blur(9px) saturate(110%);
    }
    .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}
    .kse-passport-modal-shell{
      position:relative;
      width:min(980px, 94vw) !important;
      max-width:min(980px, 94vw) !important;
      height:min(84vh, 760px) !important;
      border-radius:34px !important;
      border:6px solid #f6dfb6 !important;
      overflow: hidden !important;
      background:
        linear-gradient(180deg, rgba(136,82,44,0.96) 0%, rgba(116,68,33,0.98) 100%),
        repeating-linear-gradient(90deg, rgba(255,226,168,0.08) 0 12px, rgba(79,45,21,0.08) 12px 24px);
      box-shadow:0 34px 76px rgba(16,8,3,0.56), 0 0 0 3px rgba(255,233,189,0.48) inset !important;
      isolation:isolate;
    }
    .kse-passport-modal-shell::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,248,232,0.12) 0%, rgba(255,224,170,0.06) 100%);
      z-index:0;
    }
    .kse-passport-modal-burst{
      display:none !important;
    }
    .kse-passport-modal-header{
      background:
        linear-gradient(180deg, rgba(255,244,214,0.98) 0%, rgba(247,222,172,0.98) 56%, rgba(232,200,145,0.98) 100%) !important;
      border-bottom:3px solid rgba(147,90,42,0.32) !important;
      color:#6a3b1e !important;
      text-shadow:0 1px 0 rgba(255,255,255,0.56);
    }
    .kse-passport-modal-header h2{color:#6a3b1e !important;}
    .kse-passport-modal-header p{color:#865026 !important;}
    .kse-passport-modal-close{color:#9c632e !important;}
    .kse-passport-modal-close:hover{color:#724118 !important;}
    .kse-passport-modal-content{
      position: relative;
      background:
        linear-gradient(180deg, rgba(255,243,217,0.94) 0%, rgba(246,224,181,0.92) 100%) !important;
      border-top: 2px solid rgba(173,118,64,0.35);
    }
    .kse-passport-modal-content::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius: 0 0 28px 28px;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 44%),
        repeating-linear-gradient(90deg, rgba(144,89,44,0.06) 0 16px, rgba(222,173,115,0.05) 16px 32px);
      z-index:0;
    }
    .kse-passport-section{
      position: relative;
      z-index:1;
      background:rgba(255,251,238,0.95) !important;
      border-color:rgba(192,139,84,0.72) !important;
      box-shadow:0 12px 24px rgba(73,37,14,0.18), 0 0 0 2px rgba(255,239,201,0.62) inset;
      backdrop-filter:blur(1.5px);
      -webkit-backdrop-filter:blur(1.5px);
    }
    .kse-passport-section h3{
      color:#7d4a22 !important;
    }
    .kse-passport-section h3 i{
      color:#b87a39 !important;
    }
    .kse-passport-section .bg-\[\#82c99f\],
    .kse-passport-section .bg-\[\#ffb74d\]{
      background:#cb8a46 !important;
      color:#fff7eb !important;
      border:1px solid rgba(120,69,30,0.25) !important;
      box-shadow:0 2px 8px rgba(97,53,22,0.2) !important;
    }
    .kse-passport-section .grid{
      gap:14px !important;
    }
    .kse-passport-section .grid > div{
      position:relative;
      border-radius:24px !important;
      border-width:3px !important;
      background:
        linear-gradient(180deg, rgba(255,246,223,0.96) 0%, rgba(248,227,184,0.95) 100%),
        repeating-linear-gradient(90deg, rgba(158,104,52,0.08) 0 10px, rgba(245,212,149,0.08) 10px 20px) !important;
      box-shadow:
        0 7px 16px rgba(86,49,20,0.22),
        0 0 0 2px rgba(255,239,201,0.64) inset !important;
      overflow:hidden;
    }
    .kse-passport-section .grid > div::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
      z-index:0;
    }
    .kse-passport-section .grid > div > *{
      position:relative;
      z-index:1;
    }
    .kse-passport-section .grid > div:not([class*="opacity-50"])::before{
      content:"UNLOCKED";
      position:absolute;
      top:7px;
      right:7px;
      padding:2px 9px 3px;
      border-radius:999px;
      border:2px solid rgba(110,170,120,0.8);
      background:linear-gradient(180deg, #dff8e4 0%, #bfecc8 100%);
      color:#2a7d3f;
      font-size:10px;
      line-height:1;
      font-weight:900;
      letter-spacing:0.02em;
      box-shadow:0 2px 6px rgba(45,123,67,0.18);
      text-transform:uppercase;
      z-index:2;
    }
    .kse-passport-section .grid > div img{
      filter:
        drop-shadow(0 5px 10px rgba(72,39,15,0.26))
        drop-shadow(0 0 8px rgba(255,214,141,0.24));
    }
    .kse-passport-section .grid > div [class*="text-\\[10px\\]"],
    .kse-passport-section .grid > div [class*="text-\\[10px\\]"].md\:text-xs{
      font-size:13px;
      color:#6b4a28 !important;
      letter-spacing:0.01em;
      text-shadow:0 1px 0 rgba(255,255,255,0.58);
    }
    .kse-passport-section .grid > div[class*="opacity-50"]{
      filter:grayscale(0.5) saturate(0.72);
      box-shadow:
        0 5px 12px rgba(70,52,37,0.14),
        0 0 0 1px rgba(255,255,255,0.42) inset !important;
    }
    .kse-passport-section .grid > div[class*="opacity-50"]::before{
      content:"LOCKED";
      position:absolute;
      top:7px;
      right:7px;
      padding:2px 9px 3px;
      border-radius:999px;
      border:2px solid rgba(189,145,92,0.74);
      background:linear-gradient(180deg, #f6e6cb 0%, #e9d3ae 100%);
      color:#875a2f;
      font-size:10px;
      line-height:1;
      font-weight:900;
      letter-spacing:0.02em;
      text-transform:uppercase;
      z-index:2;
    }
    .kse-passport-modal-shell::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:26px;
      pointer-events:none;
      border:2px solid rgba(255,236,191,0.44);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(101,61,30,0.35);
      z-index:0;
    }
    .kse-passport-modal-header::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:10px;
      pointer-events:none;
      background:
        repeating-linear-gradient(90deg, rgba(121,75,36,0.22) 0 12px, rgba(255,232,189,0.08) 12px 24px);
      border-top:1px solid rgba(156,102,48,0.32);
    }
    .kse-passport-modal-content{
      background:
        radial-gradient(circle at 84% 10%, rgba(152,192,140,0.15) 0%, rgba(152,192,140,0) 45%),
        radial-gradient(circle at 14% 80%, rgba(120,165,205,0.11) 0%, rgba(120,165,205,0) 42%),
        linear-gradient(180deg, rgba(255,244,219,0.97) 0%, rgba(245,223,179,0.95) 100%) !important;
    }
    .kse-passport-section{
      border-width:3px !important;
      border-radius:28px !important;
    }
    .kse-passport-section .grid > div{
      min-height:152px;
      padding-top:22px !important;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .kse-passport-section .grid > div:hover{
      transform: translateY(-1px);
    }
    .kse-passport-section .grid > div:not([class*="opacity-50"]){
      border-color: #79cb95 !important;
      background:
        linear-gradient(180deg, rgba(226,248,235,0.95) 0%, rgba(208,238,220,0.95) 100%),
        repeating-linear-gradient(90deg, rgba(76,135,95,0.08) 0 12px, rgba(203,236,213,0.08) 12px 24px) !important;
    }
    .kse-passport-section .grid > div[class*="opacity-50"]{
      border-color: #d4c7b2 !important;
      background:
        linear-gradient(180deg, rgba(244,239,230,0.94) 0%, rgba(232,224,210,0.92) 100%) !important;
    }
    .kse-passport-section .grid > div img{
      width:68px !important;
      height:68px !important;
      object-fit:contain;
    }

    /* Mobile-only passport layout: run full-screen so cards do not clip/stack awkwardly */
    @media (max-width: 820px) {
      .modal-overlay.kse-passport-overlay{
        padding:0 !important;
        align-items:stretch !important;
        justify-content:stretch !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-shell{
        width:100vw !important;
        max-width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;
        border-radius:0 !important;
        border-width:0 !important;
        box-shadow:none !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-shell::before,
      .modal-overlay.kse-passport-overlay .kse-passport-modal-shell::after{
        border-radius:0 !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-header{
        padding:
          max(14px, calc(env(safe-area-inset-top) + 8px))
          max(14px, calc(env(safe-area-inset-right) + 8px))
          12px
          max(14px, calc(env(safe-area-inset-left) + 8px)) !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-header h2{
        font-size:clamp(28px, 7vw, 36px) !important;
        line-height:1.04 !important;
        gap:10px !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-header h2 img{
        width:36px !important;
        height:36px !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-header p{
        font-size:11px !important;
        letter-spacing:0.07em !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-close{
        font-size:40px !important;
        line-height:1 !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-modal-content{
        padding:
          14px
          max(12px, calc(env(safe-area-inset-right) + 8px))
          calc(env(safe-area-inset-bottom) + 18px)
          max(12px, calc(env(safe-area-inset-left) + 8px)) !important;
        gap:14px !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-section{
        padding:14px !important;
        border-radius:22px !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-section .grid{
        gap:12px !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div{
        min-height:126px !important;
        padding-top:14px !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div:not([class*="opacity-50"])::before,
      .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div[class*="opacity-50"]::before{
        top:6px !important;
        right:6px !important;
        padding:1px 7px 2px !important;
        font-size:8px !important;
        border-width:1.5px !important;
        letter-spacing:0.01em !important;
      }

      .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div img{
        width:52px !important;
        height:52px !important;
      }
    }

    /* Around Here modal skin (asset-driven guidebook style) */
    .kse-around-guide-overlay{
      background:
        radial-gradient(120% 95% at 50% 8%, rgba(179, 116, 56, 0.26) 0%, rgba(79, 44, 18, 0.62) 72%),
        rgba(29, 18, 10, 0.64) !important;
    }
    .kse-around-guide-shell{
      --kse-guide-paper:#d9c1a1;
      --kse-guide-paper-soft:#c9ae8a;
      --kse-guide-paper-hi:#dfc9aa;
      --kse-guide-paper-mid:#c8a884;
      --kse-guide-paper-pill:#ead9be;
      --kse-guide-card:#d8bc98;
      --kse-guide-ink:#1f2937;
      --kse-guide-ink-soft:#596474;
      --kse-guide-ink-warm:#5f4630;
      --kse-guide-bark:#6f4727;
      --kse-guide-bark-dark:#4a2d18;
      --kse-guide-bark-muted:#8a5c37;
      --kse-guide-border:#8f6236;
      --kse-guide-border-soft:#bf915f;
      --kse-guide-border-sand:#ddbd95;
      --kse-guide-green:#1f8d56;
      --kse-guide-green-light:#34a86b;
      --kse-guide-green-dark:#176940;
      --kse-guide-gold:#d08a2f;
      --kse-guide-gold-light:#d99b4a;
      --kse-guide-gold-dark:#9f5718;
      --kse-guide-blue:#2f6ea8;
      --kse-guide-blue-light:#4f89bc;
      --kse-guide-blue-dark:#1f4f7c;
      --kse-guide-blue-soft:#e8f2fb;
      --kse-guide-blue-border:#9dc2e5;
      --kse-guide-blue-border-strong:#6fa2d4;
      --kse-guide-green-soft:#e5f5ea;
      --kse-guide-green-border:#9fd8b6;
      font-family:"Avenir Next Rounded","Trebuchet MS","Avenir Next","Segoe UI",sans-serif;
      border-color:#bf915f !important;
      border-radius:34px !important;
      overflow:hidden !important;
      isolation:isolate;
      clip-path:none;
      -webkit-clip-path:none;
      background:
        linear-gradient(180deg, #8f4d1f 0%, #7a3f17 34%, #e6d6b9 34%, #e6d6b9 100%),
        url('/images/textures/cardboard-flat.opt.webp') center/240px 240px repeat !important;
      box-shadow:0 36px 78px rgba(36, 22, 12, 0.52), 0 0 0 3px rgba(226, 190, 138, 0.36) inset !important;
    }
    .kse-around-guide-shell.mobile-fullscreen-quest{
      padding-top:0 !important;
      padding-bottom:0 !important;
      background-color:#e6d6b9 !important;
    }
    .kse-around-guide-header{
      position:relative;
      display:flex;
      align-items:flex-start;
      justify-content:flex-start;
      gap:0;
      flex-wrap:nowrap;
      min-height:clamp(206px, 28vh, 250px);
      padding:8px 18px 16px !important;
      border-top-left-radius:0;
      border-top-right-radius:0;
      overflow:hidden;
    }
    .kse-around-guide-header::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      top:6px;
      height:12px;
      pointer-events:none;
      background:
        radial-gradient(circle at 8px 6px, rgba(199, 129, 56, 0.9) 0 2px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(217, 145, 73, 0.28) 0 18px, rgba(111, 67, 35, 0.12) 18px 36px);
      border-radius:999px;
      opacity:0.75;
    }
    .kse-around-guide-header::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(173, 83, 14, 0.95) 0%, rgba(120, 58, 10, 0.96) 100%),
        url('/images/textures/cardboard-flat.opt.webp') left top/220px 220px repeat;
      opacity:0.96;
    }
    .kse-around-guide-header-crest-wrap,
    .kse-around-guide-header-crest{
      display:none !important;
    }
    .kse-around-guide-header-main{
      position:relative;
      z-index:2;
      min-width:0;
      width:100%;
      flex:1 1 100%;
      display:block;
      padding-top:clamp(94px, 12.5vh, 118px);
    }
    .kse-around-guide-title-wrap{
      position:relative;
      z-index:2;
      min-width:0;
      text-align:center;
      width:fit-content;
      max-width:min(calc(100% - 152px), 780px);
      margin:4px auto 0;
      padding:0;
      border-radius:0;
      background:transparent;
    }
    .kse-around-guide-title-row{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:2px;
    }
    .kse-around-guide-title-stack{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .kse-around-guide-main-logo{
      position:absolute;
      left:50%;
      top:4px;
      transform:translateX(-50%);
      width:clamp(250px, 30vw, 420px);
      max-width:76%;
      height:auto;
      object-fit:contain;
      object-position:center center;
      border-radius:0;
      background:transparent;
      filter:drop-shadow(0 6px 14px rgba(50, 22, 5, 0.36));
      flex:0 0 auto;
      display:block;
    }
    .kse-around-guide-patch{
      width:40px;
      height:40px;
      border-radius:999px;
      border:2px solid rgba(123, 73, 34, 0.3);
      background:#fff6df;
      box-shadow:0 3px 8px rgba(63, 36, 13, 0.2);
      object-fit:cover;
    }
    .kse-around-guide-title-pill{
      display:inline-flex;
      align-items:center;
      padding:4px 9px 5px;
      border-radius:999px;
      border:2px solid var(--kse-guide-bark-muted);
      background:var(--kse-guide-paper-pill);
      color:var(--kse-guide-bark-dark);
      font-size:11px;
      font-weight:900;
      letter-spacing:0.12em;
      text-transform:uppercase;
      line-height:1;
    }
    .kse-passport-modal-header .kse-around-guide-title{
      margin:0;
      color:#eef7ff !important;
      font-size:clamp(30px, 2.9vw, 44px);
      line-height:1.04;
      text-shadow:0 1px 0 rgba(44, 23, 8, 0.16);
      font-family:"Avenir Next","Avenir Next Rounded","Trebuchet MS","Segoe UI",sans-serif;
      font-weight:800;
      letter-spacing:0.01em;
    }
    .kse-passport-modal-header .kse-around-guide-subtitle{
      margin:4px 0 0;
      color:#bfe0ff !important;
      font-size:17px;
      font-weight:700;
      text-shadow:0 1px 0 rgba(32, 24, 18, 0.22);
    }
    .kse-around-guide-header-controls{
      position:absolute;
      z-index:3;
      display:flex;
      align-items:center;
      flex-wrap:nowrap;
      gap:12px;
      right:18px;
      top:12px;
      margin-left:0;
      flex:0 0 auto;
    }
    .kse-around-guide-icon-toolbar{
      gap:9px;
    }
    .kse-around-guide-summary-controls{
      margin-left:auto;
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      align-items:center;
      justify-items:center;
      gap:10px;
      width:min(430px, 100%);
    }
    .kse-around-guide-icon-btn{
      border:2px solid var(--kse-guide-border-soft);
      border-radius:14px;
      background:#fffdf7;
      color:var(--kse-guide-ink-soft);
      min-width:58px;
      min-height:46px;
      padding:5px 7px;
      display:inline-flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:3px;
      font-size:11px;
      font-weight:900;
      letter-spacing:0.01em;
      box-shadow:0 3px 9px rgba(95, 60, 24, 0.12);
      transition:transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
      outline:none;
      -webkit-appearance:none;
      appearance:none;
      -webkit-tap-highlight-color:transparent;
    }
    .kse-around-guide-icon-btn.is-circle-btn{
      width:122px;
      min-width:122px;
      height:122px;
      min-height:122px;
      padding:14px 10px 13px;
      border:none;
      border-radius:999px;
      background:url('/images/ui/under_circle_square.opt.webp') center center/100% 100% no-repeat;
      box-shadow:none !important;
      color:#4c5564;
      overflow:hidden;
      isolation:isolate;
      display:grid;
      grid-template-rows:auto auto;
      align-content:center;
      justify-items:center;
      row-gap:5px;
      text-align:center;
    }
    .kse-around-guide-icon-btn.is-circle-btn > *{
      position:relative;
      z-index:2;
      transform:none;
    }
    .kse-around-guide-icon-btn.is-circle-btn::after{
      display:none;
    }
    .kse-around-guide-icon-btn i{
      font-size:20px;
      line-height:1;
    }
    .kse-around-guide-icon-btn span{
      font-size:12px;
      line-height:1;
      text-transform:uppercase;
      letter-spacing:0.09em;
    }
    .kse-around-guide-icon-btn.is-circle-btn i{
      font-size:34px;
      line-height:1;
      margin:0;
      color:#30586f;
      transition:color 0.16s ease, text-shadow 0.16s ease;
    }
    .kse-around-guide-icon-btn.is-circle-btn span{
      font-size:12px;
      letter-spacing:0.04em;
      line-height:1.05;
      margin:0;
      font-weight:900;
      width:100%;
      text-align:center;
      white-space:nowrap;
      color:#2f5066;
      transition:color 0.16s ease, text-shadow 0.16s ease;
    }
    .kse-around-guide-icon-btn:hover{
      transform:translateY(-1px);
      background:#ffffff;
      box-shadow:0 5px 12px rgba(95, 60, 24, 0.16);
    }
    .kse-around-guide-icon-btn:focus,
    .kse-around-guide-icon-btn:focus-visible{
      outline:none;
    }
    .kse-around-guide-icon-btn.is-circle-btn:hover{
      transform:translateY(-1px);
      box-shadow:none !important;
      background:url('/images/ui/under_circle_square.opt.webp') center center/100% 100% no-repeat;
    }
    .kse-around-guide-icon-btn.is-circle-btn:hover i,
    .kse-around-guide-icon-btn.is-circle-btn:hover span{
      color:#8f4f1f;
      text-shadow:0 0 8px rgba(255, 191, 108, 0.45);
    }
    .kse-around-guide-icon-btn.is-circle-btn:focus,
    .kse-around-guide-icon-btn.is-circle-btn:focus-visible{
      box-shadow:none !important;
    }
    .kse-around-guide-icon-btn.is-active-month{
      background:linear-gradient(180deg, var(--kse-guide-green-light) 0%, var(--kse-guide-green) 100%);
      border-color:var(--kse-guide-green-dark);
      color:#ffffff;
      box-shadow:0 6px 14px rgba(24, 107, 65, 0.32);
    }
    .kse-around-guide-icon-btn.is-circle-btn.is-active-month{
      background:url('/images/ui/under_circle_square.opt.webp') center center/100% 100% no-repeat;
      border:none;
      box-shadow:none !important;
      color:#1f5538;
    }
    .kse-around-guide-icon-btn.is-circle-btn.is-active-month i,
    .kse-around-guide-icon-btn.is-circle-btn.is-active-month span{
      color:#1d7f52;
      text-shadow:0 0 7px rgba(126, 229, 169, 0.28);
    }
    .kse-around-guide-icon-btn.is-circle-btn.is-active-month::after{
      display:none;
    }
    .kse-around-guide-icon-btn.is-active-recent{
      background:linear-gradient(180deg, var(--kse-guide-gold-light) 0%, var(--kse-guide-gold-dark) 100%);
      border-color:#8f4a14;
      color:#ffffff;
      box-shadow:0 6px 14px rgba(146, 64, 14, 0.3);
    }
    .kse-around-guide-icon-btn.is-circle-btn.is-active-recent{
      background:url('/images/ui/under_circle_square.opt.webp') center center/100% 100% no-repeat;
      border:none;
      box-shadow:none !important;
      color:#6d3b12;
    }
    .kse-around-guide-icon-btn.is-circle-btn.is-active-recent i,
    .kse-around-guide-icon-btn.is-circle-btn.is-active-recent span{
      color:#8c4a16;
      text-shadow:0 0 7px rgba(255, 207, 139, 0.32);
    }
    .kse-around-guide-icon-btn.is-circle-btn.is-active-recent::after{
      display:none;
    }
    .kse-around-guide-icon-btn.is-refresh-btn{ color:#305d8f; }
    .kse-around-guide-icon-btn.is-close-dock{
      width:86px;
      min-width:86px;
      height:86px;
      min-height:86px;
      padding:0;
      border:none;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      overflow:visible;
    }
    .kse-around-guide-icon-btn.is-close-dock:hover{
      background:transparent;
      box-shadow:none;
      transform:translateY(-1px);
    }
    .kse-around-guide-icon-btn.is-close-dock:focus,
    .kse-around-guide-icon-btn.is-close-dock:focus-visible{
      box-shadow:none;
      outline:none;
    }
    .kse-around-guide-close-dock-img{
      width:86px;
      height:86px;
      object-fit:contain;
      filter:drop-shadow(0 4px 10px rgba(75, 37, 10, 0.32));
    }
    .kse-around-guide-icon-btn.is-close-dock i{
      display:none;
    }
    .kse-around-guide-icon-btn.is-close-dock span{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip:rect(0, 0, 0, 0) !important;
      white-space:nowrap !important;
      border:0 !important;
    }
    .kse-around-guide-toggle{
      border:2px solid #cfab72;
      border-radius:999px;
      background:#fffdf7;
      color:#4b5563;
      padding:7px 12px;
      font-size:12px;
      font-weight:900;
      letter-spacing:0.01em;
      box-shadow:0 3px 9px rgba(95, 60, 24, 0.12);
      transition:transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    }
    .kse-around-guide-toggle:hover{
      transform:translateY(-1px);
      background:#ffffff;
      box-shadow:0 5px 12px rgba(95, 60, 24, 0.16);
    }
    .kse-around-guide-toggle.is-active-month{
      background:linear-gradient(180deg, #2da66a 0%, #1f8d56 100%);
      border-color:#186b41;
      color:#ffffff;
      box-shadow:0 6px 14px rgba(24, 107, 65, 0.32);
    }
    .kse-around-guide-toggle.is-active-recent{
      background:linear-gradient(180deg, #d97706 0%, #b45309 100%);
      border-color:#92400e;
      color:#ffffff;
      box-shadow:0 6px 14px rgba(146, 64, 14, 0.3);
    }
    .kse-around-guide-close{
      width:37px;
      height:37px;
      border-radius:999px;
      border:2px solid #cfab72;
      background:#fffdf7;
      color:#5a626f;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      box-shadow:0 4px 12px rgba(95, 60, 24, 0.14);
      transition:background-color 0.12s ease, transform 0.12s ease;
    }
    .kse-around-guide-close:hover{
      background:#ffffff;
      transform:translateY(-1px);
    }
    .kse-around-guide-content{
      position:relative;
      z-index:1;
      flex:1 1 auto;
      min-height:0;
      padding:16px 18px 20px !important;
      overflow-y:auto;
      overflow-x:hidden;
      max-height:none;
      -webkit-overflow-scrolling:touch;
      border-bottom-left-radius:0;
      border-bottom-right-radius:0;
      background:
        linear-gradient(180deg, rgba(230, 204, 149, 0.95) 0%, rgba(212, 181, 123, 0.95) 100%),
        repeating-linear-gradient(90deg, rgba(118, 70, 27, 0.34) 0 2px, rgba(255, 255, 255, 0) 2px 16px),
        url('/images/textures/cardboard-flat.opt.webp') left top/260px 260px repeat;
    }
    .kse-around-guide-content::before{
      display:none;
    }
    .kse-around-guide-content::after{
      display:none;
    }
    .kse-around-guide-content > *{
      position:relative;
      z-index:1;
    }
    .kse-around-guide-summary{
      position:relative;
      margin-bottom:16px;
      border:3px solid var(--kse-guide-border);
      border-radius:20px;
      padding:12px 14px 13px;
      background:linear-gradient(180deg, #ddc8aa 0%, #d2ba99 100%);
      box-shadow:0 6px 14px rgba(90, 50, 19, 0.12);
      overflow:hidden;
    }
    .kse-around-guide-meta-row{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      margin-bottom:8px;
      color:#6a4a2e;
      font-size:13px;
      font-weight:700;
    }
    .kse-around-guide-meta-row strong{
      color:#6c3f1c;
      font-size:15px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:0.03em;
    }
    .kse-around-guide-summary::after{
      display:none;
    }
    .kse-around-guide-summary::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      pointer-events:none;
      z-index:0;
      background:
        linear-gradient(180deg, rgba(221, 200, 170, 0.56) 0%, rgba(221, 200, 170, 0.42) 40%, rgba(221, 200, 170, 0.62) 72%, rgba(221, 200, 170, 0.78) 100%),
        url('/images/aroundhere_bg.opt.webp') center top/100% auto repeat-y;
      opacity:0.58;
    }
    .kse-around-guide-summary-grass{
      display:none;
    }
    .kse-around-guide-level-row{
      position:relative;
      z-index:1;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      margin-bottom:10px;
      padding-right:0;
    }
    .kse-around-guide-pill{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
      letter-spacing:0.03em;
      line-height:1;
      white-space:nowrap;
      text-transform:uppercase;
    }
    .kse-around-guide-pill-level{
      padding:6px 10px;
      border:2px solid var(--kse-guide-bark-muted);
      background:var(--kse-guide-paper-pill);
      color:var(--kse-guide-bark-dark);
      gap:6px;
    }
    .kse-around-guide-pill-tier{
      padding:6px 10px;
      border:1px solid #e8c596;
      background:#f9e3c4;
      color:var(--kse-guide-gold-dark);
    }
    .kse-around-guide-pill-history{
      padding:5px 9px;
      border:1px solid #f2c089;
      background:#fff2dd;
      color:#995115;
      font-size:10px;
    }
    .kse-around-guide-focus-row{
      position:relative;
      z-index:1;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:7px;
      margin-bottom:8px;
    }
    .kse-around-guide-focus-label{ display:none; }
    .kse-around-guide-chip{
      border-radius:999px;
      border:1px solid #d6b486;
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:0.03em;
      line-height:1;
      padding:7px 10px;
    }
    .kse-around-guide-chip.is-pin{
      background:#dafce8;
      border-color:#8adfb0;
      color:#156f45;
    }
    .kse-around-guide-chip.is-place{
      background:#e8f2ff;
      border-color:#bdd7ff;
      color:#2153b8;
    }
    .kse-around-guide-icon-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .kse-around-guide-mini-icon-btn{
      border:none;
      background:url('/images/blank_pill_button.opt.webp') center center/100% 100% no-repeat;
      color:#5a6678;
      border-radius:999px;
      min-width:138px;
      min-height:60px;
      padding:0 14px;
      font-size:12px;
      font-weight:900;
      line-height:1;
      display:grid;
      grid-template-rows:auto auto;
      align-content:center;
      justify-items:center;
      row-gap:2px;
      transition:all 0.12s ease;
      box-shadow:none;
      text-shadow:0 1px 0 rgba(255, 255, 255, 0.72);
    }
    .kse-around-guide-mini-icon-btn i{
      font-size:18px;
      line-height:1;
    }
    .kse-around-guide-mini-icon-btn span{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:0.03em;
      line-height:1;
    }
    .kse-around-guide-mini-icon-btn:hover{
      background:url('/images/blank_pill_button.opt.webp') center center/100% 100% no-repeat;
      color:#7a4a1e;
      transform:translateY(-1px);
      box-shadow:0 0 12px rgba(255, 189, 96, 0.33);
    }
    .kse-around-guide-mini-icon-btn.is-active{
      background:url('/images/blank_pill_button.opt.webp') center center/100% 100% no-repeat;
      color:#1e8b56;
      box-shadow:0 0 10px rgba(86, 186, 120, 0.28);
      text-shadow:0 0 6px rgba(113, 217, 149, 0.35);
    }
    .kse-around-guide-radius-row{
      position:relative;
      z-index:1;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
    }
    .kse-around-guide-radius-btns{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .kse-around-guide-radius-btn{
      border:none;
      border-radius:999px;
      min-width:86px;
      min-height:44px;
      padding:0 12px;
      background:url('/images/blank_pill_button.opt.webp') center center/100% 100% no-repeat;
      color:#6a4a2e;
      font-size:14px;
      font-weight:900;
      letter-spacing:0.02em;
      text-shadow:0 1px 0 rgba(255, 255, 255, 0.7);
      transition:transform 0.12s ease, color 0.12s ease, text-shadow 0.12s ease;
    }
    .kse-around-guide-radius-btn:hover{
      transform:translateY(-1px);
      color:#8b4f1f;
      text-shadow:0 0 8px rgba(255, 188, 100, 0.35);
    }
    .kse-around-guide-radius-btn.is-active{
      color:#1d7e4f;
      text-shadow:0 0 7px rgba(119, 225, 164, 0.3);
    }
    .kse-around-guide-map-scope-row{
      position:relative;
      z-index:1;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:12px;
      margin-bottom:8px;
    }
    .kse-around-guide-scope-label{
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:0.05em;
      color:var(--kse-guide-bark);
    }
    .kse-around-guide-intro{
      position:relative;
      z-index:1;
      margin:4px 0 0;
      color:var(--kse-guide-bark);
      font-size:13px;
      font-weight:800;
    }
    .kse-around-guide-tip{
      position:relative;
      z-index:1;
      margin:6px 0 0;
      color:var(--kse-guide-ink-warm);
      font-size:12px;
      font-weight:700;
    }
    .kse-around-guide-error{
      margin-bottom:14px;
      border-radius:16px;
      border:1px solid #fecaca;
      background:#fef2f2;
      color:#b91c1c;
      padding:11px 14px;
      font-size:14px;
      font-weight:800;
    }
    .kse-around-guide-loading{
      height:190px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#4b5563;
    }
    .kse-around-guide-loading-inner{
      text-align:center;
    }
    .kse-around-guide-section{
      position:relative;
      border-color:var(--kse-guide-border) !important;
      border-radius:24px !important;
      overflow:hidden !important;
      clip-path:inset(0 round 24px);
      background:
        linear-gradient(180deg, var(--kse-guide-paper-hi) 0%, var(--kse-guide-paper-mid) 100%),
        url('/images/textures/lined-paper.opt.webp') left top/300px 230px repeat !important;
      box-shadow:0 9px 20px rgba(90, 50, 19, 0.16), 0 0 0 2px rgba(255, 245, 225, 0.58) inset !important;
      padding-left:10px !important;
    }
    .kse-around-guide-section::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      pointer-events:none;
      z-index:0;
      background:
        linear-gradient(180deg, rgba(241, 231, 208, 0.44) 0%, rgba(241, 231, 208, 0.34) 40%, rgba(241, 231, 208, 0.56) 74%, rgba(241, 231, 208, 0.74) 100%),
        url('/images/aroundhere_bg.opt.webp') center top/100% auto repeat-y;
      opacity:0.5;
    }
    .kse-around-guide-section > *{
      position:relative;
      z-index:1;
    }
    .kse-around-guide-section-stripe{
      display:none;
    }
    .kse-around-guide-section-stamp{
      display:none;
    }
    .kse-around-guide-section-stamp-icon{
      display:none;
    }
    .kse-around-guide-section-head{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:6px;
      padding-left:0;
    }
    .kse-around-guide-section-title-wrap{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
    }
    .kse-around-guide-section-icon{
      width:58px;
      height:58px;
      border:none;
      background:transparent;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:none;
      overflow:visible;
    }
    .kse-around-guide-section-filter-icon{
      width:54px;
      height:54px;
      object-fit:contain;
      filter:drop-shadow(0 2px 5px rgba(44, 24, 8, 0.25));
    }
    .kse-around-guide-fallback-taxon-icon{
      width:46px;
      height:46px;
      object-fit:contain;
      filter:drop-shadow(0 2px 5px rgba(56, 33, 13, 0.25));
    }
    .kse-around-guide-section-hint{
      color:var(--kse-guide-ink-soft);
      font-size:12px;
      font-weight:800;
    }
    .kse-around-guide-history-text{
      margin:0 0 9px;
      padding-left:0;
      color:#2f5f8f;
      font-size:12px;
      font-weight:800;
      line-height:1.35;
    }
    .kse-around-guide-history-row{
      margin-bottom:9px;
      padding-left:0;
      display:flex;
      flex-wrap:wrap;
      gap:7px;
    }
    .kse-around-guide-history-chip{
      border-radius:999px;
      font-size:11px;
      font-weight:900;
      padding:6px 9px;
      border:1px solid transparent;
      line-height:1;
    }
    .kse-around-guide-history-chip.is-season{
      background:var(--kse-guide-blue-soft);
      border-color:#b7d0e6;
      color:var(--kse-guide-blue-dark);
    }
    .kse-around-guide-history-chip.is-months{
      background:var(--kse-guide-green-soft);
      border-color:var(--kse-guide-green-border);
      color:var(--kse-guide-green-dark);
    }
    .kse-around-guide-history-empty{
      margin-bottom:9px;
      padding-left:0;
      color:#6f737b;
      font-size:11px;
      font-weight:800;
    }
    .kse-around-guide-grid{
      padding-left:0;
    }
    .kse-around-guide-card{
      position:relative;
      height:246px;
      border:none;
      background:transparent;
      box-shadow:none;
      transform:none !important;
      perspective:1200px;
    }
    .kse-around-guide-card::before,
    .kse-around-guide-card::after{
      display:none;
    }
    .kse-around-guide-card-inner{
      position:relative;
      width:100%;
      height:100%;
      transform-style:preserve-3d;
      transition:transform 0.55s cubic-bezier(0.2, 0.68, 0.2, 1);
    }
    .kse-around-guide-card.is-flipped .kse-around-guide-card-inner{
      transform:rotateY(180deg);
    }
    .kse-around-guide-card-face{
      position:absolute;
      inset:0;
      backface-visibility:hidden;
      border:2px solid #e0a85b;
      border-radius:16px;
      overflow:hidden;
      background:var(--kse-guide-card);
      box-shadow:0 6px 14px rgba(78, 45, 19, 0.17);
    }
    .kse-around-guide-card-face.is-front{
      cursor:pointer;
      background:#f8eed9;
    }
    .kse-around-guide-card-face.is-front:focus-visible,
    .kse-around-guide-card-face.is-back:focus-visible{
      outline:3px solid #38bdf8;
      outline-offset:2px;
    }
    .kse-around-guide-card-face.is-back{
      transform:rotateY(180deg);
      cursor:pointer;
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:6px;
      background:
        linear-gradient(180deg, rgba(255, 250, 236, 0.97) 0%, rgba(248, 234, 199, 0.97) 100%),
        url('/images/textures/cream-paper.opt.webp') left top/180px 160px repeat;
    }
    .kse-around-guide-card-photo{
      height:148px !important;
      border-bottom:2px solid rgba(198, 140, 76, 0.34);
    }
    .kse-around-guide-rarity-tag{
      position:absolute;
      top:12px;
      left:12px;
      padding:6px 12px 7px;
      border-radius:999px;
      color:#ffffff;
      font-size:11px;
      font-weight:1000;
      letter-spacing:0.06em;
      text-transform:uppercase;
      border:2px solid rgba(255,255,255,0.72);
      line-height:1;
      text-shadow:0 1px 0 rgba(33, 25, 11, 0.34);
      box-shadow:
        0 4px 0 rgba(72, 39, 16, 0.36),
        0 9px 15px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.42);
      overflow:hidden;
      isolation:isolate;
    }
    .kse-around-guide-rarity-tag::after{
      content:"";
      position:absolute;
      left:10%;
      right:10%;
      top:2px;
      height:45%;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.04) 100%);
      pointer-events:none;
      z-index:0;
    }
    .kse-around-guide-rarity-tag > *{
      position:relative;
      z-index:1;
    }
    .kse-around-guide-rarity-tag.is-common{
      background:linear-gradient(180deg, #3bc57e 0%, #1f8d56 56%, #176940 100%);
      border-color:rgba(190, 255, 222, 0.8);
    }
    .kse-around-guide-rarity-tag.is-uncommon{
      background:linear-gradient(180deg, #4f9fe0 0%, #2f6ea8 56%, #1f4f7c 100%);
      border-color:rgba(211, 235, 255, 0.85);
    }
    .kse-around-guide-rarity-tag.is-rare{
      background:linear-gradient(180deg, #f0b548 0%, #d08a2f 56%, #9f5718 100%);
      border-color:rgba(255, 235, 184, 0.88);
    }
    .kse-around-guide-rarity-tag.is-very-rare{
      background:linear-gradient(180deg, #c87dff 0%, #9c3be8 52%, #6d1fb9 100%);
      border-color:rgba(236, 208, 255, 0.9);
    }
    .kse-around-guide-count-tag{
      position:absolute;
      top:12px;
      right:12px;
      padding:6px 12px 7px;
      border-radius:999px;
      background:linear-gradient(180deg, #3d4e67 0%, #28384e 58%, #1a2537 100%);
      color:#ffffff;
      font-size:11px;
      font-weight:900;
      border:2px solid rgba(190, 210, 236, 0.7);
      box-shadow:
        0 4px 0 rgba(14, 23, 38, 0.4),
        0 8px 13px rgba(15, 23, 42, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.35);
      line-height:1;
      letter-spacing:0.02em;
      text-shadow:0 1px 0 rgba(8, 15, 25, 0.45);
      overflow:hidden;
      isolation:isolate;
    }
    .kse-around-guide-count-tag::after{
      content:"";
      position:absolute;
      left:10%;
      right:10%;
      top:2px;
      height:42%;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.02) 100%);
      pointer-events:none;
    }
    .kse-around-guide-card-body{
      padding:14px 12px 10px;
      background:#f8eed9;
    }
    .kse-around-guide-card-tap-hint{
      margin-top:7px;
      margin-bottom:0;
      font-size:10px;
      font-weight:800;
      color:#2b5e8f;
      letter-spacing:0.01em;
    }
    .kse-around-guide-flip-btn{
      position:absolute;
      left:12px;
      bottom:12px;
      width:28px;
      height:28px;
      border-radius:999px;
      border:2px solid rgba(154, 101, 46, 0.58);
      background:rgba(255, 247, 229, 0.95);
      color:#7b4f23;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:4;
      box-shadow:0 2px 6px rgba(71, 43, 15, 0.2);
      transition:transform 0.12s ease, background-color 0.12s ease;
    }
    .kse-around-guide-flip-btn:hover{
      transform:translateY(-1px);
      background:#fff6e3;
    }
    .kse-around-guide-flip-btn i{
      font-size:12px;
      line-height:1;
    }
    .kse-around-guide-flip-btn.is-back{
      display:none;
    }
    .kse-around-guide-card-back-title{
      margin-top:2px;
      padding-right:32px;
      color:#1c2b3a;
      font-size:18px;
      font-weight:900;
      line-height:1.1;
    }
    .kse-around-guide-card-back-sci{
      color:#5f6f82;
      font-size:13px;
      font-style:italic;
      font-weight:700;
      margin-bottom:4px;
    }
    .kse-around-guide-card-back-line{
      color:#4a3a2a;
      font-size:12px;
      font-weight:800;
      line-height:1.3;
    }
    .kse-around-guide-card-back-hint{
      margin-top:auto;
      padding-top:8px;
      color:#2b5e8f;
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:0.04em;
    }
    .kse-around-guide-stamp-id{
      margin-top:8px;
      color:var(--kse-guide-bark-dark);
      font-size:10px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:0.12em;
    }
    .kse-around-guide-map-btn{
      margin-top:8px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      border:2px solid var(--kse-guide-blue-border);
      background:#eef5fc;
      color:var(--kse-guide-blue-dark);
      padding:5px 10px;
      font-size:12px;
      font-weight:900;
      line-height:1;
      transition:all 0.12s ease;
    }
    .kse-around-guide-map-btn:hover{
      background:var(--kse-guide-blue-soft);
      border-color:var(--kse-guide-blue-border-strong);
      color:#1d456d;
    }
    .kse-around-guide-empty{
      margin-left:8px;
      border-radius:12px;
      border:1px solid #dbe3ef;
      background:#ffffff;
      padding:10px 12px;
      color:#64748b;
      font-size:14px;
      font-weight:700;
    }
    .kse-around-guide-updated-at{
      margin-top:14px;
      color:#e6d8c3;
      font-size:11px;
      font-weight:800;
      text-align:right;
    }

    @media (max-width: 820px){
      .kse-around-guide-header{
        gap:8px;
        flex-wrap:wrap;
        min-height:0;
        padding:8px 12px 10px !important;
        padding-right:max(72px, calc(env(safe-area-inset-right) + 68px)) !important;
      }
      .kse-around-guide-header-main{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:4px;
        padding-top:0;
      }
      .kse-around-guide-main-logo{
        position:static;
        transform:none;
        width:clamp(150px, 54vw, 220px);
        max-width:92%;
      }
      .kse-around-guide-title{
        font-size:clamp(26px, 7.2vw, 36px);
      }
      .kse-around-guide-subtitle{
        font-size:14px;
      }
      .kse-around-guide-header-controls{
        position:absolute;
        top:6px;
        right:max(6px, calc(env(safe-area-inset-right) + 4px));
        width:auto;
        justify-content:flex-end;
        z-index:7;
      }
      .kse-around-guide-icon-btn{
        min-width:58px;
        min-height:48px;
        padding:5px 6px;
        border-radius:12px;
      }
      .kse-around-guide-icon-btn i{
        font-size:13px;
      }
      .kse-around-guide-icon-btn span{
        font-size:9px;
        letter-spacing:0.06em;
      }
      .kse-around-guide-icon-btn.is-circle-btn{
        width:90px;
        min-width:90px;
        height:90px;
        min-height:90px;
        padding:0;
      }
      .kse-around-guide-icon-btn.is-circle-btn::after{ display:none; }
      .kse-around-guide-icon-btn.is-circle-btn i{
        font-size:25px;
      }
      .kse-around-guide-icon-btn.is-circle-btn span{
        font-size:10px;
        letter-spacing:0.02em;
      }
      .kse-around-guide-icon-btn.is-close-dock,
      .kse-around-guide-close-dock-img{
        width:70px;
        height:70px;
      }
      .kse-around-guide-summary-controls{
        width:100%;
        justify-content:center;
        gap:8px;
        margin-left:0;
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }
      .kse-around-guide-mini-icon-btn{
        min-width:112px;
        min-height:52px;
        padding:0 10px;
      }
      .kse-around-guide-mini-icon-btn i{
        font-size:15px;
      }
      .kse-around-guide-mini-icon-btn span{
        font-size:11px;
      }
      .kse-around-guide-radius-row{
        gap:8px;
      }
      .kse-around-guide-radius-btn{
        min-width:76px;
        min-height:38px;
        font-size:12px;
      }
      .kse-around-guide-content{
        max-height:none;
        padding:13px 12px calc(env(safe-area-inset-bottom) + 16px) !important;
      }
      .kse-around-guide-summary{
        padding:11px 12px 12px;
      }
      .kse-around-guide-summary::after{
        width:130px;
        height:94px;
      }
      .kse-around-guide-summary-scout{
        display:none;
      }
      .kse-around-guide-summary-grass{
        width:min(380px, 86%);
        bottom:-24px;
      }
      .kse-around-guide-level-row{
        padding-right:46px;
      }
      .kse-around-guide-grid{
        padding-left:0;
      }
      .kse-around-guide-card,
      .kse-around-guide-grid .kse-around-guide-card:nth-child(2n),
      .kse-around-guide-grid .kse-around-guide-card:nth-child(3n){
        height:236px;
        transform:none;
      }
      .kse-around-guide-card-photo{
        height:132px !important;
      }
      .kse-around-guide-rarity-tag,
      .kse-around-guide-count-tag{
        top:10px;
      }
      .kse-around-guide-rarity-tag{
        left:10px;
      }
      .kse-around-guide-count-tag{
        right:10px;
      }
      .kse-around-guide-card-body{
        padding:12px 11px 9px;
      }
      .kse-around-guide-section{
        padding-left:10px !important;
      }
      .kse-around-guide-section-head{
        padding-left:0;
      }
      .kse-around-guide-history-row,
      .kse-around-guide-history-empty,
      .kse-around-guide-empty{
        margin-left:0;
        padding-left:0;
      }
    }

    @media (min-width: 821px) and (max-width: 1180px){
      .kse-around-guide-header{
        min-height:196px;
        padding:8px 14px 14px !important;
      }
      .kse-around-guide-header-main{
        padding-top:96px;
      }
      .kse-around-guide-main-logo{
        width:clamp(220px, 28vw, 340px);
        top:2px;
      }
      .kse-around-guide-title{
        font-size:clamp(24px, 3vw, 34px);
      }
      .kse-around-guide-subtitle{
        font-size:14px;
      }
      .kse-around-guide-icon-btn.is-circle-btn{
        width:106px;
        min-width:106px;
        height:106px;
        min-height:106px;
      }
      .kse-around-guide-icon-btn.is-circle-btn i{
        font-size:30px;
      }
      .kse-around-guide-icon-btn.is-circle-btn span{
        font-size:11px;
      }
      .kse-around-guide-summary-controls{
        width:min(378px, 100%);
      }
    }

    @media (min-width: 821px) and (max-height: 820px){
      .kse-around-guide-header{
        min-height:166px;
        padding:6px 14px 10px !important;
      }
      .kse-around-guide-header-main{
        padding-top:70px;
      }
      .kse-passport-modal-header .kse-around-guide-title{
        font-size:clamp(23px, 2.8vw, 30px);
        line-height:1.02;
      }
      .kse-passport-modal-header .kse-around-guide-subtitle{
        font-size:12.5px;
        line-height:1.1;
      }
    }

    @media (min-width: 821px) and (max-width: 980px){
      .kse-around-guide-header{
        min-height:180px;
        padding:6px 12px 10px !important;
      }
      .kse-around-guide-header-main{
        padding-top:82px;
      }
      .kse-around-guide-main-logo{
        width:clamp(190px, 34vw, 280px);
      }
      .kse-passport-modal-header .kse-around-guide-title{
        font-size:clamp(22px, 2.6vw, 30px);
        line-height:1.02;
      }
      .kse-passport-modal-header .kse-around-guide-subtitle{
        font-size:12px;
        line-height:1.1;
      }
    }

    .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)}
    .dash.kse-dash-shell{
      max-height:calc(100dvh - 32px);
      max-height:calc(100vh - 32px);
    }
    .dash.kse-dash-shell .kse-dash-scroll{
      min-height:0;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }
    /* --- 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;
  isolation:isolate;
  background:
    linear-gradient(rgba(106,140,175,0.03),rgba(106,140,175,0.07)),
    url('/images/start_page/optimized/land_splash.webp');
  background-size:cover;
  background-position:center 56%;
  transition:opacity 0.8s ease-out, visibility 0.8s;
}

#splash-screen::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 44% at 20% 28%, rgba(159,233,203,0.20) 0%, rgba(159,233,203,0.00) 72%),
    radial-gradient(60% 46% at 78% 22%, rgba(173,207,255,0.18) 0%, rgba(173,207,255,0.00) 72%),
    radial-gradient(56% 44% at 50% 76%, rgba(255,204,132,0.10) 0%, rgba(255,204,132,0.00) 70%);
  mix-blend-mode:screen;
  opacity:0.34;
  animation:kseSplashAurora 20s ease-in-out infinite;
}

#splash-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,0.50) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,0.42) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 36% 68%, rgba(255,255,255,0.34) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,0.28) 0 1.0px, transparent 1.1px);
  background-size:260px 260px, 320px 320px, 280px 280px, 360px 360px;
  opacity:0.16;
  animation:kseSplashDust 26s linear infinite;
}

#splash-bison-bg{
  position:absolute;
  right:clamp(20px, 3vw, 54px);
  bottom:max(clamp(12px, 2.2vh, 30px), calc(env(safe-area-inset-bottom) + 44px));
  width:clamp(94px, 10.5vw, 160px);
  height:auto;
  transform:scaleX(-1);
  transform-origin:center bottom;
  pointer-events:none;
  user-select:none;
  z-index:3;
  opacity:0.86;
  filter:drop-shadow(0 8px 12px rgba(21,15,8,0.22));
}

#splash-easel-bg{
  position:absolute;
  left:clamp(20px, 3vw, 54px);
  bottom:max(clamp(10px, 2vh, 28px), calc(env(safe-area-inset-bottom) + 42px));
  width:clamp(86px, 9.5vw, 148px);
  height:auto;
  transform:scaleX(-1);
  transform-origin:center bottom;
  pointer-events:none;
  user-select:none;
  z-index:3;
  opacity:0.78;
  filter:drop-shadow(0 8px 12px rgba(33,24,14,0.20));
}

/* Desktop garnish only: hidden by default for stability on phone/tablet layouts. */
#splash-bison-bg,
#splash-easel-bg{
  display:none;
}

@media (min-width: 1100px) and (min-height: 700px) and (hover: hover) and (pointer: fine){
  #splash-bison-bg,
  #splash-easel-bg{
    display:block;
  }
}

#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;
  position:relative;
  z-index:2;

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

  gap: clamp(8px, 2vh, 20px);
  padding: clamp(12px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(236,245,255,0.56) 0%, rgba(223,237,252,0.44) 52%, rgba(208,227,244,0.38) 100%) !important;
  border: 6px solid rgba(231,243,255,0.78) !important;
  box-shadow:
    0 22px 52px rgba(13,22,40,0.28),
    0 0 0 1px rgba(255,255,255,0.24) inset,
    0 -12px 28px rgba(49,82,114,0.14) inset !important;
  backdrop-filter: blur(5px) saturate(108%);
  -webkit-backdrop-filter: blur(5px) saturate(108%);

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

/* Start-page scenic stack: remove by deleting `kse-startpage-layered` from splash card in giant.fix14.html. */
#splash-screen > div.kse-startpage-layered{
  --kse-parallax-x: 0;
  --kse-parallax-y: 0;
  background: linear-gradient(180deg, rgba(241,248,255,0.70) 0%, rgba(230,242,251,0.60) 44%, rgba(220,236,230,0.64) 100%) !important;
  border-color: rgba(239, 248, 255, 0.84) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-box-art{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-box-art::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(132, 190, 156, 0.00) 24%,
      rgba(118, 179, 141, 0.10) 40%,
      rgba(88, 146, 109, 0.24) 54%,
      rgba(66, 114, 84, 0.30) 64%,
      rgba(78, 128, 95, 0.20) 74%,
      rgba(73, 121, 90, 0.00) 90%
    );
  opacity:0.92;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-box-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(238, 247, 255, 0.22) 0%,
      rgba(245, 251, 255, 0.08) 26%,
      rgba(251, 254, 255, 0.04) 52%,
      rgba(241, 248, 255, 0.16) 78%,
      rgba(232, 241, 251, 0.28) 100%
    );
  mix-blend-mode:soft-light;
  opacity:0.66;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-layer{
  position:absolute;
  left:0;
  right:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  will-change:transform;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-layer--sky{
  left:-7%;
  right:-7%;
  top:-6%;
  height:66%;
  background-image:url('/images/start_page/optimized/inner_sky_up.webp');
  background-position:center top;
  opacity:0.72;
  filter:saturate(1.04) brightness(1.04);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.98) 72%, rgba(0,0,0,0.00) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.98) 72%, rgba(0,0,0,0.00) 100%);
  animation:kseStartpageSkyDrift 42s ease-in-out infinite alternate;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-layer--clouds{
  left:-10%;
  right:-10%;
  top:-7%;
  height:58%;
  background-image:url('/images/start_page/optimized/inner_sky_up.webp');
  background-position:center top;
  background-size:cover;
  opacity:0.30;
  mix-blend-mode:screen;
  filter:saturate(1.08) brightness(1.10) blur(0.35px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.94) 56%, rgba(0,0,0,0.46) 78%, rgba(0,0,0,0.00) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.94) 56%, rgba(0,0,0,0.46) 78%, rgba(0,0,0,0.00) 100%);
  animation:kseStartpageCloudDrift 58s linear infinite;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-layer--hills{
  left:-8%;
  right:-8%;
  bottom:19%;
  height:28%;
  background-image:url('/images/start_page/optimized/middle_land.webp');
  background-position:center bottom;
  background-size:116% auto;
  opacity:0.90;
  filter:saturate(1.04) brightness(1.03);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.60) 22%, rgba(0,0,0,1.00) 44%, rgba(0,0,0,1.00) 82%, rgba(0,0,0,0.00) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.60) 22%, rgba(0,0,0,1.00) 44%, rgba(0,0,0,1.00) 82%, rgba(0,0,0,0.00) 100%);
  animation:kseStartpageHillBreathe 24s ease-in-out infinite;
}

#splash-screen > div.kse-startpage-layered .kse-startpage-layer--flowers{
  left:-6%;
  right:-6%;
  bottom:-1%;
  height:30%;
  background-image:url('/images/start_page/optimized/sunflower_land.webp');
  background-position:center bottom;
  background-size:112% auto;
  opacity:0.88;
  filter:saturate(1.05) brightness(1.02);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.12) 8%, rgba(0,0,0,0.44) 18%, rgba(0,0,0,0.74) 30%, rgba(0,0,0,1.00) 46%, rgba(0,0,0,1.00) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.12) 8%, rgba(0,0,0,0.44) 18%, rgba(0,0,0,0.74) 30%, rgba(0,0,0,1.00) 46%, rgba(0,0,0,1.00) 100%);
  animation:kseStartpageFlowerSway 20s ease-in-out infinite;
}

#splash-screen > div.kse-startpage-layered::before{
  display:none;
}

#splash-screen > div.kse-startpage-layered::after{
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(248, 253, 255, 0.04) 0%,
      rgba(245, 251, 255, 0.00) 30%,
      rgba(185, 214, 196, 0.08) 52%,
      rgba(130, 171, 142, 0.16) 66%,
      rgba(190, 220, 241, 0.06) 78%,
      rgba(215, 231, 247, 0.16) 100%
    );
  opacity:1;
}

#splash-screen > div.kse-startpage-layered h1{
  position:relative;
  z-index:1;
  margin:8px auto 0;
  max-width:min(760px, 94%);
  font-size:clamp(46px, 7.3vw, 98px);
  letter-spacing:-0.028em;
  transform:translate3d(calc(var(--kse-parallax-x, 0) * 1.7px), calc(var(--kse-parallax-y, 0) * 1.2px), 0);
  transition:transform 220ms ease-out;
  text-shadow:0 3px 0 rgba(32, 66, 76, 0.88), 0 10px 16px rgba(10, 18, 22, 0.34);
}

#splash-screen > div.kse-startpage-layered h2{
  position:relative;
  z-index:1;
  margin:6px auto 12px;
  max-width:min(760px, 94%);
  font-size:clamp(34px, 5vw, 66px);
  line-height:1.02;
  transform:translate3d(calc(var(--kse-parallax-x, 0) * 1.5px), calc(var(--kse-parallax-y, 0) * 1.05px), 0);
  transition:transform 220ms ease-out;
  text-shadow:0 2px 0 rgba(101, 70, 17, 0.68), 0 8px 14px rgba(20, 16, 8, 0.30);
}

#splash-screen > div.kse-startpage-layered p.text-white\/95{
  position:relative;
  z-index:1;
  margin:4px auto 0;
  max-width:min(780px, 94%);
  font-size:clamp(24px, 2.7vw, 38px);
  line-height:1.16;
  transform:translate3d(calc(var(--kse-parallax-x, 0) * 1.25px), calc(var(--kse-parallax-y, 0) * 0.85px), 0);
  transition:transform 220ms ease-out;
  color:rgba(245, 252, 249, 0.98) !important;
  text-shadow:0 3px 9px rgba(8, 18, 15, 0.42);
}

#splash-screen > div.kse-startpage-layered p.text-white\/70{
  position:relative;
  z-index:1;
  margin:8px auto 0;
  max-width:min(760px, 92%);
  font-size:clamp(14px, 1.45vw, 20px);
  transform:translate3d(calc(var(--kse-parallax-x, 0) * 0.95px), calc(var(--kse-parallax-y, 0) * 0.65px), 0);
  transition:transform 220ms ease-out;
  color:rgba(236, 247, 241, 0.92) !important;
  text-shadow:0 2px 7px rgba(8, 18, 15, 0.34);
}

#splash-screen > div.kse-startpage-layered .splash-char-container{
  width:min(100%, 980px);
  max-width:none;
  min-height:clamp(126px, 19vh, 210px);
  margin-bottom:6px;
  animation: kseSplashFloat 7.5s ease-in-out infinite;
}

#splash-screen > div.kse-startpage-layered .splash-perch{
  --kse-bird-x:57%;
  --kse-bird-bottom:18%;
  --kse-bird-drop:8px;
  position:relative;
  width:calc(100% + clamp(6px, 3.2vw, 34px));
  max-width:none;
  margin-left:calc(-1 * clamp(6px, 2.2vw, 24px));
  margin-right:calc(-1 * clamp(6px, 2.2vw, 24px));
  pointer-events:none;
  transform:translate3d(calc(var(--kse-parallax-x, 0) * 1.05px), calc(var(--kse-parallax-y, 0) * 0.78px), 0);
  transition:transform 220ms ease-out;
}

#splash-screen > div.kse-startpage-layered #splash-longbranch{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  opacity:0.98;
  filter:drop-shadow(0 8px 12px rgba(38, 48, 21, 0.22));
}

#splash-screen > div.kse-startpage-layered #splash-bincho-hero{
  position:absolute;
  left:var(--kse-bird-x);
  bottom:var(--kse-bird-bottom);
  width:clamp(248px, 36%, 438px);
  height:auto;
  transform:translate(-50%, var(--kse-bird-drop));
}

#splash-screen > div.kse-startpage-layered .splash-cta-wrap{
  transform:translate3d(calc(var(--kse-parallax-x, 0) * 2.0px), calc(var(--kse-parallax-y, 0) * 1.5px), 0);
  transition:transform 220ms ease-out;
}

#splash-screen > div::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:clamp(172px, 29vh, 270px);
  border-radius:22px 22px 18px 18px;
  pointer-events:none;
  background-image:
    repeating-conic-gradient(
      from -90deg at 50% 44%,
      rgba(88, 148, 216, 0.34) 0deg 6deg,
      rgba(190, 221, 250, 0.16) 6deg 12deg
    ),
    radial-gradient(circle at 50% 44%, rgba(212, 234, 255, 0.56) 0%, rgba(212, 234, 255, 0.24) 44%, rgba(212, 234, 255, 0.00) 76%),
    linear-gradient(180deg, rgba(196, 218, 246, 0.54) 0%, rgba(180, 206, 236, 0.30) 66%, rgba(180, 206, 236, 0.00) 100%);
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size:100% 100%, 100% 100%, 100% 100%;
  background-position:center center, center center, center center;
  opacity:0.24;
  filter:saturate(1.02) brightness(1.10) contrast(1.02);
  box-shadow:inset 0 0 0 1px rgba(232, 243, 255, 0.20);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.94) 74%, rgba(0,0,0,0.46) 90%, rgba(0,0,0,0.00) 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.94) 74%, rgba(0,0,0,0.46) 90%, rgba(0,0,0,0.00) 100%);
  animation:
    kseSplashTaxaDrift 34s ease-in-out infinite,
    kseSplashTaxaFlicker 9s step-end infinite;
  z-index:0;
}

/* Subtle haze layer to fake graded blur without heavier real blur */
#splash-screen > div::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(244, 250, 255, 0.02) 0%,
      rgba(231, 241, 251, 0.05) 36%,
      rgba(207, 224, 241, 0.11) 70%,
      rgba(188, 208, 229, 0.16) 100%
    );
  z-index:0;
}

#splash-screen > div > *{
  position:relative;
  z-index:1;
}

/* Mascot container */
.splash-char-container{
  position:relative;
  width:min(100%, 980px);
  max-width:none;
  min-height:clamp(126px, 19vh, 210px);
  margin-bottom: clamp(8px, 2vh, 24px);
  animation: kseSplashFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 14px 26px rgba(17,28,44,0.32));
}

/* Titles */
#splash-screen h1{
  font-size: clamp(32px, 6vw, 80px);
  line-height: 0.95;
  margin: 0;
  color: #f3f8fb;
  text-shadow: 0 3px 0 rgba(57, 100, 138, 0.74), 0 8px 16px rgba(14, 27, 42, 0.30);
}

#splash-screen h2{
  font-size: clamp(18px, 4vw, 42px);
  line-height: 1.05;
  margin: 0;
  color: #f8c86d;
  text-shadow: 0 2px 0 rgba(122, 78, 27, 0.58), 0 6px 12px rgba(30, 20, 10, 0.20);
}

#splash-screen p.text-white\/95{
  color: rgba(245, 250, 254, 0.98) !important;
  text-shadow: 0 2px 6px rgba(13, 23, 35, 0.30);
}

#splash-screen p.text-white\/70{
  color: rgba(234, 244, 250, 0.90) !important;
  text-shadow: 0 1px 4px rgba(13, 23, 35, 0.22);
}

.splash-cta-wrap{
  position:relative;
  width:min(760px, 100%);
  min-height:clamp(92px, 15vh, 148px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-top:clamp(4px, 1vh, 12px);
  z-index:2;
}

#splash-grass-inside{
  position:absolute;
  left:50%;
  bottom:clamp(-150px, -17vh, -88px);
  transform:translateX(-50%);
  width:clamp(300px, 44vw, 560px);
  max-width:92%;
  height:auto;
  pointer-events:none;
  user-select:none;
  opacity:0.78;
  filter:drop-shadow(0 6px 10px rgba(26, 52, 18, 0.20));
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.22) 28%, rgba(0,0,0,0.78) 56%, rgba(0,0,0,1.00) 74%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.22) 28%, rgba(0,0,0,0.78) 56%, rgba(0,0,0,1.00) 74%);
  z-index:0;
}

#splash-screen h1,
#splash-screen h2,
#splash-screen p{
  z-index:3;
}

.splash-cta-wrap #splash-start-btn{
  margin-top:0;
  margin-bottom:clamp(2px, 0.8vh, 10px);
  z-index:4;
}

/* Start Button */
#splash-start-btn{
  position:relative;
  overflow:hidden;
  font-size: clamp(18px, 3vw, 32px);
  padding: clamp(12px, 2vw, 22px) clamp(24px, 4vw, 60px);
  margin-top: 10px;
  color: #fff7ed !important;
  text-shadow: 0 2px 0 rgba(121, 62, 20, 0.56);
  background: linear-gradient(130deg, #f9b85e 0%, #ea882f 46%, #d6641f 100%) !important;
  background-size: 220% 220%;
  border-color: rgba(255, 238, 208, 0.86) !important;
  box-shadow:
    0 3px 0 #8d2450,
    0 8px 14px rgba(92, 34, 62, 0.28),
    inset 0 1px 0 rgba(255, 245, 226, 0.74),
    inset 0 -10px 18px rgba(146, 58, 16, 0.26),
    inset 0 0 22px rgba(255, 210, 118, 0.44),
    0 0 0 1px rgba(255,255,255,0.20) inset !important;
  animation: kseSplashBtnGradientShift 5.6s ease-in-out infinite;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#splash-start-btn::before{
  content:"";
  position:absolute;
  top:-12%;
  bottom:-12%;
  left:-46%;
  width:40%;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.16) 28%,
      rgba(255,255,255,0.62) 50%,
      rgba(255,255,255,0.16) 72%,
      rgba(255,255,255,0.00) 100%
    );
  transform:skewX(-18deg);
  animation:kseSplashCtaShine 5.2s ease-in-out infinite;
}


@media (hover:hover) and (pointer:fine){
  #splash-screen > div:hover{
    transform: translateY(-2px) scale(1.004);
  }
  #splash-start-btn:hover{
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow:
      0 7px 0 #8d2450,
      0 14px 22px rgba(92, 34, 62, 0.36),
      0 0 0 1px rgba(255,255,255,0.22) inset !important;
  }
}

#splash-start-btn:active{
  transform: translateY(1px);
  box-shadow:
    0 9px 0 #8d2450,
    0 16px 24px rgba(92, 34, 62, 0.38),
    0 0 0 1px rgba(255,255,255,0.22) inset !important;
}

@keyframes kseSplashAurora{
  0%{transform:translate3d(-2%, -1%, 0) scale(1);}
  50%{transform:translate3d(2%, 1%, 0) scale(1.03);}
  100%{transform:translate3d(-2%, -1%, 0) scale(1);}
}

@keyframes kseSplashDust{
  0%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(-8px, 10px, 0);}
  100%{transform:translate3d(0,0,0);}
}

@keyframes kseSplashTaxaDrift{
  0%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(-6px, 4px, 0);}
  100%{transform:translate3d(0,0,0);}
}

@keyframes kseSplashTaxaFlicker{
  0%, 26%, 30%, 54%, 60%, 100%{opacity:0.20;}
  28%, 58%{opacity:0.30;}
}

@keyframes kseSplashBtnGradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@keyframes kseSplashFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}

@keyframes kseSplashCtaPulse{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-1px) scale(1.015);}
}

@keyframes kseSplashCtaShine{
  0%, 62%{left:-42%; opacity:0;}
  66%{opacity:1;}
  82%{left:120%; opacity:0.95;}
  100%{left:120%; opacity:0;}
}

@keyframes kseStartpageSkyDrift{
  0%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -1.2px - 1.2%),
      calc(var(--kse-parallax-y, 0) * -1.0px + 0%),
      0
    ) scale(1.03);
  }
  100%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -1.2px + 1.2%),
      calc(var(--kse-parallax-y, 0) * -1.0px + 1.0%),
      0
    ) scale(1.05);
  }
}

@keyframes kseStartpageCloudDrift{
  0%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -1.5px - 1.8%),
      calc(var(--kse-parallax-y, 0) * -1.2px + 0%),
      0
    ) scale(1.045);
  }
  50%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -1.5px + 0.7%),
      calc(var(--kse-parallax-y, 0) * -1.2px + 0.45%),
      0
    ) scale(1.06);
  }
  100%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -1.5px + 1.8%),
      calc(var(--kse-parallax-y, 0) * -1.2px + 0%),
      0
    ) scale(1.045);
  }
}

@keyframes kseStartpageHillBreathe{
  0%, 100%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -1.8px + 0%),
      calc(var(--kse-parallax-y, 0) * -1.4px + 0%),
      0
    ) scale(1.01);
  }
  50%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -1.8px - 0.7%),
      calc(var(--kse-parallax-y, 0) * -1.4px - 0.5%),
      0
    ) scale(1.025);
  }
}

@keyframes kseStartpageFlowerSway{
  0%, 100%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -2.4px + 0%),
      calc(var(--kse-parallax-y, 0) * -1.8px + 0%),
      0
    ) scale(1.01);
  }
  50%{
    transform:translate3d(
      calc(var(--kse-parallax-x, 0) * -2.4px + 0.8%),
      calc(var(--kse-parallax-y, 0) * -1.8px - 0.45%),
      0
    ) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce){
  #splash-screen::before,
  #splash-screen::after,
  .splash-char-container,
  #splash-start-btn,
  #splash-start-btn::before,
  #splash-screen > div.kse-startpage-layered .kse-startpage-layer{
    animation:none !important;
  }
}

@media (max-width: 900px){
  #splash-screen > div.kse-startpage-layered .kse-startpage-layer--sky{
    height:62%;
  }
  #splash-screen > div.kse-startpage-layered .kse-startpage-layer--clouds{
    height:54%;
    opacity:0.27;
  }
  #splash-screen > div.kse-startpage-layered .kse-startpage-layer--hills{
    bottom:21%;
    height:24%;
    opacity:0.84;
  }
  #splash-screen > div.kse-startpage-layered .kse-startpage-layer--flowers{
    height:30%;
    opacity:0.88;
  }
  #splash-screen > div.kse-startpage-layered p.text-white\/95{
    font-size:clamp(20px, 4.2vw, 28px);
  }
  #splash-screen > div.kse-startpage-layered p.text-white\/70{
    font-size:clamp(12px, 2.3vw, 15px);
  }
  #splash-screen > div.kse-startpage-layered .splash-char-container{
    width:100%;
    max-width:none;
    min-height:clamp(112px, 18vh, 188px);
    margin-bottom:2px;
  }
  #splash-screen > div.kse-startpage-layered .splash-perch{
    --kse-bird-x:57%;
    --kse-bird-bottom:17%;
    --kse-bird-drop:8px;
    width:calc(100% + clamp(5px, 2.8vw, 30px));
    margin-left:calc(-1 * clamp(5px, 2vw, 20px));
    margin-right:calc(-1 * clamp(5px, 2vw, 20px));
  }
  #splash-screen > div.kse-startpage-layered #splash-bincho-hero{
    width:clamp(214px, 34%, 354px);
  }
}

@media (max-width: 1200px){
  #splash-bison-bg{
    right:clamp(14px, 2.4vw, 34px);
    width:clamp(86px, 10vw, 138px);
    bottom:max(10px, calc(env(safe-area-inset-bottom) + 40px));
    opacity:0.82;
  }

  #splash-easel-bg{
    left:clamp(14px, 2.4vw, 34px);
    width:clamp(76px, 9.2vw, 126px);
    bottom:max(8px, calc(env(safe-area-inset-bottom) + 38px));
    opacity:0.74;
  }
}

/* Keep prairie mascots desktop-only so phone/tablet layouts stay stable. */
@media (max-width: 900px), (max-height: 720px){
  #splash-bison-bg,
  #splash-easel-bg{
    display:none !important;
  }
}

@media (max-width: 1024px){
  .splash-cta-wrap{
    min-height:clamp(88px, 14vh, 130px);
    width:min(650px, 100%);
  }

  #splash-grass-inside{
    width:clamp(260px, 55vw, 470px);
    bottom:clamp(-132px, -16vh, -78px);
    max-width:95%;
    opacity:0.76;
  }

  #splash-bison-bg{
    right:clamp(10px, 2vw, 22px);
    width:clamp(78px, 11vw, 118px);
    bottom:max(8px, calc(env(safe-area-inset-bottom) + 38px));
    opacity:0.78;
  }

  #splash-easel-bg{
    left:clamp(10px, 2vw, 22px);
    width:clamp(70px, 10.5vw, 104px);
    bottom:max(6px, calc(env(safe-area-inset-bottom) + 34px));
    opacity:0.68;
  }
}

@media (max-width: 760px){
  .splash-cta-wrap{
    min-height:clamp(72px, 13vh, 110px);
    margin-top:4px;
  }

  #splash-screen > div.kse-startpage-layered .splash-char-container{
    min-height:clamp(98px, 16.8vh, 162px);
  }

  #splash-screen > div.kse-startpage-layered .splash-perch{
    --kse-bird-x:57%;
    --kse-bird-bottom:16%;
    --kse-bird-drop:8px;
    width:calc(100% + clamp(4px, 2.2vw, 20px));
    margin-left:calc(-1 * clamp(4px, 1.6vw, 14px));
    margin-right:calc(-1 * clamp(4px, 1.6vw, 14px));
  }

  #splash-screen > div.kse-startpage-layered #splash-bincho-hero{
    width:clamp(166px, 32%, 262px);
  }

  #splash-grass-inside{
    width:clamp(220px, 74vw, 380px);
    bottom:clamp(-116px, -15vh, -70px);
    max-width:98%;
    opacity:0.72;
  }

  .splash-cta-wrap #splash-start-btn{
    margin-bottom:0;
  }

  #splash-bison-bg{
    right:clamp(8px, 2vw, 14px);
    left:auto;
    width:clamp(64px, 16vw, 96px);
    bottom:max(6px, calc(env(safe-area-inset-bottom) + 34px));
    transform:scaleX(-1);
    opacity:0.72;
  }

  #splash-easel-bg{
    left:clamp(8px, 2vw, 14px);
    width:clamp(56px, 15vw, 82px);
    bottom:max(4px, calc(env(safe-area-inset-bottom) + 30px));
    opacity:0.62;
  }
}

/* === LANDSCAPE FIT FIX === */
@media (orientation: landscape) and (max-height: 520px){
  .splash-cta-wrap{
    min-height:clamp(56px, 12vh, 84px);
    margin-top:2px;
    width:min(520px, 100%);
  }

  #splash-grass-inside{
    width:clamp(190px, 28vw, 300px);
    bottom:clamp(-92px, -14vh, -58px);
    max-width:90%;
    opacity:0.68;
  }

  .splash-cta-wrap #splash-start-btn{
    margin-bottom:0;
  }

  #splash-screen > div{
    width: min(980px, calc(100vw - 14px)) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 10px 14px !important;
    border-radius: 30px !important;
    gap: 6px !important;
    transform: none !important;
  }

  #splash-screen > div::before{
    top:0;
    left:0;
    right:0;
    height:min(118px, 31vh);
    border-radius:14px 14px 12px 12px;
    background-size:100% 100%, 100% 100%, 100% 100%;
    background-position:center center, center center, center center;
  }

  .splash-char-container{
    width:100% !important;
    max-width: none !important;
    min-height:clamp(92px, 21vh, 132px) !important;
    margin-bottom: 2px !important;
  }

  #splash-screen > div.kse-startpage-layered .splash-perch{
    --kse-bird-x:57%;
    --kse-bird-bottom:15%;
    --kse-bird-drop:8px;
    width:calc(100% + clamp(4px, 2vw, 18px)) !important;
    margin-left:calc(-1 * clamp(4px, 1.6vw, 12px)) !important;
    margin-right:calc(-1 * clamp(4px, 1.6vw, 12px)) !important;
  }

  #splash-screen > div.kse-startpage-layered #splash-bincho-hero{
    width:clamp(148px, 30%, 228px) !important;
  }

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

  #splash-screen h1{
    font-size: clamp(26px, 4.4vw, 50px) !important;
    margin: 0 !important;
  }

  #splash-screen h2{
    font-size: clamp(16px, 3vw, 30px) !important;
    margin: 0 0 3px !important;
  }

  #splash-screen p{
    margin: 0 !important;
    line-height: 1.18 !important;
  }

  #splash-screen p.text-white\/95{
    font-size: clamp(12px, 1.75vw, 18px) !important;
    margin-top: 2px !important;
  }

  #splash-screen p.text-white\/70{
    font-size: clamp(10px, 1.35vw, 14px) !important;
    margin-top: 0 !important;
  }

  #splash-start-btn{
    font-size: 16px !important;
    padding: 8px 24px !important;
    border-width: 4px !important;
    margin-top: 4px !important;
  }

  #splash-bison-bg{
    right:6px;
    left:auto;
    width:clamp(54px, 8vw, 80px);
    bottom:max(4px, calc(env(safe-area-inset-bottom) + 28px));
    transform:scaleX(-1);
    opacity:0.62;
  }

  #splash-easel-bg{
    left:6px;
    width:clamp(46px, 7vw, 68px);
    bottom:max(2px, calc(env(safe-area-inset-bottom) + 24px));
    opacity:0.54;
  }
}

/* Extra-short landscape */
@media (orientation: landscape) and (max-height: 420px){
  .splash-cta-wrap{
    min-height:clamp(46px, 10vh, 68px);
    margin-top:0;
  }

  #splash-grass-inside{
    width:clamp(160px, 24vw, 230px);
    bottom:clamp(-74px, -12vh, -44px);
    opacity:0.62;
  }

  #splash-bison-bg{ display:none; }
  #splash-easel-bg{ display:none; }

  #splash-screen > div{
    padding: 8px 12px !important;
    gap: 4px !important;
    transform: none !important;
  }

  #splash-screen > div::before{
    top:0;
    left:0;
    right:0;
    height:min(88px, 24vh);
    border-radius:10px 10px 8px 8px;
    background-size:100% 100%, 100% 100%, 100% 100%;
    background-position:center center, center center, center center;
  }

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

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

  #splash-screen h1{
    font-size: clamp(20px, 3.6vw, 36px) !important;
  }

  #splash-screen h2{
    font-size: clamp(13px, 2.4vw, 22px) !important;
  }

  #splash-screen p.text-white\/95{
    font-size: clamp(10px, 1.45vw, 13px) !important;
  }

  #splash-screen p.text-white\/70{
    display: none !important;
  }

  #splash-start-btn{
    font-size: 14px !important;
    padding: 6px 18px !important;
    border-width: 3px !important;
  }

  #splash-bison-bg{ display:none; }
  #splash-easel-bg{ display:none; }
}

/* Final perch alignment lock */
#splash-screen > div.kse-startpage-layered{
  --kse-card-pad-x: 48px;
  --kse-branch-width: 80%;
  --kse-branch-shift-x: -4.75%;
  --kse-perch-y: 10px;
  --kse-bird-x: 52%;
  --kse-bird-bottom: 14%;
  --kse-bird-drop: 13px;
}

#splash-screen > div.kse-startpage-layered .splash-char-container{
  width: 100% !important;
  max-width: none !important;
}

#splash-screen > div.kse-startpage-layered .splash-perch{
  width: calc(100% + (var(--kse-card-pad-x) * 2)) !important;
  margin-left: calc(-1 * var(--kse-card-pad-x)) !important;
  margin-right: calc(-1 * var(--kse-card-pad-x)) !important;
  transform: translate3d(calc(var(--kse-parallax-x, 0) * 1.05px), calc(var(--kse-parallax-y, 0) * 0.78px + var(--kse-perch-y)), 0) !important;
}

#splash-screen > div.kse-startpage-layered #splash-longbranch{
  width: var(--kse-branch-width) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: translateX(var(--kse-branch-shift-x)) !important;
}

#splash-screen > div.kse-startpage-layered #splash-bincho-hero{
  left: var(--kse-bird-x) !important;
  bottom: var(--kse-bird-bottom) !important;
  transform: translate(-50%, var(--kse-bird-drop)) !important;
}

@media (max-width: 760px){
  #splash-screen > div.kse-startpage-layered{
    --kse-card-pad-x: 12px;
    --kse-branch-width: 84%;
    --kse-branch-shift-x: -6%;
    --kse-perch-y: 14px;
    --kse-bird-x: 55%;
    --kse-bird-bottom: 12%;
    --kse-bird-drop: 13px;
  }
}

@media (orientation: landscape) and (max-height: 520px){
  #splash-screen > div.kse-startpage-layered{
    --kse-card-pad-x: 14px;
    --kse-branch-width: 79%;
    --kse-branch-shift-x: -5.2%;
    --kse-perch-y: 8px;
    --kse-bird-x: 53%;
    --kse-bird-bottom: 13%;
    --kse-bird-drop: 13px;
  }

  #splash-screen > div.kse-startpage-layered #splash-bincho-hero{
    transform:translate(calc(-50% - 8px), calc(var(--kse-bird-drop) - 2px)) !important;
  }
}

@media (orientation: landscape) and (max-height: 420px){
  #splash-screen > div.kse-startpage-layered{
    --kse-card-pad-x: 12px;
    --kse-branch-width: 78%;
    --kse-branch-shift-x: -5.2%;
    --kse-perch-y: 6px;
    --kse-bird-x: 53%;
    --kse-bird-bottom: 13%;
    --kse-bird-drop: 13px;
  }

  #splash-screen > div.kse-startpage-layered #splash-bincho-hero{
    transform:translate(calc(-50% - 8px), calc(var(--kse-bird-drop) - 2px)) !important;
  }
}

/* Keep the easel inside the glass frame on desktop. */
#splash-screen > div #splash-easel-bg{
  position:absolute !important;
  left:auto !important;
  right:clamp(94px, 8.8vw, 156px) !important;
  bottom:clamp(8px, 1.9vh, 20px) !important;
  width:clamp(74px, 8.4vw, 120px) !important;
  transform:scaleX(-1) !important;
  transform-origin:center bottom;
  opacity:1 !important;
  z-index:2;
}

#splash-screen > div #splash-bison-bg{
  position:absolute !important;
  left:auto !important;
  right:clamp(16px, 1.8vw, 34px) !important;
  bottom:clamp(2px, 1.2vh, 12px) !important;
  width:clamp(96px, 10.8vw, 156px) !important;
  transform:scaleX(-1) !important;
  opacity:1 !important;
  z-index:3;
}

/* Keep mascots visible on smaller screens unless space is truly too tight. */
#splash-screen > div #splash-bison-bg,
#splash-screen > div #splash-easel-bg{
  display:block !important;
}

@media (max-width: 900px){
  #splash-screen > div #splash-easel-bg{
    right:clamp(68px, 12vw, 108px) !important;
    width:clamp(56px, 11vw, 92px) !important;
    bottom:clamp(2px, 1.3vh, 12px) !important;
  }
  #splash-screen > div #splash-bison-bg{
    right:clamp(8px, 2.4vw, 18px) !important;
    width:clamp(74px, 14vw, 112px) !important;
    bottom:clamp(0px, 0.8vh, 8px) !important;
  }
}

@media (orientation: landscape) and (max-height: 420px){
  #splash-screen > div #splash-bison-bg,
  #splash-screen > div #splash-easel-bg{
    display:none !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 {
    /* Keep only the fill pulse; remove dashed edge artifact. */
    animation: voidPulse 8s ease-in-out infinite;
    stroke: transparent;
    stroke-width: 0;
    stroke-dasharray: none;
    stroke-opacity: 0;
    
    /* Ensure the fill transition is smooth */
    transition: all 0.5s ease;
}

/* Hide animated world mask seams on no-wrap watercolor layer. */
#map.kse-watercolor-clean .gamified-mask-path {
    animation: none !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
    stroke-opacity: 0 !important;
    stroke-dasharray: none !important;
    fill: transparent !important;
    fill-opacity: 0 !important;
}

/* --- 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;
    }

    /* TYPE C: Mobile-only fullscreen modal (keeps desktop card layout intact) */
    .modal-box-rigid.mobile-fullscreen-quest {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        z-index: 9999 !important;
    }

    .modal-overlay:has(.mobile-fullscreen-quest) {
        padding: 0 !important;
        align-items: stretch !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: 32px !important; right: 24px !important; }
    .notch-prof      { top: 175px !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 {
            top: calc(env(safe-area-inset-top) + 14px) !important;
            left: 14px !important;
        }
        .notch-top-right {
            top: calc(env(safe-area-inset-top) + 14px) !important;
            right: 14px !important;
        }
        .notch-prof {
            top: calc(env(safe-area-inset-top) + 86px) !important;
            left: 12px !important;
            transform: scale(0.86);
            transform-origin: top left;
            gap: 10px !important;
        }
        .notch-close {
            top: calc(env(safe-area-inset-top) + 14px) !important;
            right: 14px !important;
        }
    }
    @media only screen and (max-width: 640px) {
        .notch-prof {
            top: calc(env(safe-area-inset-top) + 82px) !important;
            left: 8px !important;
            transform: scale(0.78);
            gap: 8px !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;
}

.notch-prof{
    overflow: visible !important;
}

.notch-prof .group{
    transform-origin: top center;
}

.notch-prof .group:hover{
    transform: translateY(2px) scale(1.06) !important;
}

.notch-prof .group > div.w-16.h-16{
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.notch-prof .group:hover > div.w-16.h-16{
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.8),
        0 0 16px rgba(255,200,120,0.6),
        0 0 28px rgba(255,200,120,0.4);
}

.notch-prof .group:hover img{
    filter:
        drop-shadow(0 4px 10px rgba(0,0,0,0.25))
        drop-shadow(0 0 12px rgba(255,200,120,0.7))
        drop-shadow(0 0 22px rgba(255,200,120,0.45));
}

/* 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;
  }
}

/* --- TERRAIN DOCK SKIN --- */
.smart-dock-base.dock-terrain {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
  box-shadow: none !important;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  min-height: 96px;
  overflow: visible;
  position: relative;
}

.smart-dock-base.dock-terrain::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -10%;
  height: 140%;
  background:
    radial-gradient(50% 45% at 50% 80%, rgba(255,255,255,0.45), transparent 70%),
    radial-gradient(45% 40% at 20% 85%, var(--dock-glow, rgba(56,189,248,0.35)), transparent 70%),
    radial-gradient(45% 40% at 80% 85%, var(--dock-glow, rgba(56,189,248,0.28)), transparent 70%);
  filter: blur(14px);
  opacity: 0.75;
  animation: dockGlowPulse 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.smart-dock-base.dock-terrain .dock-terrain-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.smart-dock-base.dock-terrain .dock-terrain-back {
  top: 0;
  left: -14%;
  right: -14%;
  height: 100%;
  background:
    linear-gradient(180deg, var(--dock-sky-1, #cfefff) 0%, var(--dock-sky-2, #dff7ff) 55%, var(--dock-sky-3, #eafaf2) 100%),
    radial-gradient(180% 90% at var(--dock-hill1-x, 5%) var(--dock-hill1-y, 122%), var(--dock-hill-1, #b5e2a6) 0 54%, transparent 55%),
    radial-gradient(200% 95% at var(--dock-hill2-x, 50%) var(--dock-hill2-y, 124%), var(--dock-hill-2, #9fd89a) 0 54%, transparent 55%),
    radial-gradient(180% 90% at var(--dock-hill3-x, 95%) var(--dock-hill3-y, 122%), var(--dock-hill-3, #7fc487) 0 54%, transparent 55%),
    radial-gradient(200% 85% at 20% 130%, var(--dock-hill-4, #87c69c) 0 48%, transparent 49%),
    radial-gradient(220% 90% at 80% 132%, var(--dock-hill-5, #6fb889) 0 48%, transparent 49%),
    repeating-linear-gradient(
      -6deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) calc(var(--dock-topo-gap, 10px) - 1px),
      rgba(0,0,0,var(--dock-topo-alpha, 0.1)) calc(var(--dock-topo-gap, 10px) - 1px),
      rgba(0,0,0,0) var(--dock-topo-gap, 10px)
    );
  background-repeat: no-repeat;
  background-size: 140% 140%, 180% 90%, 200% 95%, 180% 90%, 200% 85%, 220% 90%, 100% 100%;
  background-position: 50% 0%, 0% 100%, 50% 100%, 100% 100%, 0% 100%, 100% 100%, 0% 0%;
  background-blend-mode: normal, normal, normal, normal, normal, normal, multiply;
  opacity: 1;
  filter: saturate(1.04) brightness(1.02);
  animation: dockProcFloat 16s ease-in-out infinite;
  z-index: 1;
  position: absolute;
  overflow: visible;
}

.smart-dock-base.dock-terrain .dock-terrain-back::after {
  content: "";
  position: absolute;
  inset: -10% -10% 0 -10%;
  background: linear-gradient(var(--dock-band-angle, 112deg),
      var(--dock-band-1, rgba(210,240,190,0.6)) 0 22%,
      var(--dock-band-2, rgba(180,225,170,0.55)) 22% 46%,
      var(--dock-band-3, rgba(140,210,160,0.5)) 46% 70%,
      var(--dock-band-4, rgba(110,190,150,0.48)) 70% 100%);
  background-size: 240% 160%;
  background-position: 0% 100%;
  opacity: var(--dock-band-opacity, 0.55);
  mix-blend-mode: soft-light;
  filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0) 100%);
  animation: dockBandWave 18s ease-in-out infinite;
  pointer-events: none;
}

.smart-dock-base.dock-terrain .dock-terrain-grass-mid {
  left: -40px;
  right: -40px;
  bottom: 28px;
  height: 115%;
  opacity: var(--dock-grass-opacity, 0.8);
  filter: saturate(1.08);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(closest-side at 50% 96%, rgba(0,0,0,1) 96%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(closest-side at 50% 96%, rgba(0,0,0,1) 96%, rgba(0,0,0,0) 100%);
  background:
    radial-gradient(170px 60px at 160px 100%, var(--dock-grass-1, rgba(82,190,120,.62)), transparent 70%),
    radial-gradient(210px 70px at 520px 100%, var(--dock-grass-2, rgba(90,205,135,.58)), transparent 70%),
    repeating-linear-gradient(100deg,
      rgba(40,120,70,0) 0px,
      var(--dock-grass-line-1, rgba(40,120,70,.20)) 7px,
      rgba(40,120,70,0) 14px),
    repeating-linear-gradient(78deg,
      rgba(60,155,95,0) 0px,
      var(--dock-grass-line-2, rgba(60,155,95,.14)) 8px,
      rgba(60,155,95,0) 16px);
  animation: dockGrassSwayMid 4.8s ease-in-out infinite;
  z-index: 1;
}

.smart-dock-base.dock-terrain .dock-terrain-mid {
  height: 62px;
  background-image: url('/images/dock/terrain/scenic_tile_2.opt.webp');
  background-repeat: repeat-x;
  background-size: 512px 128px;
  opacity: 0.5;
  transform: translateY(-6px);
  filter: saturate(1.1);
}

.smart-dock-base.dock-terrain .dock-terrain-front {
  height: 54px;
  background-image: url('/images/dock/terrain/overlay_meadow.opt.webp');
  background-repeat: repeat-x;
  background-size: 720px 48px;
  transform-origin: bottom center;
  animation: dockGrassSway 6s ease-in-out infinite;
  opacity: 0.95;
}

.smart-dock-base.dock-terrain .dock-terrain-edge {
  height: 34px;
  background-image: url('/images/dock/terrain/bark_vine_lip.opt.webp');
  background-repeat: repeat-x;
  background-size: 720px 32px;
  transform-origin: bottom center;
  animation: dockGrassSway 7.5s ease-in-out infinite;
  opacity: 0.95;
}

.smart-dock-base.dock-terrain .dock-terrain-fade {
  top: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.8;
}

.smart-dock-base.dock-terrain .dock-terrain-mascot {
  width: 180px;
  height: 140px;
  right: 10px;
  bottom: 6px;
  background-image: var(--dock-terrain-mascot);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  opacity: 0.95;
  display: none;
}

.smart-dock-base.dock-terrain.has-mascot .dock-terrain-mascot {
  display: block;
}

.smart-dock-base.dock-terrain .dock-terrain-content {
  position: relative;
  z-index: 4;
}

.smart-dock-base.dock-terrain .glimmer-layer {
  z-index: 3;
  opacity: 1;
}

@keyframes dockBandWave {
  0% { background-position: 0% 100%; }
  50% { background-position: 20% 95%; }
  100% { background-position: 0% 100%; }
}

@keyframes dockGlowPulse {
  0% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-6px); }
  100% { opacity: 0.55; transform: translateY(0); }
}

@keyframes dockIconHoverPulseFast {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.75),
      0 0 24px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.45)),
      0 18px 30px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.32)),
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -6px 12px var(--dock-btn-accent-soft, rgba(140, 180, 210, 0.32));
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.85),
      0 0 30px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.6)),
      0 22px 36px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.4)),
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -6px 14px var(--dock-btn-accent-soft, rgba(140, 180, 210, 0.38));
  }
}

@keyframes dockIconImgPulseFast {
  0%, 100% {
    filter:
      drop-shadow(0 4px 12px rgba(35, 50, 70, 0.4))
      drop-shadow(0 0 22px var(--dock-btn-accent-glow-strong, rgba(255, 200, 120, 0.85)))
      drop-shadow(0 0 40px var(--dock-btn-accent-glow, rgba(255, 200, 120, 0.6)));
  }
  50% {
    filter:
      drop-shadow(0 5px 14px rgba(35, 50, 70, 0.5))
      drop-shadow(0 0 28px var(--dock-btn-accent-glow-strong, rgba(255, 200, 120, 0.95)))
      drop-shadow(0 0 48px var(--dock-btn-accent-glow, rgba(255, 200, 120, 0.75)));
  }
}

.smart-dock-base.dock-terrain .dock-notch {
  background: rgba(255, 255, 255, 0.92);
  border: 4px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 18px rgba(12, 60, 35, 0.2);
}

.smart-dock-base.dock-terrain .dock-btn {
  background: rgba(255, 255, 255, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 18px rgba(12, 60, 35, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  backdrop-filter: blur(6px);
}

.smart-dock-base.dock-terrain .dock-btn:hover {
  transform: translateY(-2px);
}

.smart-dock-base.dock-terrain .dock-btn:active {
  transform: translateY(1px) scale(0.96);
}

@keyframes dockGrassSway {
  0% { transform: translateY(0) skewX(-1deg); }
  50% { transform: translateY(-2px) skewX(1deg); }
  100% { transform: translateY(0) skewX(-1deg); }
}

@keyframes dockGrassSwayMid {
  0% { transform: translateX(0px) rotate(-0.25deg); }
  50% { transform: translateX(-10px) rotate(0.28deg); }
  100% { transform: translateX(0px) rotate(-0.25deg); }
}

@keyframes dockProcFloat {
  0% { transform: translateX(0%); }
  50% { transform: translateX(-3%); }
  100% { transform: translateX(0%); }
}

/* --- MAP VIEW ONLY: Procedural Dock Overlay --- */
.smart-dock-base.dock-mapview {
  isolation: isolate;
  overflow: visible;
  border-top: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  bottom: 0 !important;
  padding-bottom: max(3.25rem, calc(env(safe-area-inset-bottom) + 1.75rem)) !important;
}

/* --- MAP VIEW FLAT RESET (baseline layout) --- */
.smart-dock-base.dock-mapview.dock-flat {
  background-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.5) 54%, rgba(255,255,255,0) 55%),
    repeating-linear-gradient(90deg, #8b5220 0px, #8b5220 18px, #744015 18px, #744015 30px) !important;
  background-size: 100% 100%, 100% 56px;
  background-repeat: no-repeat;
  box-shadow: 0 -10px 22px rgba(90, 65, 35, 0.22) !important;
}
.smart-dock-base.dock-mapview.dock-flat.dock-mapview-action {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.5) 54%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(214, 154, 76, 0.86) 0%, rgba(154, 104, 48, 0.86) 55%, rgba(96, 62, 30, 0.86) 100%),
    repeating-linear-gradient(90deg, rgba(20, 8, 4, 1) 0px, rgba(20, 8, 4, 1) 12px, rgba(255, 236, 145, 1) 12px, rgba(255, 236, 145, 1) 26px),
    repeating-linear-gradient(0deg, rgba(255, 236, 198, 0.4) 0px, rgba(255, 236, 198, 0.4) 2px, rgba(255, 236, 198, 0) 2px, rgba(255, 236, 198, 0) 6px) !important;
  background-position: 0 0, 0 100%, 0 100%, 0 100%;
  background-size: 100% 100%, 100% 64px, 100% 64px, 100% 64px;
  background-repeat: no-repeat;
  box-shadow: 0 -10px 22px rgba(55, 35, 20, 0.35) !important;
}
.smart-dock-base.dock-mapview.dock-flat.dock-mapview-tools {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.5) 54%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(168, 182, 120, 0.66) 0%, rgba(122, 138, 88, 0.66) 55%, rgba(78, 96, 66, 0.66) 100%),
    repeating-linear-gradient(90deg, rgba(42, 64, 40, 0.88) 0px, rgba(42, 64, 40, 0.88) 10px, rgba(186, 200, 132, 0.8) 10px, rgba(186, 200, 132, 0.8) 22px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 2px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 6px) !important;
  background-position: 0 0, 0 100%, 0 100%, 0 100%;
  background-size: 100% 100%, 100% 64px, 100% 64px, 100% 64px;
  background-repeat: no-repeat;
  box-shadow: 0 -10px 22px rgba(40, 80, 50, 0.22) !important;
}
.smart-dock-base.dock-mapview.dock-flat .dock-wood-shelf,
.smart-dock-base.dock-mapview.dock-flat .dock-hide-tab {
  display: none !important;
}
.smart-dock-base.dock-mapview.dock-flat .dock-content-enter,
.smart-dock-base.dock-mapview.dock-flat .dock-static-group {
  transform: none !important;
}
.smart-dock-base.dock-mapview.dock-flat .dock-content-enter.overflow-x-auto {
  padding-bottom: 0 !important;
}
.smart-dock-base.dock-mapview.dock-flat .max-w-3xl {
  min-height: 156px !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.9rem !important;
  align-items: flex-end;
}

/* --- MAP VIEW: Anchor dock content to bottom of viewport (no vertical scroll, no clipping) --- */
.smart-dock-base.dock-mapview {
  min-height: 170px;
  padding-bottom: 0 !important;
  overflow-y: hidden !important;
}
.smart-dock-base.dock-mapview .max-w-3xl {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 6px);
  transform: translateX(-50%);
  width: min(96vw, 80rem);
  margin: 0;
  padding-top: 0.4rem !important;
  padding-bottom: 0.6rem !important;
  min-height: 0 !important;
  overflow-y: hidden !important;
  align-items: flex-end;
}
.smart-dock-base.dock-mapview .dock-content-enter,
.smart-dock-base.dock-mapview .dock-static-group {
  transform: none !important;
}
.smart-dock-base.dock-mapview .dock-content-enter.overflow-x-auto {
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

@keyframes dockTinyWaves {
  0% {
    background-position: 0% 0%, var(--dock-strata-offset, 22%) 100%;
  }
  50% {
    background-position: 0% 0%, calc(var(--dock-strata-offset, 22%) + var(--dock-strata-shift, 12%)) 94%;
  }
  100% {
    background-position: 0% 0%, var(--dock-strata-offset, 22%) 100%;
  }
}

@keyframes dockStrataPulse {
  0% {
    transform: translateY(0px) scaleY(0.92) skewX(-1.2deg);
  }
  50% {
    transform: translateY(-2px) scaleY(1.12) skewX(-1.2deg);
  }
  100% {
    transform: translateY(0px) scaleY(0.92) skewX(-1.2deg);
  }
}

@keyframes dockStrataHue {
  0% {
    filter: blur(0.25px) hue-rotate(calc(var(--dock-strata-hue, 0deg) - 10deg)) saturate(1.18) brightness(1.04);
  }
  50% {
    filter: blur(0.25px) hue-rotate(calc(var(--dock-strata-hue, 0deg) + 14deg)) saturate(1.28) brightness(1.06);
  }
  100% {
    filter: blur(0.25px) hue-rotate(calc(var(--dock-strata-hue, 0deg) - 10deg)) saturate(1.18) brightness(1.04);
  }
}

.smart-dock-base.dock-mapview::before {
  opacity: 0 !important;
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 140' preserveAspectRatio='none'><path d='M0 32 Q 70 -6 140 32 T 280 32 T 420 32 V 140 H 0 Z' fill='%23e9c36d'/><path d='M0 52 Q 80 0 160 52 T 320 52 T 420 52 V 140 H 0 Z' fill='%23d59a4a'/><path d='M0 72 Q 90 18 180 72 T 360 72 T 420 72 V 140 H 0 Z' fill='%23f0d08a'/><path d='M0 92 Q 80 36 160 92 T 320 92 T 420 92 V 140 H 0 Z' fill='%23c07a36'/><path d='M0 112 Q 70 56 140 112 T 280 112 T 420 112 V 140 H 0 Z' fill='%23ddb06a'/></svg>");
  background-size: 100% 100%, 260% 180%;
  background-position: 0% 0%, 22% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: dockTinyWaves 28s linear infinite, dockStrataPulse 14s ease-in-out infinite, dockStrataHue 26s ease-in-out infinite;
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.4) 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.4) 82%, rgba(0,0,0,0) 100%);
  border-radius: inherit;
}

@keyframes dockGrassWave {
  0% {
    background-position: 0% 0%, var(--dock-green-offset, 30%) 0%;
  }
  50% {
    background-position: 0% 0%, calc(var(--dock-green-offset, 30%) + var(--dock-green-shift, 6%)) 0%;
  }
  100% {
    background-position: 0% 0%, var(--dock-green-offset, 30%) 0%;
  }
}

.smart-dock-base.dock-mapview::after {
  opacity: 0 !important;
  display: none;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 70%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
  background-image:
    linear-gradient(180deg, rgba(125, 185, 120, 0.7) 0%, rgba(125, 185, 120, 0.42) 40%, rgba(125, 185, 120, 0) 72%),
    radial-gradient(160% 70% at 30% 18%, rgba(170, 220, 150, 0.32), rgba(170, 220, 150, 0) 60%);
  background-size: 100% 100%, 160% 100%;
  background-position: 0% 0%, 30% 0%;
  background-repeat: no-repeat, no-repeat;
  animation: none;
  filter: blur(0.2px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,1) 100%);
  border-radius: inherit;
  clip-path: polygon(
    0% 36%, 5% 30%, 10% 34%, 15% 26%, 20% 34%, 25% 24%, 30% 32%, 35% 22%,
    40% 30%, 45% 24%, 50% 32%, 55% 24%, 60% 32%, 65% 26%, 70% 34%, 75% 28%,
    80% 36%, 85% 30%, 90% 36%, 95% 32%, 100% 36%, 100% 100%, 0% 100%
  );
}

.smart-dock-base.dock-mapview .glimmer-layer {
  display: none !important;
}

.smart-dock-base.dock-mapview .max-w-3xl {
  position: relative;
  z-index: 6;
  overflow: visible;
  max-width: min(96vw, 80rem);
}
@media (min-width: 1280px) {
  .smart-dock-base.dock-mapview .max-w-3xl {
    max-width: min(96vw, 90rem);
  }
}

.smart-dock-base.dock-mapview .flex-grow.overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
}
.smart-dock-base.dock-mapview .flex-grow.overflow-x-auto::-webkit-scrollbar {
  display: none;
}

.smart-dock-base.dock-mapview .dock-content-enter {
  overflow: visible !important;
  padding-top: 6px;
  padding-bottom: calc(var(--dock-icon-drop-left, 5vh) + 24px);
}

/* Ensure the scrollable apps row does not clip dropped icons */
.smart-dock-base.dock-mapview .dock-content-enter.overflow-x-auto {
  overflow-y: visible !important;
  padding-bottom: calc(var(--dock-icon-drop-left, 1vh) - 0px);
}

.smart-dock-base.dock-mapview .mask-gradient-right {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

.smart-dock-base.dock-mapview .dock-notch {
  z-index: 20001 !important;
  pointer-events: none;
  transform: translateX(-50%) translateY(-15px);
}

.smart-dock-base.dock-mapview .dock-notch > button {
  pointer-events: auto;
  transform: scale(1.06);
  background: url("/images/dock/center_dock_spinner.opt.webp") center/contain no-repeat;
  border-color: transparent;
}

.smart-dock-base.dock-mapview .dock-notch > button > img {
  width: 70% !important;
  height: 70% !important;
  position: relative;
  z-index: 2;
}

.smart-dock-base.dock-mapview .dock-notch > button > div {
  z-index: 3;
}

.smart-dock-base.dock-mapview .dock-notch > button > div.bottom-1 {
  bottom: -2px !important;
  z-index: 3;
}

.smart-dock-base.dock-mapview .dock-static-group {
  overflow: visible;
}

.smart-dock-base.dock-mapview .max-w-3xl {
  padding-bottom: 1.4rem !important;
  padding-top: 3.4rem !important;
  min-height: 22vh;
  align-items: flex-end;
}

.smart-dock-base.dock-mapview .dock-content-enter {
  gap: 12px;
  align-items: flex-end;
}
.smart-dock-base.dock-mapview .dock-content-enter > * {
  margin-left: 0 !important;
}
.smart-dock-base.dock-mapview .dock-static-group {
  gap: 14px;
  align-items: flex-end;
}

/* --- MAP VIEW: Bottom-anchored dock content (all modes) + safe collapsed peek --- */
.smart-dock-base.dock-mapview {
  --dock-notch-size: 56px;
  --dock-mapview-peek: calc(env(safe-area-inset-bottom) + var(--dock-notch-size) + 6px);
  --dock-mapview-min-height: 170px;
  min-height: var(--dock-mapview-min-height) !important;
  padding-bottom: 0 !important;
  overflow-y: hidden !important;
}
.smart-dock-base.dock-mapview.dock-collapsed-peek {
  transform: translateY(100%) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}
.smart-dock-base.dock-mapview.dock-collapsed-peek::before,
.smart-dock-base.dock-mapview.dock-collapsed-peek::after {
  display: none !important;
  opacity: 0 !important;
}
.smart-dock-base.dock-mapview.dock-collapsed-peek .glimmer-layer,
.smart-dock-base.dock-mapview.dock-collapsed-peek .dock-wood-shelf,
.smart-dock-base.dock-mapview.dock-collapsed-peek .max-w-3xl {
  display: none !important;
}
.smart-dock-base.dock-mapview.dock-collapsed-peek .dock-notch {
  pointer-events: auto;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.smart-dock-base.dock-mapview.dock-collapsed-peek .dock-notch > button {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.smart-dock-base.dock-mapview .max-w-3xl {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(env(safe-area-inset-bottom) + 1px) !important;
  transform: translateX(-50%) !important;
  width: min(96vw, 90rem) !important;
  margin: 0 !important;
  padding-top: calc(var(--dock-notch-size) + 8px) !important;
  padding-bottom: 0.8rem !important;
  min-height: 0 !important;
  overflow-y: hidden !important;
  align-items: flex-end;
}
.smart-dock-base.dock-mapview .dock-content-enter,
.smart-dock-base.dock-mapview .dock-static-group {
  transform: none !important;
}
.smart-dock-base.dock-mapview .dock-content-enter {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow-y: hidden !important;
}


.smart-dock-base.dock-mapview .dock-content-enter.overflow-x-auto {
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

.smart-dock-base.dock-mapview .dock-btn {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6) 58%, rgba(255, 255, 255, 0.5) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(230, 238, 246, 0.7));
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 18px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.2)),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -6px 12px var(--dock-btn-accent-soft, rgba(120, 160, 190, 0.25));
  backdrop-filter: blur(6px);
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
  transform: translateY(var(--dock-btn-arch, 0px)) scale(var(--dock-btn-scale, 1));
  transform-origin: center bottom;
  overflow: visible;
  filter: saturate(0.92) brightness(0.98);
}
.smart-dock-base.dock-mapview .dock-btn span {
  color: #fff7d1 !important;
  text-shadow: 0 2px 4px rgba(60, 35, 15, 0.85);
  margin-top: 2px;
}
.smart-dock-base.dock-mapview .dock-btn--prize span {
  color: #5a1f1f !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 6px;
  border-radius: 999px;
  opacity: 1 !important;
}
.smart-dock-base .dock-badge-btn {
  --dock-badge-size: clamp(48px, 5vw, 58px);
  width: var(--dock-badge-size);
  height: var(--dock-badge-size);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.2s ease;
  transform: translateY(0);
}
.smart-dock-base .dock-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.smart-dock-base .dock-badge-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a3b16;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn {
  --dock-badge-size: clamp(66px, 8vw, 90px);
  margin: 0 10px;
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn img {
  filter:
    drop-shadow(0 6px 14px rgba(60, 35, 15, 0.28))
    drop-shadow(0 0 12px rgba(255, 220, 140, 0.55));
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-label {
  color: #3b2a12;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn--upload + .dock-badge-label {
  color: #ffbf6b;
  text-shadow: 0 1px 2px rgba(80, 30, 0, 0.75);
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn--inat + .dock-badge-label,
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn--spot + .dock-badge-label {
  color: #b7f3d4;
  text-shadow: 0 1px 2px rgba(10, 60, 45, 0.8);
}

.smart-dock-base .dock-label-knob i {
  display: none;
}

.smart-dock-base.dock-mapview .month-slider-shell {
  background: rgba(255, 250, 245, 0.82);
  border-color: rgba(170, 140, 110, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(40, 30, 20, 0.25);
}
.smart-dock-base.dock-mapview .month-slider-meta {
  color: #2f3f55 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn--upload img {
  filter:
    drop-shadow(0 6px 14px rgba(80, 40, 10, 0.3))
    drop-shadow(0 0 18px rgba(255, 160, 60, 0.85));
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn--inat img,
.smart-dock-base.dock-mapview.dock-mapview-action .dock-badge-btn--spot img {
  filter:
    drop-shadow(0 6px 14px rgba(20, 40, 35, 0.28))
    drop-shadow(0 0 16px rgba(90, 235, 195, 0.75));
}
.smart-dock-base .dock-badge-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(60, 35, 15, 0.25));
}
.smart-dock-base .dock-badge-btn:hover {
  transform: translateY(-1px) scale(1.04);
}
.smart-dock-base .dock-badge-btn:active {
  transform: translateY(1px) scale(0.98);
}
.smart-dock-base .dock-badge-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.15);
}
.smart-dock-base.dock-mapview .dock-badge-btn {
  --dock-badge-size: clamp(52px, 6vw, 68px);
}
.smart-dock-base.dock-mapview .dock-btn[data-highlight="true"] {
  filter: saturate(1.02) brightness(1.02);
}
.smart-dock-base.dock-mapview .dock-btn[data-active="true"] {
  filter: saturate(1.14) brightness(1.05);
  transform: translateY(var(--dock-btn-arch, 0px)) scale(calc(var(--dock-btn-scale, 1) * 1.05));
}

.smart-dock-base.dock-mapview .dock-btn::before {
  content: "";
  position: absolute;
  inset: 3px 4px auto 4px;
  height: 40%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  opacity: 0.7;
  pointer-events: none;
}

.smart-dock-base.dock-mapview .dock-btn::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--dock-btn-accent-soft, rgba(120, 160, 190, 0.25)));
  opacity: 0.9;
  pointer-events: none;
}

.smart-dock-base.dock-mapview .dock-btn:hover {
  transform: translateY(calc(var(--dock-btn-arch, 0px) - 2px)) scale(var(--dock-btn-scale-hover, 1.02));
  box-shadow:
    0 16px 24px var(--dock-btn-accent-glow, rgba(70, 100, 130, 0.24)),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 12px var(--dock-btn-accent-soft, rgba(140, 180, 210, 0.3));
}

.smart-dock-base.dock-mapview .dock-btn[data-active="true"] {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.65),
    0 0 18px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.35)),
    0 12px 18px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.24)),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -6px 12px var(--dock-btn-accent-soft, rgba(120, 160, 190, 0.25));
}
.smart-dock-base.dock-mapview .dock-btn[data-glow="true"]:hover,
.smart-dock-base.dock-mapview .dock-btn[data-active="true"]:hover {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.75),
    0 0 24px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.45)),
    0 18px 30px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.32)),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -6px 12px var(--dock-btn-accent-soft, rgba(140, 180, 210, 0.32));
  filter: saturate(1.18) brightness(1.06);
  animation: dockIconHoverPulseFast 1.1s ease-in-out infinite;
}

/* Camp + Hide should be icon-only (no square outline) in map dock */
.smart-dock-base.dock-mapview .dock-btn--camp,
.smart-dock-base.dock-mapview .dock-btn--hide {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}
.smart-dock-base.dock-mapview .dock-btn--camp::before,
.smart-dock-base.dock-mapview .dock-btn--camp::after,
.smart-dock-base.dock-mapview .dock-btn--hide::before,
.smart-dock-base.dock-mapview .dock-btn--hide::after {
  display: none !important;
}
.smart-dock-base.dock-mapview .dock-btn--camp:hover,
.smart-dock-base.dock-mapview .dock-btn--hide:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
.smart-dock-base.dock-mapview .dock-btn--hide .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn--hide:hover .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn--hide[data-active="true"] .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn--hide[data-glow="true"] .dock-icon-img {
  filter: none !important;
}
.smart-dock-base.dock-mapview .dock-btn--camp[data-active="true"],
.smart-dock-base.dock-mapview .dock-btn--hide[data-active="true"] {
  box-shadow: none !important;
  filter: none !important;
}
.smart-dock-base.dock-mapview .dock-btn--camp[data-glow="true"]:hover,
.smart-dock-base.dock-mapview .dock-btn--hide[data-glow="true"]:hover,
.smart-dock-base.dock-mapview .dock-btn--camp[data-active="true"]:hover,
.smart-dock-base.dock-mapview .dock-btn--hide[data-active="true"]:hover {
  box-shadow: none !important;
  animation: none !important;
}
.smart-dock-base.dock-mapview .dock-btn[data-glow="true"]:hover,
.smart-dock-base.dock-mapview .dock-btn[data-active="true"]:hover {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.75),
    0 0 24px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.45)),
    0 18px 30px var(--dock-btn-accent-glow, rgba(80, 110, 140, 0.32)),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -6px 12px var(--dock-btn-accent-soft, rgba(140, 180, 210, 0.32));
  filter: saturate(1.18) brightness(1.06);
  animation: dockIconHoverPulseFast 1.1s ease-in-out infinite;
}

.smart-dock-base.dock-mapview .dock-btn:active {
  transform: translateY(calc(var(--dock-btn-arch, 0px) + 1px)) scale(var(--dock-btn-scale-active, 0.98));
  box-shadow:
    0 6px 12px var(--dock-btn-accent-glow, rgba(70, 100, 130, 0.2)),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -4px 10px var(--dock-btn-accent-soft, rgba(120, 160, 190, 0.25));
}

.smart-dock-base.dock-mapview .dock-btn i {
  font-size: 1.55rem;
  filter: drop-shadow(0 2px 6px rgba(30, 50, 70, 0.3));
}

.dock-btn .dock-icon-img {
  width: var(--dock-icon-size, 84px);
  height: var(--dock-icon-size, 84px);
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(35, 50, 70, 0.35));
  transform: translateZ(0) translateY(-2px);
  transition: transform 0.18s ease;
}

.dock-btn.has-icon-img:hover .dock-icon-img {
  transform: translateZ(0) translateY(-2px) scale(1.22);
}

.dock-btn.has-icon-img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  gap: 0 !important;
  overflow: visible;
  filter: none !important;
  height: auto;
  min-height: calc(var(--dock-btn-size, 96px) + 14px);
  padding-bottom: 6px;
}

.dock-btn.has-icon-img::before,
.dock-btn.has-icon-img::after {
  display: none !important;
}

.smart-dock-base.dock-mapview .dock-btn.has-icon-img span {
  color: #4f5d6b;
}

.smart-dock-base.dock-mapview .dock-btn.has-icon-img {
  width: var(--dock-btn-size, 96px);
  height: var(--dock-btn-size, 96px);
}

.smart-dock-base.dock-mapview .dock-btn span {
  color: #4f5d6b;
  letter-spacing: 0.08em;
}

.smart-dock-base.dock-mapview .dock-btn.dock-btn--hide {
  --dock-btn-size: 56px;
  --dock-icon-size: 56px;
  --dock-btn-scale: 1;
  --dock-btn-scale-hover: 1.05;
  --dock-btn-scale-active: 0.98;
}

@media (max-width: 768px) {
  .smart-dock-base.dock-mapview .dock-btn.dock-btn--hide {
    --dock-btn-size: 46px;
    --dock-icon-size: 46px;
  }
}

.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-glow="true"] .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-active="true"] .dock-icon-img {
  filter:
    drop-shadow(0 4px 10px rgba(35, 50, 70, 0.35))
    drop-shadow(0 0 16px var(--dock-btn-accent-glow-strong, rgba(255, 200, 120, 0.7)))
    drop-shadow(0 0 30px var(--dock-btn-accent-glow, rgba(255, 200, 120, 0.45)));
}

.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-glow="true"]:hover .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-active="true"]:hover .dock-icon-img {
  filter:
    drop-shadow(0 4px 12px rgba(35, 50, 70, 0.4))
    drop-shadow(0 0 22px var(--dock-btn-accent-glow-strong, rgba(255, 200, 120, 0.85)))
    drop-shadow(0 0 40px var(--dock-btn-accent-glow, rgba(255, 200, 120, 0.6)));
  animation: dockIconImgPulseFast 1.1s ease-in-out infinite;
}

/* Map dock spot buttons (image pills) */
.smart-dock-base.dock-mapview {
  --dock-spot-size: clamp(70px, 8.1vw, 83px);
  --dock-spot-label-size: 18px;
  --dock-spot-drop: 8px;
}
.smart-dock-base.dock-mapview .dock-spot-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  width: var(--dock-spot-size);
  min-width: var(--dock-spot-size);
  height: calc(var(--dock-spot-size) + var(--dock-spot-label-size));
  transition: transform 0.16s ease, filter 0.2s ease;
  transform: translateY(calc(var(--dock-btn-arch, 0px) + var(--dock-spot-drop, 0px))) scale(var(--dock-btn-scale, 1));
  transform-origin: center bottom;
}
.smart-dock-base.dock-mapview .dock-spot-icon {
  width: var(--dock-spot-size);
  height: var(--dock-spot-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smart-dock-base.dock-mapview .dock-spot-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--dock-spot-icon-base-scale, 1));
  transform-origin: center;
  transition: transform 0.16s ease, filter 0.2s ease;
  filter: drop-shadow(0 6px 12px rgba(60, 35, 15, 0.25));
}
.smart-dock-base.dock-mapview .dock-spot-btn[data-spot-id="Hydrology"] .dock-spot-icon img,
.smart-dock-base.dock-mapview .dock-spot-btn[data-spot-id="Art"] .dock-spot-icon img {
  --dock-spot-icon-base-scale: 0.9;
}
.smart-dock-base.dock-mapview .dock-spot-text {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f8f1dd;
  text-shadow: 0 1px 2px rgba(40, 25, 10, 0.75);
  line-height: 1;
  white-space: nowrap;
  max-width: calc(var(--dock-spot-size) + 12px);
}
.smart-dock-base.dock-mapview .dock-spot-btn:hover {
  transform: translateY(calc(var(--dock-btn-arch, 0px) + var(--dock-spot-drop, 0px) - 2px)) scale(var(--dock-btn-scale-hover, 1.03));
}
.smart-dock-base.dock-mapview .dock-spot-btn:active {
  transform: translateY(calc(var(--dock-btn-arch, 0px) + var(--dock-spot-drop, 0px) + 1px)) scale(var(--dock-btn-scale-active, 0.98));
}
.smart-dock-base.dock-mapview .dock-spot-btn[data-active="true"] .dock-spot-icon img {
  filter:
    drop-shadow(0 8px 16px rgba(60, 35, 15, 0.32))
    drop-shadow(0 0 18px rgba(255, 200, 120, 0.45));
}

/* Map dock spot group: blue glow band (no pill) */
.smart-dock-base.dock-mapview .dock-spot-row {
  overflow-y: visible !important;
  align-items: flex-end;
}
.smart-dock-base.dock-mapview .dock-spot-left {
  flex: 0 0 auto;
}
.smart-dock-base.dock-mapview .dock-spot-group {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  min-width: max-content;
  gap: 10px;
  padding: 8px 12px 8px;
}

.smart-dock-base.dock-mapview .dock-spot-group::before {
  display: none;
}
.smart-dock-base.dock-mapview .dock-spot-group > * {
  position: relative;
  z-index: 1;
}

/* Utility buttons (Tools / Art Upload / iNat / Add Spot) */
.smart-dock-base.dock-mapview .dock-util-btn {
  background: linear-gradient(180deg, #3c2b1b 0%, #24170e 100%) !important;
  border: 2px solid #d4a55e !important;
  box-shadow:
    0 8px 16px rgba(30, 18, 10, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 14px rgba(255, 200, 120, 0.22) !important;
  filter: saturate(1.05) brightness(0.98) !important;
}

/* Hide tools button group in the tools dock view (tools now live in action dock) */
.smart-dock-base.dock-mapview.dock-mapview-tools .dock-right-utils {
  display: none !important;
}
.smart-dock-base.dock-mapview .dock-util-btn span {
  color: #f7e7c6 !important;
  text-shadow: 0 1px 2px rgba(30, 18, 10, 0.85);
  opacity: 0.95;
}
.smart-dock-base.dock-mapview .dock-util-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 10px 20px rgba(30, 18, 10, 0.5),
    0 0 18px rgba(255, 200, 120, 0.35);
}
.smart-dock-base.dock-mapview .dock-util-btn[data-active="true"] {
  box-shadow:
    0 0 0 2px rgba(255, 220, 170, 0.25),
    0 0 22px rgba(255, 200, 120, 0.35),
    0 10px 18px rgba(30, 18, 10, 0.5) !important;
}

/* Tools should be icon-only (no square outline) in map dock */
.smart-dock-base.dock-mapview .dock-btn--tools {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}
.smart-dock-base.dock-mapview .dock-btn--tools::before,
.smart-dock-base.dock-mapview .dock-btn--tools::after {
  display: none !important;
}
.smart-dock-base.dock-mapview .dock-btn--tools:hover,
.smart-dock-base.dock-mapview .dock-btn--tools[data-active="true"],
.smart-dock-base.dock-mapview .dock-btn--tools[data-active="true"]:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

/* Improve County label contrast on the wood background */
.smart-dock-base.dock-mapview .dock-spot-label {
  color: #f4e5c2 !important;
  text-shadow: 0 1px 2px rgba(60, 35, 15, 0.85);
  letter-spacing: 0.06em;
}

/* Labels toggle: brown/gold skin */
.smart-dock-base.dock-mapview .dock-label-toggle .dock-label-track {
  background: linear-gradient(180deg, #3c2b1b 0%, #24170e 100%) !important;
  border-color: #d4a55e !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 10px rgba(30, 18, 10, 0.35);
}
.smart-dock-base.dock-mapview .dock-label-toggle[data-active="true"] .dock-label-track {
  background: linear-gradient(180deg, #5a3b1a 0%, #2f1b0c 100%) !important;
}
.smart-dock-base.dock-mapview .dock-label-toggle .dock-label-knob {
  background: #f7e1b4 !important;
  border: 1px solid #d4a55e !important;
}

.smart-dock-base .dock-view-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a3b16;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(150, 120, 90, 0.35);
  box-shadow: 0 6px 14px rgba(40, 25, 15, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
.smart-dock-base .dock-view-label--notch {
  position: absolute;
  left: 50% !important;
  top: calc(100% + 6px) !important;
  transform: translateX(-50%) !important;
  z-index: 10006;
}
.smart-dock-base.dock-mapview .dock-view-label {
  background: rgba(255, 250, 245, 0.88);
  border-color: rgba(140, 110, 80, 0.4);
}

/* Labels toggle lives in the top-left; hide any legacy toggle inside dock rows */
.smart-dock-base .dock-content-enter .dock-label-toggle {
  display: none !important;
}

.smart-dock-base.dock-mapview .dock-wood-pill {
  background: linear-gradient(180deg, #fff2d3 0%, #f2c07a 55%, #e5a85c 100%);
  border: 3px solid #c57525;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 6px rgba(120, 60, 10, 0.35),
    0 6px 12px rgba(110, 60, 20, 0.3);
  color: #5a3b16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}

.smart-dock-base.dock-mapview .dock-wood-pill[data-active="false"] {
  opacity: 0.88;
  filter: saturate(0.95);
}

.smart-dock-base.dock-mapview .dock-wood-pill[data-active="true"] {
  background: linear-gradient(180deg, #ffe7b4 0%, #f3b45f 60%, #e59a44 100%);
  border-color: #b15b16;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 8px rgba(120, 60, 10, 0.45),
    0 8px 14px rgba(110, 60, 20, 0.35);
}

.smart-dock-base.dock-mapview .dock-wood-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 7px rgba(120, 60, 10, 0.4),
    0 10px 16px rgba(110, 60, 20, 0.35);
}
.notch-top-right{
    overflow: visible !important;
}

.notch-prof{
    overflow: visible !important;
}

.notch-prof .group{
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    will-change: transform, filter;
}

.notch-prof .group:hover{
    filter:
        drop-shadow(0 0 22px rgba(255, 210, 130, 0.95))
        drop-shadow(0 0 44px rgba(255, 170, 80, 0.7)) !important;
}

.notch-prof .group:hover i,
.notch-prof .group:hover img{
    filter:
        drop-shadow(0 0 16px rgba(255, 210, 130, 0.95))
        drop-shadow(0 0 32px rgba(255, 170, 80, 0.7)) !important;
}

.kse-player-avatar:hover .kse-player-avatar-img{
    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,0.12))
        drop-shadow(0 0 20px rgba(255, 210, 130, 0.95))
        drop-shadow(0 0 38px rgba(255, 170, 80, 0.7)) !important;
}
/* --- MAPVIEW DOCK: bottom-anchored nav below spinner (single source of truth) --- */
.smart-dock-base.dock-mapview {
  --dock-notch-size: 56px;
  --dock-nav-bottom: 10px;
  --dock-nav-drop: 36px;
  overflow: visible !important;
  padding-bottom: 0 !important;
}
.smart-dock-base.dock-mapview.dock-flat {
  --dock-nav-bottom: 0px;
  --dock-nav-drop-flat: 2px;
}
.smart-dock-base.dock-mapview .max-w-3xl {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(env(safe-area-inset-bottom) + var(--dock-nav-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(96vw, 90rem) !important;
  margin: 0 !important;
  min-height: 214px !important;
  padding-top: calc(var(--dock-notch-size) + 12px) !important;
  padding-bottom: 12px !important;
  overflow: visible !important;
  align-items: flex-end !important;
}
.smart-dock-base.dock-mapview .dock-content-enter,
.smart-dock-base.dock-mapview .dock-static-group {
  align-items: flex-end !important;
  transform: translateY(calc(var(--dock-nav-drop) + var(--dock-nav-drop-flat, 0px))) !important;
}
.smart-dock-base.dock-mapview .dock-content-enter {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow-y: visible !important;
}

.smart-dock-base.dock-mapview .dock-content-enter.overflow-x-auto {
  overflow-y: visible !important;
}

/* Map dock hover headroom so icons/glow don't clip at the top */
.smart-dock-base.dock-mapview .dock-content-enter,
.smart-dock-base.dock-mapview .dock-static-group {
  padding-top: 2px !important;
}

.smart-dock-base.dock-mapview .dock-content-enter.overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Keep map controls fully inside the top dock band. */
.smart-dock-base.dock-mapview .dock-map-controls-host {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 34px;
  transform: none !important;
  min-height: 0;
  align-items: flex-start !important;
  z-index: 12;
  pointer-events: none;
}

/* Tools view: keep top trio 5px lower than other map views. */
.smart-dock-base.dock-mapview.dock-mapview-tools .dock-map-controls-host:not(.dock-map-focus-mode) {
  top: 39px;
}

.smart-dock-base.dock-mapview .dock-map-controls-host.dock-map-focus-mode {
  top: auto;
  bottom: 12px;
  transform: none !important;
  justify-content: center !important;
  align-items: flex-end !important;
  z-index: 18;
}

.smart-dock-base.dock-mapview .dock-map-controls-row {
  min-height: 0;
  align-items: flex-start !important;
  margin-top: 0 !important;
  pointer-events: auto;
}

.smart-dock-base.dock-mapview .dock-map-controls-row .dock-label-toggle {
  margin-right: 2px;
}

.smart-dock-base.dock-mapview .dock-modes-root-map {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 148px;
  padding-top: 72px;
  overflow: visible;
}

.smart-dock-base.dock-mapview .dock-map-top-btn {
  position: relative;
  gap: 0 !important;
  min-width: 54px;
}

.smart-dock-base.dock-mapview .dock-map-top-icon-shell {
  width: 54px;
  height: 54px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.smart-dock-base.dock-mapview .dock-map-top-icon-shell.is-active {
  filter: drop-shadow(0 4px 10px rgba(84, 129, 175, 0.35));
}

.smart-dock-base.dock-mapview .dock-map-top-btn:hover .dock-map-top-icon-shell {
  transform: translateY(-1px) scale(1.04);
}

.smart-dock-base.dock-mapview .dock-map-top-btn:active .dock-map-top-icon-shell {
  transform: translateY(0) scale(0.98);
}

.smart-dock-base.dock-mapview .dock-map-top-icon-img {
  width: 46px;
  height: 46px;
}

.smart-dock-base.dock-mapview .dock-map-top-icon-img--search {
  width: 34px;
  height: 34px;
  transform: translateY(3px);
}

.smart-dock-base.dock-mapview .dock-map-top-icon-img--month {
  width: 44px;
  height: 44px;
}

.smart-dock-base.dock-mapview .dock-map-top-tip {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  padding: 0;
  margin-top: 2px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #5b3d1d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: none;
  transition: none;
  z-index: 20;
}

.smart-dock-base.dock-mapview .dock-map-controls-host.dock-map-focus-mode .dock-map-controls-row {
  width: min(96%, 980px);
  margin-left: auto;
  margin-right: auto;
  align-items: center !important;
}

.smart-dock-base.dock-mapview.dock-map-control-focus-active .dock-static-group {
  display: none !important;
}

.smart-dock-base.dock-mapview.dock-map-control-focus-active .dock-view-label--notch {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* If the top band grows, keep the center spinner visually anchored. */
.smart-dock-base.dock-mapview .dock-notch {
  transform: translateX(-50%) translateY(-24px) !important;
}

/* --- Dock clip/stack fixes (prize/tools/hub hover) --- */
.smart-dock-base.dock-mapview .dock-content-enter > * {
  position: relative;
  z-index: 8;
}

/* Prize should float above the top-left label trio, not behind it. */
.smart-dock-base.dock-mapview .dock-prize-float {
  position: relative;
  z-index: 36;
  margin-bottom: 24px;
}
.smart-dock-base.dock-mapview .dock-prize-float .dock-btn--prize {
  position: relative;
  z-index: 36;
}

/* Keep icon-image buttons above dock seam and reduce hover overshoot clipping. */
.smart-dock-base.dock-mapview .dock-btn.has-icon-img {
  position: relative;
  z-index: 10;
}
.smart-dock-base.dock-mapview .dock-btn.has-icon-img:hover,
.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-active="true"] {
  z-index: 26;
}
.smart-dock-base.dock-mapview .dock-btn.has-icon-img:hover .dock-icon-img {
  transform: translateZ(0) translateY(-2px) scale(1.12) !important;
}

/* Tools button gets its own layer so it doesn't sink behind the band when active. */
.smart-dock-base.dock-mapview .dock-util-btn,
.smart-dock-base.dock-mapview .dock-btn--tools {
  position: relative;
  z-index: 30;
}
.smart-dock-base.dock-mapview .dock-btn--tools .dock-icon-img {
  transform: translateZ(0) translateY(0) !important;
}
.smart-dock-base.dock-mapview .dock-btn--tools:hover .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn--tools[data-active="true"] .dock-icon-img {
  transform: translateZ(0) translateY(0) scale(1.08) !important;
}

/* Hard cap hover growth to prevent hub/action icon clipping against dock seam. */
.smart-dock-base.dock-mapview .dock-btn.has-icon-img:hover .dock-icon-img {
  transform: translateZ(0) translateY(-1px) scale(1.04) !important;
}
.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-active="true"] .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-active="true"]:hover .dock-icon-img {
  transform: translateZ(0) translateY(-1px) scale(1.06) !important;
}

/* Hard stacking fix: left utility cluster (prize/locate/tools) must sit over top labels row. */
.smart-dock-base.dock-mapview .dock-content-enter {
  position: relative;
  z-index: 48 !important;
}
.smart-dock-base.dock-mapview .dock-left-utils {
  position: relative;
  z-index: 72 !important;
  overflow: visible !important;
}
.smart-dock-base.dock-mapview .dock-prize-float {
  z-index: 96 !important;
  margin-bottom: 34px !important;
}
.smart-dock-base.dock-mapview .dock-prize-float .dock-btn--prize {
  z-index: 96 !important;
}

/* Tools popover must escape band clipping. */
.smart-dock-base.dock-mapview .overflow-x-auto.no-scrollbar.mask-gradient-right {
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.smart-dock-base.dock-mapview .dock-left-utils .tools-popover {
  z-index: 999999 !important;
}
.smart-dock-base.dock-mapview .dock-mobile-controls-anchor {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: visible;
}
.smart-dock-base.dock-mapview .dock-mobile-controls-tray {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 24px;
  border: 2px solid rgba(254, 242, 198, 0.95);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(236, 248, 255, 0.88)),
    url('/images/sky_bg.opt.webp') center/cover no-repeat;
  box-shadow:
    0 22px 38px rgba(120, 74, 28, 0.24),
    0 8px 18px rgba(255, 255, 255, 0.5) inset,
    0 -10px 20px rgba(118, 174, 222, 0.18) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: left bottom;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 999999;
}
.smart-dock-base.dock-mapview .dock-mobile-controls-tray::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -10px;
  width: 22px;
  height: 22px;
  border-right: 2px solid rgba(254, 242, 198, 0.95);
  border-bottom: 2px solid rgba(254, 242, 198, 0.95);
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.95), rgba(226, 242, 255, 0.9));
  transform: rotate(45deg);
  box-shadow: 8px 8px 18px rgba(120, 74, 28, 0.12);
}
.smart-dock-base.dock-mapview .dock-mobile-controls-tray.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.smart-dock-base.dock-mapview .dock-mobile-controls-item {
  position: relative;
  z-index: 1;
}
.smart-dock-base.dock-mapview .dock-mobile-controls-anchor .dock-btn--controls {
  --dock-btn-accent-glow: rgba(245, 158, 11, 0.32);
  --dock-btn-accent-glow-strong: rgba(245, 158, 11, 0.5);
}

/* Action dock: keep Upload/Add Spot/iNat truly centered regardless of left utility width. */
.smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row {
  position: relative;
  min-height: 122px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-left-utils {
  grid-column: 1;
  justify-self: start;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-badge-center-row {
  grid-column: 2;
  justify-self: center;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-badge-wrap {
  width: clamp(98px, 8.2vw, 124px);
  align-items: center;
  text-align: center;
}
.smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-badge-btn {
  margin: 0 auto !important;
}

@media (max-width: 1200px) {
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row {
    min-height: auto;
    display: flex;
    align-items: center;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-badge-center-row {
    margin-left: 8px;
  }
}

@media (max-width: 900px) {
  #map-wrapper-stable.fullscreen {
    height: 100dvh !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
  }
  .smart-dock-base.dock-mapview {
    --dock-notch-size: 50px;
    --dock-mapview-min-height: 152px;
  }
  .smart-dock-base.dock-mapview .max-w-3xl {
    width: calc(100vw - 10px) !important;
    padding-top: calc(var(--dock-notch-size) + 4px) !important;
    padding-bottom: 0.45rem !important;
  }
  .smart-dock-base.dock-mapview .dock-map-controls-host {
    transform: scale(0.9);
    transform-origin: center bottom;
  }
  .smart-dock-base.dock-mapview .dock-map-top-tip {
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: 0.03em;
    white-space: normal;
    text-align: center;
    max-width: 54px;
    margin-top: 1px;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row {
    column-gap: 2px;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-left-utils {
    transform: scale(0.9);
    transform-origin: left bottom;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-badge-center-row {
    transform: scale(0.9);
    transform-origin: center bottom;
    gap: 8px;
  }
  .smart-dock-base.dock-mapview .dock-static-group {
    transform: scale(0.9);
    transform-origin: center bottom;
    gap: 8px;
  }
  .smart-dock-base .dock-badge-label {
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-badge-wrap {
    width: clamp(72px, 17vw, 88px);
  }
}

@media (max-width: 640px) {
  .smart-dock-base.dock-mapview {
    --dock-notch-size: 46px;
    --dock-mapview-min-height: 144px;
  }
  .smart-dock-base.dock-mapview .max-w-3xl {
    width: calc(100vw - 6px) !important;
    padding-top: calc(var(--dock-notch-size) + 2px) !important;
  }
  .smart-dock-base.dock-mapview .dock-map-controls-host {
    transform: scale(0.82);
  }
  .smart-dock-base.dock-mapview .dock-map-top-btn {
    min-width: 44px;
  }
  .smart-dock-base.dock-mapview .dock-map-top-icon-shell {
    width: 44px;
    height: 44px;
  }
  .smart-dock-base.dock-mapview .dock-map-top-icon-img {
    width: 38px;
    height: 38px;
  }
  .smart-dock-base.dock-mapview .dock-map-top-icon-img--search {
    width: 28px;
    height: 28px;
  }
  .smart-dock-base.dock-mapview .dock-map-top-icon-img--month {
    width: 36px;
    height: 36px;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-left-utils {
    transform: scale(0.8);
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row--mobile-controls {
    gap: 0;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-left-utils--mobile-controls {
    transform: scale(0.9);
    transform-origin: left bottom;
    margin-right: -4px;
  }
  .smart-dock-base.dock-mapview .dock-mobile-controls-tray {
    gap: 6px;
    padding: 8px 10px;
    border-radius: 22px;
  }
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-badge-center-row {
    transform: scale(0.78);
    gap: 4px;
    margin-left: 0 !important;
  }
  .smart-dock-base.dock-mapview .dock-static-group {
    transform: scale(0.82);
    gap: 6px;
  }
  .smart-dock-base .dock-badge-label {
    font-size: 7px;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 420px) {
  .smart-dock-base.dock-mapview.dock-mapview-action .dock-action-row .dock-left-utils--mobile-controls {
    transform: scale(0.84);
    margin-right: -10px;
  }
  .smart-dock-base.dock-mapview .dock-mobile-controls-tray {
    left: -4px;
  }
  .smart-dock-base.dock-mapview .dock-mobile-controls-tray .dock-btn {
    --dock-btn-size: 54px;
  }
}

/* Centered tools modal: game card look + starburst. */
.tools-modal-overlay {
  isolation: isolate;
}
.tools-modal-veil {
  background:
    radial-gradient(120% 120% at 50% 10%, rgba(255, 225, 137, 0.25) 0%, rgba(255, 162, 59, 0.08) 34%, rgba(7, 12, 28, 0.82) 68%),
    linear-gradient(180deg, rgba(6, 12, 25, 0.82) 0%, rgba(3, 8, 20, 0.92) 100%);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.tools-modal-burst {
  z-index: 1;
}
.tools-burst-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.7);
  border: 2px solid rgba(255, 220, 138, 0.38);
  opacity: 0;
  animation: kseToolsBurstRing 2.2s ease-out infinite;
}
.tools-burst-ring--1 { width: 220px; height: 220px; animation-delay: 0s; }
.tools-burst-ring--2 { width: 360px; height: 360px; animation-delay: 0.28s; }
.tools-burst-ring--3 { width: 520px; height: 520px; animation-delay: 0.56s; }
.tools-burst-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 238, 180, 0.98) 0%, rgba(255, 176, 71, 0.9) 56%, rgba(255, 176, 71, 0) 100%);
  box-shadow: 0 0 12px rgba(255, 180, 82, 0.5);
  opacity: 0;
  animation: kseToolsSparkle 2.4s ease-in-out infinite;
}
.tools-burst-spark--1 { left: 22%; top: 28%; animation-delay: 0.1s; }
.tools-burst-spark--2 { left: 70%; top: 24%; animation-delay: 0.6s; }
.tools-burst-spark--3 { left: 80%; top: 62%; animation-delay: 1.2s; }
.tools-burst-spark--4 { left: 32%; top: 72%; animation-delay: 1.7s; }
.tools-burst-spark--5 { left: 54%; top: 40%; animation-delay: 0.95s; }

.kse-game-modal-veil {
  background:
    radial-gradient(120% 120% at 50% 10%, rgba(255, 225, 137, 0.24) 0%, rgba(255, 162, 59, 0.08) 34%, rgba(7, 12, 28, 0.78) 68%),
    linear-gradient(180deg, rgba(6, 12, 25, 0.76) 0%, rgba(3, 8, 20, 0.86) 100%);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.kse-game-modal-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.kse-game-burst-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.7);
  border: 2px solid rgba(255, 220, 138, 0.34);
  opacity: 0;
  animation: kseToolsBurstRing 2.2s ease-out infinite;
}
.kse-game-burst-ring--1 { width: 220px; height: 220px; animation-delay: 0s; }
.kse-game-burst-ring--2 { width: 360px; height: 360px; animation-delay: 0.28s; }
.kse-game-burst-ring--3 { width: 520px; height: 520px; animation-delay: 0.56s; }
.kse-game-burst-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 238, 180, 0.98) 0%, rgba(255, 176, 71, 0.9) 56%, rgba(255, 176, 71, 0) 100%);
  box-shadow: 0 0 12px rgba(255, 180, 82, 0.5);
  opacity: 0;
  animation: kseToolsSparkle 2.4s ease-in-out infinite;
}
.kse-game-burst-spark--1 { left: 22%; top: 28%; animation-delay: 0.1s; }
.kse-game-burst-spark--2 { left: 70%; top: 24%; animation-delay: 0.6s; }
.kse-game-burst-spark--3 { left: 80%; top: 62%; animation-delay: 1.2s; }
.kse-game-burst-spark--4 { left: 32%; top: 72%; animation-delay: 1.7s; }
.kse-game-burst-spark--5 { left: 54%; top: 40%; animation-delay: 0.95s; }
.kse-game-modal-dialog {
  z-index: 3;
  box-shadow:
    0 26px 56px rgba(0, 0, 0, 0.46),
    0 0 0 2px rgba(255, 241, 205, 0.7) inset,
    0 0 28px rgba(252, 177, 74, 0.22) !important;
}

@media (max-width: 820px) {
  #kse-filter-modal-root .kse-filter-modal-stage {
    inset: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #kse-filter-modal-root .kse-filter-modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
  }

  #kse-filter-modal-root .kse-filter-modal-header {
    padding:
      max(14px, calc(env(safe-area-inset-top) + 8px))
      max(14px, calc(env(safe-area-inset-right) + 8px))
      10px
      max(14px, calc(env(safe-area-inset-left) + 8px)) !important;
  }

  #kse-filter-modal-root .kse-filter-modal-title {
    font-size: clamp(1.65rem, 7vw, 2.05rem) !important;
    gap: 0.45rem !important;
  }

  #kse-filter-modal-root .kse-filter-modal-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 2rem !important;
  }

  #kse-filter-modal-root .kse-filter-modal-divider {
    margin: 0 14px !important;
  }

  #kse-filter-modal-root .kse-filter-modal-body {
    padding:
      10px
      max(14px, calc(env(safe-area-inset-right) + 8px))
      calc(env(safe-area-inset-bottom) + 16px)
      max(14px, calc(env(safe-area-inset-left) + 8px)) !important;
  }

  #kse-filter-modal-root .kse-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.52rem !important;
    margin-top: 0.72rem !important;
  }

  #kse-filter-modal-root .kse-filter-taxon-btn {
    padding: 0.45rem 0.2rem 0.38rem !important;
  }

  #kse-filter-modal-root .kse-filter-taxon-orb {
    width: clamp(80px, 26vw, 104px) !important;
    height: clamp(80px, 26vw, 104px) !important;
  }

  #kse-filter-modal-root .kse-filter-taxon-icon {
    width: clamp(60px, 20vw, 84px) !important;
    height: clamp(60px, 20vw, 84px) !important;
  }

  #kse-filter-modal-root .kse-filter-taxon-label {
    margin-top: 0.18rem !important;
    max-width: 100% !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.05em !important;
  }

  #kse-filter-modal-root .kse-filter-taxon-on-badge {
    left: 6px !important;
    top: 6px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.58rem !important;
  }

  #kse-filter-modal-root .kse-filter-footer {
    margin-top: 0.72rem !important;
    gap: 0.62rem !important;
    align-items: stretch !important;
  }

  #kse-filter-modal-root .kse-filter-help {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.56rem 0.64rem !important;
    font-size: 0.68rem !important;
    line-height: 1.32 !important;
  }

  #kse-filter-modal-root .kse-filter-help-kicker {
    font-size: 0.62rem !important;
  }

  #kse-filter-modal-root .kse-filter-help-title {
    font-size: 0.7rem !important;
  }

  #kse-filter-modal-root .kse-filter-apply-btn {
    order: 2;
    width: 100% !important;
  }
}

.tools-modal-shell {
  z-index: 3;
  border: 3px solid #9a6a2f;
  background:
    linear-gradient(180deg, rgba(255, 246, 224, 0.98) 0%, rgba(255, 236, 202, 0.98) 100%),
    repeating-linear-gradient(90deg, rgba(160, 102, 39, 0.08) 0 12px, rgba(145, 88, 33, 0.04) 12px 24px);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.46), 0 0 0 2px rgba(255, 241, 205, 0.7) inset, 0 0 28px rgba(252, 177, 74, 0.26);
  color: #4a2b17;
}
.tools-modal-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 36%);
}
.tools-modal-header {
  border-bottom: 2px dashed rgba(124, 79, 33, 0.25);
  padding-bottom: 8px;
}
.tools-modal-header-icon {
  filter: drop-shadow(0 2px 3px rgba(90, 53, 20, 0.25));
}
.tools-modal-title {
  color: #6b3f1f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.tools-modal-subtitle {
  color: #8f6234;
}
.tools-modal-close {
  border: 2px solid #c58b3b;
  color: #6b3f1f;
  background: linear-gradient(180deg, #fff0c8 0%, #ffd98f 100%);
  box-shadow: 0 2px 6px rgba(80, 45, 16, 0.18);
}
.tools-modal-close:hover {
  filter: brightness(1.03);
}
.tools-modal-action {
  border: 2px solid #cfa162;
  background: linear-gradient(180deg, #fffdf7 0%, #fff2d8 100%);
  color: #603717;
  box-shadow: 0 2px 6px rgba(109, 67, 25, 0.14);
}
.tools-modal-action:hover {
  filter: brightness(1.02);
  box-shadow: 0 4px 10px rgba(109, 67, 25, 0.2), 0 0 14px rgba(253, 189, 84, 0.2);
}
.tools-modal-action-status {
  color: #8f6234;
}
.tools-modal-action-status.is-on {
  color: #d23a22;
  text-shadow: 0 0 10px rgba(241, 102, 75, 0.26);
}
.tools-modal-section {
  border-top: 2px dashed rgba(124, 79, 33, 0.24);
}
.tools-modal-section-title {
  color: #8f6234;
}

/* Mini dock sheets (Layers + Bird Safety) */
@keyframes kseMiniDockPopIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes kseMiniDockFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes kseMiniDockBtnBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes kseMiniDockShine {
  0% {
    transform: translateX(-120%) skewX(-18deg);
    opacity: 0;
  }
  20% {
    opacity: 0.55;
  }
  100% {
    transform: translateX(240%) skewX(-18deg);
    opacity: 0;
  }
}
@keyframes kseMiniDockBadgePulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(126, 72, 18, 0.24));
  }
  50% {
    transform: scale(1.07);
    filter: drop-shadow(0 4px 9px rgba(217, 139, 30, 0.34));
  }
}
@keyframes kseMiniDockCloseBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
#kse-layer-sheet-root,
#kse-bird-safety-sheet-root {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  background: transparent;
  box-sizing: border-box;
  padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 18px);
  isolation: isolate;
}
#kse-layer-sheet-root::before,
#kse-bird-safety-sheet-root::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82px;
  background:
    linear-gradient(180deg, rgba(255, 244, 223, 0.78) 0 4px, rgba(255, 244, 223, 0) 14px),
    linear-gradient(180deg, rgba(218, 178, 121, 0.98) 0%, rgba(194, 145, 87, 0.98) 48%, rgba(150, 97, 45, 0.99) 48%, rgba(132, 84, 38, 1) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 0 45%, rgba(90, 54, 23, 0.06) 45%, rgba(90, 54, 23, 0.12) 100%),
    repeating-linear-gradient(90deg, rgba(115, 70, 31, 0.24) 0 14px, rgba(170, 127, 78, 0.24) 14px 28px);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 219, 0.86),
    inset 0 12px 18px rgba(255, 241, 216, 0.12),
    inset 0 -12px 18px rgba(87, 51, 22, 0.14),
    0 -18px 28px rgba(68, 40, 16, 0.18);
  pointer-events: none;
  z-index: 0;
}
#kse-layer-sheet-root::after,
#kse-bird-safety-sheet-root::after {
  content: none;
}
#kse-layer-sheet-root .kse-mini-dock-shell,
#kse-bird-safety-sheet-root .kse-mini-dock-shell {
  pointer-events: auto;
  margin: 0 auto;
  width: min(820px, 96vw);
  border-radius: 28px 28px 16px 16px;
  border: 3px solid rgba(253, 236, 199, 0.96);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.48)),
    url("/images/sky_bg.opt.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow:
    0 -8px 24px rgba(26, 18, 10, 0.1),
    0 18px 28px rgba(75, 48, 19, 0.16),
    0 0 0 2px rgba(189, 130, 74, 0.14) inset,
    inset 0 -5px 0 rgba(181, 124, 69, 0.18);
  backdrop-filter: blur(8px) saturate(1.04);
  padding: 12px 12px 8px;
  position: relative;
  overflow: hidden;
  animation: kseMiniDockPopIn 280ms cubic-bezier(0.22, 1, 0.36, 1), kseMiniDockFloat 4.2s ease-in-out infinite 320ms;
}
#kse-layer-sheet-root .kse-mini-dock-shell::before,
#kse-bird-safety-sheet-root .kse-mini-dock-shell::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 22px 22px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16) 34%, rgba(255, 247, 232, 0.1) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
  pointer-events: none;
}
#kse-layer-sheet-root .kse-mini-dock-shell::after,
#kse-bird-safety-sheet-root .kse-mini-dock-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,0.26), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(255,255,255,0.16), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(181, 124, 69, 0.08) 100%);
  pointer-events: none;
}
#kse-layer-sheet-root .kse-mini-dock-shell > *,
#kse-bird-safety-sheet-root .kse-mini-dock-shell > * {
  position: relative;
  z-index: 1;
}
#kse-layer-sheet-root .kse-mini-dock-shell {
  max-width: 720px;
}
#kse-bird-safety-sheet-root .kse-mini-dock-shell {
  max-width: 860px;
}
.kse-mini-dock-header {
  min-height: 44px;
  padding: 2px 152px 6px 8px;
}
.kse-mini-dock-header-copy {
  min-width: 0;
}
.kse-mini-dock-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #7a4b20;
  font-size: 15px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(255, 250, 239, 0.75);
}
.kse-mini-dock-title i {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c47820;
  background: linear-gradient(180deg, rgba(255, 247, 212, 0.96), rgba(242, 209, 138, 0.98));
  box-shadow:
    0 4px 0 rgba(134, 82, 23, 0.18),
    0 10px 16px rgba(126, 72, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: kseMiniDockBadgePulse 2.8s ease-in-out infinite;
}
.kse-mini-dock-subtitle {
  margin-top: 4px;
  color: #6f5a43;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  max-width: 520px;
}
.kse-mini-dock-close {
  cursor: pointer;
  z-index: 2;
}
.kse-mini-dock-jump {
  position: absolute;
  top: 13px;
  right: 70px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(240, 247, 255, 0.7));
  color: #6f4a24;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow:
    0 6px 12px rgba(89, 58, 24, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.kse-mini-dock-jump:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 14px rgba(89, 58, 24, 0.1),
    inset 0 1px 0 rgba(255,255,255,0.95);
  filter: saturate(1.06);
}
.kse-mini-dock-jump i {
  font-size: 12px;
  color: #b77723;
}
#kse-layer-sheet-root .kse-mini-dock-close--corner,
#kse-bird-safety-sheet-root .kse-mini-dock-close--corner {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  transform: none;
  width: 54px;
  height: 54px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 18px;
}
#kse-layer-sheet-root .kse-mini-dock-close--corner:hover,
#kse-bird-safety-sheet-root .kse-mini-dock-close--corner:hover {
  transform: translateY(-2px) scale(1.03);
  filter: saturate(1.08) drop-shadow(0 10px 16px rgba(107, 59, 18, 0.22));
}
.kse-mini-dock-close-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: kseMiniDockCloseBob 3.1s ease-in-out infinite;
  pointer-events: none;
}
.kse-mini-dock-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
#kse-layer-sheet-root .kse-mini-dock-row {
  padding-top: 2px;
}
.kse-mini-dock-row--bird {
  padding-top: 0;
}
.kse-mini-dock-btn {
  --kse-mini-accent: #d6b176;
  --kse-mini-accent-deep: #8d5c27;
  --kse-mini-active-label: #6b4529;
  --kse-mini-glow-rgb: 214, 177, 118;
  --kse-mini-accent-shadow: rgba(115, 67, 22, 0.2);
  --kse-mini-active-top: #91b6f0;
  --kse-mini-active-bottom: #5f88cb;
  --kse-mini-active-edge: rgba(62, 99, 168, 0.34);
  --kse-mini-active-shadow: rgba(43, 87, 157, 0.3);
  --kse-mini-active-rim: rgba(42, 75, 129, 0.28);
  width: 108px;
  height: 100px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.02) 100%),
    radial-gradient(circle at 50% 16%, rgba(var(--kse-mini-glow-rgb), 0.1), rgba(var(--kse-mini-glow-rgb), 0.02) 60%, rgba(255, 255, 255, 0) 100%);
  box-shadow:
    0 10px 20px rgba(82, 54, 30, 0.05),
    0 0 0 1px rgba(var(--kse-mini-glow-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px) saturate(1.06);
  color: #6b4529;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: grid;
  grid-template-rows: 48px 28px 18px;
  align-content: start;
  justify-items: center;
  gap: 2px;
  padding: 6px 8px 8px;
  position: relative;
  overflow: visible;
  transform-origin: center bottom;
  transition: transform 0.16s ease, box-shadow 0.22s ease, filter 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  animation: kseMiniDockBtnBob 3.8s ease-in-out infinite;
}
.kse-mini-dock-btn:nth-child(2) {
  animation-delay: 0.12s;
}
.kse-mini-dock-btn:nth-child(3) {
  animation-delay: 0.22s;
}
.kse-mini-dock-btn:nth-child(4) {
  animation-delay: 0.32s;
}
.kse-mini-dock-btn:nth-child(5) {
  animation-delay: 0.42s;
}
.kse-mini-dock-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.1) 34%, rgba(var(--kse-mini-glow-rgb), 0.06) 72%, rgba(var(--kse-mini-glow-rgb), 0.015) 100%);
  pointer-events: none;
}
.kse-mini-dock-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--kse-mini-glow-rgb), 0.18), rgba(var(--kse-mini-glow-rgb), 0));
  filter: blur(8px);
  opacity: 0.42;
  pointer-events: none;
}
.kse-mini-dock-btn:hover::after {
  opacity: 0.6;
}
.kse-mini-dock-btn > * {
  position: relative;
  z-index: 1;
}
.kse-mini-dock-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 22px rgba(82, 54, 30, 0.08),
    0 0 18px rgba(var(--kse-mini-glow-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.kse-mini-dock-btn:active {
  transform: translateY(0) scale(0.988);
  box-shadow:
    0 8px 16px rgba(82, 54, 30, 0.08),
    0 0 12px rgba(var(--kse-mini-glow-rgb), 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.82);
}
.kse-mini-dock-btn-crest {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.96), rgba(255, 250, 238, 0.74) 34%, rgba(244, 211, 155, 0.5) 64%, rgba(194, 123, 50, 0.28) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
  border: 2px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 8px 16px rgba(88, 48, 18, 0.14),
    0 0 18px rgba(var(--kse-mini-glow-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.kse-mini-dock-btn:nth-child(even) .kse-mini-dock-btn-crest {
  transform: translateY(-2px);
}
.kse-mini-dock-btn:hover .kse-mini-dock-btn-crest {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 10px 18px rgba(88, 48, 18, 0.18),
    0 0 22px rgba(var(--kse-mini-glow-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.kse-mini-dock-btn-crest::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 35%, rgba(255, 234, 197, 0.14) 100%);
  pointer-events: none;
}
.kse-mini-dock-btn-crest::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.18));
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.1),
    -16px 20px 0 -7px rgba(255, 255, 255, 0.55);
  opacity: 0.9;
  pointer-events: none;
}
.kse-mini-dock-btn-art {
  width: 84%;
  height: 84%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 5px 8px rgba(79, 43, 15, 0.18));
}
.kse-mini-dock-btn[data-kse-mini-tone="search"] .kse-mini-dock-btn-art {
  width: 88%;
  height: 88%;
  transform: rotate(-10deg) translateX(1px);
}
.kse-mini-dock-btn[data-kse-mini-tone="map"] .kse-mini-dock-btn-art {
  width: 86%;
  height: 86%;
}
.kse-mini-dock-btn[data-kse-mini-tone="sky"] .kse-mini-dock-btn-art {
  width: 78%;
  height: 78%;
}
.kse-mini-dock-btn-icon {
  font-size: 23px;
  line-height: 1;
  color: var(--kse-mini-accent-deep);
  filter: drop-shadow(0 4px 6px rgba(78, 50, 24, 0.2));
}
.kse-mini-dock-btn-label {
  font-size: 11px;
  line-height: 1.1;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
  max-width: 86px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}
.kse-mini-dock-btn-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(191, 141, 90, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 234, 207, 0.72));
  color: var(--kse-mini-accent-deep);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 2px 6px rgba(126, 72, 18, 0.06);
}
.kse-mini-dock-btn[data-kse-mini-tone="map"] {
  --kse-mini-accent: #86cad5;
  --kse-mini-accent-deep: #2e667b;
  --kse-mini-active-label: #234f66;
  --kse-mini-glow-rgb: 74, 160, 215;
  --kse-mini-active-top: #8bd9ff;
  --kse-mini-active-bottom: #4aa0d7;
  --kse-mini-active-edge: rgba(73, 140, 190, 0.34);
  --kse-mini-active-shadow: rgba(37, 112, 157, 0.28);
  --kse-mini-active-rim: rgba(37, 112, 157, 0.26);
}
.kse-mini-dock-btn[data-kse-mini-tone="water"] {
  --kse-mini-accent: #8fd8ff;
  --kse-mini-accent-deep: #1d77b9;
  --kse-mini-active-label: #0f5e98;
  --kse-mini-glow-rgb: 42, 161, 223;
  --kse-mini-active-top: #7fdcff;
  --kse-mini-active-bottom: #2aa1df;
  --kse-mini-active-edge: rgba(36, 128, 188, 0.34);
  --kse-mini-active-shadow: rgba(30, 119, 185, 0.3);
  --kse-mini-active-rim: rgba(24, 99, 153, 0.28);
}
.kse-mini-dock-btn[data-kse-mini-tone="sky"] {
  --kse-mini-accent: #e3c87b;
  --kse-mini-accent-deep: #866417;
  --kse-mini-active-label: #26407f;
  --kse-mini-glow-rgb: 82, 103, 207;
  --kse-mini-active-top: #8aa0f0;
  --kse-mini-active-bottom: #5267cf;
  --kse-mini-active-edge: rgba(72, 88, 183, 0.34);
  --kse-mini-active-shadow: rgba(72, 88, 183, 0.28);
  --kse-mini-active-rim: rgba(63, 76, 162, 0.28);
}
.kse-mini-dock-btn[data-kse-mini-tone="stone"] {
  --kse-mini-accent: #d5c3a2;
  --kse-mini-accent-deep: #705941;
  --kse-mini-active-label: #5a4738;
  --kse-mini-glow-rgb: 138, 121, 104;
  --kse-mini-active-top: #bdb1a3;
  --kse-mini-active-bottom: #8a7968;
  --kse-mini-active-edge: rgba(111, 93, 74, 0.34);
  --kse-mini-active-shadow: rgba(93, 71, 50, 0.24);
  --kse-mini-active-rim: rgba(93, 71, 50, 0.24);
}
.kse-mini-dock-btn[data-kse-mini-tone="safety"] {
  --kse-mini-accent: #f4c878;
  --kse-mini-accent-deep: #9f6612;
  --kse-mini-active-label: #8a5210;
  --kse-mini-glow-rgb: 213, 141, 58;
  --kse-mini-active-top: #f7be69;
  --kse-mini-active-bottom: #d58d3a;
  --kse-mini-active-edge: rgba(130, 76, 21, 0.34);
  --kse-mini-active-shadow: rgba(130, 76, 21, 0.28);
  --kse-mini-active-rim: rgba(130, 76, 21, 0.24);
}
.kse-mini-dock-btn[data-kse-mini-tone="search"] {
  --kse-mini-accent: #b8dfd3;
  --kse-mini-accent-deep: #2c7465;
  --kse-mini-active-label: #1f6558;
  --kse-mini-glow-rgb: 52, 163, 137;
  --kse-mini-active-top: #87d9c1;
  --kse-mini-active-bottom: #34a389;
  --kse-mini-active-edge: rgba(22, 102, 89, 0.34);
  --kse-mini-active-shadow: rgba(22, 102, 89, 0.24);
  --kse-mini-active-rim: rgba(22, 102, 89, 0.22);
}
.kse-mini-dock-btn[data-kse-mini-tone="heat"] {
  --kse-mini-accent: #f0a55c;
  --kse-mini-accent-deep: #a44d18;
  --kse-mini-active-label: #973f12;
  --kse-mini-glow-rgb: 208, 103, 51;
  --kse-mini-active-top: #f0a55c;
  --kse-mini-active-bottom: #d06733;
  --kse-mini-active-edge: rgba(135, 57, 20, 0.34);
  --kse-mini-active-shadow: rgba(135, 57, 20, 0.28);
  --kse-mini-active-rim: rgba(135, 57, 20, 0.24);
}
.kse-mini-dock-btn[data-kse-mini-tone="declutter"] {
  --kse-mini-accent: #79d7c5;
  --kse-mini-accent-deep: #227b6b;
  --kse-mini-active-label: #1e685b;
  --kse-mini-glow-rgb: 44, 154, 135;
  --kse-mini-active-top: #58cbb4;
  --kse-mini-active-bottom: #2c9a87;
  --kse-mini-active-edge: rgba(22, 102, 89, 0.34);
  --kse-mini-active-shadow: rgba(22, 102, 89, 0.26);
  --kse-mini-active-rim: rgba(22, 102, 89, 0.24);
}
.kse-mini-dock-btn[data-active="true"] {
  border-color: rgba(255, 255, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0.02) 100%),
    radial-gradient(circle at 50% 14%, rgba(var(--kse-mini-glow-rgb), 0.36), rgba(var(--kse-mini-glow-rgb), 0.14) 56%, rgba(255, 255, 255, 0.01) 100%);
  color: var(--kse-mini-active-label);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.26) inset,
    0 0 18px rgba(var(--kse-mini-glow-rgb), 0.28),
    0 14px 24px rgba(82, 54, 30, 0.08);
}
.kse-mini-dock-btn[data-active="true"] .kse-mini-dock-btn-crest {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.52) 30%, rgba(255, 255, 255, 0.2) 66%, rgba(255, 255, 255, 0.08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08));
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.12),
    0 0 24px rgba(var(--kse-mini-glow-rgb), 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 0 10px rgba(var(--kse-mini-glow-rgb), 0.24));
}
.kse-mini-dock-btn[data-active="true"] .kse-mini-dock-btn-state {
  border-color: rgba(255, 255, 255, 0.56);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 240, 223, 0.88));
  color: var(--kse-mini-active-label);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 4px 10px rgba(255, 255, 255, 0.18);
}
@media (max-width: 640px) {
  .kse-mini-dock-header {
    padding-right: 56px;
  }
  .kse-mini-dock-title {
    font-size: 13px;
  }
  .kse-mini-dock-subtitle {
    font-size: 11px;
  }
  .kse-mini-dock-jump {
    top: auto;
    bottom: 6px;
    right: 58px;
    min-height: 24px;
    padding: 0 8px;
    font-size: 9px;
  }
  .kse-mini-dock-btn {
    width: 86px;
    height: 90px;
    border-radius: 20px;
    grid-template-rows: 42px 22px 16px;
    padding: 6px 6px 7px;
    gap: 1px;
  }
  .kse-mini-dock-btn-crest {
    width: 44px;
    height: 44px;
  }
  .kse-mini-dock-btn-label {
    font-size: 10px;
    min-height: 20px;
    max-width: 72px;
  }
  .kse-mini-dock-btn-state {
    font-size: 9px;
    padding: 2px 6px;
  }
}

/* Dock hover: glow only (no rectangular outline, no resize/shift). */
.smart-dock-base.dock-mapview .dock-btn,
.smart-dock-base.dock-mapview .dock-badge-btn,
.smart-dock-base.dock-mapview .dock-spot-btn,
.smart-dock-base.dock-mapview .dock-map-top-icon-shell {
  transition-property: filter, opacity, background-color, border-color !important;
}

.smart-dock-base.dock-mapview .dock-btn:hover,
.smart-dock-base.dock-mapview .dock-btn[data-active="true"]:hover {
  transform: translateY(var(--dock-btn-arch, 0px)) scale(var(--dock-btn-scale, 1)) !important;
  box-shadow: none !important;
}

.smart-dock-base.dock-mapview .dock-btn:hover .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn[data-active="true"]:hover .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn.has-icon-img:hover .dock-icon-img,
.smart-dock-base.dock-mapview .dock-btn.has-icon-img[data-active="true"]:hover .dock-icon-img {
  transform: translateZ(0) translateY(0) scale(1) !important;
  filter: drop-shadow(0 0 7px rgba(255, 208, 116, 0.52)) drop-shadow(0 0 14px rgba(124, 207, 255, 0.35)) !important;
}

.smart-dock-base.dock-mapview .dock-spot-btn:hover,
.smart-dock-base.dock-mapview .dock-spot-btn[data-active="true"]:hover {
  transform: translateY(calc(var(--dock-btn-arch, 0px) + var(--dock-spot-drop, 0px))) scale(var(--dock-btn-scale, 1)) !important;
  box-shadow: none !important;
}

.smart-dock-base.dock-mapview .dock-spot-btn:hover .dock-spot-icon img,
.smart-dock-base.dock-mapview .dock-spot-btn[data-active="true"]:hover .dock-spot-icon img {
  transform: scale(calc(var(--dock-spot-icon-base-scale, 1) * 1.08)) !important;
  filter: drop-shadow(0 0 8px rgba(255, 208, 116, 0.5)) !important;
}

.smart-dock-base.dock-mapview .dock-badge-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

.smart-dock-base.dock-mapview .dock-badge-btn:hover img {
  transform: none !important;
  filter: drop-shadow(0 0 8px rgba(255, 201, 99, 0.56)) drop-shadow(0 0 14px rgba(115, 197, 255, 0.3)) !important;
}

.smart-dock-base.dock-mapview .dock-map-top-btn:hover .dock-map-top-icon-shell,
.smart-dock-base.dock-mapview .dock-map-top-btn[data-active="true"] .dock-map-top-icon-shell {
  transform: none !important;
  box-shadow: none !important;
}
.smart-dock-base.dock-mapview .dock-map-top-btn:hover .dock-map-top-icon-img,
.smart-dock-base.dock-mapview .dock-map-top-btn[data-active="true"] .dock-map-top-icon-img {
  filter: drop-shadow(0 0 7px rgba(255, 208, 116, 0.52)) drop-shadow(0 0 14px rgba(124, 207, 255, 0.34));
}

/* Scout Log leaders/stats polish layer: embers + subtle web glow. */
.terminal-leader-stage {
  isolation: isolate;
}

.terminal-leader-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.terminal-leader-clouds {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.terminal-leader-cloud {
  position: absolute;
  left: -42%;
  width: 184%;
  background-image: url('/images/sky_bg.opt.webp');
  background-repeat: repeat-x;
  background-size: auto 100%;
  filter: saturate(108%) blur(0.3px);
}

.terminal-leader-cloud--1 {
  top: 9%;
  height: 44%;
  opacity: 0.2;
  animation: kseLeaderCloudDriftA 96s linear infinite;
}

.terminal-leader-cloud--2 {
  top: 18%;
  height: 40%;
  opacity: 0.14;
  animation: kseLeaderCloudDriftB 132s linear infinite;
}

.terminal-leader-web {
  position: absolute;
  inset: -18% -10%;
  background:
    radial-gradient(ellipse at 20% 18%, rgba(255, 204, 96, 0.22), transparent 42%),
    radial-gradient(ellipse at 82% 70%, rgba(255, 122, 59, 0.15), transparent 48%),
    radial-gradient(ellipse at 50% 58%, rgba(120, 212, 255, 0.15), transparent 58%);
  filter: blur(0.4px) saturate(110%);
  animation: kseTerminalWebDrift 24s linear infinite;
  opacity: 0.85;
}

.terminal-ember {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 244, 177, 0.98) 0%, rgba(255, 183, 74, 0.92) 45%, rgba(255, 114, 51, 0.4) 70%, rgba(255, 114, 51, 0) 100%);
  box-shadow: 0 0 12px rgba(255, 166, 70, 0.48), 0 0 26px rgba(255, 110, 58, 0.28);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.7);
  animation: kseTerminalEmberRise 11s linear infinite;
}

.terminal-ember--1 { left: 8%; bottom: -14%; animation-duration: 10.8s; animation-delay: -7.6s; }
.terminal-ember--2 { left: 17%; bottom: -15%; animation-duration: 12.2s; animation-delay: -4.1s; width: 8px; height: 8px; }
.terminal-ember--3 { left: 29%; bottom: -13%; animation-duration: 10.5s; animation-delay: -1.7s; }
.terminal-ember--4 { left: 41%; bottom: -16%; animation-duration: 12.8s; animation-delay: -8.4s; width: 7px; height: 7px; }
.terminal-ember--5 { left: 55%; bottom: -15%; animation-duration: 11.7s; animation-delay: -6.3s; }
.terminal-ember--6 { left: 67%; bottom: -14%; animation-duration: 10.9s; animation-delay: -2.8s; width: 9px; height: 9px; }
.terminal-ember--7 { left: 76%; bottom: -16%; animation-duration: 13.2s; animation-delay: -9.2s; width: 7px; height: 7px; }
.terminal-ember--8 { left: 84%; bottom: -14%; animation-duration: 11.4s; animation-delay: -5.5s; }
.terminal-ember--9 { left: 92%; bottom: -16%; animation-duration: 12.6s; animation-delay: -3.2s; width: 8px; height: 8px; }
.terminal-ember--10 { left: 48%; bottom: -14%; animation-duration: 11.1s; animation-delay: -10.1s; width: 6px; height: 6px; }

.terminal-leader-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 10px rgba(253, 186, 116, 0.22);
  animation: kseTerminalTitleGlow 5.6s ease-in-out infinite;
}

@keyframes kseTerminalWebDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -8px, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes kseLeaderCloudDriftA {
  0% { transform: translate3d(-8%, 0, 0); }
  100% { transform: translate3d(8%, 0, 0); }
}

@keyframes kseLeaderCloudDriftB {
  0% { transform: translate3d(10%, 0, 0); }
  100% { transform: translate3d(-10%, 0, 0); }
}

@keyframes kseTerminalEmberRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.6);
  }
  12% {
    opacity: 0.85;
  }
  72% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate3d(-18px, -340px, 0) scale(1.05);
  }
}

@keyframes kseTerminalTitleGlow {
  0%, 100% {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 10px rgba(253, 186, 116, 0.2);
  }
  50% {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 14px rgba(251, 191, 36, 0.32);
  }
}

/* Stats panel ambient stars/web layer. */
.terminal-stats-stage {
  isolation: isolate;
}
.terminal-stats-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.terminal-stats-web {
  position: absolute;
  inset: -18% -10%;
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 24% 16%, rgba(255, 224, 132, 0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 76% 64%, rgba(111, 211, 255, 0.15) 0%, transparent 48%);
  animation: kseStatsWebDrift 26s linear infinite;
}
.terminal-star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 237, 0.98) 0%, rgba(248, 220, 140, 0.92) 48%, rgba(248, 220, 140, 0) 100%);
  box-shadow: 0 0 6px rgba(255, 226, 150, 0.5), 0 0 13px rgba(103, 207, 255, 0.26);
  opacity: 0.24;
  animation: kseStatsStarTwinkle 4.8s ease-in-out infinite;
}
.terminal-star--1 { left: 12%; top: 15%; animation-delay: -0.6s; }
.terminal-star--2 { left: 26%; top: 27%; animation-delay: -2.2s; width: 4px; height: 4px; }
.terminal-star--3 { left: 45%; top: 12%; animation-delay: -1.3s; }
.terminal-star--4 { left: 63%; top: 22%; animation-delay: -3.1s; width: 6px; height: 6px; }
.terminal-star--5 { left: 77%; top: 18%; animation-delay: -2.7s; width: 4px; height: 4px; }
.terminal-star--6 { left: 83%; top: 40%; animation-delay: -0.9s; }
.terminal-star--7 { left: 58%; top: 34%; animation-delay: -3.6s; width: 4px; height: 4px; }
.terminal-star--8 { left: 34%; top: 44%; animation-delay: -1.8s; width: 6px; height: 6px; }

@keyframes kseToolsBurstRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.68);
  }
  25% {
    opacity: 0.38;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes kseToolsSparkle {
  0%, 100% {
    opacity: 0.1;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.35);
  }
}

@keyframes ksePassportBurstSpin {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes kseStatsWebDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10px, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes kseStatsStarTwinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.35);
  }
}

/* --- FINAL MOBILE MAP HUD + DOCK RESCUE (single override block) --- */
.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-static-group--mobile-hidden {
  display: none !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-view-label--notch {
  display: none !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-content-enter {
  padding-bottom: 0 !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-action-row--compact-mobile {
  display: block !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-right: 0 !important;
  gap: 0 !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  padding: 0 10px 0 8px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip::-webkit-scrollbar {
  display: none;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  scroll-snap-align: none;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile--camp {
  min-width: 0;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-btn {
  margin: 0 !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-btn span {
  margin-top: 3px !important;
  font-size: 8px !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  opacity: 0.98 !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip .dock-btn--camp {
  --dock-btn-size: 72px;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip .dock-btn--hide {
  --dock-btn-size: 54px;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip .dock-btn.has-icon-img .dock-icon-img {
  transform: translateZ(0) scale(1) !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-static-group {
  gap: 6px !important;
  transform: scale(0.84) !important;
  transform-origin: right bottom !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-btn--camp {
  --dock-btn-size: 68px;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-btn--hide {
  --dock-btn-size: 48px;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-notch {
  transform: translateX(-50%) translateY(-18px) !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-notch > button {
  transform: scale(0.94) !important;
}

@media (max-width: 540px) {
  #map-wrapper-stable.fullscreen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #map-wrapper-stable.fullscreen .map-ctl.ctl-tl {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    left: 10px !important;
    transform: scale(0.82) !important;
    transform-origin: top left !important;
  }

  #map-wrapper-stable.fullscreen .notch-top-right {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    right: 8px !important;
    transform: scale(0.82) !important;
    transform-origin: top right !important;
    gap: 8px !important;
  }

  #map-wrapper-stable.fullscreen .notch-prof {
    top: calc(env(safe-area-inset-top) + 74px) !important;
    left: 8px !important;
    transform: scale(0.72) !important;
    transform-origin: top left !important;
    gap: 8px !important;
    padding-top: 0 !important;
  }

  .map-ctl-img-lg {
    width: 104px !important;
  }

  .map-ctl-img-sm {
    width: 38px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact {
    --dock-notch-size: 46px;
    --dock-mapview-min-height: 126px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .max-w-3xl {
    width: calc(100vw - 8px) !important;
    min-height: 126px !important;
    padding-top: calc(var(--dock-notch-size) + 2px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 4px) !important;
    gap: 0 !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-host {
    top: 20px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-modes-root-map {
    min-height: 104px !important;
    padding-top: 54px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-tip {
    font-size: 7px !important;
    max-width: 42px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip {
    gap: 8px;
    padding-right: 10px;
    padding-left: 8px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile {
    min-width: 58px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile--camp {
    min-width: 66px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip .dock-btn--camp {
    --dock-btn-size: 64px;
  }
}

@media (max-height: 520px) and (max-width: 980px) {
  #map-wrapper-stable.fullscreen .map-ctl.ctl-tl {
    top: calc(env(safe-area-inset-top) + 8px) !important;
    left: 14px !important;
    transform: scale(0.82) !important;
    transform-origin: top left !important;
  }

  #map-wrapper-stable.fullscreen .notch-top-right {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    right: 12px !important;
    transform: scale(0.82) !important;
    transform-origin: top right !important;
    gap: 8px !important;
  }

  #map-wrapper-stable.fullscreen .notch-prof {
    top: calc(env(safe-area-inset-top) + 84px) !important;
    left: 12px !important;
    transform: scale(0.68) !important;
    transform-origin: top left !important;
    gap: 8px !important;
    padding-top: 0 !important;
  }

  .map-ctl-img-lg {
    width: 112px !important;
  }

  .map-ctl-img-sm {
    width: 40px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact {
    --dock-notch-size: 44px;
    --dock-mapview-min-height: 104px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .max-w-3xl {
    width: calc(100vw - 14px) !important;
    min-height: 102px !important;
    padding-top: calc(var(--dock-notch-size) + 1px) !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-modes-root-map {
    min-height: 82px !important;
    padding-top: 46px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-host {
    top: 14px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-btn {
    min-width: 38px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-icon-shell {
    width: 38px !important;
    height: 38px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-icon-img {
    width: 32px !important;
    height: 32px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-icon-img--search {
    width: 22px !important;
    height: 22px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-icon-img--month {
    width: 30px !important;
    height: 30px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-tip {
    font-size: 6px !important;
    max-width: 34px !important;
    margin-top: 1px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip {
    gap: 7px;
    padding: 0 8px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile {
    min-width: 52px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile--camp {
    min-width: 60px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-btn span {
    font-size: 7px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip .dock-btn--camp {
    --dock-btn-size: 58px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip .dock-btn--hide {
    --dock-btn-size: 46px;
  }
}

/* --- MOBILE MAP DOCK STABILIZER V3 --- */
.smart-dock-base.dock-mapview .dock-static-group--mobile-hidden,
.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-static-group {
  display: none !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-view-label--notch {
  display: none !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-mobile-utility-stack {
  position: absolute;
  z-index: 10018;
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  gap: 6px;
  pointer-events: auto;
  right: max(8px, calc(env(safe-area-inset-right) + 8px));
  bottom: calc(env(safe-area-inset-bottom) + 10px);
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-mobile-utility-btn {
  margin: 0 !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-mobile-utility-btn span {
  margin-top: 2px !important;
  font-size: 7px !important;
  line-height: 1.02 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-utility-stack {
  bottom: calc(env(safe-area-inset-bottom) + 10px);
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-utility-stack {
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  transform: scale(0.9);
  transform-origin: right bottom;
}

.smart-dock-base.dock-mapview.dock-map-control-focus-active .dock-mobile-utility-stack {
  display: none !important;
}

@media (max-width: 540px) {
  #map-wrapper-stable.fullscreen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #map-wrapper-stable.fullscreen .map-ctl.ctl-tl {
    top: calc(env(safe-area-inset-top) + 8px) !important;
    left: 8px !important;
    transform: scale(0.78) !important;
    transform-origin: top left !important;
  }

  #map-wrapper-stable.fullscreen .notch-top-right {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    right: 8px !important;
    transform: scale(0.78) !important;
    transform-origin: top right !important;
    gap: 6px !important;
  }

  #map-wrapper-stable.fullscreen .notch-prof {
    top: calc(env(safe-area-inset-top) + 92px) !important;
    left: 4px !important;
    transform: scale(0.7) !important;
    transform-origin: top left !important;
    gap: 6px !important;
    padding-top: 0 !important;
  }

  #map-wrapper-stable.fullscreen .map-ctl-img-lg {
    width: 98px !important;
  }

  #map-wrapper-stable.fullscreen .map-ctl-img-sm {
    width: 36px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait {
    --dock-notch-size: 44px;
    --dock-mapview-min-height: 140px;
    --dock-spot-size: 56px;
    --dock-spot-label-size: 14px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .max-w-3xl {
    width: calc(100vw - 6px) !important;
    min-height: 140px !important;
    padding-top: 58px !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 6px) !important;
    gap: 0 !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-notch {
    transform: translateX(-50%) translateY(-34px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-notch > button {
    transform: scale(0.88) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-controls-host {
    top: 34px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-modes-root-map {
    min-height: 124px !important;
    padding-top: 78px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-controls-row {
    gap: 0 !important;
    padding-left: 2px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-btn {
    min-width: 40px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-shell {
    width: 40px !important;
    height: 40px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-img {
    width: 34px !important;
    height: 34px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-img--search {
    width: 24px !important;
    height: 24px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-img--month {
    width: 30px !important;
    height: 30px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-tip {
    font-size: 7px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.03em !important;
    max-width: 38px !important;
    white-space: normal !important;
    text-align: center !important;
    margin-top: 1px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-content-enter .dock-btn {
    --dock-btn-size: 52px;
    --dock-icon-size: 36px;
    --dock-btn-scale: 0.84;
    --dock-btn-scale-hover: 0.9;
    --dock-btn-scale-active: 0.8;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-content-enter .dock-btn span {
    font-size: 7px !important;
    letter-spacing: 0.03em !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-strip {
    gap: 7px !important;
    padding: 0 8px 0 6px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-tile {
    min-width: 54px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-spot-row {
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-spot-group {
    gap: 6px !important;
    padding: 6px 6px 8px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-spot-text {
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
    max-width: calc(var(--dock-spot-size) + 6px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-badge-wrap {
    width: 70px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-badge-label {
    font-size: 7px !important;
    letter-spacing: 0.03em !important;
  }
}

@media (max-height: 520px) and (max-width: 980px) {
  #map-wrapper-stable.fullscreen .map-ctl.ctl-tl {
    top: calc(env(safe-area-inset-top) + 6px) !important;
    left: 12px !important;
    transform: scale(0.78) !important;
    transform-origin: top left !important;
  }

  #map-wrapper-stable.fullscreen .notch-top-right {
    top: calc(env(safe-area-inset-top) + 8px) !important;
    right: 10px !important;
    transform: scale(0.78) !important;
    transform-origin: top right !important;
    gap: 6px !important;
  }

  #map-wrapper-stable.fullscreen .notch-prof {
    top: calc(env(safe-area-inset-top) + 74px) !important;
    left: 10px !important;
    transform: scale(0.64) !important;
    transform-origin: top left !important;
    gap: 6px !important;
    padding-top: 0 !important;
  }

  #map-wrapper-stable.fullscreen .map-ctl-img-lg {
    width: 104px !important;
  }

  #map-wrapper-stable.fullscreen .map-ctl-img-sm {
    width: 38px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape {
    --dock-notch-size: 42px;
    --dock-mapview-min-height: 106px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .max-w-3xl {
    width: calc(100vw - 12px) !important;
    min-height: 106px !important;
    padding-top: 50px !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-notch {
    transform: translateX(-50%) translateY(-30px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-notch > button {
    transform: scale(0.84) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-modes-root-map {
    min-height: 82px !important;
    padding-top: 48px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-controls-host {
    top: 12px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-tip {
    font-size: 6px !important;
    max-width: 34px !important;
    margin-top: 1px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-content-enter .dock-btn {
    --dock-btn-size: 50px;
    --dock-icon-size: 34px;
    --dock-btn-scale: 0.82;
    --dock-btn-scale-hover: 0.88;
    --dock-btn-scale-active: 0.78;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-content-enter .dock-btn span {
    font-size: 7px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-strip {
    gap: 6px !important;
    padding: 0 8px !important;
  }
}

/* --- MOBILE MAP DOCK ALIGNMENT V4 --- */
@media (max-width: 540px) {
  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-host:not(.dock-map-focus-mode) {
    top: auto !important;
    bottom: var(--dock-mobile-upper-shelf-bottom) !important;
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-modes-root-map {
    padding-top: 88px !important;
  }
}

@media (max-height: 520px) and (max-width: 980px) {
  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-host:not(.dock-map-focus-mode) {
    top: auto !important;
    bottom: var(--dock-mobile-upper-shelf-bottom) !important;
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-modes-root-map {
    padding-top: 58px !important;
  }
}

@media (max-width: 540px) {
  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait {
    --dock-mobile-upper-shelf-bottom: calc(env(safe-area-inset-bottom) + 64px);
    --dock-spot-size: 50px;
    --dock-spot-label-size: 12px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-controls-host:not(.dock-map-focus-mode) {
    top: auto !important;
    bottom: var(--dock-mobile-upper-shelf-bottom) !important;
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-modes-root-map {
    padding-top: 88px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-controls-row {
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-btn {
    min-width: 36px !important;
    transform: translateY(-2px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-shell {
    width: 36px !important;
    height: 36px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-img {
    width: 30px !important;
    height: 30px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-img--search {
    width: 20px !important;
    height: 20px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-icon-img--month {
    width: 26px !important;
    height: 26px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-tip {
    font-size: 6px !important;
    max-width: 42px !important;
    line-height: 1 !important;
    margin-top: -2px !important;
    transform: translateY(-4px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-utility-stack {
    right: max(10px, calc(env(safe-area-inset-right) + 10px)) !important;
    left: auto !important;
    bottom: var(--dock-mobile-upper-shelf-bottom) !important;
    gap: 8px !important;
    transform: none !important;
    transform-origin: right bottom !important;
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-strip {
    gap: 6px !important;
    padding: 2px 8px 0 !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-tile {
    min-width: 0 !important;
    width: 100% !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-btn {
    --dock-btn-size: 48px;
    --dock-icon-size: 32px;
    --dock-btn-scale: 0.84;
    --dock-btn-scale-hover: 0.9;
    --dock-btn-scale-active: 0.8;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-strip .dock-btn--prize {
    --dock-btn-size: 50px;
    --dock-icon-size: 34px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-btn span {
    font-size: 7px !important;
    line-height: 1.02 !important;
    letter-spacing: 0.04em !important;
    margin-top: 2px !important;
    max-width: 52px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-spot-row {
    gap: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-spot-group {
    gap: 4px !important;
    padding: 4px 4px 6px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-spot-text {
    font-size: 8px !important;
    max-width: calc(var(--dock-spot-size) + 4px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-spot-left .dock-wood-pill {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
}

@media (max-height: 520px) and (max-width: 980px) {
  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape {
    --dock-mobile-upper-shelf-bottom: calc(env(safe-area-inset-bottom) + 48px);
    --dock-spot-size: 40px;
    --dock-spot-label-size: 10px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-controls-host:not(.dock-map-focus-mode) {
    top: auto !important;
    bottom: var(--dock-mobile-upper-shelf-bottom) !important;
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-modes-root-map {
    padding-top: 58px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-controls-row {
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-btn {
    min-width: 32px !important;
    transform: translateY(-1px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-icon-shell {
    width: 32px !important;
    height: 32px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-icon-img {
    width: 26px !important;
    height: 26px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-icon-img--search {
    width: 18px !important;
    height: 18px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-icon-img--month {
    width: 22px !important;
    height: 22px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-tip {
    font-size: 5px !important;
    max-width: 32px !important;
    line-height: 1 !important;
    margin-top: -2px !important;
    transform: translateY(-2px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-utility-stack {
    right: max(10px, calc(env(safe-area-inset-right) + 10px)) !important;
    left: auto !important;
    bottom: var(--dock-mobile-upper-shelf-bottom) !important;
    gap: 8px !important;
    transform: scale(0.94) !important;
    transform-origin: right bottom !important;
    align-items: flex-end !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-strip {
    gap: 5px !important;
    padding: 1px 6px 0 !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-tile {
    min-width: 0 !important;
    width: 100% !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-btn {
    --dock-btn-size: 42px;
    --dock-icon-size: 26px;
    --dock-btn-scale: 0.8;
    --dock-btn-scale-hover: 0.86;
    --dock-btn-scale-active: 0.76;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-strip .dock-btn--prize {
    --dock-btn-size: 46px;
    --dock-icon-size: 30px;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-btn span {
    font-size: 6px !important;
    line-height: 1.02 !important;
    letter-spacing: 0.04em !important;
    margin-top: 1px !important;
    max-width: 42px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-spot-row {
    gap: 5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-spot-group {
    gap: 4px !important;
    padding: 4px 4px 5px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-spot-text {
    font-size: 7px !important;
    max-width: calc(var(--dock-spot-size) + 4px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-spot-left .dock-wood-pill {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}

/* --- Home Screen (standalone WKWebView) parity overrides --- */
@media (display-mode: standalone) and (max-width: 540px) {
  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-action-row--compact-mobile {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-strip {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-mobile-action-tile {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-btn {
    transform: translateY(-3px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-portrait .dock-map-top-tip {
    transform: translateY(-5px) !important;
  }
}

@media (display-mode: standalone) and (max-height: 520px) and (max-width: 980px) {
  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-action-row--compact-mobile {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-strip {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-mobile-action-tile {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-btn {
    transform: translateY(-2px) !important;
  }

  .smart-dock-base.dock-mapview.dock-mapview-mobile-landscape .dock-map-top-tip {
    transform: translateY(-3px) !important;
  }
}

/* --- MOBILE VIEWPORT PROFILE TOKENS (single source of truth) --- */
:root {
  --kse-cloud-banner-height: 0px;
  --kse-map-ctl-offset-top: 8px;
  --kse-map-prof-offset-top: 72px;
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 64px);
  --kse-dock-top-btn-lift: -4px;
  --kse-dock-top-tip-lift: -6px;
  --kse-passport-grid-cols: 3;
  --kse-passport-grid-gap: 12px;
  --kse-passport-card-min-h: 126px;
  --kse-passport-card-pad-top: 14px;
  --kse-passport-chip-font: 8px;
  --kse-passport-chip-pad-y: 1px;
  --kse-passport-chip-pad-x: 7px;
  --kse-filter-grid-cols: 3;
  --kse-filter-grid-gap: 0.58rem;
  --kse-filter-orb-size: clamp(80px, 26vw, 104px);
  --kse-filter-icon-size: clamp(60px, 20vw, 84px);
  --kse-filter-label-size: 0.66rem;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 64px);
  --kse-dock-top-btn-lift: -5px;
  --kse-dock-top-tip-lift: -7px;
  --kse-map-ctl-offset-top: 8px;
  --kse-map-prof-offset-top: 76px;
  --kse-passport-grid-cols: 3;
  --kse-passport-grid-gap: 13px;
  --kse-passport-card-min-h: 132px;
  --kse-passport-card-pad-top: 14px;
  --kse-passport-chip-font: 8px;
  --kse-filter-grid-cols: 3;
  --kse-filter-grid-gap: 0.58rem;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 50px);
  --kse-dock-top-btn-lift: -3px;
  --kse-dock-top-tip-lift: -4px;
  --kse-map-ctl-offset-top: 6px;
  --kse-map-prof-offset-top: 74px;
  --kse-passport-grid-cols: 4;
  --kse-passport-grid-gap: 10px;
  --kse-passport-card-min-h: 96px;
  --kse-passport-card-pad-top: 8px;
  --kse-passport-chip-font: 7px;
  --kse-filter-grid-cols: 4;
  --kse-filter-grid-gap: 0.5rem;
  --kse-filter-orb-size: clamp(66px, 17vw, 90px);
  --kse-filter-icon-size: clamp(48px, 13vw, 74px);
  --kse-filter-label-size: 0.6rem;
}

html[data-kse-device-tier="tablet"][data-kse-orientation="portrait"] {
  --kse-passport-grid-cols: 4;
  --kse-passport-grid-gap: 14px;
  --kse-passport-card-min-h: 144px;
  --kse-passport-card-pad-top: 18px;
  --kse-passport-chip-font: 9px;
  --kse-filter-grid-cols: 4;
  --kse-filter-grid-gap: 0.62rem;
  --kse-filter-orb-size: clamp(92px, 14vw, 110px);
  --kse-filter-icon-size: clamp(70px, 10vw, 88px);
  --kse-filter-label-size: 0.7rem;
}

html[data-kse-device-tier="tablet"][data-kse-orientation="landscape"] {
  --kse-passport-grid-cols: 4;
  --kse-passport-grid-gap: 12px;
  --kse-passport-card-min-h: 128px;
  --kse-passport-card-pad-top: 14px;
  --kse-passport-chip-font: 8px;
  --kse-filter-grid-cols: 4;
  --kse-filter-grid-gap: 0.56rem;
  --kse-filter-orb-size: clamp(84px, 12vw, 102px);
  --kse-filter-icon-size: clamp(64px, 9vw, 84px);
  --kse-filter-label-size: 0.66rem;
}

html[data-kse-device-tier="phone"] #map-wrapper-stable.fullscreen,
html[data-kse-device-tier="tablet"] #map-wrapper-stable.fullscreen {
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
}

/* Compact cloud banner for mobile + safe-area aware home-screen behavior */
.kse-cloud-banner {
  padding-top: max(8px, calc(env(safe-area-inset-top) + 4px));
}

.kse-cloud-banner.kse-cloud-banner--compact {
  padding: max(8px, calc(env(safe-area-inset-top) + 4px)) max(8px, calc(env(safe-area-inset-right) + 8px)) 8px max(8px, calc(env(safe-area-inset-left) + 8px)) !important;
  gap: 6px !important;
}

.kse-cloud-banner.kse-cloud-banner--compact > div:first-child span {
  font-size: 11px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.kse-cloud-banner.kse-cloud-banner--compact button {
  min-height: 30px;
}

/* Banner-aware top map controls (browser + standalone parity) */
html.kse-cloud-banner-visible #map-wrapper-stable.fullscreen .map-ctl.ctl-tl {
  top: calc(env(safe-area-inset-top) + var(--kse-cloud-banner-height, 0px) + var(--kse-map-ctl-offset-top)) !important;
}

html.kse-cloud-banner-visible #map-wrapper-stable.fullscreen .notch-top-right {
  top: calc(env(safe-area-inset-top) + var(--kse-cloud-banner-height, 0px) + var(--kse-map-ctl-offset-top)) !important;
}

html.kse-cloud-banner-visible #map-wrapper-stable.fullscreen .notch-prof {
  top: calc(env(safe-area-inset-top) + var(--kse-cloud-banner-height, 0px) + var(--kse-map-prof-offset-top)) !important;
}

/* Compact action dock must span full lower shelf width */
.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-action-row--compact-mobile {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(var(--kse-mobile-action-count, 5), minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  align-items: end !important;
  gap: 6px !important;
  padding: 1px 8px 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

/* Lift and align Labels / Search / Month row with Camp / Hide */
.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-host:not(.dock-map-focus-mode) {
  top: auto !important;
  bottom: var(--kse-dock-top-row-bottom) !important;
  align-items: flex-end !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-row {
  align-items: flex-end !important;
  gap: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-btn {
  transform: translateY(var(--kse-dock-top-btn-lift)) !important;
}

.smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-tip {
  transform: translateY(var(--kse-dock-top-tip-lift)) !important;
  margin-top: -1px !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

/* Passport: profile-based modal/card sizing (stabilize-first, no component rewrite) */
html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-modal-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

html[data-kse-device-tier="tablet"] .modal-overlay.kse-passport-overlay {
  padding: max(10px, calc(env(safe-area-inset-top) + 6px)) max(10px, calc(env(safe-area-inset-right) + 6px)) max(10px, calc(env(safe-area-inset-bottom) + 6px)) max(10px, calc(env(safe-area-inset-left) + 6px)) !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-kse-device-tier="tablet"] .modal-overlay.kse-passport-overlay .kse-passport-modal-shell {
  width: min(860px, calc(100vw - 20px)) !important;
  max-width: min(860px, calc(100vw - 20px)) !important;
  height: min(calc(var(--kse-vvh, 100dvh) - 16px), 92vh) !important;
  min-height: min(calc(var(--kse-vvh, 100dvh) - 16px), 92vh) !important;
  max-height: min(calc(var(--kse-vvh, 100dvh) - 16px), 92vh) !important;
  border-radius: 26px !important;
  border-width: 6px !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section,
html[data-kse-device-tier="tablet"] .modal-overlay.kse-passport-overlay .kse-passport-section {
  padding: 14px !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid,
html[data-kse-device-tier="tablet"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid {
  gap: var(--kse-passport-grid-gap) !important;
  grid-template-columns: repeat(var(--kse-passport-grid-cols), minmax(0, 1fr)) !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div,
html[data-kse-device-tier="tablet"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div {
  min-height: var(--kse-passport-card-min-h) !important;
  padding-top: var(--kse-passport-card-pad-top) !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div:not([class*="opacity-50"])::before,
html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div[class*="opacity-50"]::before,
html[data-kse-device-tier="tablet"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div:not([class*="opacity-50"])::before,
html[data-kse-device-tier="tablet"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div[class*="opacity-50"]::before {
  font-size: var(--kse-passport-chip-font) !important;
  padding: var(--kse-passport-chip-pad-y) var(--kse-passport-chip-pad-x) calc(var(--kse-passport-chip-pad-y) + 1px) !important;
  letter-spacing: 0.01em !important;
}

/* Taxa Filter: profile-based full-screen phone + responsive icon circles */
html[data-kse-device-tier="phone"] #kse-filter-modal-root .kse-filter-modal-stage {
  inset: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] #kse-filter-modal-root .kse-filter-modal-dialog {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

html[data-kse-device-tier="tablet"] #kse-filter-modal-root .kse-filter-modal-dialog {
  width: min(760px, calc(100vw - 18px)) !important;
  max-width: min(760px, calc(100vw - 18px)) !important;
  max-height: min(calc(var(--kse-vvh, 100dvh) - 20px), 92vh) !important;
}

html[data-kse-device-tier="phone"] #kse-filter-modal-root .kse-filter-grid,
html[data-kse-device-tier="tablet"] #kse-filter-modal-root .kse-filter-grid {
  grid-template-columns: repeat(var(--kse-filter-grid-cols), minmax(0, 1fr)) !important;
  gap: var(--kse-filter-grid-gap) !important;
}

html[data-kse-device-tier="phone"] #kse-filter-modal-root .kse-filter-taxon-orb,
html[data-kse-device-tier="tablet"] #kse-filter-modal-root .kse-filter-taxon-orb {
  width: var(--kse-filter-orb-size) !important;
  height: var(--kse-filter-orb-size) !important;
}

html[data-kse-device-tier="phone"] #kse-filter-modal-root .kse-filter-taxon-icon,
html[data-kse-device-tier="tablet"] #kse-filter-modal-root .kse-filter-taxon-icon {
  width: var(--kse-filter-icon-size) !important;
  height: var(--kse-filter-icon-size) !important;
}

html[data-kse-device-tier="phone"] #kse-filter-modal-root .kse-filter-taxon-label,
html[data-kse-device-tier="tablet"] #kse-filter-modal-root .kse-filter-taxon-label {
  font-size: var(--kse-filter-label-size) !important;
}

/* --- MOBILE PARITY ENFORCEMENT V3 (dock + passport, non-overlap) --- */
html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 58px);
  --kse-dock-top-btn-lift: -1px;
  --kse-dock-top-tip-lift: -2px;
  --kse-passport-grid-cols: 3;
  --kse-passport-grid-gap: 8px;
  --kse-passport-card-min-h: 100px;
  --kse-passport-card-pad-top: 8px;
  --kse-passport-chip-font: 6px;
  --kse-passport-chip-pad-y: 1px;
  --kse-passport-chip-pad-x: 5px;
}

@media (max-width: 389px) {
  html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] {
    --kse-passport-grid-cols: 2;
    --kse-passport-grid-gap: 10px;
    --kse-passport-card-min-h: 112px;
    --kse-passport-card-pad-top: 10px;
  }
}

@media (min-width: 430px) {
  html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] {
    --kse-passport-grid-cols: 3;
    --kse-passport-grid-gap: 8px;
    --kse-passport-card-min-h: 98px;
    --kse-passport-card-pad-top: 7px;
    --kse-passport-chip-font: 6px;
  }
}

@media (max-width: 405px) {
  html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] {
    --kse-passport-grid-cols: 3;
    --kse-passport-grid-gap: 9px;
    --kse-passport-card-min-h: 96px;
    --kse-passport-card-pad-top: 7px;
  }
}

html[data-kse-device-tier="phone"][data-kse-host-mode="standalone"][data-kse-orientation="portrait"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 62px);
}

html[data-kse-device-tier="phone"][data-kse-host-mode="standalone"][data-kse-orientation="landscape"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 48px);
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-host:not(.dock-map-focus-mode) {
  top: auto !important;
  bottom: var(--kse-dock-top-row-bottom) !important;
  align-items: flex-end !important;
  z-index: 10019 !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-row {
  width: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-btn {
  min-width: 42px !important;
  transform: translateY(var(--kse-dock-top-btn-lift)) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-tip {
  font-size: 7px !important;
  line-height: 1.03 !important;
  margin-top: 0 !important;
  transform: translateY(var(--kse-dock-top-tip-lift)) !important;
  white-space: nowrap !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview .dock-map-top-btn--utility-first {
  margin-left: auto !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview .dock-mobile-utility-stack {
  display: none !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-action-row--compact-mobile {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(var(--kse-mobile-action-count, 5), minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 2px 8px 0 !important;
  align-items: end !important;
  justify-content: stretch !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile {
  width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-modal-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-modal-header {
  padding-top: calc(env(safe-area-inset-top) + 10px) !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section {
  margin-bottom: 10px !important;
  padding: 14px !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div {
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 0.9 !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid {
  width: 100% !important;
  max-width: clamp(296px, 84vw, 356px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

@media (max-width: 405px) {
  html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid {
    max-width: clamp(284px, 82vw, 334px) !important;
  }
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div img {
  width: clamp(28px, 9.8vw, 40px) !important;
  height: clamp(28px, 9.8vw, 40px) !important;
  margin-bottom: 5px !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div [class*="text-\\[10px\\]"],
html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div [class*="text-\\[10px\\]"].md\:text-xs {
  font-size: 8px !important;
  line-height: 1.08 !important;
}

html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div:not([class*="opacity-50"])::before,
html[data-kse-device-tier="phone"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div[class*="opacity-50"]::before {
  top: 8px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  max-width: 88% !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* Passport landscape hotfix: keep cards in-grid, prevent tile overlap */
html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .modal-overlay.kse-passport-overlay .kse-passport-section .grid > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 0.72 !important;
}

/* Guide Hub: full-screen on phone only */
html[data-kse-device-tier="phone"] .kse-guidehub-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] .kse-guidehub-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}

html[data-kse-device-tier="phone"] .kse-guidehub-header {
  padding-top: calc(env(safe-area-inset-top) + 10px) !important;
  padding-left: max(12px, calc(env(safe-area-inset-left) + 10px)) !important;
  padding-right: max(12px, calc(env(safe-area-inset-right) + 10px)) !important;
}

html[data-kse-device-tier="phone"] .kse-guidehub-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px)) !important;
}

/* Global map attribution: keep visible text, remove background chrome */
.leaflet-control-attribution,
.leaflet-control-attribution.leaflet-control,
.maplibregl-ctrl-attrib,
.mapboxgl-ctrl-attrib {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Phone performance mode (set by head_bootstrap_v1.js). Desktop and tablet stay full fidelity. */
html.kse-perf-lite body {
  animation: none !important;
  background-size: 180% 180% !important;
}

html.kse-perf-lite #confetti-canvas {
  display: none !important;
}

html.kse-perf-lite [class*="animate-"] {
  animation: none !important;
}

html.kse-perf-lite .modal-overlay,
html.kse-perf-lite .dash-overlay,
html.kse-perf-lite .lightbox-overlay,
html.kse-perf-lite .slider-container,
html.kse-perf-lite .kse-cloud-banner,
html.kse-perf-lite .dock-mobile-controls-tray {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.kse-perf-lite .glimmer-layer,
html.kse-perf-lite .kse-credits-stardust,
html.kse-perf-lite .kse-credits-moon-glow,
html.kse-perf-lite .kse-credits-starburst {
  display: none !important;
}

html.kse-perf-lite .smart-dock-base .dock-btn,
html.kse-perf-lite .smart-dock-base .dock-notch > button,
html.kse-perf-lite .map-ctl,
html.kse-perf-lite .btn-gold-glimmer {
  transition-duration: 0.09s !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
}

html.kse-perf-lite .smart-dock-base .dock-btn,
html.kse-perf-lite .smart-dock-base .dock-icon-img,
html.kse-perf-lite .coin,
html.kse-perf-lite .coin-f {
  filter: none !important;
}

/* --- FINAL PHONE SAFE-ZONE + DOCK STRIP ALIGNMENT V2 (2026-03-29)
   Mobile-only map dock tuning. Reversible: remove this block. --- */
html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 70px);
  --kse-dock-top-btn-lift: -1px;
  --kse-dock-top-tip-lift: -2px;
  --kse-dock-mobile-shelf-height: 172px;
  --kse-dock-mobile-bottom-pad: 8px;
  --kse-dock-action-strip-pt: 4px;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 52px);
  --kse-dock-top-btn-lift: 0px;
  --kse-dock-top-tip-lift: -1px;
  --kse-dock-mobile-shelf-height: 132px;
  --kse-dock-mobile-bottom-pad: 4px;
  --kse-dock-action-strip-pt: 2px;
}

html[data-kse-device-tier="phone"][data-kse-host-mode="standalone"][data-kse-orientation="portrait"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 76px);
  --kse-dock-mobile-shelf-height: 178px;
  --kse-dock-mobile-bottom-pad: 10px;
}

html[data-kse-device-tier="phone"][data-kse-host-mode="standalone"][data-kse-orientation="landscape"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 58px);
  --kse-dock-mobile-shelf-height: 138px;
  --kse-dock-mobile-bottom-pad: 6px;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact {
  --dock-mapview-min-height: var(--kse-dock-mobile-shelf-height, 160px) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .max-w-3xl {
  min-height: var(--kse-dock-mobile-shelf-height, 160px) !important;
  padding-bottom: max(4px, calc(env(safe-area-inset-bottom) + var(--kse-dock-mobile-bottom-pad, 6px))) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-controls-host:not(.dock-map-focus-mode) {
  bottom: var(--kse-dock-top-row-bottom) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-btn {
  transform: translateY(var(--kse-dock-top-btn-lift)) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-map-top-tip {
  transform: translateY(var(--kse-dock-top-tip-lift)) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip {
  padding-top: var(--kse-dock-action-strip-pt, 4px) !important;
  padding-bottom: 0 !important;
  align-items: end !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-btn span {
  margin-top: 2px !important;
}

/* --- PHONE DOCK MICRO-TUNE V3 (2026-03-29)
   Keep mobile dock rows aligned, but avoid forced justified tiles.
   Reversible: remove this block. Desktop/tablet untouched. --- */
html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] {
  --kse-dock-camp-btn-size: 72px;
  --kse-dock-hide-btn-size: 54px;
  --kse-dock-action-label-drop: 4px;
  --kse-dock-action-label-color: #f2dfbf;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] {
  --kse-dock-camp-btn-size: 76px;
  --kse-dock-hide-btn-size: 56px;
  --kse-dock-action-label-drop: 7px;
  --kse-dock-action-label-color: #f6e7cc;
}

html[data-kse-device-tier="phone"][data-kse-host-mode="browser"][data-kse-orientation="portrait"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 56px);
  --kse-dock-mobile-shelf-height: 148px;
  --kse-dock-mobile-bottom-pad: 2px;
}

html[data-kse-device-tier="phone"][data-kse-host-mode="browser"][data-kse-orientation="landscape"] {
  --kse-dock-top-row-bottom: calc(env(safe-area-inset-bottom) + 42px);
  --kse-dock-mobile-shelf-height: 118px;
  --kse-dock-mobile-bottom-pad: 2px;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-btn--camp {
  --dock-btn-size: var(--kse-dock-camp-btn-size, 72px) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-mobile-compact .dock-btn--hide {
  --dock-btn-size: var(--kse-dock-hide-btn-size, 54px) !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: none !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-strip::-webkit-scrollbar {
  display: none !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-action-row--compact-mobile {
  display: flex !important;
  justify-content: center !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-tile {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 58px !important;
}

html[data-kse-device-tier="phone"] .smart-dock-base.dock-mapview.dock-mapview-action-compact .dock-mobile-action-btn span {
  margin-top: 3px !important;
  transform: translateY(var(--kse-dock-action-label-drop, 4px)) !important;
  color: var(--kse-dock-action-label-color, #f2dfbf) !important;
  text-shadow: 0 1px 2px rgba(40, 24, 12, 0.72) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] #map-wrapper-stable.fullscreen .map-ctl.ctl-tl {
  left: max(8px, calc(env(safe-area-inset-left) + 8px)) !important;
  top: calc(env(safe-area-inset-top) + var(--kse-map-ctl-offset-top, 8px)) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] #map-wrapper-stable.fullscreen .notch-prof {
  left: max(6px, calc(env(safe-area-inset-left) + 6px)) !important;
  top: calc(env(safe-area-inset-top) + var(--kse-map-prof-offset-top, 74px)) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] #map-wrapper-stable.fullscreen .notch-top-right {
  right: max(8px, calc(env(safe-area-inset-right) + 8px)) !important;
}

/* Around Here should behave as a true full-screen phone modal. */
html[data-kse-device-tier="phone"] .kse-around-guide-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-shell.mobile-fullscreen-quest {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background:
    linear-gradient(180deg, #8f4d1f 0%, #7a3f17 33%, #e6d6b9 33%, #e6d6b9 100%),
    url('/images/textures/cardboard-flat.opt.webp') center/240px 240px repeat !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-header {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding-top: calc(env(safe-area-inset-top) + 6px) !important;
  padding-left: max(10px, calc(env(safe-area-inset-left) + 8px)) !important;
  padding-right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-header-controls {
  top: calc(env(safe-area-inset-top) + 4px) !important;
  right: max(8px, calc(env(safe-area-inset-right) + 6px)) !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-icon-btn.is-close-dock {
  width: 60px !important;
  height: 60px !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-content {
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-header-main {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding-top: 0 !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-main-logo {
  position: static !important;
  transform: none !important;
  width: auto !important;
  max-width: 84vw !important;
  height: auto !important;
}

html[data-kse-device-tier="phone"] .kse-around-guide-title-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}

/* Phone portrait: prevent header/content collision and keep title readable. */
html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-around-guide-header {
  min-height: 164px !important;
  gap: 6px !important;
  padding-bottom: 8px !important;
  padding-right: max(74px, calc(env(safe-area-inset-right) + 70px)) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-around-guide-main-logo {
  max-width: 78vw !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-around-guide-title {
  font-size: clamp(22px, 7.2vw, 32px) !important;
  line-height: 1.04 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-around-guide-subtitle {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-around-guide-icon-btn.is-close-dock,
html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-around-guide-close-dock-img {
  width: 58px !important;
  height: 58px !important;
}

/* Phone landscape: shrink top footprint so content gets more room. */
html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-around-guide-header {
  min-height: 122px !important;
  gap: 4px !important;
  padding-top: max(4px, calc(env(safe-area-inset-top) + 2px)) !important;
  padding-bottom: 6px !important;
  padding-right: max(66px, calc(env(safe-area-inset-right) + 62px)) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-around-guide-main-logo {
  max-width: 46vw !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-around-guide-title {
  font-size: clamp(16px, 3.8vw, 25px) !important;
  line-height: 1.03 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-around-guide-subtitle {
  font-size: 10px !important;
  line-height: 1.05 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-around-guide-header-controls {
  top: max(2px, calc(env(safe-area-inset-top) + 1px)) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-around-guide-icon-btn.is-close-dock,
html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-around-guide-close-dock-img {
  width: 50px !important;
  height: 50px !important;
}

/* Around Here desktop/tablet viewport fill (mobile untouched). */
@media (min-width: 821px) {
  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay > .modal-box-rigid.kse-passport-modal-shell.kse-around-guide-shell.mobile-fullscreen-quest {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: var(--kse-vvh, 100dvh) !important;
    min-height: var(--kse-vvh, 100dvh) !important;
    max-height: var(--kse-vvh, 100dvh) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Dashboard modal safe-area alignment on iPhone portrait/standalone. */
html[data-kse-device-tier="phone"] .kse-dash-overlay {
  inset: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] .kse-dash-shell {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border-width: 0 !important;
}

html[data-kse-device-tier="phone"] .kse-dash-header {
  padding-top: max(14px, calc(env(safe-area-inset-top) + 10px)) !important;
  padding-left: max(18px, calc(env(safe-area-inset-left) + 14px)) !important;
  padding-right: max(88px, calc(env(safe-area-inset-right) + 84px)) !important;
  padding-bottom: 16px !important;
}

html[data-kse-device-tier="phone"] .kse-dash-close {
  top: max(2px, calc(env(safe-area-inset-top) - 2px)) !important;
  right: max(8px, calc(env(safe-area-inset-right) + 6px)) !important;
}

/* Around Here final desktop/tablet stabilization (no mobile impact). */
@media (min-width: 821px) {
  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-header {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 14px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-header-main {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding-top: 0 !important;
    padding-right: 86px !important;
    padding-left: 8px !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-main-logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: clamp(190px, 24vw, 320px) !important;
    max-width: min(60vw, 320px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-title-wrap {
    width: 100% !important;
    max-width: min(calc(100% - 18px), 940px) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-passport-modal-header .kse-around-guide-title {
    margin: 0 !important;
    font-size: clamp(30px, 3.9vw, 54px) !important;
    line-height: 1.03 !important;
    white-space: normal !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-passport-modal-header .kse-around-guide-subtitle {
    margin-top: 4px !important;
    font-size: clamp(12px, 1.3vw, 18px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-header-controls {
    top: 8px !important;
    right: 10px !important;
    width: auto !important;
    z-index: 7 !important;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-main-logo {
    width: clamp(172px, 26vw, 260px) !important;
    max-width: min(58vw, 260px) !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-passport-modal-header .kse-around-guide-title {
    font-size: clamp(24px, 3.1vw, 36px) !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-passport-modal-header .kse-around-guide-subtitle {
    font-size: clamp(11px, 1.15vw, 14px) !important;
  }
}

@media (min-width: 821px) and (max-height: 820px) {
  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-header {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-around-guide-main-logo {
    width: clamp(160px, 22vw, 230px) !important;
    max-width: min(52vw, 230px) !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-passport-modal-header .kse-around-guide-title {
    font-size: clamp(21px, 2.5vw, 30px) !important;
  }

  .modal-overlay.kse-passport-overlay.kse-around-guide-overlay .kse-passport-modal-header .kse-around-guide-subtitle {
    font-size: clamp(10px, 1vw, 12px) !important;
    margin-top: 2px !important;
  }
}

html[data-kse-device-tier="phone"] .kse-dash-trophy {
  top: max(2px, calc(env(safe-area-inset-top) - 2px)) !important;
  right: max(72px, calc(env(safe-area-inset-right) + 70px)) !important;
}

html[data-kse-device-tier="phone"] .kse-dash-scroll {
  background: linear-gradient(180deg, #f9fcff 0%, #eff6ff 100%) !important;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px)) !important;
}

/* iPhone fallback: force full viewport coverage for dashboard + guide overlays. */
@media (max-width: 820px) {
  .dash-overlay.kse-dash-overlay,
  .kse-guidehub-overlay,
  #kse-guide-modal-root {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .dash-overlay.kse-dash-overlay,
  .kse-guidehub-overlay {
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .dash.kse-dash-shell,
  .kse-guidehub-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  .dash.kse-dash-shell,
  .kse-guidehub-shell,
  .kse-guidehub-scroll,
  .dash .kse-dash-scroll {
    background-clip: padding-box !important;
  }

  .kse-guidehub-scroll,
  .dash .kse-dash-scroll {
    padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  }

  .kse-terminal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #4a2b19 !important;
  }

  .modal-box-rigid.mobile-fullscreen.kse-terminal-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #4a2b19 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .kse-terminal-header {
    min-height: 108px !important;
    padding-top: max(6px, calc(env(safe-area-inset-top) + 4px)) !important;
    align-items: flex-end !important;
  }

  .kse-terminal-scout {
    top: max(8px, calc(env(safe-area-inset-top) + 6px)) !important;
    left: max(4px, calc(env(safe-area-inset-left) + 4px)) !important;
    width: 66px !important;
    height: 84px !important;
    z-index: 24 !important;
    pointer-events: none !important;
  }

  .kse-terminal-header > .pb-4.pl-48 {
    min-width: 0 !important;
    width: 100% !important;
    padding-left: max(110px, calc(env(safe-area-inset-left) + 106px)) !important;
    padding-right: max(82px, calc(env(safe-area-inset-right) + 78px)) !important;
    padding-bottom: 8px !important;
  }

  .kse-terminal-header > .pb-4.pr-4 {
    position: absolute !important;
    right: max(8px, calc(env(safe-area-inset-right) + 8px)) !important;
    bottom: 10px !important;
    padding: 0 !important;
    z-index: 45 !important;
  }

  .kse-terminal-header .kse-title-panel-wrap {
    margin-left: 0 !important;
    transform: none !important;
    min-height: 66px !important;
    max-width: calc(100vw - max(110px, calc(env(safe-area-inset-left) + 106px)) - max(82px, calc(env(safe-area-inset-right) + 78px))) !important;
    padding: 12px 12px 8px !important;
    gap: 4px !important;
    justify-content: flex-end !important;
  }

  .kse-terminal-header .kse-title-panel-text {
    font-size: clamp(1.55rem, 7.2vw, 2rem) !important;
    line-height: 1.02 !important;
    transform: translateY(2px) !important;
  }

  .kse-terminal-shell.mode-leaders .kse-terminal-header .kse-title-panel-text {
    font-size: clamp(1.12rem, 5.2vw, 1.42rem) !important;
    line-height: 1.02 !important;
  }

  .kse-terminal-header .terminal-title-subrow {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .kse-terminal-header .terminal-title-subtitle-chip {
    font-size: 0.66rem !important;
    letter-spacing: 0.14em !important;
    padding: 4px 9px !important;
    line-height: 1 !important;
  }

  .kse-terminal-header .terminal-live-feed-chip {
    padding: 2px 7px !important;
    gap: 4px !important;
    transform: translateY(0) !important;
    white-space: nowrap !important;
  }

  .kse-terminal-shell.mode-results .terminal-title-subtitle-chip {
    display: none !important;
  }

  .kse-terminal-close {
    margin-top: 0 !important;
    width: 46px !important;
    height: 46px !important;
    position: relative !important;
    z-index: 40 !important;
  }

  .kse-terminal-body {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    background-color: #064e3b !important;
    padding-bottom: max(8px, calc(env(safe-area-inset-bottom) + 6px)) !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
  }

  .kse-terminal-body > * {
    min-height: 0 !important;
  }

  .terminal-ks-sidebar {
    max-height: max(156px, 28vh) !important;
    padding: 10px !important;
  }

  .terminal-timecard {
    transform: none !important;
    margin-bottom: 8px !important;
    padding: 10px 10px 8px !important;
  }

  .terminal-timecard .absolute.-top-3 {
    font-size: 1rem !important;
    top: -10px !important;
  }

  .terminal-timecard-head {
    margin-bottom: 4px !important;
  }

  .terminal-timecard-toggle {
    padding: 2px 7px !important;
    font-size: 9px !important;
  }

  .terminal-timecard-summary {
    margin-bottom: 6px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .terminal-timecard-details .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  .terminal-timecard-details button {
    font-size: 9px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .terminal-hotspots-wrap {
    padding: 10px 10px 4px !important;
  }

  .terminal-hotspots-toolbar {
    border-radius: 14px !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .terminal-hotspots-title {
    font-size: 1.03rem !important;
    line-height: 1.15 !important;
  }

  .terminal-hotspots-subtitle {
    font-size: 10px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
  }

  .terminal-hotspots-toggle {
    padding: 2px !important;
    gap: 4px !important;
  }

  .terminal-hotspots-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
  }

  .terminal-leader-stage--soil {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px 8px 10px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-board {
    width: 100% !important;
    max-width: min(100%, 980px) !important;
    overflow: hidden !important;
  }

  .terminal-leader-stage--soil .terminal-leader-board-head {
    padding: 54px 12px 6px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-heading {
    padding-right: 0 !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .terminal-leader-stage--soil .terminal-leader-list-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding: 8px 6px 10px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-wrap {
    z-index: 35 !important;
    position: static !important;
    transform: none !important;
    margin: 0 auto 2px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .terminal-leader-stage--soil .terminal-leader-inner-title {
    display: none !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
    padding: 4px 8px !important;
    gap: 5px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle > span.relative {
    width: 30px !important;
    height: 16px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle > span.relative > span {
    width: 12px !important;
    height: 12px !important;
    top: 2px !important;
    left: 2px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle[aria-checked="true"] > span.relative > span {
    transform: translateX(14px) !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass {
    top: -8px !important;
    height: 74px !important;
    overflow: visible !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass-strip {
    left: -55vw !important;
    right: -55vw !important;
    top: -8px !important;
    height: 56px !important;
    z-index: 22 !important;
    overflow: visible !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center -4px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass-strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 12px;
    background: linear-gradient(180deg, rgba(104, 43, 21, 0) 0%, rgba(104, 43, 21, 0.56) 80%, rgba(104, 43, 21, 0.72) 100%);
    pointer-events: none;
    z-index: 23;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass::before {
    content: "";
    position: absolute;
    left: -55vw;
    right: -55vw;
    top: -18px;
    height: 20px;
    background: linear-gradient(180deg, rgba(158, 226, 245, 0.82) 0%, rgba(158, 226, 245, 0.52) 68%, rgba(158, 226, 245, 0) 100%);
    pointer-events: none;
    z-index: 21;
  }

  .terminal-leader-stage--soil .terminal-leader-row {
    min-width: 0 !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .terminal-leader-stage--soil .terminal-leader-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.88rem !important;
    line-height: 1.12 !important;
  }

  .terminal-leader-stage--soil .terminal-leader-count {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 6px 8px !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .terminal-results-toolbar {
    padding: 8px 8px !important;
    gap: 8px !important;
  }

  .terminal-results-back {
    font-size: 11px !important;
    gap: 6px !important;
    padding: 6px 6px !important;
    border-radius: 10px !important;
    position: relative !important;
    z-index: 42 !important;
  }

  .terminal-results-back-label {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }

  .terminal-results-title-chip {
    max-width: 52vw !important;
    font-size: clamp(1rem, 5.4vw, 1.4rem) !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.05 !important;
  }

  .terminal-results-map-btn {
    padding: 7px 10px !important;
    border-radius: 12px !important;
    border: 1px solid #0d6d3f !important;
    background: linear-gradient(180deg, #34d399 0%, #16a34a 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .terminal-results-map-label {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 560px) {
  .terminal-leader-stage--soil .terminal-leader-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 0 !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-wrap {
    position: static !important;
    transform: none !important;
    margin-top: 2px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .terminal-leader-stage--soil .terminal-leader-title {
    max-width: 100% !important;
    font-size: clamp(1.12rem, 5.6vw, 1.4rem) !important;
    padding: 6px 10px !important;
  }

  .kse-terminal-shell.mode-leaders .kse-terminal-header .kse-title-panel-text {
    font-size: clamp(1.02rem, 7.2vw, 1.3rem) !important;
    line-height: 1 !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass {
    top: -9px !important;
    height: 70px !important;
    overflow: visible !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass-strip {
    left: -55vw !important;
    right: -55vw !important;
    top: -8px !important;
    height: 54px !important;
    z-index: 22 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center -4px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass::before {
    content: "";
    position: absolute;
    left: -55vw;
    right: -55vw;
    top: -17px;
    height: 18px;
    background: linear-gradient(180deg, rgba(158, 226, 245, 0.78) 0%, rgba(158, 226, 245, 0.5) 72%, rgba(158, 226, 245, 0) 100%);
    pointer-events: none;
    z-index: 21;
  }

  .terminal-leader-stage--soil .terminal-leader-list-scroll {
    padding: 8px 6px 10px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-row {
    padding: 8px 8px !important;
    border-radius: 16px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-row .w-9.h-9,
  .terminal-leader-stage--soil .terminal-leader-row .w-8.h-8 {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    margin-right: 8px !important;
    font-size: 13px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-row img.w-10.h-10,
  .terminal-leader-stage--soil .terminal-leader-row .w-10.h-10 {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin-right: 10px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-name {
    font-size: 0.84rem !important;
  }

  .terminal-leader-stage--soil .terminal-leader-count {
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 5px 7px !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
  }

  .terminal-results-toolbar {
    padding: 7px 7px !important;
    gap: 6px !important;
  }

  .terminal-results-back {
    font-size: 10px !important;
    padding: 5px 6px !important;
  }

  .terminal-results-back-label {
    font-size: 9px !important;
  }

  .terminal-results-title-chip {
    max-width: 50vw !important;
    padding: 6px 8px !important;
    font-size: 0.95rem !important;
  }

  .terminal-results-map-btn {
    padding: 6px 8px !important;
    min-height: 34px !important;
  }

  .terminal-results-map-label {
    font-size: 9px !important;
  }
}

@media (max-width: 980px) and (orientation: landscape) {
  html[data-kse-device-tier="phone"] body.modal-open {
    background: #064e3b !important;
  }

  .kse-terminal-overlay {
    background: #2b190f !important;
  }

  .kse-terminal-overlay::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(18px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 78, 59, 0) 0%, rgba(6, 78, 59, 0.86) 55%, #064e3b 100%);
    pointer-events: none;
    z-index: 500;
  }

  .modal-box-rigid.mobile-fullscreen.kse-terminal-shell {
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #064e3b !important;
  }

  .kse-terminal-header {
    min-height: 100px !important;
    padding-top: max(4px, calc(env(safe-area-inset-top) + 2px)) !important;
  }

  .kse-terminal-scout {
    top: max(4px, calc(env(safe-area-inset-top) + 2px)) !important;
    left: max(10px, calc(env(safe-area-inset-left) + 8px)) !important;
    width: 74px !important;
    height: 88px !important;
  }

  .kse-terminal-header > .pb-4.pl-48 {
    padding-left: max(122px, calc(env(safe-area-inset-left) + 118px)) !important;
    padding-right: max(94px, calc(env(safe-area-inset-right) + 90px)) !important;
    padding-bottom: 6px !important;
  }

  .kse-terminal-header .kse-title-panel-wrap {
    max-width: calc(100vw - max(122px, calc(env(safe-area-inset-left) + 118px)) - max(94px, calc(env(safe-area-inset-right) + 90px))) !important;
    min-height: 60px !important;
    padding: 10px 12px 7px !important;
    gap: 4px !important;
    justify-content: flex-end !important;
  }

  .kse-terminal-header .kse-title-panel-text {
    font-size: clamp(1.16rem, 3.6vw, 1.56rem) !important;
    line-height: 1.02 !important;
    transform: translateY(3px) !important;
  }

  .kse-terminal-shell.mode-leaders .kse-terminal-header .kse-title-panel-text {
    font-size: clamp(1.04rem, 3.2vw, 1.3rem) !important;
  }

  .kse-terminal-shell.mode-results .terminal-title-subtitle-chip {
    display: none !important;
  }

  .kse-terminal-header > .pb-4.pr-4 {
    right: max(12px, calc(env(safe-area-inset-right) + 10px)) !important;
    bottom: 8px !important;
  }

  .kse-terminal-close {
    width: 50px !important;
    height: 50px !important;
  }

  .kse-terminal-body {
    position: relative !important;
    padding-left: max(42px, calc(env(safe-area-inset-left) + 38px)) !important;
    padding-right: max(42px, calc(env(safe-area-inset-right) + 38px)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    background-color: #064e3b !important;
  }

  .kse-terminal-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(18px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 78, 59, 0) 0%, rgba(6, 78, 59, 0.14) 64%, rgba(6, 78, 59, 0.26) 100%);
    pointer-events: none;
    z-index: 0;
  }

  .kse-terminal-body > * {
    position: relative;
    z-index: 1;
  }

  .terminal-stats-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(18px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 78, 59, 0) 0%, rgba(6, 78, 59, 0.1) 66%, rgba(6, 78, 59, 0.22) 100%);
    pointer-events: none;
    z-index: 0;
  }

  .terminal-leader-stage--soil::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 78, 59, 0) 0%, rgba(6, 78, 59, 0.08) 68%, rgba(6, 78, 59, 0.2) 100%);
    pointer-events: none;
    z-index: 0;
  }

  .terminal-ks-sidebar {
    max-height: 130px !important;
    padding: 8px 10px !important;
    padding-top: 12px !important;
  }

  .terminal-timecard {
    margin-top: 8px !important;
    padding: 7px 9px !important;
  }

  .terminal-timecard-details .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  .terminal-hotspots-wrap {
    padding: 7px 10px 2px !important;
  }

  .terminal-hotspots-toolbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 6px 10px !important;
    padding: 8px 10px !important;
  }

  .terminal-hotspots-title {
    font-size: 0.95rem !important;
  }

  .terminal-hotspots-subtitle {
    font-size: 9px !important;
  }

  .terminal-hotspots-btn {
    padding: 4px 8px !important;
    font-size: 9px !important;
  }

  .terminal-results-toolbar {
    padding-left: max(14px, calc(env(safe-area-inset-left) + 12px)) !important;
    padding-right: max(12px, calc(env(safe-area-inset-right) + 10px)) !important;
  }

  .terminal-results-back {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  .terminal-results-back-label {
    font-size: 9px !important;
  }

  .terminal-results-title-chip {
    max-width: 46vw !important;
    font-size: 1rem !important;
    padding: 6px 10px !important;
  }

  .terminal-results-map-btn {
    padding: 6px 10px !important;
  }

  .terminal-leader-stage--soil {
    padding: 8px 6px 8px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-board-head {
    padding: 50px 10px 6px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-inner-title {
    display: none !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-wrap {
    position: static !important;
    transform: none !important;
    justify-content: center !important;
    margin: 0 auto 2px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle {
    font-size: 8px !important;
    padding: 3px 7px !important;
    gap: 5px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle > span.relative {
    width: 28px !important;
    height: 14px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle > span.relative > span {
    width: 10px !important;
    height: 10px !important;
    top: 2px !important;
    left: 2px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-privacy-toggle[aria-checked="true"] > span.relative > span {
    transform: translateX(14px) !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass {
    top: -8px !important;
    height: 68px !important;
    overflow: visible !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass-strip {
    left: -55vw !important;
    right: -55vw !important;
    top: -8px !important;
    height: 54px !important;
    z-index: 22 !important;
    overflow: visible !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center -4px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass-strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 12px;
    background: linear-gradient(180deg, rgba(104, 43, 21, 0) 0%, rgba(104, 43, 21, 0.56) 80%, rgba(104, 43, 21, 0.72) 100%);
    pointer-events: none;
    z-index: 23;
  }

  .terminal-leader-stage--soil .terminal-leader-top-grass::before {
    content: "";
    position: absolute;
    left: -55vw;
    right: -55vw;
    top: -18px;
    height: 20px;
    background: linear-gradient(180deg, rgba(158, 226, 245, 0.82) 0%, rgba(158, 226, 245, 0.5) 70%, rgba(158, 226, 245, 0) 100%);
    pointer-events: none;
    z-index: 21;
  }

  .terminal-leader-stage--soil .terminal-leader-list-scroll {
    padding: 6px 6px 8px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-row {
    padding: 7px 8px !important;
  }

  .terminal-leader-stage--soil .terminal-leader-name {
    font-size: 0.8rem !important;
  }

  .terminal-leader-stage--soil .terminal-leader-count {
    min-width: 68px !important;
    max-width: 68px !important;
    font-size: 0.76rem !important;
  }
}

/* Phone-only leaders fix: prevent top grass strip edge clipping. */
html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil .terminal-leader-top-grass {
  left: -1px !important;
  right: -1px !important;
}

html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil .terminal-leader-top-grass-strip {
  left: -55vw !important;
  right: -55vw !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center top !important;
}

/* Phone-only leaders backdrop tuning: remove dark side walls, keep bottom grounding. */
html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .kse-terminal-body {
  background-color: transparent !important;
}

html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil {
  background-image: url('/images/top_bg_with_soil.png') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #6db9e8 !important;
}

html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-clouds,
html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-fx {
  display: none !important;
}

html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-top-grass {
  display: none !important;
}

html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil .terminal-leader-board-head {
  padding-top: 14px !important;
}

@media (max-width: 560px) {
  html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-top-grass {
    display: none !important;
  }

  html[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil .terminal-leader-board-head {
    padding-top: 14px !important;
  }
}

/* Community Gallery phone modal polish (scoped to avoid cross-modal regressions). */
html[data-kse-device-tier="phone"] .kse-community-hub-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-shell.mobile-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  background-color: #eaddcf !important;
  background-image: url("/images/cream-paper.png") !important;
  background-size: cover !important;
  background-repeat: repeat !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-header {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding-top: calc(env(safe-area-inset-top) + 6px) !important;
  padding-left: max(10px, calc(env(safe-area-inset-left) + 8px)) !important;
  padding-right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
  padding-bottom: 8px !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-toolbar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: max(10px, calc(env(safe-area-inset-left) + 8px)) !important;
  padding-right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
  gap: 8px !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-scroll {
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  overscroll-behavior: contain;
}

html[data-kse-device-tier="phone"] .kse-community-hub-title {
  margin: 0 !important;
  font-size: clamp(28px, 7.6vw, 44px) !important;
  line-height: 1.02 !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-tab-host {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-tab-scroll {
  padding-right: 8px !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-tab-rail {
  max-width: 100% !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-tab-endcap {
  width: 10px !important;
  min-width: 10px !important;
  flex: 0 0 10px !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-tab-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-search {
  width: min(100%, 420px) !important;
  max-width: min(100%, 420px) !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-filter-rail {
  gap: 6px !important;
  padding: 4px 6px !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-filter-pill {
  min-width: 72px !important;
  min-height: 32px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
}

html[data-kse-device-tier="phone"] .kse-community-hub-county-pill {
  min-height: 32px !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-community-hub-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "title close"
    "tabs tabs";
  align-items: center !important;
  gap: 8px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-community-hub-title {
  grid-area: title;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-community-hub-tab-host {
  grid-area: tabs;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-community-hub-close {
  grid-area: close;
  margin-left: 0 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="portrait"] .kse-community-hub-filter-pill {
  min-width: 68px !important;
  min-height: 31px !important;
  padding: 5px 11px !important;
  font-size: 11px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "title tabs close";
  align-items: center !important;
  gap: 8px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-title {
  grid-area: title;
  font-size: clamp(18px, 3vw, 30px) !important;
  line-height: 1 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-tab-host {
  grid-area: tabs;
  width: 100% !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-tab-scroll {
  padding-right: 12px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-close {
  grid-area: close;
  margin-left: 0 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-tab-btn {
  padding: 5px 10px !important;
  font-size: 11px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-search-wrap {
  width: auto !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-search {
  width: min(42vw, 330px) !important;
  max-width: min(42vw, 330px) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-filter-wrap {
  width: 100% !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-filter-rail {
  gap: 5px !important;
  padding: 4px 6px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-filter-pill {
  min-width: 64px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-community-hub-county-pill {
  min-height: 30px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
}

/* Notebook day-detail modal: phone-safe sizing/layout (portrait + landscape). */
html[data-kse-device-tier="phone"] .kse-notebook-daydetail-overlay {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-header {
  padding-top: calc(env(safe-area-inset-top) + 6px) !important;
  padding-left: max(10px, calc(env(safe-area-inset-left) + 8px)) !important;
  padding-right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
  padding-bottom: 8px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-date {
  font-size: clamp(28px, 8vw, 48px) !important;
  line-height: 1 !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-close {
  width: 42px !important;
  height: 42px !important;
  font-size: 28px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-main {
  flex-direction: column !important;
  min-height: 0 !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-editor {
  padding-top: 10px !important;
  padding-left: max(10px, calc(env(safe-area-inset-left) + 8px)) !important;
  padding-right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
  padding-bottom: 10px !important;
  min-height: 0 !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-textarea {
  font-size: 15px !important;
  line-height: 2rem !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-actions {
  gap: 8px !important;
  margin-top: 8px !important;
  padding-bottom: max(6px, calc(env(safe-area-inset-bottom) + 2px)) !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-save {
  min-height: 42px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-delete {
  min-width: 44px !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  font-size: 20px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-collected {
  max-height: 132px !important;
  border-top-width: 2px !important;
  border-left-width: 0 !important;
  padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-collected-title {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  padding: 6px 8px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-collected-list {
  gap: 8px !important;
  padding: 8px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-collected-card {
  width: 84px !important;
  min-width: 84px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-header {
  padding-top: calc(env(safe-area-inset-top) + 4px) !important;
  padding-bottom: 6px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-date {
  font-size: clamp(18px, 4vw, 30px) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-close {
  width: 36px !important;
  height: 36px !important;
  font-size: 24px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-editor {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-textarea {
  font-size: 14px !important;
  line-height: 1.75rem !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-save {
  min-height: 38px !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-delete {
  min-width: 40px !important;
  min-height: 38px !important;
  font-size: 18px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-collected {
  max-height: 96px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-collected-card {
  width: 72px !important;
  min-width: 72px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-shell {
  background-color: #f2e9da !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.64) 0%, rgba(237,225,203,0.88) 100%),
    url("/images/textures/texture_background_soft_white.jpg"),
    url("/images/textures/spotty_texture_bg.jpg") !important;
  background-size: 100% 100%, cover, 320px auto !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, top left !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-editor {
  background-color: #fdfbf7 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.66) 0%, rgba(247,240,230,0.72) 100%),
    url("/images/cream-paper.png") !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, repeat !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-art-strip > div {
  width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-collected {
  background-color: #e3d5ca !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(226,206,184,0.72) 100%),
    url("/images/cream-paper.png") !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, repeat !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-actions {
  justify-content: center !important;
  align-items: center !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-save {
  flex: 0 1 auto !important;
  width: min(70vw, 320px) !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-collected.is-collapsed {
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daydetail-collapse-toggle {
  line-height: 1 !important;
  min-height: 22px !important;
  padding: 4px 10px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-save {
  width: min(46vw, 240px) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daydetail-art-strip > div {
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
}

/* Notebook modal mobile compaction (calendar/header/tabs/day-cells). */
html[data-kse-device-tier="phone"] .kse-notebook-overlay {
  padding: 0 !important;
  align-items: stretch !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-shell.mobile-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--kse-vvh, 100dvh) !important;
  min-height: var(--kse-vvh, 100dvh) !important;
  max-height: var(--kse-vvh, 100dvh) !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: #f2e9da !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.64) 0%, rgba(237,225,203,0.9) 100%),
    url("/images/textures/texture_background_soft_white.jpg"),
    url("/images/textures/spotty_texture_bg.jpg") !important;
  background-size: 100% 100%, cover, 320px auto !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: center center, center center, top left !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-header {
  padding-top: calc(env(safe-area-inset-top) + 6px) !important;
  padding-left: max(10px, calc(env(safe-area-inset-left) + 8px)) !important;
  padding-right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
  padding-bottom: 8px !important;
  gap: 8px !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(228,209,186,0.9) 100%),
    url("/images/cream-paper.png") !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, repeat !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-title {
  font-size: clamp(24px, 7.2vw, 46px) !important;
  line-height: 1.02 !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-tab-rail {
  width: 100% !important;
  max-width: 100% !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-tab-btn {
  padding: 7px 12px !important;
  font-size: 12px !important;
  gap: 6px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-close {
  font-size: 46px !important;
  line-height: 1 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: auto !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-scroll {
  padding-top: 8px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(246,239,227,0.85) 100%),
    url("/images/cream-paper.png") !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat, repeat !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-month-nav {
  margin-bottom: 8px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-month-btn {
  width: 34px !important;
  height: 34px !important;
  font-size: 16px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-month-title {
  font-size: clamp(28px, 8vw, 46px) !important;
  line-height: 1.02 !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-calendar-shell {
  padding: 6px !important;
  border-width: 5px !important;
  border-radius: 18px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-weekdays {
  font-size: 9px !important;
  margin-bottom: 4px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-calendar-grid {
  gap: 4px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daycell {
  min-height: 74px !important;
  height: 74px !important;
  padding: 4px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daynum {
  font-size: 26px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daymeta {
  gap: 2px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daymeta-icon {
  font-size: 11px !important;
}

html[data-kse-device-tier="phone"] .kse-notebook-daychip {
  font-size: 8px !important;
  padding: 1px 4px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding-top: calc(env(safe-area-inset-top) + 2px) !important;
  padding-bottom: 6px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-title {
  font-size: clamp(16px, 3.4vw, 28px) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-tab-btn {
  padding: 5px 10px !important;
  font-size: 11px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-close {
  font-size: 40px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-month-btn {
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-month-title {
  font-size: clamp(20px, 4.2vw, 32px) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-calendar-shell {
  padding: 4px !important;
  border-width: 4px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-calendar-grid {
  gap: 3px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daycell {
  min-height: 58px !important;
  height: 58px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-notebook-daynum {
  font-size: 20px !important;
}

/* Fallback for environments where data-kse-device-tier/orientation isn't set. */
@media (max-width: 900px) {
  .kse-notebook-daydetail-art-strip > div {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
  }

  .kse-notebook-daydetail-save {
    flex: 0 1 auto !important;
    width: min(70vw, 320px) !important;
  }

  .kse-notebook-header {
    padding-top: calc(env(safe-area-inset-top) + 6px) !important;
    padding-bottom: 8px !important;
  }

  .kse-notebook-tab-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }

  .kse-notebook-month-title {
    font-size: clamp(28px, 8vw, 46px) !important;
  }

  .kse-notebook-daycell {
    min-height: 74px !important;
    height: 74px !important;
  }

  .kse-notebook-daynum {
    font-size: 26px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .kse-notebook-daydetail-art-strip > div {
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
  }

  .kse-notebook-daydetail-save {
    width: min(46vw, 240px) !important;
  }

  .kse-notebook-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding-top: calc(env(safe-area-inset-top) + 2px) !important;
    padding-bottom: 6px !important;
  }

  .kse-notebook-title {
    font-size: clamp(16px, 3.4vw, 28px) !important;
  }

  .kse-notebook-tab-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .kse-notebook-month-title {
    font-size: clamp(20px, 4.2vw, 32px) !important;
  }

  .kse-notebook-daycell {
    min-height: 58px !important;
    height: 58px !important;
  }

  .kse-notebook-daynum {
    font-size: 20px !important;
  }
}

/* Base Camp + toast mobile compaction (phone only; desktop/tablet untouched). */
html[data-kse-device-tier="phone"] .kse-fieldstation-map-btn {
  border-width: 3px !important;
  padding: 7px 12px !important;
  gap: 8px !important;
  font-size: 13px !important;
}

html[data-kse-device-tier="phone"] .kse-fieldstation-map-btn-icon {
  width: 34px !important;
  height: 34px !important;
}

html[data-kse-device-tier="phone"] .kse-fieldstation-map-btn-icon-img {
  width: 32px !important;
  height: 32px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-fieldstation-map-btn {
  padding: 6px 10px !important;
  gap: 6px !important;
  border-width: 2px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-fieldstation-map-btn-icon {
  width: 30px !important;
  height: 30px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-fieldstation-map-btn-icon-img {
  width: 28px !important;
  height: 28px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-fieldstation-map-btn-label {
  display: none !important;
}

html[data-kse-device-tier="phone"] .kse-fieldstation-points-pill {
  padding: 6px 12px !important;
  gap: 6px !important;
  border-width: 2px !important;
}

html[data-kse-device-tier="phone"] .kse-fieldstation-points-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}

html[data-kse-device-tier="phone"] .kse-fieldstation-points-value {
  font-size: 18px !important;
  line-height: 1 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-fieldstation-points-pill {
  padding: 4px 10px !important;
  gap: 5px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-fieldstation-points-icon {
  font-size: 16px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] .kse-fieldstation-points-value {
  font-size: 16px !important;
}

html[data-kse-device-tier="phone"] #badge-toast {
  bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px)) !important;
  right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
  border-left-width: 8px !important;
  gap: 12px !important;
  max-width: min(82vw, 420px) !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24) !important;
}

html[data-kse-device-tier="phone"] #badge-toast .text-5xl {
  font-size: 28px !important;
  line-height: 1 !important;
}

html[data-kse-device-tier="phone"] #badge-toast h4 {
  font-size: 1.35rem !important;
  line-height: 1.05 !important;
}

html[data-kse-device-tier="phone"] #badge-toast #badge-name {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] #badge-toast {
  padding: 8px 11px !important;
  border-radius: 16px !important;
  border-left-width: 6px !important;
  gap: 8px !important;
  max-width: min(46vw, 340px) !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] #badge-toast .text-5xl {
  font-size: 22px !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] #badge-toast h4 {
  font-size: 1.05rem !important;
}

html[data-kse-device-tier="phone"][data-kse-orientation="landscape"] #badge-toast #badge-name {
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
}

/* Driver.js onboarding tour: mascot thought bubbles */
.driver-popover.kse-driver-popover {
  border-radius: 20px !important;
  border: 3px solid #f2cb88 !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 242, 0.98), rgba(247, 233, 201, 0.96)),
    url('/images/textures/cardboard-flat.opt.webp') center/280px 280px repeat !important;
  box-shadow: 0 14px 34px rgba(43, 30, 10, 0.24) !important;
  max-width: min(420px, calc(100vw - 22px)) !important;
}

.driver-popover.kse-driver-popover .driver-popover-title {
  color: #7a3f17 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
}

.driver-popover.kse-driver-popover .driver-popover-description {
  color: #2f3f57 !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.driver-popover.kse-driver-popover .driver-popover-footer button {
  border-radius: 999px !important;
  border: 2px solid #d48b2f !important;
  background: linear-gradient(180deg, #fff0cd 0%, #f7d38f 100%) !important;
  color: #7a3f17 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.driver-popover.kse-driver-popover .driver-popover-footer button:hover {
  filter: brightness(1.04);
}

.driver-popover.kse-driver-popover .driver-popover-footer .driver-popover-skip-btn.driver-popover-close-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  margin-right: auto !important;
  color: #7a3f17 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.kse-tour-bubble-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.kse-tour-mascot-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.kse-tour-mascot {
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(24, 14, 6, 0.24));
}

.kse-tour-thought-bubble {
  position: relative;
  border-radius: 18px;
  border: 2px solid #d3e7f7;
  background: #f8fdff;
  color: #274861;
  padding: 10px 12px;
  font-weight: 800;
  line-height: 1.42;
}

.kse-tour-thought-bubble::before,
.kse-tour-thought-bubble::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 14px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 2px solid #d3e7f7;
  background: #f8fdff;
}

.kse-tour-thought-bubble::after {
  left: -18px;
  bottom: 8px;
  width: 6px;
  height: 6px;
}

.kse-tour-thought-bubble.is-simple {
  border-color: #d5dcf0;
  background: #ffffff;
}

.kse-tour-thought-bubble.is-simple::before,
.kse-tour-thought-bubble.is-simple::after {
  display: none;
}

@media (max-width: 700px) {
  .driver-popover.kse-driver-popover {
    max-width: calc(100vw - 12px) !important;
  }

  .kse-tour-bubble-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .kse-tour-mascot-wrap {
    justify-content: flex-start;
  }

  .kse-tour-mascot {
    width: 56px;
    height: 56px;
  }

  .kse-tour-thought-bubble::before,
  .kse-tour-thought-bubble::after {
    display: none;
  }
}