/* Career Map v2 prototype: cinematic illustrated scene over the proven v1 app. */
:root{
  --v2-ocean:#07576d;
  --v2-ocean-deep:#063e55;
  --v2-gold:#c78b22;
  --v2-gold-bright:#f3c451;
  --v2-ink:#151b22;
  /* Opaque: at .96 the map controls behind the phone sheet ("Tingkat peluang"
     legend) showed through as ghost text inside the card. */
  --v2-card:#fff;
  --v2-shadow:0 24px 64px rgba(4,33,45,.28),0 6px 18px rgba(4,33,45,.16);
}

body.gk-v2{
  background:var(--v2-ocean-deep);
  color:var(--v2-ink);
  overflow:hidden;
}

.gk-v2 #app{min-height:100dvh;background:var(--v2-ocean-deep)}
.gk-v2 header{z-index:3200;background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(17,27,34,.08)}
.gk-v2 #wrap{background:linear-gradient(180deg,#0a7086,#06485f)}
.gk-v2 #wrap::before{
  background:radial-gradient(circle at 52% 42%,transparent 34%,rgba(1,34,47,.16) 80%,rgba(2,27,39,.38) 100%);
  z-index:405;
  transition:background .55s ease,opacity .55s ease;
}
.gk-v2.gk-v2-country-focus #wrap::before{
  background:radial-gradient(circle at 52% 42%,rgba(0,24,34,.05) 10%,rgba(0,26,37,.20) 58%,rgba(0,17,27,.58) 100%);
}
.gk-v2 #wrap::after{
  height:22%;
  background:linear-gradient(180deg,transparent,rgba(2,31,44,.4));
  z-index:406;
}
/* #053a52 is the deep-ocean colour baked into terrain-*.webp (C['deep'] in
   scripts/bake-career-map-terrain.py); keep them equal or the faded terrain
   edge shows as a band. */
.gk-v2 .leaflet-container,.gk-v2 .leaflet-map-pane{background:#053a52!important}
.gk-v2 .leaflet-container::before{display:none}
.gk-v2 .leaflet-image-layer.gk-world-art{
  filter:saturate(1.06) contrast(1.02) brightness(.98);
  image-rendering:auto;
  /* Edge masks are set per region from career-map-v2.js (installWorldArt),
     because an edge shared with another region must not fade. */
}
/* Terrain chunks fade in once decoded and fade out before removal
   (syncTerrainDetail). !important because Leaflet writes an inline opacity
   on every image overlay. */
.gk-v2 .leaflet-image-layer.gk-world-art-mid,.gk-v2 .leaflet-image-layer.gk-world-art-detail{opacity:0!important;transition:opacity .35s ease}
.gk-v2 .leaflet-image-layer.gk-world-art-mid.gk-art-ready,.gk-v2 .leaflet-image-layer.gk-world-art-detail.gk-art-ready{opacity:1!important}
@media(prefers-reduced-motion:reduce){.gk-v2 .leaflet-image-layer.gk-world-art-mid,.gk-v2 .leaflet-image-layer.gk-world-art-detail{transition:none}}
.gk-v2 .leaflet-overlay-pane svg{filter:drop-shadow(0 5px 8px rgba(2,23,31,.14))}
.gk-v2 .leaflet-interactive{transition:fill-opacity .18s,stroke .18s,stroke-width .18s,filter .18s}
.gk-v2 .leaflet-interactive:focus{outline:none;filter:drop-shadow(0 0 8px rgba(255,210,87,.9))}

/* Floating map header */
.gk-v2 .subhead{top:var(--h-header);z-index:2200}
.gk-v2 .subhead-in{min-height:90px;gap:18px;padding:18px 28px 10px 34px}
.gk-v2 .sh-brand{width:280px;color:#fff;text-shadow:0 2px 12px rgba(0,30,43,.72)}
.gk-v2 .sh-title{font-size:29px;line-height:1;color:#fff;letter-spacing:-.04em}
.gk-v2 .sh-sub{display:block!important;margin-top:6px;color:rgba(255,255,255,.92);font-size:12.5px;text-shadow:0 2px 8px rgba(0,28,42,.68)}
.gk-v2 .search-wrap{max-width:540px;min-width:320px;margin:0 auto}
.gk-v2 .search-inner{height:50px;border-radius:999px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 32px rgba(3,31,42,.22)}
.gk-v2 .subhead #search{height:48px;background:transparent;box-shadow:none;font-size:14px}
.gk-v2 .search-ico{color:#24323b}
.gk-v2 .search-inner:focus-within{border-color:var(--v2-gold-bright);box-shadow:0 0 0 3px rgba(243,196,81,.26),0 12px 32px rgba(3,31,42,.24)}
.gk-v2 .search-drop{border-radius:16px;margin-top:8px;box-shadow:var(--v2-shadow)}

.v2-top-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.v2-world-count,.v2-compare{
  min-height:42px;border-radius:999px;padding:0 17px;display:inline-flex;align-items:center;gap:8px;
  font:600 12px/1 'DM Sans',sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(3,31,42,.19)
}
.v2-world-count{color:#744b0a;background:rgba(255,249,225,.95);border:1px solid rgba(224,169,42,.72)}
.v2-world-count::before{content:'✦';font-size:16px;color:var(--v2-gold)}
.v2-compare{cursor:pointer;color:var(--v2-ink);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8)}
.v2-compare .lc{width:17px;height:17px}
.v2-compare:hover{transform:translateY(-1px);border-color:var(--v2-gold-bright)}
.v2-compare:focus-visible{outline:3px solid rgba(255,210,87,.88);outline-offset:2px}

/* World controls */
.gk-v2 .main-menu-wrap{top:105px;left:34px;z-index:2100}
.gk-v2 .main-menu-btn{
  height:42px;padding:0 18px;background:rgba(4,61,76,.88);color:#fff;
  border:1px solid rgba(255,255,255,.54);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(2,29,41,.28)
}
.gk-v2 .main-menu-label,.gk-v2 .main-menu-icon{color:#fff;font-size:12.5px}
.gk-v2 .main-menu-wrap.menu-open .main-menu-btn{background:rgba(5,49,64,.96)}
.gk-v2 .sub-menu-btn{height:40px;background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.78);box-shadow:0 8px 22px rgba(2,30,42,.22)}
.gk-v2 #gk-tierleg{left:22px;bottom:22px;z-index:2100;border:0;background:rgba(255,255,255,.95);box-shadow:var(--v2-shadow)}
.gk-v2 #gk-layer{right:22px;bottom:22px;z-index:2100;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(2,30,42,.18)}

/* Country labels become real controls with three zoom levels. Leaflet owns the
   marker transform, so the ribbon itself handles scale and fade. */
/* No will-change here. It promoted every country label (about 200, most of
   them hidden at any moment) to its own GPU layer, and Leaflet moves all of
   them on every frame of a pinch. Measured 14 Sep: 12,895 label style writes
   in a 4.7 s pinch. On a phone that many moving layers exhausts GPU memory
   and the compositor re-rasters them, which shows as everything blinking.
   Browsers promote a label on their own for the 0.28 s of an opacity fade. */
.gk-v2 .country-label{pointer-events:auto!important;opacity:1;transition:opacity .28s ease,filter .28s ease}
.gk-v2 .country-label.cl-hidden,.gk-v2 .country-label.cl-scene-hidden{opacity:0;pointer-events:none!important}
.gk-v2 .country-label.cl-hidden span,.gk-v2 .country-label.cl-scene-hidden span{pointer-events:none!important}
.gk-v2 .country-label.cl-hidden .v2-rib,.gk-v2 .country-label.cl-scene-hidden .v2-rib{transform:scale(.82)!important}
.gk-v2 .country-label.cl-hidden:focus-within{opacity:1;pointer-events:auto!important;z-index:990!important}
.gk-v2 .country-label.cl-hidden:focus-within .v2-rib{transform:scale(1)!important}
.gk-v2 .country-label.cl-selected-visible{display:block!important;opacity:1!important;pointer-events:auto!important;z-index:1000!important}
.gk-v2 .country-label:not(.cl-data){display:none!important}
.gk-v2 .country-label.v2-off-region{display:none!important}
.gk-v2 .country-label span{
  min-height:44px;padding:3px 10px!important;border:1px solid rgba(255,255,255,.86)!important;
  display:inline-flex!important;align-items:center;
  background:rgba(255,255,255,.94)!important;color:#172027!important;font-size:10px!important;
  box-shadow:0 5px 15px rgba(2,28,39,.28)!important;cursor:pointer;pointer-events:auto!important;
  text-shadow:none!important;backdrop-filter:blur(6px)
}
.gk-v2 .country-label span::after{content:'›';font-size:13px;color:#5d6870;margin-left:3px;line-height:1}
.gk-v2 .country-label.cl-sel span{
  background:linear-gradient(135deg,#f6d66f,#d79925)!important;border-color:#fff2ae!important;color:#362306!important;
  box-shadow:0 0 0 3px rgba(255,213,80,.32),0 0 25px rgba(255,196,43,.84),0 8px 20px rgba(2,28,39,.35)!important
}
.gk-v2 .country-label span:focus-visible{outline:3px solid #fff2a8;outline-offset:3px}
.gk-v2 .ctip{display:none}

/* Geo-anchored decorations (DECOR in career-map-v2.js). The marker sits on the
   real coordinate; the image hangs above it, anchored at its bottom centre, so
   the foot of a landmark touches its place. */
.v2-decor{width:0!important;height:0!important;overflow:visible}
.v2-decor-landmark{width:44px!important;height:44px!important;overflow:visible;background:transparent!important;border:0!important}
/* Live zoom scale (career-map-v2.js setLiveScale). A zero-size wrapper on the
   anchor point, scaled from its own origin, so the sprite grows from its foot
   without touching the <img> transform that selection and hover animate.
   will-change keeps it on its own compositor layer: changing `scale` then
   costs no repaint while a finger pinches. The resting size is the <img>
   width, written once per settled zoom. */
.v2-decor-scale{position:absolute;left:0;bottom:0;width:0;height:0;transform-origin:0 0;scale:var(--gk-decor-live,1);will-change:transform}
.v2-decor-landmark .v2-decor-scale{left:50%;scale:var(--gk-landmark-live,1)}
.v2-decor-img{
  position:absolute;left:0;bottom:0;width:calc(var(--w) * var(--gk-decor-scale,1));height:auto;
  transform:translateX(-50%);transform-origin:50% 100%;user-select:none;
  filter:drop-shadow(0 3px 3px rgba(4,30,38,.35))
}
/* Unloaded ship and plane images kept their infinite bob/drift animation:
   invisible, but always composited, repainted every pinch frame (369 paints
   over five pinches, 14 Sep) and forcing overlapping landmarks and labels
   into shared "overlap" layers. */
.v2-decor-img.v2-decor-unloaded{opacity:0!important;animation:none!important}
.v2-decor-landmark .v2-decor-img{
  left:0;width:calc(var(--w) * var(--gk-landmark-scale,1));min-width:44px;
  pointer-events:auto;cursor:pointer;
  filter:saturate(.98) contrast(1.045) brightness(.99) drop-shadow(0 3px 3px rgba(4,30,38,.35)) drop-shadow(-1px -1px 1px rgba(255,232,174,.18))
}
.gk-v2-country-focus .v2-decor-landmark .v2-decor-img:not(.v2-selected-landmark){filter:saturate(.78) brightness(.84) drop-shadow(0 3px 3px rgba(4,30,38,.28));opacity:.72}
.v2-decor-landmark .v2-decor-img.v2-selected-landmark{
  z-index:3;filter:saturate(1.12) brightness(1.07) drop-shadow(0 0 7px rgba(255,221,112,.95)) drop-shadow(0 7px 8px rgba(69,39,3,.48));
  transform:translateX(-50%) scale(1.16);animation:v2LandmarkSelect .68s cubic-bezier(.16,1,.3,1)
}
.v2-decor-ship .v2-decor-img{bottom:-40%;animation:v2Bob 5.5s ease-in-out var(--delay) infinite}
.v2-decor-plane .v2-decor-img{animation:v2Drift 18s ease-in-out var(--delay) infinite;filter:drop-shadow(10px 16px 5px rgba(4,30,38,.22))}
.v2-decor-cloud .v2-decor-img{bottom:-50%;opacity:.9;filter:none;animation:v2Cloud 40s ease-in-out var(--delay) infinite}
/* Far out, ships and planes shrink to 9-15px specks, so they wait for zoom;
   landmarks stay (flattened scale). Close in, clouds would cover countries. */
.gk-decor-far .v2-decor-ship .v2-decor-img,.gk-decor-far .v2-decor-plane .v2-decor-img{opacity:0;animation:none}
/* Three landmark LODs (Codex audit 14 Sep, item 8), from the same sprite:
   far (<3.75)  a round crest: the sprite clipped to a medallion on a cream
                disc with a gold ring, so a continent reads as tidy pins;
   mid (<5)     the sprite, flatter light, no rim highlight;
   near (>=5)   the full sprite with rim light and hover lift.
   The selected landmark always shows in full. */
.gk-decor-far .v2-decor-landmark .v2-decor-img:not(.v2-selected-landmark){
  width:46px!important;min-width:46px;clip-path:circle(35% at 50% 60%);filter:saturate(.95) contrast(1.05);opacity:1
}
.v2-decor-landmark::before{
  content:"";position:absolute;left:50%;bottom:1px;width:36px;height:36px;margin-left:-18px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffbf1,#ecd9ab);box-shadow:0 0 0 1.5px #c9a04b,0 0 0 3px rgba(255,251,241,.9),0 3px 6px rgba(4,30,38,.45);
  opacity:0;transition:opacity .3s;pointer-events:none
}
.gk-decor-far .v2-decor-landmark:has(.v2-decor-img:not(.v2-selected-landmark):not(.v2-decor-wait):not(.v2-decor-unloaded):not(.v2-unit-hidden))::before{opacity:1}
/* A unit that lost its collision test hides its landmark with its label. */
.v2-decor-img.v2-unit-hidden:not(.v2-selected-landmark){opacity:0!important;pointer-events:none}
/* Leader line from an offset landmark to its true site. */
.v2-connector{stroke:#fff3cf;stroke-opacity:.85;stroke-dasharray:3 3;fill:none;filter:drop-shadow(0 1px 1px rgba(4,30,38,.6));transition:opacity .3s}
.v2-connector-dot{stroke:#fff3cf;fill:#c9a04b;fill-opacity:1;transition:opacity .3s}
.v2-connector-off{opacity:0}
.gk-decor-mid .v2-decor-landmark .v2-decor-img:not(.v2-selected-landmark){filter:saturate(.93) contrast(1.05) brightness(.98) drop-shadow(0 3px 3px rgba(4,30,38,.35));opacity:.96}
.gk-decor-near .v2-decor-cloud .v2-decor-img{opacity:0}
/* Per-item zoom gate (DECOR minZoom), used for the Gulf landmarks that would
   otherwise stack on top of each other at the opening view. */
.v2-decor-img.v2-decor-wait{opacity:0!important}
/* Sprite and cloud widths no longer transition: they change only when the
   zoom settles, in the same frame as the live scale returns to 1. During an
   animated zoom the live scale follows Leaflet's own zoom curve. */
.v2-decor-img{transition:opacity .3s}
.leaflet-zoom-anim .v2-decor-scale,.leaflet-zoom-anim .v2-cloud-scale{transition:scale .25s cubic-bezier(0,0,.25,1)}
@keyframes v2Bob{50%{transform:translateX(-50%) translateY(-2px) rotate(-1.5deg)}}
@keyframes v2Drift{0%,100%{transform:translateX(-80%) translateY(4px)}50%{transform:translateX(-20%) translateY(-4px)}}
@keyframes v2Cloud{50%{transform:translateX(-42%)}}
@keyframes v2LandmarkSelect{
  0%{transform:translateX(-50%) scale(.82);filter:saturate(.85) brightness(.9) drop-shadow(0 0 0 rgba(255,221,112,0))}
  58%{transform:translateX(-50%) translateY(-7px) scale(1.24)}
  100%{transform:translateX(-50%) translateY(0) scale(1.16)}
}
body.gk-v2.gk-v2-motion-off .v2-decor-img{animation:none!important}
/* Ambient motion adds repaints with no navigational value while the camera is
   moving. Pause it for the gesture; map/label transforms keep following the
   camera and resume from the same animation position after zoomend. */
body.gk-v2.gk-v2-zooming .v2-decor-img,
body.gk-v2.gk-v2-zooming .v2-cloud img,
body.gk-v2.gk-v2-zooming .v2-cloud-shadow img,
body.gk-v2.gk-v2-zooming .v2-glint i{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.v2-decor-img{animation:none!important;transition:none!important}}

/* Ribbon labels (enhanceLabels). The span keeps a 44 px touch target and turns
   transparent; the painted ribbon is the inner <em>. These rules override the
   earlier white-pill label styles, hence the extra specificity. */
.gk-v2 .country-label.cl-data span,
.gk-v2 .country-label.cl-sel span{
  min-height:44px;padding:0 2px!important;background:transparent!important;border:0!important;
  box-shadow:none!important;backdrop-filter:none!important;display:inline-flex!important;align-items:center;
  filter:drop-shadow(0 2px 2.5px rgba(24,14,2,.45))
}
.gk-v2 .country-label.cl-data span::after{content:none}
/* nudgeLabels() offsets the ribbon with left/top. Relative positioning moves
   it by exactly that amount without touching layout; margins did not (a
   negative margin-top was clipped by the line box, 14 Sep). */
.gk-v2 .country-label span{position:relative;transition:left .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1)}
/* followLabels() moves nudged ribbons with the zoom through `translate`; at
   zoomanim that jump rides Leaflet's own 0.25 s zoom curve. */
.gk-v2 .leaflet-zoom-anim .country-label span{transition:translate .25s cubic-bezier(0,0,.25,1)}
@media(prefers-reduced-motion:reduce){.gk-v2 .country-label span{transition:none}}
body.gk-v2.gk-v2-motion-off .country-label span{transition:none}
.v2-rib{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 13px 0 12px;font-style:normal;
  background:linear-gradient(180deg,#fffbf1 0%,#f4e4bf 62%,#e6cf9c 100%);color:#2b1e0c;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1.5px 0 rgba(150,104,32,.55);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%,8px 50%);
  transform-origin:50% 50%;transition:transform .28s cubic-bezier(.16,1,.3,1),filter .28s ease
}
.gk-v2 .country-label.cl-lod-world .v2-rib{transform:scale(1.04)}
.gk-v2 .country-label.cl-lod-region .v2-rib{transform:scale(.96)}
.gk-v2 .country-label.cl-lod-country .v2-rib{transform:scale(1)}
.v2-rib-name{font:700 10.5px/1 'DM Sans',sans-serif;letter-spacing:.01em;white-space:nowrap}
.v2-flag{box-shadow:0 0 0 1px rgba(60,40,10,.25)}
/* Tier medal: smaller than the name so the country reads first (Codex audit
   14 Sep: A/B/C was nearly as loud as the name). */
.v2-tier{
  display:inline-grid;place-items:center;width:12px;height:12px;border-radius:50%;margin-left:1px;
  font:800 7.5px/1 'DM Sans',sans-serif;font-style:normal;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.95),0 1px 1.5px rgba(40,24,4,.35)
}
.v2-tier-A{background:#3E8073}
.v2-tier-B{background:#CBA043}
.v2-tier-C{background:#5B6C94}
body.gk-layer-benua .v2-tier{display:none}
.gk-v2 .country-label.cl-sel .v2-rib{
  background:linear-gradient(180deg,#fbe39a 0%,#e9b949 60%,#c98f22 100%);color:#2a1702;
  box-shadow:inset 0 1.5px 0 rgba(255,248,210,.95),inset 0 -1.5px 0 rgba(120,76,8,.6)
}
.gk-v2 .country-label.cl-sel .v2-rib{transform:scale(1.1);animation:v2RibbonSelect .58s cubic-bezier(.16,1,.3,1)}
@keyframes v2RibbonSelect{0%{transform:scale(.86)}58%{transform:scale(1.16)}100%{transform:scale(1.1)}}
.gk-v2 .country-label.cl-sel span{filter:drop-shadow(0 0 7px rgba(255,200,60,.85)) drop-shadow(0 2px 3px rgba(24,14,2,.45))}
.gk-v2 .country-label span:focus-visible .v2-rib{outline:2px solid #fff2a8;outline-offset:2px}
@media(max-width:760px){
  .v2-rib{height:22px;gap:4px;padding:0 11px 0 10px}
  .v2-rib-name{font-size:10px}
}

/* Water glints on open sea (installSeaGlints). */
.v2-glint{width:0!important;height:0!important;overflow:visible}
.v2-glint i{
  /* 8x3 px was barely visible in the 13 Sep Atlantic screenshot. */
  position:absolute;left:-7px;top:-2.5px;width:14px;height:5px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(200,248,255,.6) 50%,transparent);
  box-shadow:0 0 6px rgba(210,250,255,.55);
  transform:scale(var(--s,1));opacity:0;animation:v2Glint 6s ease-in-out var(--d,0s) infinite
}
@keyframes v2Glint{0%,70%,100%{opacity:0;transform:scale(calc(var(--s,1)*.4))}82%{opacity:.9;transform:scale(var(--s,1))}}

/* World-anchored clouds (installClouds). CSS variables on the map container
   drive size, fade and shadow offset from the zoom. */
.v2-cloud-wrap{width:0!important;height:0!important;overflow:visible}
/* Same split as the sprites: resting width once per settled zoom, live
   `scale` on the wrapper in between (around the anchor, so the parallax and
   shadow offsets scale with it). will-change on the cloud and its shadow
   keeps the per-frame parallax translate on the compositor; both elements
   paint nothing themselves, their animated <img> already has its own layer. */
.v2-cloud-scale{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;scale:var(--gk-cloud-live,1);will-change:transform}
.v2-cloud,.v2-cloud-shadow{position:absolute;left:0;top:0;width:calc(var(--w) * var(--gk-cloud-scale,1));pointer-events:none;will-change:transform}
.v2-cloud{transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)));opacity:var(--gk-cloud-alpha,1);transition:opacity .35s ease}
.v2-cloud-shadow{transform:translate(calc(-50% + var(--gk-cloud-shadow-x,26px)),calc(-50% + var(--gk-cloud-shadow-y,38px)));opacity:calc(var(--gk-cloud-alpha,1) * .24);filter:brightness(0) blur(8px)}
.v2-cloud img,.v2-cloud-shadow img{display:block;width:100%;height:auto;animation:v2CloudDrift var(--dur,90s) ease-in-out var(--delay,0s) infinite alternate}
.v2-cloud img{filter:drop-shadow(0 6px 10px rgba(20,40,60,.16))}
@keyframes v2CloudDrift{to{transform:translateX(16%)}}
body.gk-v2.gk-v2-motion-off .v2-glint i,body.gk-v2.gk-v2-motion-off .v2-cloud img,body.gk-v2.gk-v2-motion-off .v2-cloud-shadow img{animation:none!important}
body.gk-v2.gk-v2-motion-off .v2-glint i{opacity:0}
@media(prefers-reduced-motion:reduce){.v2-glint i,.v2-cloud img,.v2-cloud-shadow img{animation:none!important}.v2-glint i{opacity:0}}

/* Geo-anchored journey drawn by Leaflet when a country is selected. */
.v2-journey-glow{filter:blur(4px) drop-shadow(0 0 8px rgba(245,190,52,.72))}
.v2-journey-line{filter:drop-shadow(0 0 4px rgba(255,216,110,.85));animation:v2Journey 11s linear infinite}
.v2-journey-origin{filter:drop-shadow(0 0 4px rgba(255,215,91,.9))}
.v2-country-pulse{vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(255,200,60,.7));animation:v2CountryPulse 2.35s ease-in-out infinite}
@keyframes v2Journey{to{stroke-dashoffset:-240}}
@keyframes v2CountryPulse{
  0%,100%{stroke-width:7;stroke-opacity:.45;fill-opacity:.08;filter:drop-shadow(0 0 3px rgba(255,194,46,.46))}
  48%{stroke-width:13;stroke-opacity:.92;fill-opacity:.16;filter:drop-shadow(0 0 11px rgba(255,211,91,.95))}
}

/* Ambient compass layer */
.v2-ambient{position:absolute;inset:0;z-index:410;pointer-events:none;overflow:hidden}
.v2-compass{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
  color:rgba(255,255,255,.88);font-size:11.5px;line-height:1.35;text-align:center;text-shadow:0 2px 8px rgba(0,20,31,.8)
}
.v2-compass-mark{width:48px;height:48px;margin-bottom:4px;border:1px solid rgba(255,227,145,.7);border-radius:50%;display:grid;place-items:center;font:700 10px/1 'DM Sans';background:rgba(4,54,69,.34);backdrop-filter:blur(5px)}

/* Country preview */
.v2-preview{
  position:absolute;right:24px;top:108px;z-index:2300;width:312px;max-height:calc(100% - 154px);
  display:block;visibility:hidden;pointer-events:none;overflow:auto;background:var(--v2-card);border:7px solid rgba(255,255,255,.94);border-radius:20px;
  box-shadow:var(--v2-shadow);transform:translateX(24px) scale(.98);opacity:0;
  transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .24s ease,visibility 0s linear .34s
}
.v2-preview.show{visibility:visible;pointer-events:auto;transform:none;opacity:1;transition-delay:0s}
.v2-preview.to-detail{visibility:visible;transform:translateX(42px) scale(.94);opacity:0;transition-delay:0s}
.v2-preview-media{height:128px;position:relative;overflow:hidden;border-radius:13px 13px 7px 7px;background:#dbe8eb}
.v2-preview-media img{width:100%;height:100%;display:block;object-fit:cover}
.v2-preview-media::after{content:'';position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(5,25,35,.2))}
.v2-preview-close{position:absolute;right:8px;top:8px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(20,31,38,.16);background:rgba(255,255,255,.93);cursor:pointer;font-size:15px;color:#26333b}
.v2-preview-body{padding:13px 13px 12px}
.v2-preview-kicker{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.v2-preview-code{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#142431;color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em}
.v2-preview-name{font:700 21px/1.1 'Space Grotesk','DM Sans',sans-serif;letter-spacing:-.02em;color:#12191e}
.v2-preview-summary{font-size:12px;line-height:1.5;color:#4e5a62;margin:0 0 12px}
.v2-tier-row{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;margin:0 0 12px}
.v2-tier-medal{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff6d8;border:3px solid var(--v2-gold);font:700 20px/1 'Space Grotesk';color:#9b6208}
.v2-tier-label{font-size:11px;font-weight:700;color:#202a30;margin-bottom:6px}
.v2-tier-track{height:7px;border-radius:999px;background:#e5e1d8;overflow:hidden}
.v2-tier-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#c18419,#f1c553)}
.v2-facts{display:grid;gap:0;border-top:1px solid #ebe7df;margin-bottom:12px}
.v2-fact{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid #ebe7df}
.v2-fact .lc{width:16px;height:16px;color:#5c666d;margin-top:2px}
.v2-fact-label{font-size:9.5px;color:#7a8287;margin-bottom:2px}
.v2-fact-value{font-size:11px;line-height:1.35;color:#2d373d;font-weight:600}
.v2-detail-btn{width:100%;min-height:44px;border:0;border-radius:999px;background:linear-gradient(135deg,#d19a2d,#ad7012);color:#fff;font:700 12px/1 'DM Sans';cursor:pointer;box-shadow:0 8px 18px rgba(174,111,16,.25)}
.v2-detail-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.v2-detail-btn:focus-visible,.v2-preview-close:focus-visible{outline:3px solid #efbd44;outline-offset:2px}

/* Full detail panel keeps the proven content, with the new scene language. */
.gk-v2 #panel{width:min(620px,46vw);right:min(-650px,-46vw);z-index:2800;background:#fff;border-left:0;box-shadow:-18px 0 52px rgba(3,28,39,.25)}
.gk-v2 #panel.open{right:0}
.gk-v2 #panel{transition:right .42s cubic-bezier(.16,1,.3,1)}
.gk-v2 .p-head{background:linear-gradient(145deg,rgba(255,246,215,.98),#fff);padding-top:18px}
.gk-v2 .p-head::before{opacity:.16;filter:saturate(.88) brightness(.95)}
.gk-v2 .p-tab-bar{background:#fff}
.gk-v2 .p-body-content{background:#fff}
.gk-v2 .p-name,.gk-v2 .ib-title,.gk-v2 .ib-body,.gk-v2 .p-updated{color:var(--v2-ink)}
.gk-v2 .p-close{background:rgba(255,255,255,.88);min-width:44px;min-height:44px}
.gk-v2 .info-block{border-color:#ece7de}

@media(max-width:1180px){
  .gk-v2 .subhead-in{padding-left:22px;padding-right:18px;gap:12px}
  .gk-v2 .sh-brand{width:220px}
  .gk-v2 .sh-title{font-size:25px}
  .gk-v2 .search-wrap{min-width:260px}
  .v2-world-count{display:none}
  .gk-v2 .main-menu-wrap{left:22px}
}

@media(max-width:760px){
  .gk-v2 .subhead-in{min-height:74px;padding:10px 10px 8px;gap:8px}
  .gk-v2 .sh-brand{display:none}
  .gk-v2 .search-wrap{min-width:0;max-width:none;margin:0;flex:1}
  .gk-v2 .search-inner{height:44px}
  .gk-v2 .subhead #search{height:42px;font-size:12.5px}
  .v2-top-actions{margin-left:0}
  .v2-compare{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}
  .v2-compare span{display:none}
  .gk-v2 .main-menu-wrap{top:74px;left:12px}
  .gk-v2 .main-menu-btn{height:40px}
  .gk-v2 #gk-tierleg{display:block;left:auto;right:10px;bottom:82px}
  .v2-compass{display:none}
  .v2-preview{
    position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:52dvh;border-width:5px;border-radius:20px;
    transform:translateY(24px) scale(.98);z-index:2700
  }
  .v2-preview.show{transform:none}
  .v2-preview.to-detail{transform:translateY(42px) scale(.94)}
  .v2-preview-media{height:104px}
  .v2-preview-body{padding:10px 11px 11px}
  .v2-preview-summary{display:none}
  .v2-tier-row{margin-bottom:8px}
  .v2-facts{grid-template-columns:1fr 1fr 1fr;margin-bottom:9px}
  .v2-fact{display:block;padding:7px 6px;border-right:1px solid #ebe7df;border-bottom:0}
  .v2-fact:last-child{border-right:0}
  .v2-fact>.lc{display:none}
  .v2-fact-value{font-size:10px}
}

/* The full-width detail panel must follow v1's phone breakpoint (680px), not
   the preview card's 760px. v1 hides its phone panel with bottom:-100dvh only
   inside @media(max-width:680px); between 681 and 760px it still uses the
   desktop right-offset, so forcing right:0 here left the empty "Pilih negara"
   panel covering 93% of the map on load (reported 13 Sep, measured at 681,
   720 and 760px). */
@media(max-width:680px){
  .gk-v2 #panel{width:100%;right:0;z-index:3100}
}

@media(max-width:680px) and (orientation:landscape) and (max-height:480px){
  .v2-preview{left:auto;right:8px;top:8px;bottom:8px;width:min(300px,46vw);max-height:none}
  .v2-preview-summary{display:none}
  .v2-preview-media{height:82px}
  .v2-preview.to-detail{transform:translateX(42px) scale(.94)}
  .v2-facts{display:none}
  .gk-v2 #panel{width:min(430px,66%);right:-100%;bottom:0}
  .gk-v2 #panel.open{right:0;bottom:0}
}

/* One compact map HUD: layer choices live inside the legend instead of
   competing with it in the opposite corner. */
.gk-v2 #gk-tierleg{left:22px;bottom:22px;z-index:2100;border:0;background:rgba(255,255,255,.9);box-shadow:0 12px 34px rgba(0,34,48,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gk-v2 .gk-tierleg-isi{padding:12px 12px 8px}
.gk-v2 .gk-tierleg-key[hidden]{display:none}
.gk-v2 .gk-locked-key{display:flex;align-items:center;margin-top:7px;padding-top:7px;border-top:1px solid rgba(23,48,58,.12);color:#526069}
.gk-v2 .gk-locked-key i{flex:none;background:repeating-linear-gradient(66deg,#071a22 0 4px,#456169 4px 6px)!important}
.gk-v2 #gk-layer{position:static;margin-top:8px;width:100%;background:#e9e4d9;border:0;border-radius:999px;box-shadow:none;display:flex;overflow:hidden}
.gk-v2 .gk-tierleg-key[hidden] + #gk-layer{margin-top:0}
.gk-v2 #gk-layer button{flex:1;min-width:84px;height:36px;color:#526069}
.gk-v2 #gk-layer button.on{background:#14343e;color:#fff;box-shadow:0 3px 9px rgba(0,31,42,.2)}
.gk-v2 .gk-tierleg-btn{height:40px;min-width:148px;color:#17303a}

@media(max-width:760px){
  .gk-v2 #gk-tierleg{left:auto;right:10px;bottom:10px}
  .gk-v2 #gk-tierleg{transition:opacity .2s ease,transform .24s cubic-bezier(.16,1,.3,1)}
  .gk-v2.gk-v2-country-focus #gk-tierleg{opacity:0;pointer-events:none;transform:translateY(10px)}
}

/* v1's review and partner overlays stay in the page at opacity 0 when closed,
   each a full-screen fixed layer with a backdrop blur that the compositor
   keeps over the moving map (LayerTree, 14 Sep: four layers of 382k-426k
   CSS px). Hidden when closed; visibility waits for the 0.25 s fade-out. */
.gk-v2 #rv-overlay:not(.show),.gk-v2 #rvd-overlay:not(.show),.gk-v2 #rv-thanks-overlay:not(.show),.gk-v2 #partner-overlay:not(.show){visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}

/* Prototype v2 deliberately has no automatic/tutorial/promotional popups.
   Product panels and modals opened by an explicit user action remain intact. */
.gk-v2 #welcome-overlay,.gk-v2 #tutorial-overlay,.gk-v2 .gk-p-ov{display:none!important}

.gk-v2 .v2-locked-country{fill:url(#v2-lock-pattern)}
.v2-locked-toast{position:absolute;left:50%;bottom:24px;z-index:2600;max-width:min(360px,calc(100% - 32px));padding:11px 16px;border:1px solid rgba(255,221,131,.42);border-radius:999px;background:rgba(9,31,40,.94);color:#fff7e2;font-size:12px;font-weight:650;text-align:center;box-shadow:0 10px 28px rgba(0,20,29,.3);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s ease,transform .26s cubic-bezier(.16,1,.3,1)}
.v2-locked-toast.show{opacity:1;transform:translate(-50%,0)}
.v2-decor-img.v2-hover-landmark{filter:brightness(1.1) saturate(1.06) drop-shadow(0 8px 9px rgba(0,22,30,.4));transform:translateX(-50%) translateY(-4px) scale(1.07);transition:opacity .3s,transform .2s ease,filter .2s ease}
.v2-decor-landmark .v2-decor-img:focus-visible{outline:3px solid #fff2a8;outline-offset:3px;border-radius:12px}
@media(max-width:760px){.v2-locked-toast{position:fixed;bottom:64px}}

@media(prefers-reduced-motion:reduce){
  .v2-journey-line,.v2-country-pulse,.v2-selected-landmark,.country-label.cl-sel .v2-rib{animation:none!important}
  .v2-preview,.gk-v2 #panel,.gk-v2 .leaflet-interactive,.gk-v2 .country-label,.v2-rib{transition:none!important}
}

body.gk-v2.gk-v2-motion-off .v2-journey-line,
body.gk-v2.gk-v2-motion-off .v2-country-pulse,
body.gk-v2.gk-v2-motion-off .v2-selected-landmark,
body.gk-v2.gk-v2-motion-off .country-label.cl-sel .v2-rib{animation:none!important}

/* Land-cover data credit in the legend (ESA CCI attribution). */
.gk-v2 .gk-data-credit{margin-top:8px;font-size:10px;line-height:1.3;color:#6b7c80}