/* =========================================================
   STAGE — celoobrazovkový glóbus, hlavička, legenda,
   ovládanie priblíženia, bublina pri kurzore.
   ========================================================= */

.stage{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:520px;
  overflow:hidden;
}

#globe{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  touch-action:none;
  cursor:grab;
}
#globe.is-dragging{cursor:grabbing}
#globe.is-over{cursor:pointer}

/* ---------- hlavička ---------- */
/* Pod hlavičkou aj legendou je jemný tmavý závoj. Po priblížení totiž
   pevninu vidno cez celú obrazovku a biely text by sa na nej stratil.
   Je to plynulý prechod, takže pri pohľade na svet ho oko nezaregistruje. */
.masthead::after,
.legend::after{
  content:"";position:absolute;inset:-20px -20px -40px -20px;
  z-index:-1;pointer-events:none;
}
.masthead::after{
  background:linear-gradient(to bottom,
    rgba(7,9,12,.88) 0%, rgba(7,9,12,.72) 45%, rgba(7,9,12,0) 100%);
}
.legend::after{
  inset:-28px -64px -28px -28px;
  background:linear-gradient(to top,
    rgba(7,9,12,.9) 0%, rgba(7,9,12,.66) 55%, rgba(7,9,12,0) 100%);
  /* aby závoj nekončil ostrou hranou vpravo */
  -webkit-mask-image:linear-gradient(to right, #000 62%, transparent 100%);
          mask-image:linear-gradient(to right, #000 62%, transparent 100%);
}

.masthead{
  position:absolute;top:0;left:0;right:0;
  isolation:isolate;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4);
  pointer-events:none;
  z-index:3;
}
.masthead > *{pointer-events:auto}
.masthead h1{font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.03em}
.masthead .sub{margin-top:var(--sp-1)}
.masthead .tools{display:flex;gap:var(--sp-1)}

/* ---------- počítadlá ---------- */
.stats{
  display:flex;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-2);
  align-items:baseline;
}
.stats .stat{display:flex;align-items:baseline;gap:5px}
.stats b{
  font-family:var(--f-display);font-weight:600;
  font-size:21px;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--c-ink);
}

/* ---------- pätička ---------- */
.footline{
  position:absolute;left:50%;bottom:var(--sp-2);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--sp-2);
  z-index:3;
  white-space:nowrap;
}
.footline .sep{opacity:.5}
.linky{
  background:transparent;border:0;padding:0;
  font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.linky:hover{color:var(--c-ink)}

/* ---------- úvodné odkrytie ---------- */
.stage > *:not(canvas){
  opacity:1;
  transition:opacity .6s ease .35s;
}
.stage.is-loading > *:not(canvas){opacity:0;transition:none}

.ghost{
  background:transparent;
  border:1px solid var(--c-hair);
  border-radius:var(--r-pill);
  padding:7px 13px;
  white-space:nowrap;
}
.ghost:hover{border-color:var(--c-border);color:var(--c-ink)}

/* ---------- legenda ---------- */
.legend{
  position:absolute;left:var(--sp-4);bottom:var(--sp-4);
  display:flex;gap:var(--sp-5);
  z-index:3;
  pointer-events:none;
  isolation:isolate;
}
.legend .group{display:flex;flex-direction:column;gap:var(--sp-1)}
.legend .group > .label{margin-bottom:2px;opacity:.7}
.legend .row{
  display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--f-mono);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--c-muted);
}

/* tvary v legende zodpovedajú značkám na glóbuse */
.mk{width:11px;height:11px;flex:0 0 auto;display:block}
.mk-dest{border-radius:50%;background:var(--c-mark-dest)}
.mk-hotel{background:var(--c-mark-hotel);transform:rotate(45deg);width:9px;height:9px}
.mk-spot{border-radius:50%;border:2px solid var(--c-mark-spot);background:transparent}
.mk-visit{background:var(--c-land-visit);border-radius:2px}

.ln{width:22px;height:0;flex:0 0 auto;border-top:1.5px solid var(--c-route-2)}
.ln-flight{border-top:1.5px dashed var(--c-route)}
.ln-trek{border-top:1.5px dotted var(--c-route-2)}

/* ---------- priblíženie ---------- */
.zoom{
  position:absolute;right:var(--sp-4);bottom:var(--sp-4);
  display:flex;flex-direction:column;gap:6px;align-items:center;
  z-index:3;
}
.zoom button{
  width:38px;height:38px;
  background:var(--c-surface);
  border:1px solid var(--c-hair);
  border-radius:var(--r-pill);
  font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.zoom button:hover{border-color:var(--c-border)}
.zoom .reset{font-size:11px;letter-spacing:.06em}

/* ---------- bublina pri kurzore ---------- */
.tip{
  position:absolute;z-index:5;
  transform:translate(-50%,-140%);
  background:var(--c-surface);
  border:1px solid var(--c-hair);
  border-radius:var(--r-pill);
  padding:5px 11px;
  box-shadow:var(--shadow);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;transition:opacity .12s ease;
  display:flex;align-items:center;gap:var(--sp-2);
}
.tip.is-on{opacity:1}
.tip .t-name{font-size:13px;font-weight:700}
.tip .t-type{font-family:var(--f-mono);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-muted)}

/* ---------- nápoveda a štítok ---------- */
.hint{
  position:absolute;left:50%;bottom:calc(var(--sp-4) + 18px);
  transform:translateX(-50%);
  z-index:2;text-align:center;
  transition:opacity .5s ease;
}
.hint.is-gone{opacity:0;pointer-events:none}

.sample-note{
  margin-top:var(--sp-2);
  border:1px dashed var(--c-mark-dest);
  color:var(--c-mark-dest);
  background:transparent;
  align-self:flex-start;
}
.masthead .ident{display:flex;flex-direction:column;align-items:flex-start}

/* =========================================================
   MOBIL — web sa navrhuje odtiaľto. Na telefóne má byť vidno
   hlavne guľa; všetko ostatné ustúpi k okrajom a je v dosahu palca.
   ========================================================= */
@media (max-width:760px){
  .masthead{padding:var(--sp-3) var(--sp-3) 0}
  .masthead h1{letter-spacing:-.035em}

  /* Legenda na telefóne ukazuje len tri druhy bodov. Spôsoby dopravy
     sa aj tak dočítaš v paneli — na malom displeji by len zaberali. */
  .legend{
    left:var(--sp-3);right:var(--sp-3);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    top:auto;gap:var(--sp-3);flex-wrap:wrap;
  }
  .legend .group:nth-child(2){display:none}
  .legend .group{
    flex-direction:row;flex-wrap:wrap;
    gap:var(--sp-1) var(--sp-3);align-items:center;
  }
  .legend .group > .label{display:none}
  .legend .row{font-size:9.5px}

  /* Tlačidlá priblíženia sú väčšie a nižšie — palec ich dosiahne. */
  .zoom{
    right:var(--sp-3);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 58px);
    gap:8px;
  }
  .zoom button{width:46px;height:46px;font-size:20px}
  .zoom .reset{font-size:10.5px}

  /* Nápoveda sedí nad legendou, nie cez ňu. */
  .hint{
    left:var(--sp-3);right:72px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 58px);
    transform:none;text-align:left;
  }
  .tip{display:none}           /* na dotyku nie je kurzor */
  .stats{gap:var(--sp-3);margin-top:var(--sp-1)}
  .stats b{font-size:20px}
  .footline{display:none}      /* „O mne" je hore v hlavičke */
}

/* Veľmi nízke displeje: nápoveda ustúpi úplne. */
@media (max-width:760px) and (max-height:620px){
  .hint{display:none}
}