/* Font brenda za karticu za dijeljenje, posluživan s naše domene (samo 700, latinica s hrvatskim slovima) */
@font-face { font-family: "Parkinsans"; src: url("/fonts/parkinsans-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --blue: #2f2bff;
  --blue-deep: #1c17c9;
  --ink: #0b0a2e;
  --paper: #ffffff;
  --mist: #f0f0ff;
  --mist-deep: #d9d9f7;
  --sub: #66668f;
  --red: #ff3d5e;
  --rainbow: conic-gradient(from 0deg, #ff4d6d, #ffb03a, #ffe83a, #4dff8a, #3ad1ff, #8a5bff, #ff4d6d);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --settle: linear(0, 0.034 1.5%, 0.142 3.3%, 0.597 9.7%, 0.788 13.3%, 0.93 17.6%, 1.019 22.4%, 1.059 27.4%, 1.067 30.5%, 1.062 34.4%, 1.012 47.4%, 0.996 58.6%, 1.001 79.5%, 1);
  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sab: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-top, 0px);
}

/* Mobilna baza */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100dvh; overflow: hidden; background: #f6f4f0; }
body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

#map { position: fixed; inset: 0; }
.maplibregl-ctrl-attrib { font-size: 10px; opacity: 0.55; }
.maplibregl-ctrl-top-right { top: var(--sat); }

/* Naslov kao naljepnica */
.sticker {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  line-height: 0.9;
  color: var(--ink);
  -webkit-text-stroke: 8px var(--paper);
  paint-order: stroke fill;
  margin: 0;
}

/* Oznaka dok app testiraju prvi korisnici; žuta je boja zakrpe iz identiteta */
.beta { margin: -4px 0 0 8px; rotate: -3deg; padding: 3px 9px; border-radius: 999px; background: #ffc21a; color: var(--ink); font-size: 11px; line-height: 12px; font-weight: 700; }
.top {
  position: fixed;
  top: calc(var(--sat) + 18px);
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.top .brand {
  margin: 0;
  transform-origin: left bottom;
  animation: stickerIn 400ms var(--spring) both 100ms;
}
.top .brand img { display: block; height: 50px; width: auto; }
@keyframes stickerIn {
  from { transform: translateY(12px) scale(0.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.count {
  pointer-events: auto;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(11, 10, 46, 0.12);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: transform 140ms var(--out), background-color 140ms var(--out);
}
.count b { font-variant-numeric: tabular-nums; }
/* Pilule su 34 px, a dodirna površina 44 px */
.top .count, .solved { position: relative; }
.count::after, .solved::after { content: ""; position: absolute; inset: -5px -2px; }
.count:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.92); }
/* Desktop: brojač je traka zdravlja kvarta. Crveno čeka, zeleno je riješeno; kad se nešto riješi,
   crveno odmah nestane, ostane bijeli trag, a zeleno ga sustigne sa zakašnjenjem */
.hp { display: none; }
@media (min-width: 900px) {
  #stats.has-hp { height: auto; width: 300px; padding: 9px 16px 12px; border-radius: 20px; }
  #stats.has-hp > b, #stats.has-hp > span:not(.hp) { display: none; }
  #stats.has-hp .hp { display: grid; gap: 7px; }
  .hp-row { display: flex; justify-content: space-between; font-size: 13px; line-height: 16px; }
  .hp-row b { font-variant-numeric: tabular-nums; }
  .hp-bar { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: var(--red); }
  .hp-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--k, 0)); }
  .hp-ghost { background: var(--paper); }
  .hp-fill { background: #18c46a; transition: transform 800ms var(--out) 500ms; }
  .hp-bar.instant i { transition: none; }
}
/* Moja lokacija: ista pilula kao brojač, okrugla, gore desno */
.locate {
  position: fixed;
  top: calc(var(--sat) + 64px); right: 14px;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
}
.locate svg { width: 20px; height: 20px; fill: var(--blue); }

/* Dock: jedna radnja, cijela traka je gumb */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sab) + 16px);
  width: min(calc(100% - 24px), 440px);
  height: 80px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 24px;
  border-radius: 40px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--blue-deep), 0 20px 40px rgba(11, 10, 46, 0.3);
  text-align: left;
  transition: transform 140ms var(--out), box-shadow 140ms var(--out), background-color 260ms var(--out), translate 480ms var(--settle), opacity 260ms var(--out);
}
.dock:active { transform: translateY(3px) scale(0.985); box-shadow: 0 2px 0 var(--blue-deep), 0 10px 24px rgba(11, 10, 46, 0.3); }
.dock.away { translate: -50% calc(100% + 60px); opacity: 0; pointer-events: none; }

.dock-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dock-text b { font-size: 17px; line-height: 20px; font-weight: 700; }

.dock-btn {
  position: relative;
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue);
  transition: background-color 260ms var(--out), transform 400ms var(--spring);
}
.dock-btn svg { width: 30px; height: 30px; fill: var(--paper); position: absolute; transition: opacity 200ms var(--out), transform 400ms var(--spring); }


/* Dock: jedna plava pilula preko cijele širine, ikona i jedan red teksta u sredini */
.dock { height: 60px; gap: 8px; padding: 0 26px 0 14px; border-radius: 30px; justify-content: center; background: var(--blue); color: var(--paper); }
.dock .dock-text { flex: none; }
.dock .dock-btn { order: -1; width: 36px; height: 36px; background: none; }
.dock .dock-btn svg { width: 24px; height: 24px; }
.dock .dock-text b { font-size: 17px; white-space: nowrap; }

/* Pin za lokaciju: vrh je točno na left/top koje postavlja app.js; podigne se dok se karta pomiče */
.pin {
  position: fixed;
  left: 50%; top: 36%;
  width: 40px; height: 40px;
  margin: -48px 0 0 -20px;
  pointer-events: none;
  animation: pinDrop 350ms var(--spring) both;
}
.pin .hint {
  position: absolute; bottom: calc(100% + 18px);
  font-size: 14px;
  animation-delay: 250ms;
  transition: filter 200ms var(--out);
}
.pin.lift .hint { filter: opacity(0); }
/* Kod duplikata pitanje nije lokacija, pa oznaka ne smeta */
body:has(.sheet[data-kind=dup].open) .pin .hint { display: none; }
/* Dok se označava lokacija, prijave ne smetaju i ne otvaraju se (MapLibre markeru postavlja opacity inline, zato filter) */
.pinning .report { filter: opacity(0.4); pointer-events: none; }
.pin-head {
  position: absolute; inset: 0;
  border-radius: 50% 50% 50% 6px;
  rotate: -45deg;
  background: var(--paper);
  border: 6px solid var(--ink);
  transition: transform 300ms var(--spring);
}
.pin-head::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--rainbow);
}
.pin-shadow {
  position: absolute; left: 50%; top: 45px;
  width: 16px; height: 6px; margin-left: -8px;
  border-radius: 50%;
  background: rgba(11, 10, 46, 0.45);
  transition: transform 300ms var(--spring), opacity 300ms var(--out);
}
.pin.lift .pin-head { transform: translate(8px, -8px); }
.pin.lift .pin-shadow { transform: scale(1.6); opacity: 0.5; }
@keyframes pinDrop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sheet */
/* Sheet lebdi s razmakom od rubova ekrana, kao dock */
.sheet {
  position: fixed;
  left: 12px; right: 12px; bottom: calc(var(--sab) + 12px);
  max-height: calc(88dvh - var(--sab) - 12px);
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  background: var(--paper);
  box-shadow: 0 -10px 50px rgba(11, 10, 46, 0.35);
  transform: translateY(calc(100% + var(--sab) + 60px));
  visibility: hidden;
  transition: transform 240ms var(--out), visibility 0s 240ms;
}
.sheet.open { transform: translateY(var(--drag, 0px)); visibility: visible; transition: transform 400ms var(--drawer); }
.sheet.dragging { transition: none; }
.grab { width: 100%; height: 40px; display: flex; justify-content: center; padding-top: 8px; touch-action: none; cursor: grab; flex: none; }
.sheet:focus { outline: none; }
.grab span { width: 42px; height: 5px; border-radius: 3px; background: var(--mist-deep); }
.sheet-x { position: absolute; top: 2px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; touch-action: none; }
.sheet-x::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--mist); }
.sheet-x svg { position: relative; width: 18px; height: 18px; fill: var(--sub); }
.sheet[data-busy] .sheet-x { display: none; }
.sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px 20px;
}
@media (min-width: 600px) {
  .sheet { left: 50%; right: auto; bottom: 16px; width: 460px; margin-left: -230px; border-radius: 30px; }
}
/* Mobitel položen: sheet uz lijevi rub, karta s pinom desno */
@media (orientation: landscape) and (max-height: 500px) {
  .sheet { left: max(12px, env(safe-area-inset-left)); bottom: calc(var(--sab) + 12px); width: 400px; margin-left: 0; max-height: calc(100dvh - var(--sat) - var(--sab) - 24px); }
}

@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.meta { font-size: 13px; line-height: 16px; color: var(--sub); margin: 6px 0 8px; }
.title {
  font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.2px;
  margin: 0 0 12px;
  text-wrap: balance;
}
.big {
  font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.2px; margin: 8px 0 6px;
  color: var(--blue);
}

.route {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 22px;
  background: var(--mist);
  margin-bottom: 14px;
}
.icon-tile {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  background: var(--blue);
  border-radius: 16px;
}
.icon-tile svg { width: 22px; height: 22px; fill: var(--paper); }
/* Logo službe kojoj prijava ide (logotipi su na bijeloj podlozi) */
.icon-tile.logo { background: var(--paper); box-shadow: inset 0 0 0 1px var(--mist-deep); }
.icon-tile.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.route-text { flex: 1; min-width: 0; }
.route-text small { display: block; font-size: 13px; line-height: 16px; color: var(--sub); }
.route-text b { display: block; font-size: 15px; line-height: 20px; font-weight: 700; text-wrap: balance; }
.chip { font-size: 13px; line-height: 16px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--paper); white-space: nowrap; }
.chip.visoka { background: var(--red); color: var(--paper); }
.chip.done { background: #18c46a; color: var(--paper); }

.text { font-size: 15px; line-height: 20px; margin: 0 0 10px; text-wrap: pretty; user-select: text; }
.text + .row { margin-top: 16px; }
.quote { font-size: 15px; line-height: 20px; color: var(--sub); margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--mist-deep); }

.row { display: flex; gap: 10px; }

/* Onboarding: tri koraka, tinta na papiru, plava ostaje samo za glavni gumb */
.steps { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 22px; }
.sheet[data-kind=onboarding] .sheet-body { padding: 12px 24px 24px; }
.sheet[data-kind=onboarding] .title { margin-bottom: 30px; }
.steps li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 20px; font-weight: 600; }
.steps svg { width: 22px; height: 22px; flex: none; fill: var(--ink); }
.sheet[data-kind=onboarding] .sheet-x { display: none; }
.btn {
  flex: 1;
  height: 58px;
  border-radius: 20px;
  font-weight: 700; font-size: 15px; line-height: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mist);
  box-shadow: 0 4px 0 var(--mist-deep);
  transition: transform 120ms var(--out), box-shadow 120ms var(--out);
}
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mist-deep); }
.btn.primary { background: var(--blue); color: var(--paper); box-shadow: 0 4px 0 var(--blue-deep); }
.btn.primary:active { box-shadow: 0 1px 0 var(--blue-deep); }
.btn.square { flex: 0 0 58px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* Kvart: tri brojke, odjeljci i ljestvica službi */
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: 22px; background: var(--mist); }
.tally b { display: block; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.tally small { display: block; margin-top: 2px; font-size: 13px; line-height: 16px; color: var(--sub); }
.sec { font-size: 17px; line-height: 20px; font-weight: 700; margin: 24px 0 10px; }
.sec small { display: block; margin-top: 2px; font-size: 13px; line-height: 16px; font-weight: 400; color: var(--sub); }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank li { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 18px; background: var(--mist); }
.rank .icon-tile { width: 40px; height: 40px; border-radius: 13px; }
.rank b { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.rank small { font-size: 13px; line-height: 16px; color: var(--sub); white-space: nowrap; }
.rank .few b { color: var(--sub); }
.rank .few .icon-tile { opacity: 0.6; }

.thumb { width: 58px; height: 58px; border-radius: 18px; object-fit: cover; flex: none; display: block; }
.photo { width: 100%; max-height: 30dvh; object-fit: cover; border-radius: 20px; margin-bottom: 14px; display: block; }
/* Fotka u detalju prijave: dodirom preko cijelog ekrana */
.photo-btn { display: block; width: 100%; margin-bottom: 16px; }
.photo-btn .photo { max-height: min(24dvh, 210px); margin: 0; }

/* Detalj prijave po x.com mjerama: tekst 15/20, sekundarno je 60 % tinte, jedna radijus skala, gumbi 48 px bez debelog ruba */
.sheet[data-kind=report] { --sec: color-mix(in srgb, var(--ink) 60%, transparent); }
.sheet[data-kind=report] .photo-btn { margin-bottom: 14px; cursor: zoom-in; }
.sheet[data-kind=report] .photo { aspect-ratio: 16 / 10; height: auto; max-height: none; border-radius: 16px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
/* Kartica prijave po uzoru na karticu mjesta u Apple Kartama: naslov, mjesto, opis, radnje,
   traka s tri činjenice i grupirani detalji. Boja samo kad nosi značenje. */
.report-sub { margin: 0 0 10px; font-size: 15px; line-height: 20px; color: var(--sub); }
.ok { color: #18c46a; }
.no { color: var(--red); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 0; padding: 12px 0; border-block: 1px solid var(--mist-deep); }
.facts div { min-width: 0; padding: 0 12px; }
.facts div:first-child { padding-left: 0; }
.facts div + div { border-left: 1px solid var(--mist-deep); }
.facts dt, .details dt { font-size: 13px; line-height: 16px; color: var(--sub); }
.facts dd { margin: 2px 0 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.details { margin: 0; padding: 2px 14px; border-radius: 18px; background: var(--mist); }
.details div { padding: 10px 0; }
.details div + div { border-top: 1px solid var(--mist-deep); }
.details dd { margin: 2px 0 0; font-size: 15px; line-height: 20px; }
.sheet[data-kind=report] .title { margin: 0 0 2px; }
.sheet[data-kind=report] .text { font-size: 15px; line-height: 20px; margin: 0; }
.sheet[data-kind=report] .row { margin-top: 20px; gap: 8px; }
.sheet[data-kind=report] .btn { height: 48px; border-radius: 999px; font-size: 15px; font-weight: 700; box-shadow: none; transition: background-color 150ms var(--out), transform 160ms var(--out); }
.sheet[data-kind=report] .btn:active { transform: scale(0.97); box-shadow: none; }
.sheet[data-kind=report] .btn.primary:active { background: var(--blue-deep); }
.sheet[data-kind=report] .btn:not(.primary):active { background: var(--mist-deep); }
.sheet[data-kind=report] .btn.square { flex: 0 0 48px; }
.sheet[data-kind=report] .btn svg { width: 18px; height: 18px; }
/* Zatvori leži na fotki: tamni krug s blurom, da se vidi na svakoj fotki */
.sheet[data-kind=report]:has(.photo-btn) .sheet-x { top: 45px; right: 25px; z-index: 2; }
.sheet[data-kind=report]:has(.photo-btn) .sheet-x::before { background: color-mix(in srgb, var(--ink) 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sheet[data-kind=report]:has(.photo-btn) .sheet-x svg { fill: var(--paper); }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; }
.lightbox:focus { outline: none; }
.lightbox::backdrop { background: rgba(11, 10, 46, 0.94); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Učitavanje: točke se pune redom */
.loader { display: flex; gap: 8px; margin: 18px 0 14px; }
.loader i {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mist-deep);
  animation: fill 1.2s var(--out) infinite;
}
.loader i:nth-child(2) { animation-delay: 150ms; }
.loader i:nth-child(3) { animation-delay: 300ms; }
.loader i:nth-child(4) { animation-delay: 450ms; }
@keyframes fill {
  0%, 100% { background: var(--mist-deep); transform: scale(0.85); }
  40% { background: var(--blue); transform: scale(1); }
}
.step { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 4px; }
.step-sub { color: var(--sub); font-size: 15px; line-height: 20px; margin: 0 0 8px; }

.err { color: var(--red); font-weight: 600; font-size: 15px; line-height: 20px; margin: 6px 40px 16px 0; }

/* Kartica za dijeljenje */
.share-card {
  display: block;
  height: min(40dvh, 400px);
  aspect-ratio: 9 / 16;
  margin: 4px auto 18px;
  border-radius: 22px;
  rotate: -2deg;
  box-shadow: 0 16px 34px rgba(47, 43, 255, 0.35);
  animation: cardIn 800ms var(--spring) both 120ms;
}
@keyframes cardIn { from { transform: translateY(30px) scale(0.7) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }


.burst { position: fixed; pointer-events: none; width: 14px; height: 14px; border-radius: 50%; z-index: 5; }

/* Prijava na karti: naljepnica s ikonom službe */
.report { width: 40px; height: 40px; }
.report-face {
  width: 100%; height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  display: grid; place-items: center;
  rotate: var(--tilt);
  transition: scale 350ms var(--spring);
}
/* Naljepnice ulaze samo pri prvom učitavanju; app.js makne .intro, pa zoom i odabir ne pokreću ulazak ponovno */
.intro .report-face { animation: stickerIn 600ms var(--spring) both var(--delay, 0ms); }
.report-face svg { width: 20px; height: 20px; fill: var(--ink); }
.report.done .report-face { background: #18c46a; }
.report.done svg { fill: var(--paper); }
.report.selected { z-index: 2; }
.report.selected .report-face { scale: 1.35; }
.report-badge {
  position: absolute; top: -7px; right: -10px;
  min-width: 22px; height: 22px; padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.report-label {
  position: absolute; top: 48px; left: 50%; translate: -50% 0;
  white-space: nowrap; text-align: center;
  font-size: 13px; font-weight: 700; line-height: 16px;
  color: var(--ink);
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 3px var(--paper);
  opacity: 0;
  transition: opacity 200ms var(--out);
  pointer-events: none;
}
.report-label small { display: block; font-size: 11px; line-height: 12px; font-weight: 600; opacity: 0.75; }
.labels .report-label { opacity: 1; }
.labels .report.quiet .report-label { opacity: 0; }
.hotspot { width: 48px; height: 48px; }
.hotspot .report-face { background: var(--ink); border-color: var(--paper); box-shadow: 0 3px 0 var(--paper), 0 0 0 3px var(--ink); }
.hotspot .report-face b { font-size: 17px; line-height: 20px; font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
.hotspot .report-label { top: 58px; }

/* Prvi posjet: naljepnica iznad docka */
.hint {
  position: fixed; z-index: 1;
  left: 50%; bottom: calc(var(--sab) + 112px);
  translate: -50% 0; rotate: -3deg;
  margin: 0; padding: 10px 16px;
  border-radius: 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 15px; font-weight: 700; white-space: nowrap;
  pointer-events: none;
  animation: stickerIn 700ms var(--spring) both 900ms;
}
.hint::after {
  content: "";
  position: absolute; left: 50%; bottom: -11px;
  width: 14px; height: 14px;
  translate: -50% 0; rotate: 45deg;
  background: var(--paper);
  border: solid var(--ink); border-width: 0 3px 3px 0;
}
.hint[hidden] { display: none; }
/* Je li još tu: mala kartica iznad docka */
.nearby {
  position: fixed; z-index: 1;
  left: 50%; translate: -50% 0; bottom: calc(var(--sab) + 108px);
  width: min(calc(100% - 24px), 440px);
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 16px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--mist-deep), 0 12px 28px rgba(11, 10, 46, 0.18);
  animation: rise 460ms var(--out) both;
}
.nearby[hidden], .dock.away ~ .nearby { display: none; }
.nearby .btn { flex: 0 0 auto; height: 44px; padding: 0 14px; font-size: 14px; border-radius: 14px; }
.row + .row { margin-top: 10px; }
.icon-tile .me { position: relative; }

/* Pilula: tvoja prijava je riješena */
.solved {
  pointer-events: auto;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--mist-deep);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  animation: stickerIn 700ms var(--spring) both;
}
.solved[hidden] { display: none; }
.solved i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* Otkrivanje: kartica Riješeno preko cijelog ekrana */
.reveal {
  position: fixed; inset: 0; z-index: 4;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(11, 10, 46, 0.55);
  opacity: 0;
  transition: opacity 200ms var(--out);
}
.reveal.open { opacity: 1; }
.reveal-card {
  width: 100%; max-width: 360px;
  padding: 64px 20px 20px;
  border-radius: 32px;
  background: var(--paper);
  text-align: center;
  position: relative;
  transform: translateY(40px) scale(0.8);
  transition: transform 700ms var(--spring);
}
.reveal.open .reveal-card, .reveal.closing .reveal-card { transform: none; }
.reveal.closing .reveal-card { transition: none; }
.reveal-badge {
  position: absolute; top: -48px; left: 50%; translate: -50% 0;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--rainbow);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 10px var(--ink);
  display: grid; place-items: center;
}
.reveal-badge svg { width: 48px; height: 48px; fill: var(--ink); }
.reveal-title { font-size: 56px; margin: 6px 0 10px; rotate: -3deg; }
.reveal-what { font-size: 17px; font-weight: 600; margin: 0 0 22px; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .reveal-card { transition: none; transform: none; } }

/* Ti si ovdje: duga u bijelom prstenu, bijeli val oko nje */
.me {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rainbow);
  box-shadow: 0 0 0 3px var(--paper), 0 2px 8px rgba(11, 10, 46, 0.45);
}
.me::before {
  content: "";
  position: absolute; inset: -14px;
  border-radius: 50%;
  background: rgba(47, 43, 255, 0.2);
  animation: me-pulse 2s var(--out) infinite;
  z-index: -1;
}
@keyframes me-pulse { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .me::before { animation: none; opacity: 0.4; } }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.04); }
  .count:hover { background: rgba(255, 255, 255, 0.9); }
  .side-item:hover, .seg button[aria-pressed=false]:hover { background: var(--mist); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* Desktop, po uzoru na Apple Karte: panel uz lijevi rub cijele visine, karta desno od njega.
   Gore je navigacija (logo i traka kvarta), ispod popis prijava. Detalj i svi ostali sheetovi
   otvaraju se u istom panelu ispod navigacije, a strelica ih vraća na popis. */
.rail { display: contents; }
.side, .sheet-x .ic-back { display: none; }
@media (min-width: 900px) and (min-height: 560px) {
  :root { --panel: 400px; --cx: calc(50% + var(--panel) / 2); }
  .rail {
    position: fixed; z-index: 1;
    top: 0; left: 0; bottom: 0; width: var(--panel);
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 1px 0 0 rgba(11, 10, 46, 0.08);
  }
  .rail .top {
    position: static;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px 0;
    padding: calc(var(--sat) + 20px) 20px 16px;
    pointer-events: auto;
  }
  .rail .top .brand img { height: 44px; }
  .rail .top .beta { margin: 0 0 0 10px; }
  .rail .top .count, .rail .top .solved { flex-basis: 100%; }
  .rail #stats.has-hp { width: 100%; background: var(--mist); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

  .side { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .side-head { padding: 6px 20px 6px; }
  .side-head .sec { margin: 0 0 12px; }
  .side-head .meta { margin: 10px 0 0; }
  .seg { display: flex; gap: 6px; }
  .seg button {
    height: 32px; padding: 0 14px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--mist-deep);
    font-size: 14px; line-height: 16px; font-weight: 600;
    transition: background-color 150ms var(--out), color 150ms var(--out);
  }
  .seg button[aria-pressed=true] { background: var(--ink); color: var(--paper); box-shadow: none; }
  .side-list { list-style: none; margin: 0; padding: 0 8px 20px; overflow-y: auto; overscroll-behavior: contain; }
  .side-item {
    width: 100%;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    text-align: left;
    transition: background-color 140ms var(--out);
  }
  .side-item[aria-current=true] { background: var(--mist); }
  .side-item:active { background: var(--mist-deep); }
  /* Ista naljepnica kao na karti, da se redak i marker prepoznaju */
  .side-icon {
    width: 34px; height: 34px; flex: none; margin-top: 2px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 0 2px 0 var(--ink);
  }
  .side-icon svg { width: 16px; height: 16px; fill: var(--ink); }
  .side-item.done .side-icon { background: #18c46a; }
  .side-item.done .side-icon svg { fill: var(--paper); }
  .side-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .side-text { gap: 0; }
  .side-text b { font-size: 15px; line-height: 20px; font-weight: 700; }
  .side-text small { font-size: 15px; line-height: 20px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-text span { margin-top: 2px; font-size: 13px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .side-thumb { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; }
  .side-empty { padding: 4px 12px; }
  .report.hover { z-index: 2; }
  .report.hover .report-face { scale: 1.2; }

  .sheet {
    z-index: 2;
    left: 0; right: auto; top: var(--side-top, 180px); bottom: 0;
    width: var(--panel); margin: 0; max-height: none;
    border-radius: 0;
    box-shadow: 1px 0 0 rgba(11, 10, 46, 0.08);
    padding-top: 52px;
    transform: none;
    transition: none;
  }
  /* Popis i detalj su navigacija u istom panelu: mijenjaju se odmah, bez animacije */
  .sheet.open { transform: none; transition: none; }
  .grab { display: none; }
  .sheet .sheet-x, .sheet[data-kind=report]:has(.photo-btn) .sheet-x { top: 4px; left: 12px; right: auto; }
  .sheet[data-kind=report]:has(.photo-btn) .sheet-x::before { background: var(--mist); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sheet[data-kind=report]:has(.photo-btn) .sheet-x svg { fill: var(--sub); }
  .sheet-x .ic-back { display: block; }
  .sheet-x .ic-x { display: none; }
  .dock, .hint, .nearby { left: var(--cx); }
}