@font-face {
  font-family: "Degular";
  font-weight: 600;
  font-style: normal;
  src: url("Degular%20Semibold.ttf") format("truetype");
}

@font-face {
  font-family: "Degular";
  font-weight: 800;
  font-style: normal;
  src: url("Degular%20Black.ttf") format("truetype");
}

:root {
  --bg: #343eef;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.75);
  --accent: #e333ff;
  --stroke: rgba(255, 255, 255, 0.25);
  --pad: clamp(20px, 4vw, 56px); /* vodoravni padding stranice; dijele ga .page i .home-link */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Degular", "Helvetica Neue", sans-serif;
  font-weight: 600;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* Sve stane u jedan ekran: hero zauzima gornjih 25vh, mapa fiksnih 75vh. */
.page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad);
}

/* Tihi povratak na izložbu — gore lijevo, poravnat s naslovom (isti --pad). */
.home-link {
  position: fixed;
  top: 16px;
  left: var(--pad);
  z-index: 50;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 150ms ease;
}

.home-link:hover {
  color: var(--ink);
}

/* Upute (gumb + bočni pop-up) postoje samo na mobitelu — na desktopu su skriveni,
   pa osnovna pravila ne mijenjaju ništa (otkriva ih mobilni @media blok na dnu). */
#upute-btn,
#upute-panel {
  display: none;
}

.hero {
  flex: 0 0 auto;          /* sadržajno visok; 25vh je samo donja granica (min-height) */
  min-height: 25vh;        /* na visokim ekranima zadrži gornju četvrtinu, inače naraste */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;       /* nikad ne reži tekst zaglavlja */
  /* Uvijek čisti fiksni "← Sve ERASMUS vizualizacije" link iznad naslova. */
  padding-top: clamp(44px, 5vh, 60px);
  padding-bottom: 10px;
}

h1 {
  font-weight: 600;
  font-size: clamp(22px, 2.6vh + 1vw, 40px);
  line-height: 1.05;
  margin-bottom: clamp(6px, 1.2vh, 14px);
}

.level {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: level-in 420ms ease both;
}

.level.swap {
  animation: level-in 420ms ease both;
}

@keyframes level-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.back {
  align-self: flex-start;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 7px 18px;
  margin-top: clamp(2px, 0.4vh, 4px);
  margin-bottom: clamp(3px, 0.8vh, 8px);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 150ms ease, opacity 200ms ease;
  opacity: 0;
  pointer-events: none;
}

.back.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Na prvom ekranu je gumb skriven — sklopi ga da ne ostavlja prazan razmak
   između naslova i "Sve sastavnice" (animaciju preuzima .level.swap). */
.back:not(.visible) {
  display: none;
}

.back:hover {
  background: rgba(255, 255, 255, 0.12);
}

#level-title {
  font-weight: 600;
  font-size: clamp(17px, 1.8vh + 0.8vw, 26px);
}

.subtitle {
  font-size: clamp(12px, 1.3vh + 0.25vw, 16px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--muted);
  /* Otprilike širina glavnog naslova: prati ga (vh+vw kao i font naslova),
     a gornja granica je tik ispod naslova na širokim ekranima. */
  max-width: clamp(400px, 48vh + 19vw, 760px);
}

/* Mapa popunjava preostalu visinu koju zaglavlje ne zauzme. */
main {
  flex: 1 1 auto;
  min-height: 0;
}

.map-wrap {
  position: relative;
  height: 100%;
  min-height: 0;
}

#map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

#map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

#map .axis line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.4;
}

#map .axis text {
  fill: #ffffff;
  font-family: "Degular", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 16px;
  opacity: 0.75;
}

#map .points circle.pt {
  fill: #dc00ff; /* zasićenija magenta od --accent (#e333ff), isti ton */
  fill-opacity: 0.7;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1;
  cursor: default;
  will-change: transform;
}

#map .points circle.pt--faculty {
  cursor: pointer;
  touch-action: manipulation;
}

#map .points circle.pt--faculty:hover,
#map .points circle.pt--faculty:focus {
  stroke-width: 2.5;
}

#map .points circle.pt--origin {
  fill: #ffffff;
  fill-opacity: 1;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 3;
}

#map .labels text {
  fill: #ffffff;
  font-family: "Degular", "Helvetica Neue", sans-serif;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

#map .labels tspan.dim {
  fill-opacity: 0.78;
}

#map .labels line {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: rgba(15, 10, 80, 0.94);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 140ms ease;
  max-width: 340px;
  backdrop-filter: blur(8px);
  z-index: 2;
}

.tooltip.show {
  opacity: 1;
}

.tooltip strong {
  display: block;
  margin-bottom: 2px;
}

.tooltip .names {
  color: var(--muted);
}

/* ---------- zoom kontrole (vidljive samo na razini sastavnice) ---------- */
.map-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.map-controls.visible {
  opacity: 1;
  pointer-events: auto;
}

.zoom-pill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  overflow: hidden;
}

.zoom-divider {
  height: 1px;
  background: var(--stroke);
}

.zoom-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 150ms ease;
}

.zoom-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.zoom-reset {
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  font-size: 16px;
}

#map.zoomable {
  cursor: grab;
}

#map.panning {
  cursor: grabbing;
}

/* ============================================================
   4K (3840×2160) — the map fills via the JS resize handler, but
   the hero text, controls, axis labels and tooltip are sized for
   1080p and read tiny on a 4K screen. Lift the clamp ceilings and
   bump the in-SVG text. Point/label scaling is handled in app.js
   (gated on innerWidth >= 2560). Scoped to amra only.
   ============================================================ */
@media (min-width: 2560px) {
  :root { --pad: clamp(40px, 4vw, 96px); }
  .home-link { top: 28px; font-size: 22px; }
  h1 { font-size: 64px; margin-bottom: 18px; }
  #level-title { font-size: 44px; }
  .subtitle { font-size: 28px; max-width: 1200px; }
  .back { font-size: 24px; padding: 12px 30px; margin-top: 6px; margin-bottom: 14px; }
  #map .axis text { font-size: 30px; }
  #map .axis line { stroke-width: 2.4; }
  .tooltip {
    font-size: 24px;
    padding: 18px 26px;
    border-radius: 20px;
    max-width: 620px;
  }
  .map-controls { top: 28px; right: 28px; gap: 16px; }
  .zoom-btn { width: 62px; height: 62px; font-size: 36px; }
  .zoom-reset { font-size: 28px; }
}

/* ============================================================
   Uski ekrani. Robusno raspoređivanje zaglavlja/mape sada je u
   osnovnim pravilima, pa ovdje samo maknemo opise i smanjimo
   dugi naslov da ne preuzme zaglavlje široko poput telefona.
   ============================================================ */
@media (max-width: 768px) {
  .subtitle { display: none; }
  h1 { font-size: clamp(18px, 5.2vw, 28px); }
}

/* ============================================================
   Mobiteli (≤640px široko, ili ≤480px visoko u landscapeu).
   Držati medijski upit doslovno jednak MOBILE_MQ u app.js.
   h1 maknut; #level-title ("Sve sastavnice" / ime sastavnice)
   i gumb "← Sve sastavnice" ostaju. Tooltip se sidri na jedno
   od dva FIKSNA mjesta (vrh/dno karte) čistim CSS-om — bez
   mjerenja u JS-u (mreza uzorak).
   ============================================================ */
@media (max-width: 640px), (max-height: 480px) {
  h1 { display: none; }
  .hero { min-height: 0; padding-top: 44px; }   /* bez 25vh poda; ispod fiksnog home-linka */

  .tooltip.dock-top,
  .tooltip.dock-bottom {
    left: 8px;
    right: 8px;
    width: max-content;
    max-width: min(340px, calc(100% - 16px));
    margin: 0 auto;
    transform: none;
  }
  /* Gornje sidro je lijevo poravnato i ostavlja desni stupac +/− kontrola slobodnim. */
  .tooltip.dock-top {
    top: 14px; bottom: auto;
    right: auto; margin: 0;
    max-width: min(340px, calc(100% - 64px));
  }
  .tooltip.dock-bottom { top: auto; bottom: 12px; }

  /* Upute — mali link gore desno (vizualni blizanac .home-linka) + bočni pop-up
     u izgledu kompas tooltipa (indigo ploha, bijeli hairline, Degular). */
  #upute-btn {
    display: inline-flex;
    align-items: center;
    position: fixed;
    top: 16px;
    right: var(--pad);
    z-index: 50;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    touch-action: manipulation;
    transition: color 150ms ease;
  }
  #upute-btn:hover { color: var(--ink); }
  #upute-panel.open { display: block; }
  #upute-panel {
    position: fixed;
    top: 44px;
    left: 8px;
    right: 8px;
    margin-left: auto;
    width: max-content;
    max-width: min(360px, calc(100vw - 16px));
    z-index: 60;                       /* iznad home-linka (50) i karte; pokriva usidreni tooltip */
    background: rgba(15, 10, 80, 0.94);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    padding: 16px 40px 16px 18px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    line-height: 1.5;
  }
  #upute-panel h3 { font-size: 18px; color: var(--ink); margin-bottom: 10px; padding-right: 32px; }
  #upute-panel p { font-size: 15px; line-height: 1.55; color: var(--muted); }
  #upute-panel p + p { margin-top: 10px; }
  #upute-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 26px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    touch-action: manipulation;
  }
  #upute-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.12); }
}

/* Vrlo uski ekrani: da se dva gornja linka (home + upute) ne sudare. */
@media (max-width: 360px) {
  #upute-btn { font-size: 10px; }
  .home-link { font-size: 10px; }
}