/* ═══════════════════════════════════════════════════════════════
   Plejarena STORY MODE — story.css
   Stranica /story: header, karta svijeta, likovi, postavke.
   Tema: #0b0716 + neon #7c3aed / #22d3ee / #ec4899 / #fbbf24
   ═══════════════════════════════════════════════════════════════ */

.story-page{
  padding-top:1.4rem;
  padding-bottom:3rem;
  --story-bg:#0b0716;
  --story-panel:#171028;
  --story-purple:#7c3aed;
  --story-cyan:#22d3ee;
  --story-pink:#ec4899;
  --story-gold:#fbbf24;
  --story-border:rgba(124,58,237,.35);
}

/* ── (1) Header ─────────────────────────────────────────────── */
.story-header{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--story-border);
  background:var(--story-panel);
  box-shadow:0 14px 44px rgba(0,0,0,.5), 0 0 40px rgba(124,58,237,.12);
  margin-bottom:1.6rem;
}
.story-header-bg{
  position:absolute; inset:0;
  background:url('/static/img/hero-city.jpg') center 30%/cover no-repeat;
  opacity:.5;
  filter:saturate(1.15);
}
.story-header-bg::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,7,22,.55) 0%, rgba(11,7,22,.78) 62%, rgba(11,7,22,.96) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(124,58,237,.32) 0%, transparent 60%);
}
.story-header-inner{
  position:relative;
  z-index:1;
  padding:2.6rem 1.6rem 2.1rem;
  text-align:center;
}
.story-kicker{
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--story-cyan);
  text-shadow:0 0 14px rgba(34,211,238,.55);
  margin-bottom:.35rem;
  font-weight:600;
}
.story-title{
  font-size:clamp(2.2rem, 6.5vw, 3.6rem);
  line-height:1.08;
  letter-spacing:.06em;
  margin:0 0 .55rem;
  font-weight:800;
}
.story-title-grad{
  background:linear-gradient(100deg, #a78bfa 0%, #22d3ee 42%, #ec4899 78%, #fbbf24 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(124,58,237,.55));
}
.story-sub{
  max-width:560px;
  margin:0 auto 1.4rem;
  color:#c7bfe0;
  font-size:.98rem;
  line-height:1.55;
}
.story-header-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  flex-wrap:wrap;
}
.story-continue-btn{
  font:inherit;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
  background:linear-gradient(135deg, #7c3aed, #ec4899);
  border:none;
  border-radius:16px;
  padding:.85rem 1.7rem;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:storyBtnGlow 2.6s ease-in-out infinite;
}
.story-continue-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 10px 30px rgba(236,72,153,.5); }
.story-continue-btn:active{ transform:translateY(0) scale(.98); }
.story-continue-arrow{ display:inline-block; margin-left:.15rem; animation:storyArrowNudge 1.4s ease-in-out infinite; }
@keyframes storyBtnGlow{
  0%,100%{ box-shadow:0 6px 22px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.18); }
  50%{ box-shadow:0 6px 30px rgba(236,72,153,.6), inset 0 1px 0 rgba(255,255,255,.18); }
}
@keyframes storyArrowNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }

.story-frag-counter{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(11,7,22,.72);
  border:1px solid rgba(34,211,238,.4);
  border-radius:16px;
  padding:.7rem 1.15rem;
  font-weight:700;
  font-size:1.05rem;
  color:#e2e8f0;
  box-shadow:0 0 18px rgba(34,211,238,.18);
  backdrop-filter:blur(6px);
}
.story-frag-gem{ font-size:1.2rem; animation:storyGemFloat 3s ease-in-out infinite; }
@keyframes storyGemFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-3px) rotate(8deg); } }
.story-frag-num{ color:var(--story-cyan); text-shadow:0 0 12px rgba(34,211,238,.7); font-size:1.25rem; }
.story-frag-num.story-frag-pop{ animation:storyFragPop .5s ease; }
@keyframes storyFragPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.5); color:#fbbf24; } 100%{ transform:scale(1); } }
.story-frag-total{ color:#8b83a8; font-size:.95rem; }

/* ── zajednički naslovi sekcija ─────────────────────────────── */
.story-section-title{
  font-size:1.15rem;
  font-weight:700;
  color:#e2e8f0;
  margin:0 0 .8rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  letter-spacing:.02em;
}

/* ── (2) Karta ──────────────────────────────────────────────── */
.story-map-section{ margin-bottom:2rem; }
.story-map{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--story-border);
  min-height:520px;
  background:
    linear-gradient(180deg, rgba(11,7,22,.62) 0%, rgba(11,7,22,.5) 45%, rgba(11,7,22,.78) 100%),
    url('/static/img/hero-city.jpg') center/cover no-repeat,
    var(--story-panel);
  box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 0 90px rgba(11,7,22,.75);
}
.story-map-fog{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 22% 65%, rgba(34,211,238,.10) 0%, transparent 42%),
    radial-gradient(ellipse at 62% 30%, rgba(124,58,237,.14) 0%, transparent 46%),
    radial-gradient(ellipse at 85% 70%, rgba(236,72,153,.09) 0%, transparent 40%);
  animation:storyFogDrift 16s ease-in-out infinite alternate;
}
@keyframes storyFogDrift{ from{ opacity:.75; transform:scale(1); } to{ opacity:1; transform:scale(1.04); } }

.story-map-path{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.story-seg{
  fill:none;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.story-seg-base{ stroke:rgba(148,163,184,.28); stroke-width:3; stroke-dasharray:1 9; }
.story-seg-done{ stroke:var(--story-gold); stroke-width:3; stroke-dasharray:1 9; filter:drop-shadow(0 0 5px rgba(251,191,36,.85)); }
.story-seg-active{
  stroke:var(--story-cyan);
  stroke-width:3;
  stroke-dasharray:1 9;
  filter:drop-shadow(0 0 6px rgba(34,211,238,.9));
  animation:storySegFlow 1.6s linear infinite;
}
@keyframes storySegFlow{ from{ stroke-dashoffset:20; } to{ stroke-dashoffset:0; } }

.story-map-nodes{ position:absolute; inset:0; }
.story-node{
  position:absolute;
  transform:translate(-50%,-50%);
  width:60px; height:60px;
  min-width:52px; min-height:52px;
  border-radius:50%;
  border:2px solid var(--story-border);
  background:radial-gradient(circle at 32% 28%, #241740 0%, #130b26 70%);
  color:#e2e8f0;
  font:inherit;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  z-index:2;
}
.story-node:hover{ z-index:6; }
.story-node-num{
  position:absolute;
  top:-7px; left:-7px;
  width:22px; height:22px;
  border-radius:50%;
  background:#0b0716;
  border:1px solid var(--story-border);
  color:#a78bfa;
  font-size:.68rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.story-node-state{
  position:absolute;
  bottom:-6px; right:-8px;
  font-size:1rem;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
.story-node-label{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:.72rem;
  font-weight:600;
  color:#cbd5e1;
  background:rgba(11,7,22,.78);
  border:1px solid rgba(124,58,237,.25);
  border-radius:8px;
  padding:.18rem .5rem;
  pointer-events:none;
  backdrop-filter:blur(4px);
}

/* stanja čvorova */
.story-node-done{
  border-color:rgba(74,222,128,.7);
  box-shadow:0 0 16px rgba(74,222,128,.35), 0 6px 18px rgba(0,0,0,.5);
}
.story-node-done:hover{ transform:translate(-50%,-50%) scale(1.08); }
.story-node-active{
  border-color:var(--story-cyan);
  box-shadow:0 0 0 0 rgba(34,211,238,.55), 0 0 26px rgba(34,211,238,.5), 0 6px 18px rgba(0,0,0,.55);
  animation:storyNodePulse 1.8s ease-out infinite;
}
.story-node-active:hover{ transform:translate(-50%,-50%) scale(1.12); }
.story-node-active .story-node-label{ color:#a5f3fc; border-color:rgba(34,211,238,.45); }
@keyframes storyNodePulse{
  0%{ box-shadow:0 0 0 0 rgba(34,211,238,.55), 0 0 26px rgba(34,211,238,.5), 0 6px 18px rgba(0,0,0,.55); }
  70%{ box-shadow:0 0 0 16px rgba(34,211,238,0), 0 0 26px rgba(34,211,238,.5), 0 6px 18px rgba(0,0,0,.55); }
  100%{ box-shadow:0 0 0 0 rgba(34,211,238,0), 0 0 26px rgba(34,211,238,.5), 0 6px 18px rgba(0,0,0,.55); }
}
.story-node-locked{
  border-color:rgba(148,163,184,.25);
  filter:grayscale(.75) brightness(.72);
  cursor:not-allowed;
}
.story-node-locked .story-node-label{ color:#7d778f; }

/* tooltip zaključanog čvora */
.story-node-tip{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap;
  background:#1d1233;
  border:1px solid var(--story-border);
  color:#e2e8f0;
  font-size:.74rem;
  font-weight:600;
  border-radius:10px;
  padding:.4rem .7rem;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:8;
}
.story-node-tip::after{
  content:'';
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#1d1233;
}
.story-node:hover .story-node-tip,
.story-node:focus-visible .story-node-tip,
.story-node.story-tip-flash .story-node-tip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* wobble na klik zaključanog */
.story-node-wobble{ animation:storyWobble .45s ease; }
@keyframes storyWobble{
  0%,100%{ transform:translate(-50%,-50%) rotate(0); }
  25%{ transform:translate(-50%,-50%) rotate(-8deg); }
  50%{ transform:translate(-50%,-50%) rotate(7deg); }
  75%{ transform:translate(-50%,-50%) rotate(-4deg); }
}

/* animacija otključavanja novog poglavlja */
.story-node-unlocking{
  animation:storyUnlockBurst 1.4s ease;
  z-index:7;
}
@keyframes storyUnlockBurst{
  0%{ transform:translate(-50%,-50%) scale(.6); filter:grayscale(1) brightness(.6); box-shadow:0 0 0 0 rgba(251,191,36,.8); }
  35%{ transform:translate(-50%,-50%) scale(1.45); filter:none; box-shadow:0 0 0 22px rgba(251,191,36,0), 0 0 40px rgba(251,191,36,.8); }
  60%{ transform:translate(-50%,-50%) scale(.92); }
  100%{ transform:translate(-50%,-50%) scale(1); filter:none; }
}

.story-map-loading{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#a78bfa;
  font-weight:600;
  letter-spacing:.04em;
  background:rgba(11,7,22,.4);
  z-index:3;
}
.story-map-hint{
  text-align:center;
  color:#8b83a8;
  font-size:.85rem;
  margin-top:.7rem;
}

/* toast za otključavanje */
.story-unlock-toast{
  position:fixed;
  left:50%;
  bottom:2rem;
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg, #241740, #171028);
  border:1px solid rgba(251,191,36,.55);
  color:#fde68a;
  font-weight:700;
  border-radius:14px;
  padding:.85rem 1.4rem;
  box-shadow:0 12px 36px rgba(0,0,0,.6), 0 0 26px rgba(251,191,36,.25);
  z-index:99980;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
  max-width:min(92vw, 460px);
  text-align:center;
}
.story-unlock-toast.story-toast-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── (3) Likovi ─────────────────────────────────────────────── */
.story-chars-section{ margin-bottom:2rem; }
.story-chars{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:.9rem;
}
.story-char{
  position:relative;
  background:var(--story-panel);
  border:1px solid var(--story-border);
  border-radius:18px;
  padding:1.1rem .9rem .95rem;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.story-char::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% -10%, rgba(124,58,237,.22) 0%, transparent 55%);
  pointer-events:none;
}
.story-char:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 24px rgba(34,211,238,.18);
}
.story-char-portrait{
  width:104px; height:104px;
  margin:0 auto .6rem;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2a1b4d 0%, #120a24 75%);
  border:2px solid rgba(124,58,237,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:inset 0 0 22px rgba(0,0,0,.5), 0 0 18px rgba(124,58,237,.18);
}
.story-char-portrait svg{ width:88%; height:88%; display:block; }
.story-char-fallback{ font-size:2.6rem; }
.story-char-name{
  font-size:1.02rem;
  font-weight:800;
  margin:0 0 .3rem;
  color:#e9e2ff;
  letter-spacing:.04em;
  position:relative;
}
.story-char-desc{
  font-size:.78rem;
  color:#a79fc4;
  line-height:1.45;
  margin:0;
  position:relative;
}
.story-char-soon .story-char-portrait{ filter:grayscale(.85) brightness(.6); }
.story-char-soon:hover .story-char-portrait{ filter:grayscale(.5) brightness(.8); }
.story-char-badge{
  position:absolute;
  top:.6rem; right:.6rem;
  background:rgba(251,191,36,.14);
  border:1px solid rgba(251,191,36,.5);
  color:var(--story-gold);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.12em;
  border-radius:8px;
  padding:.14rem .45rem;
  z-index:1;
}

/* ── (4) Postavke ───────────────────────────────────────────── */
.story-settings-section{ margin-bottom:1rem; }
.story-settings{
  background:var(--story-panel);
  border:1px solid var(--story-border);
  border-radius:18px;
  padding:.4rem 1.1rem;
}
.story-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid rgba(124,58,237,.15);
  cursor:pointer;
}
.story-toggle-info{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.story-toggle-icon{ font-size:1.35rem; flex-shrink:0; }
.story-toggle-text{ display:flex; flex-direction:column; line-height:1.3; }
.story-toggle-text strong{ color:#e2e8f0; font-size:.95rem; }
.story-toggle-text small{ color:#8b83a8; font-size:.76rem; }

.story-switch{ position:relative; flex-shrink:0; display:inline-flex; }
.story-switch input{
  position:absolute; inset:0;
  opacity:0;
  cursor:pointer;
  margin:0;
  z-index:1;
}
.story-switch-track{
  width:52px; height:28px;
  border-radius:999px;
  background:#2a2140;
  border:1px solid rgba(148,163,184,.25);
  display:inline-block;
  position:relative;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.story-switch-thumb{
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:#8b83a8;
  transition:transform .2s ease, background .2s ease;
}
.story-switch input:checked + .story-switch-track{
  background:linear-gradient(135deg, #7c3aed, #22d3ee);
  border-color:rgba(34,211,238,.6);
  box-shadow:0 0 14px rgba(34,211,238,.35);
}
.story-switch input:checked + .story-switch-track .story-switch-thumb{
  transform:translateX(24px);
  background:#fff;
}
.story-switch input:focus-visible + .story-switch-track{ outline:2px solid var(--story-cyan); outline-offset:2px; }

.story-reset-row{ padding:.95rem 0; display:flex; justify-content:flex-end; }
.story-reset-btn{
  font:inherit;
  font-weight:700;
  font-size:.88rem;
  color:#fca5a5;
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.4);
  border-radius:12px;
  padding:.6rem 1.1rem;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.story-reset-btn:hover{
  background:rgba(248,113,113,.16);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(248,113,113,.2);
}

.story-tts-note{
  margin-top:.9rem;
  font-size:.78rem;
  color:#7d778f;
  line-height:1.5;
  text-align:center;
  padding:0 .5rem;
}

/* ── Modal ──────────────────────────────────────────────────── */
.story-modal-backdrop{
  position:fixed; inset:0;
  z-index:99985;
  background:rgba(8,5,16,.8);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2rem;
}
.story-modal-backdrop[hidden]{ display:none; }
.story-modal{
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg, #1d1233 0%, #130b26 100%);
  border:1px solid var(--story-border);
  border-radius:20px;
  padding:1.7rem 1.5rem 1.5rem;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.7), 0 0 44px rgba(124,58,237,.2);
  animation:storyModalIn .22s ease;
}
@keyframes storyModalIn{ from{ transform:scale(.92) translateY(10px); opacity:0; } to{ transform:scale(1) translateY(0); opacity:1; } }
.story-modal-emoji{ font-size:2.6rem; margin-bottom:.4rem; }
.story-modal-title{ font-size:1.25rem; font-weight:800; color:#e9e2ff; margin:0 0 .55rem; }
.story-modal-text{ font-size:.92rem; color:#a79fc4; line-height:1.55; margin:0 0 1.25rem; }
.story-modal-actions{ display:flex; gap:.65rem; justify-content:center; flex-wrap:wrap; }
.story-modal-btn{
  font:inherit;
  font-weight:700;
  font-size:.92rem;
  border-radius:12px;
  padding:.7rem 1.3rem;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease;
  min-width:120px;
}
.story-modal-btn:hover{ transform:translateY(-1px); }
.story-modal-btn-primary{
  color:#fff;
  background:linear-gradient(135deg, #7c3aed, #ec4899);
  box-shadow:0 5px 18px rgba(124,58,237,.4);
}
.story-modal-btn-danger{
  color:#fff;
  background:linear-gradient(135deg, #dc2626, #ec4899);
  box-shadow:0 5px 18px rgba(220,38,38,.35);
}
.story-modal-btn-ghost{
  color:#c7bfe0;
  background:rgba(124,58,237,.1);
  border-color:var(--story-border);
}

/* ── Mobitel ────────────────────────────────────────────────── */
@media (max-width: 640px){
  .story-header-inner{ padding:2rem 1rem 1.7rem; }
  .story-header-actions{ flex-direction:column; }
  .story-continue-btn{ width:100%; max-width:320px; }
  .story-map{ min-height:420px; }
  .story-node{ width:54px; height:54px; font-size:1.3rem; }
  .story-node-label{ display:none; }
  .story-node-active .story-node-label{ display:block; font-size:.66rem; }
  .story-chars{ grid-template-columns:repeat(auto-fit, minmax(136px, 1fr)); gap:.7rem; }
  .story-char-portrait{ width:84px; height:84px; }
  .story-reset-row{ justify-content:center; }
  .story-reset-btn{ width:100%; }
}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .story-continue-btn,
  .story-continue-arrow,
  .story-frag-gem,
  .story-map-fog,
  .story-seg-active,
  .story-node-active,
  .story-node-unlocking,
  .story-node-wobble,
  .story-frag-num.story-frag-pop{
    animation:none !important;
  }
  .story-continue-btn:hover,
  .story-node-done:hover,
  .story-node-active:hover,
  .story-char:hover{
    transform:none;
  }
  .story-node-active:hover,
  .story-node-done:hover{ transform:translate(-50%,-50%); }
  .story-modal{ animation:none; }
  .story-unlock-toast{ transition:opacity .3s ease; }
}