/* SinFin — Svemir (v0.19). Sve klase nose prefiks sv- i žive samo unutar .sv. */
.sv{
  --deep:#090C19; --paper:#EDE6D6; --ink:#1B1815; --red:#D23A1E;
  --p90:rgba(237,230,214,.9); --p70:rgba(237,230,214,.7); --p50:rgba(237,230,214,.52);
  --p14:rgba(237,230,214,.14); --p08:rgba(237,230,214,.08);
  --sv-serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sv-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sv-ease:cubic-bezier(.22,.7,.2,1);
  --sv-nav:0px;
  position:relative;z-index:0;overflow:hidden;height:calc(100vh - 53px);min-height:420px;
  background:var(--deep);color:var(--paper);font:400 13px/1.45 var(--sv-sans);
  user-select:none;-webkit-user-select:none;overscroll-behavior:none}
.sv *,.sv *::before,.sv *::after{box-sizing:border-box}
.sv :focus-visible{outline:1.5px solid var(--paper);outline-offset:3px;border-radius:6px}
.sv-wait{position:absolute;left:0;right:0;top:42%;text-align:center;font:italic 400 17px var(--sv-serif);color:var(--p70)}

.sv-sky{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.sv-sky.is-drag{cursor:grabbing} .sv-sky.is-hit{cursor:pointer}
.sv-grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay}
.sv-arrive{position:absolute;inset:0;background:var(--deep);pointer-events:none;opacity:1;transition:opacity 1.8s ease .1s}
.sv-arrive.is-off{opacity:0}

/* gornja traka */
.sv-top{position:absolute;z-index:4;left:0;right:0;top:var(--sv-nav);display:flex;align-items:center;gap:16px;
  padding:18px clamp(16px,4vw,40px);pointer-events:none}
.sv-top > *{pointer-events:auto}
.sv-crumb{display:flex;align-items:baseline;gap:10px;min-width:0}
.sv-crumb h1{margin:0;font:400 26px/1.1 var(--sv-serif);letter-spacing:-.01em}
.sv-count{color:var(--p50);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-back{display:none;align-items:center;gap:8px;background:none;border:0;padding:6px 10px 6px 0;color:var(--p90);font:400 18px var(--sv-serif)}
.sv-back svg{width:16px;height:16px}
.sv.is-story .sv-back{display:inline-flex} .sv.is-story .sv-crumb{display:none}
.sv-spacer{flex:1}
.sv-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:19px;
  background:rgba(18,23,42,.55);border:1px solid var(--p14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .2s}
.sv-search:focus-within{border-color:var(--p50)}
.sv-search svg{width:15px;height:15px;opacity:.7;flex:none}
.sv-search input{background:none;border:0;outline:0;width:clamp(120px,18vw,220px);font:400 14px var(--sv-sans);color:var(--paper);user-select:text;-webkit-user-select:text}
.sv-search input::placeholder{color:var(--p50)}
.sv.is-story .sv-search{display:none}

/* žanrovi = legenda i filter u jednom */
.sv-genres{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;
  padding:14px clamp(16px,4vw,40px) 18px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 170px),transparent calc(100% - 120px));
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 170px),transparent calc(100% - 120px));
  padding-right:180px;transition:opacity .4s}
.sv-genres::-webkit-scrollbar{display:none}
.sv-chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 9px;border-radius:16px;
  background:rgba(18,23,42,.5);border:1px solid var(--p08);color:var(--p70);white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:color .2s,border-color .2s,background .2s}
.sv-chip:hover{color:var(--paper);border-color:var(--p14)}
.sv-chip[aria-pressed="true"]{color:var(--paper);border-color:var(--p50);background:rgba(30,39,64,.8)}
.sv-orb{width:13px;height:13px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%,var(--hi),var(--lit) 38%,var(--dp) 82%);
  box-shadow:0 0 8px -1px var(--lit)}
.sv.is-story .sv-genres,.sv.is-story .sv-hint{opacity:0;pointer-events:none}

/* kontrole dubine */
.sv-ctrl{position:absolute;z-index:4;right:clamp(16px,4vw,40px);bottom:calc(18px);
  display:flex;gap:6px;transition:opacity .4s}
.sv-ctrl button{height:32px;min-width:32px;padding:0 10px;border-radius:16px;background:rgba(18,23,42,.6);
  border:1px solid var(--p14);color:var(--p90);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sv-ctrl button:hover{border-color:var(--p50)}

.sv-hint{position:absolute;left:50%;bottom:calc(74px);transform:translateX(-50%);
  font:italic 400 15px var(--sv-serif);color:var(--p70);text-align:center;width:max-content;max-width:86vw;
  pointer-events:none;transition:opacity .8s}
.sv-hint.is-off{opacity:0}

/* pregled priče uz planet */
.sv-card{position:absolute;z-index:3;left:0;top:0;width:min(300px,calc(100vw - 32px));padding:16px 18px 16px;border-radius:14px;
  background:rgba(16,21,40,.84);border:1px solid var(--p14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.7);pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity .18s var(--sv-ease),transform .18s var(--sv-ease)}
.sv-card.is-on{opacity:1;transform:none}
.sv-card.is-touch.is-on{pointer-events:auto}
.sv-g{display:flex;align-items:center;gap:8px;color:var(--p70);margin:0 0 8px}
.sv-card h2{margin:0 0 8px;font:400 22px/1.15 var(--sv-serif);letter-spacing:-.01em}
.sv-last{margin:0 0 12px;font:italic 400 15px/1.45 var(--sv-serif);color:var(--p90)}
.sv-rdot{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--red);margin-left:.16em;vertical-align:baseline}
.sv-meta{margin:0;color:var(--p50);font-variant-numeric:tabular-nums}
.sv-meta + .sv-meta{margin-top:2px}
.sv-card .sv-go{display:none;margin-top:12px;height:34px;padding:0 14px;border-radius:17px;border:0;background:var(--paper);color:var(--ink);font-weight:500}
.sv-card.is-touch .sv-go{display:inline-block}

/* razina priče */
.sv-story{position:absolute;z-index:2;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.sv.is-story .sv-story{opacity:1;pointer-events:auto;transition-delay:.45s}
.sv-story::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,12,25,0) 0,rgba(9,12,25,.35) 38%,rgba(9,12,25,.8) 70%,rgba(9,12,25,.9) 100%)}
.sv-info{position:absolute;left:var(--info-left,80px);top:54%;width:min(430px,44vw)}
.sv-info h2{margin:0 0 12px;font:400 clamp(26px,3.2vw,40px)/1.08 var(--sv-serif);letter-spacing:-.015em}
.sv-info .sv-last{font-size:18px;line-height:1.5;margin-bottom:14px}
.sv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sv-btn{height:40px;padding:0 18px;border-radius:20px;border:1px solid var(--p14);background:rgba(18,23,42,.5);color:var(--paper);
  font-weight:500;display:inline-flex;align-items:center;gap:9px}
.sv-btn:hover{border-color:var(--p50)}
.sv-btn.sv-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.sv-btn .sv-rdot{width:7px;height:7px;margin:0}
/* struktura priče: platno koje se povlači i zumira, bez obzira na veličinu stabla */
.sv-map{position:absolute;left:max(46vw,calc(var(--info-left,80px) + min(430px,44vw) + 28px));right:0;top:calc(64px + var(--sv-nav));bottom:0;
  overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.sv-map.is-drag{cursor:grabbing} .sv-map.is-hit{cursor:pointer}
.sv-map canvas{display:block;width:100%;height:100%;outline:none;
  /* v0.27.1: rubovi stabla se tope, a ne režu — kad se zumira, struktura ne izgleda otkinuta */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent),linear-gradient(180deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent),linear-gradient(180deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sv-map .sv-pulse{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.sv-map .sv-pulse i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--red);opacity:.3;animation:sv-halo 2.6s ease-out infinite}
@keyframes sv-halo{0%{transform:scale(1);opacity:.34}100%{transform:scale(3.4);opacity:0}}
.sv-tip{position:absolute;left:0;top:0;padding:8px 12px;border-radius:9px;background:rgba(16,21,40,.95);border:1px solid var(--p14);
  color:var(--p90);pointer-events:none;opacity:0;transition:opacity .12s;z-index:5;max-width:min(320px,calc(100% - 16px))}
.sv-tip span{display:block;font-variant-numeric:tabular-nums}
.sv-tip em{display:block;margin-top:5px;padding-top:6px;border-top:1px solid var(--p14);font:italic 400 14px/1.4 var(--sv-serif);color:var(--p70)}
.sv-mapnote{position:absolute;left:0;right:0;top:40%;margin:0;text-align:center;font:italic 400 15px var(--sv-serif);color:var(--p50);pointer-events:none}
.sv-pill{height:38px;padding:0 15px;border-radius:19px;background:rgba(18,23,42,.55);border:1px solid var(--p14);color:var(--p90);font-size:14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s}
.sv-pill:hover{border-color:var(--p50)}
.sv.is-story .sv-pill{display:none}
.sv-tip.is-on{opacity:1}
.sv-toast{position:absolute;left:50%;bottom:28px;transform:translate(-50%,8px);padding:10px 16px;border-radius:12px;
  background:var(--paper);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--sv-ease);z-index:6;max-width:88vw}
.sv-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* popis za tipkovnicu i čitače zaslona */
.sv-vh{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:760px){
  .sv-crumb h1{font-size:22px}
  .sv-search input{width:104px}
  .sv-ctrl{display:none}
  .sv-count{display:none}
  .sv-top{gap:8px;padding:12px 14px}
  .sv-pill{padding:0 12px}
  .sv-genres{padding-right:16px;-webkit-mask-image:none;mask-image:none}
  .sv-story{overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,rgba(9,12,25,0) 0,rgba(9,12,25,0) 170px,rgba(9,12,25,.82) 300px,rgba(9,12,25,.92) 100%)}
  .sv-story::before{display:none}
  .sv-info{position:relative;left:auto;top:auto;width:auto;margin:calc(238px + var(--sv-nav) * .6) 22px 0}
  .sv-map{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:74vh;margin:26px 0 24px}
  .sv-hint{bottom:calc(66px);font-size:14px;max-width:78vw}
}
@media (prefers-reduced-motion:reduce){
  .sv-arrive{transition:none}.sv-map .sv-pulse i{animation:none}.sv-card,.sv-story,.sv-toast{transition:none}
}

/* ── Svemir u aplikaciji: navigacija nije traka nego tihi sloj preko neba ──
   Nebo ide do vrha ekrana; izlaz (Otkrij, Piši, profil…) ostaje na istom mjestu, samo bez podloge.
   Boje su uvijek noćne, i kad je čitanje u svijetloj temi. */
body[data-view="svemir"] .nav,body[data-view="svemir"] .tabbar{
  --bg:#12172A;--fg:#EDE6D6;--fg2:rgba(237,230,214,.72);--fg3:rgba(237,230,214,.46);
  --line:rgba(237,230,214,.14);--line2:rgba(237,230,214,.26);color:var(--fg)}
body[data-view="svemir"] .nav{position:fixed;left:0;right:0;top:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,12,25,.66) 0,rgba(9,12,25,.3) 60%,rgba(9,12,25,0) 100%) no-repeat;
  border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-view="svemir"] .nav-in{pointer-events:none}
body[data-view="svemir"] .nav-in > *{pointer-events:auto}
body[data-view="svemir"] .nav .who2 .av{background:#EDE6D6;color:#12172A}
body[data-view="svemir"] .tabbar{background:rgba(9,12,25,.74)}
/* navigacija već kaže „Svemir", pa naslov ispod nje ostaje samo čitačima zaslona */
.sv.has-nav .sv-crumb h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sv.has-nav .sv-count{font-size:13px}
@media (max-width:760px){.sv.has-nav .sv-count{display:block}.sv.has-nav .sv-top{padding-top:6px}}

/* v0.24 — samostalno stablo (reader → Struktura): isti crtež kao razina priče u Svemiru */
.sfn-tree{--deep:#090C19;--paper:#EDE6D6;--ink:#1B1815;--red:#D23A1E;--p90:rgba(237,230,214,.9);--p70:rgba(237,230,214,.7);--p50:rgba(237,230,214,.52);--p14:rgba(237,230,214,.14);--p08:rgba(237,230,214,.08);
  --sv-serif:"Newsreader","Iowan Old Style",Georgia,serif;--sv-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;overflow:hidden;background:var(--deep);color:var(--paper);font:400 13px/1.45 var(--sv-sans);user-select:none;-webkit-user-select:none}
.sfn-tree .sv-map{position:absolute;inset:0;left:0;right:0;top:0;bottom:0}

/* v0.25.2 — traka na Otkrij (band): isto nebo kroz prozor, bez sučelja */
.sv.is-band{height:100%;min-height:0;cursor:default}
.sv.is-band .sv-top,.sv.is-band .sv-genres,.sv.is-band .sv-ctrl,.sv.is-band .sv-hint,.sv.is-band .sv-card,.sv.is-band .sv-story,.sv.is-band .sv-vh,.sv.is-band .sv-arrive,.sv.is-band .sv-toast{display:none!important}
.sv.is-band .sv-sky{cursor:default}
.sv.is-band .sv-sky.is-hit{cursor:pointer}
.sv.is-band .sv-tip{background:rgba(9,12,25,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sv.is-band .sv-tip span{font-size:11.5px;color:var(--p50);letter-spacing:.02em}
.sv.is-band .sv-tip.is-red span{color:var(--red)}
.sv.is-band .sv-tip em{margin-top:3px;padding-top:0;border-top:0;font-size:15px;color:var(--p90)}