/* ============================================================
   En dan z LifeSaver — narativna igra
   ============================================================ */
:root{
  --ink:#0f172a; --ink-soft:#475569; --mute:#94a3b8;
  --line:#e2e8f0; --line-soft:#f1f5f9;
  --primary:#10b981; --primary-600:#059669; --primary-50:#ecfdf5;
  --amber:#f59e0b; --sky:#0ea5e9; --violet:#8b5cf6; --blue:#3b82f6; --danger:#ef4444;
  --shadow:0 24px 60px -18px rgba(15,23,42,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);
  background:linear-gradient(160deg,#f1f5f9,#e2e8f0);
  -webkit-tap-highlight-color:transparent;
}
h1,h2,.ov-title,.hud-brand,.sp-num,.scene-name span{font-family:Outfit,Inter,sans-serif}

#app{min-height:100%;display:flex;flex-direction:column;max-width:1180px;margin:0 auto}

/* ---------------- HUD ---------------- */
#hud{
  display:flex;align-items:center;gap:14px;padding:11px clamp(12px,3vw,22px);
  background:linear-gradient(135deg,#10b981,#059669);color:#fff;position:sticky;top:0;z-index:30;
  box-shadow:0 8px 24px -14px rgba(5,150,105,.7);
}
.hud-brand{font-weight:900;font-size:20px;color:#fff;text-decoration:none;letter-spacing:-.02em}
.hud-brand .dot{color:#a7f3d0}
.hud-clock{display:flex;align-items:center;gap:6px;font-weight:800;font-size:16px;
  background:rgba(255,255,255,.18);padding:5px 12px;border-radius:999px}
.hud-stats{display:flex;gap:7px;flex:1;justify-content:center;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);
  padding:5px 11px;border-radius:999px;font-size:14px;font-weight:700}
.stat b{font-weight:800;transition:transform .15s}
.stat.pop b{transform:scale(1.4)}
.hud-actions{display:flex;gap:6px}
.icon-btn{width:36px;height:36px;border:none;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:16px;display:grid;place-items:center;transition:background .15s,transform .1s}
.icon-btn:hover{background:rgba(255,255,255,.3)}.icon-btn:active{transform:scale(.92)}

/* ---------------- GAME LAYOUT ---------------- */
#game{flex:1;display:grid;grid-template-columns:1fr 340px;gap:18px;padding:18px clamp(12px,3vw,22px) 28px;align-items:start}
@media(max-width:880px){
  #game{grid-template-columns:1fr;gap:14px}
  #statusPanel{order:-1}
}

/* ---------------- STAGE ---------------- */
#stage{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
#sceneVisual{position:relative;aspect-ratio:1280/720;width:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  transition:background .5s}
#sceneVisual img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:opacity .28s, transform .45s cubic-bezier(.2,.8,.2,1);z-index:2}
#sceneVisual img.swap{opacity:0;transform:translateY(14px) scale(.96)}
/* mood backdrops */
.mood-office  #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#dbeafe,#eff6ff 60%,#fff)}
.mood-finance #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#fef3c7,#fffbeb 60%,#fff)}
.mood-phone   #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#e0e7ff,#eef2ff 60%,#fff)}
.mood-warehouse #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#cffafe,#ecfeff 60%,#fff)}
.mood-courier #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#ede9fe,#f5f3ff 60%,#fff)}
.mood-stop    #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#fee2e2,#fef2f2 60%,#fff)}
.mood-reject  #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#fecaca,#fef2f2 55%,#fff)}
.mood-win     #sceneVisual{background:radial-gradient(120% 90% at 50% 0%,#d1fae5,#ecfdf5 60%,#fff)}

.scene-prop{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:46px;z-index:3;
  animation:propBob 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
@keyframes propBob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-4deg)}50%{transform:translateX(-50%) translateY(-9px) rotate(4deg)}}
.scene-name{position:absolute;left:16px;bottom:14px;z-index:4;background:rgba(255,255,255,.92);backdrop-filter:blur(5px);
  border-radius:13px;padding:7px 14px;box-shadow:0 6px 16px rgba(15,23,42,.12);display:flex;flex-direction:column;line-height:1.15}
.scene-name span{font-weight:800;font-size:15px;color:var(--ink)}
.scene-name small{font-size:11px;color:var(--primary-600);font-weight:700}

#dialogBox{padding:clamp(16px,3vw,24px)}
.dialog-text{font-size:clamp(15px,2.4vw,17px);line-height:1.66;color:var(--ink);min-height:3.2em}
.dialog-text b{color:var(--primary-600)}
.dialog-text .em{color:var(--danger);font-weight:700}
.cursor::after{content:"▋";color:var(--primary);animation:blink .8s steps(1) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}

.options{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.opt{
  text-align:left;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:600;color:var(--ink);padding:13px 15px;border-radius:13px;
  transition:transform .12s,border-color .15s,background .15s,box-shadow .15s;
  display:flex;align-items:center;gap:9px;line-height:1.4;
  animation:optIn .35s ease both;
}
.opt:hover{border-color:var(--primary);background:var(--primary-50);transform:translateX(3px)}
.opt:active{transform:translateX(0) scale(.99)}
.opt.primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;justify-content:center;font-weight:800;font-size:16px;padding:15px}
.opt.primary:hover{background:linear-gradient(135deg,#0ea371,#04875f);transform:translateY(-2px)}
.opt.link{background:#0f172a;color:#fff;border:none;justify-content:center;font-weight:800}
.opt:nth-child(1){animation-delay:.05s}.opt:nth-child(2){animation-delay:.12s}.opt:nth-child(3){animation-delay:.19s}
.opt:nth-child(4){animation-delay:.26s}.opt:nth-child(5){animation-delay:.33s}
@keyframes optIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------- STATUS PANEL ---------------- */
#statusPanel{background:#fff;border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--line);
  padding:16px 16px 18px;position:sticky;top:74px}
.sp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.sp-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sp-num{font-weight:800;font-size:17px;color:var(--ink)}

.sp-pipe{display:flex;flex-direction:column;gap:0;position:relative;margin-bottom:6px}
.pipe-step{display:flex;align-items:center;gap:11px;padding:7px 0;position:relative}
.pipe-step i{flex-shrink:0;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:13px;background:var(--line-soft);color:var(--mute);
  border:2px solid var(--line);transition:all .35s;z-index:2}
.pipe-step span{font-size:13.5px;font-weight:700;color:var(--mute);transition:color .3s}
.pipe-step::before{content:"";position:absolute;left:13px;top:-12px;width:2px;height:14px;background:var(--line);z-index:1}
.pipe-step:first-child::before{display:none}
.pipe-step.done i{background:var(--primary);border-color:var(--primary);color:#fff}
.pipe-step.done i::after{content:"✓";position:absolute;font-size:14px}
.pipe-step.done span{color:var(--ink-soft)}
.pipe-step.done::before{background:var(--primary)}
.pipe-step.cur i{background:#fff;border-color:var(--cur,#f59e0b);color:var(--cur,#f59e0b);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cur,#f59e0b) 22%,transparent);animation:curPulse 1.6s ease-in-out infinite}
.pipe-step.cur span{color:var(--ink);font-weight:800}
@keyframes curPulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--cur,#f59e0b) 20%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--cur,#f59e0b) 8%,transparent)}}

.sp-reject{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:11px;
  padding:8px 10px;font-size:12px;font-weight:700;margin:8px 0 4px;animation:rejIn .4s ease}
@keyframes rejIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

.sp-sub{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.sub-title{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.sub-chip{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;margin-bottom:5px;
  background:var(--line-soft);transition:background .3s}
.sub-chip .sc-ico{font-size:15px;filter:grayscale(.6);opacity:.6;transition:.3s}
.sub-chip .sc-txt{font-size:13px;font-weight:700;color:var(--ink-soft);flex:1}
.sub-chip .sc-val{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:#fff;color:var(--mute);border:1px solid var(--line)}
.sub-chip.on{background:color-mix(in srgb,var(--ac) 14%,#fff)}
.sub-chip.on .sc-ico{filter:none;opacity:1}
.sub-chip.on .sc-val{background:var(--ac);color:#fff;border-color:var(--ac)}
.sub-chip.flash{animation:chFlash .6s ease}
@keyframes chFlash{0%,100%{transform:none}30%{transform:scale(1.05)}}

.sp-docs{display:flex;gap:5px;margin-top:12px}
.doc{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--mute);background:var(--line-soft);
  border:1px solid var(--line);border-radius:9px;padding:7px 3px;transition:.3s;opacity:.65}
.doc.ready{background:var(--primary-50);color:var(--primary-600);border-color:#a7f3d0;opacity:1}

.sp-meta{display:flex;justify-content:space-between;margin-top:13px;font-size:12px;color:var(--mute);gap:8px;flex-wrap:wrap}
.sp-meta b{color:var(--ink-soft)}

/* ---------------- OVERLAYS ---------------- */
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;
  background:rgba(15,23,42,.55);backdrop-filter:blur(7px);animation:ovIn .3s ease both}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.ov-card{width:100%;max-width:560px;max-height:94vh;overflow:auto;background:#fff;border-radius:26px;
  padding:clamp(22px,5vw,40px);box-shadow:var(--shadow);text-align:center;animation:ovCardIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes ovCardIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.ov-kicker{display:inline-block;background:var(--primary-50);color:var(--primary-600);font-weight:800;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:12px}
.ov-title{font-size:clamp(28px,7vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.05;
  background:linear-gradient(135deg,#0f172a,#059669 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ov-lead{color:var(--ink-soft);font-size:15.5px;line-height:1.62;margin:14px auto 16px;max-width:460px}
.ov-lead b{color:var(--ink)}
.ov-tip{font-size:13px;color:var(--mute);margin-top:6px}.ov-tip b{color:var(--primary-600)}
.legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 4px}
.lg{font-size:11.5px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff);
  border:1.5px solid color-mix(in srgb,var(--c) 35%,#fff);padding:5px 10px;border-radius:999px}

.btn-play{display:inline-block;border:none;cursor:pointer;font-family:Outfit,inherit;font-weight:800;font-size:18px;
  color:#fff;text-decoration:none;background:linear-gradient(135deg,#10b981,#059669);padding:15px 34px;border-radius:14px;
  box-shadow:0 14px 28px -10px rgba(5,150,105,.6);transition:transform .12s,box-shadow .15s;margin-top:14px}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 20px 34px -10px rgba(5,150,105,.7)}
.btn-ghost2{display:block;margin:12px auto 0;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:15px;color:var(--ink);padding:11px 22px;border-radius:12px;transition:background .15s}
.btn-ghost2:hover{background:var(--line-soft)}
.btn-link2{display:inline-block;margin-top:12px;color:var(--mute);font-size:13.5px;font-weight:600;text-decoration:underline}

.end-stats{display:flex;justify-content:center;gap:clamp(16px,5vw,40px);margin:18px 0 4px}
.es{display:flex;flex-direction:column}
.es-num{font-family:Outfit;font-weight:900;font-size:clamp(28px,8vw,42px);color:var(--primary-600);line-height:1}
.es-lbl{font-size:12px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.end-cta{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.end-pitch{font-size:14px;color:var(--ink-soft);line-height:1.55;max-width:440px;margin:0 auto 16px}
.end-pitch b{color:var(--ink)}

/* ---------------- task hub ---------------- */
.opt.hub-done{background:var(--primary-50);border-color:#a7f3d0;color:var(--primary-600);cursor:default;opacity:1;font-weight:700}
.opt.hub-done:hover{transform:none;background:var(--primary-50)}
.opt.locked{cursor:not-allowed}
.opt.locked:hover{transform:none}
.opt.primary.locked{background:#e2e8f0;color:#94a3b8;box-shadow:none}
.opt.primary.locked:hover{background:#e2e8f0;transform:none}
.hub-hint{font-size:12px;color:var(--mute);text-align:center;margin-top:2px;line-height:1.4}
.hub-hint b{color:var(--ink-soft)}

/* ---------------- mini checklist ---------------- */
.checklist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.check-item{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 13px;cursor:pointer;font-size:14px;font-weight:600;transition:.15s;background:#fff}
.check-item:hover{border-color:var(--primary)}
.check-item .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;
  font-size:14px;color:#fff;transition:.15s}
.check-item.on{background:var(--primary-50);border-color:var(--primary)}
.check-item.on .box{background:var(--primary);border-color:var(--primary)}
.check-item .ci-x{margin-left:auto;font-size:12px;color:var(--mute);font-weight:700}