/* ===== ЕКО-ДИПЛОМАТИЈА: графичко окружење игре, уређивач и статистика =====
   Свако поглавље има своју ТЕМУ (боје позадине и нагласка) и своју СЦЕНУ (SVG цртеж),
   а сваки избор своју икону. Параметри су три обојене траке које се анимирају при промени. */
.eko{--ek1:#0f766e;--ek2:#14532d;--ekac:#4ade80;border-radius:16px;padding:14px;background:linear-gradient(160deg,var(--ek1),var(--ek2));color:#f8fafc;box-shadow:var(--shadow)}
.eko.eko-t-industrija{--ek1:#3b2f2f;--ek2:#7c3f12;--ekac:#fb923c}
.eko.eko-t-susa{--ek1:#b45309;--ek2:#78350f;--ekac:#fde68a}
.eko.eko-t-more{--ek1:#0c4a6e;--ek2:#164e63;--ekac:#67e8f9}
.eko.eko-t-samit{--ek1:#1e1b4b;--ek2:#312e81;--ekac:#fbbf24}
.eko.eko-t-lose{--ek1:#450a0a;--ek2:#1c1917;--ekac:#f87171}
.eko.eko-t-dobro{--ek1:#065f46;--ek2:#0369a1;--ekac:#fde047}
.eko-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.eko-role{display:flex;flex-direction:column;min-width:180px;flex:1 1 200px;line-height:1.3}
.eko-role .muted{color:rgba(255,255,255,.7);font-size:12px}
.eko-bars{display:grid;grid-template-columns:auto 1fr 78px;gap:6px 10px;align-items:center;flex:2 1 380px}
.eko-bar{display:contents}
.eko-bar-lbl{display:flex;gap:6px;align-items:center;font-weight:600;font-size:14px;white-space:nowrap}
.eko-bar-track{position:relative;height:16px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.eko-bar-fill{height:100%;border-radius:999px;transition:width .9s cubic-bezier(.2,.8,.2,1);background:#e2e8f0}
.eko-bar.p-eko .eko-bar-fill{background:linear-gradient(90deg,#f59e0b,#fde047)}
.eko-bar.p-pri .eko-bar-fill{background:linear-gradient(90deg,#16a34a,#86efac)}
.eko-bar.p-pop .eko-bar-fill{background:linear-gradient(90deg,#2563eb,#93c5fd)}
.eko-bar.low .eko-bar-fill{filter:saturate(.8)}
.eko-bar.danger .eko-bar-fill{background:linear-gradient(90deg,#dc2626,#f87171)!important;animation:ekblink .8s infinite alternate}
.eko-bar.dead .eko-bar-fill{background:#7f1d1d!important}
.eko-bar-mark{position:absolute;left:66.6%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.6)}
.eko-bar-val{display:flex;align-items:baseline;gap:6px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.eko-bar-val b{font-size:18px}
.eko-delta{font-size:12px;font-weight:700;padding:1px 6px;border-radius:999px;animation:ekpop .6s ease-out}
.eko-delta.up{background:#16a34a;color:#fff}.eko-delta.down{background:#dc2626;color:#fff}
@keyframes ekpop{0%{transform:translateY(8px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes ekblink{from{filter:brightness(1)}to{filter:brightness(1.45)}}
.eko-stage{background:#fff;color:var(--ink);border-radius:14px;overflow:hidden}
.eko-banner{position:relative;height:clamp(150px,26vh,300px);overflow:hidden;background:#0f172a}
.eko-banner.big{height:clamp(180px,34vh,360px)}
.eko-scene{width:100%;height:100%;display:block}
.eko-banner-txt{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));color:#fff}
.eko-period{font-size:12px;letter-spacing:.08em;font-weight:700;opacity:.92}
.eko-banner-txt h3{margin:2px 0 0;font-size:clamp(18px,2.4vw,28px);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.eko-body{padding:16px 18px 18px}
.eko-text{font-size:16px;line-height:1.55;margin:0 0 10px}
.eko-vars{border-left:4px solid var(--ekac);background:#f8fafc;border-radius:0 10px 10px 0;padding:8px 12px;margin:0 0 12px}
.eko-vars-h{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.eko-var{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-style:italic;margin:4px 0}
.eko-var .eko-effs{margin:0}
.eko-q{font-weight:800;font-size:17px;margin:6px 0 10px}
.eko-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.eko-choice{display:flex;gap:12px;align-items:flex-start;text-align:left;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;font:inherit;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.eko-choice:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.14);border-color:var(--ek1)}
.eko-choice.unlocked{border-color:#f59e0b;background:#fffbeb}
.eko-choice-ico{position:relative;flex:0 0 auto}
.eko-ico{width:56px;height:56px;display:block}
.eko-choice-key{position:absolute;right:-6px;bottom:-6px;background:var(--ink);color:#fff;font-weight:800;font-size:12px;border-radius:999px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.eko-choice-key.big{position:static;width:28px;height:28px;font-size:14px;border:0;display:inline-flex}
.eko-choice-txt{font-weight:600;line-height:1.4;font-size:15px}
.eko-unlock{font-size:12px;color:#b45309;font-weight:600;margin-top:4px}
.eko-effs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.eko-eff{font-weight:700;font-size:13px;padding:2px 9px;border-radius:999px;background:#e2e8f0;color:#475569}
.eko-eff.up{background:#dcfce7;color:#166534}.eko-eff.down{background:#fee2e2;color:#991b1b}
.eko-result{border:2px solid var(--ek1);border-radius:14px;padding:14px;background:#fff;animation:ekin .35s ease-out}
.eko-result.fail{border-color:#dc2626;background:#fff5f5}
@keyframes ekin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eko-result-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.eko-result-head .eko-ico{width:64px;height:64px;flex:0 0 auto}
.eko-result-text{font-size:16px;line-height:1.5}
.eko-why{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fefce8;border:1px solid #fde68a;font-size:14px;line-height:1.5}
.eko-fallen{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fee2e2;color:#7f1d1d;font-weight:600}
/* избор улоге */
.eko-intro{background:rgba(255,255,255,.1);border-radius:12px;padding:14px 16px}
.eko-intro h3{margin:0 0 6px;font-size:22px}.eko-intro p{margin:0 0 8px;line-height:1.5}
.eko-legend{display:flex;gap:8px;flex-wrap:wrap;font-size:13px}
.eko-leg{background:rgba(255,255,255,.14);border-radius:999px;padding:3px 10px}
.eko-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.eko-rolecard{background:#fff;color:var(--ink);border:0;border-radius:14px;overflow:hidden;padding:0;text-align:left;cursor:pointer;font:inherit;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.eko-rolecard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.eko-rolecard-scene{height:130px}
.eko-rolecard-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.eko-rolecard h4{margin:0 0 4px;font-size:17px}.eko-rolecard p{margin:0 0 8px;font-size:13px;color:var(--muted);line-height:1.45;flex:1}
.eko-mini{display:grid;gap:4px}
.eko-mini-row{display:grid;grid-template-columns:22px 1fr 34px;gap:6px;align-items:center;font-size:13px}
.eko-mini-track{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.eko-mini-track div{height:100%;border-radius:999px;background:#94a3b8}
.eko-mini-row.p-eko .eko-mini-track div{background:#f59e0b}.eko-mini-row.p-pri .eko-mini-track div{background:#16a34a}.eko-mini-row.p-pop .eko-mini-track div{background:#2563eb}
/* крај године */
.eko-final{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:#f8fafc;border-radius:12px;padding:12px;margin:10px 0}
.eko-final .eko-bar-lbl{color:var(--ink)}.eko-final .eko-bar-track{background:#e2e8f0}.eko-final .eko-bar-mark{background:rgba(0,0,0,.25)}
.eko-score{text-align:center;padding:8px 18px;border-radius:12px;background:#fff;border:2px solid var(--line);min-width:150px}
.eko-score b{display:block;font-size:40px;line-height:1.1}.eko-score small{display:block;font-size:11px;color:var(--muted);max-width:170px}
.eko-score.ok{border-color:#16a34a}.eko-score.bad{border-color:#dc2626}
.eko-timeline{margin-top:10px}
.eko-tl{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.eko-tl .eko-ico{width:40px;height:40px;flex:0 0 auto}
.eko-tl-n{width:24px;height:24px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.eko-tl>div{flex:1 1 200px}
.eko-tl .eko-effs{margin:0}
/* списак сценарија */
.eko-list{display:grid;gap:14px}
.eko-card{display:grid;grid-template-columns:260px 1fr;gap:0;padding:0;overflow:hidden}
.eko-card-scene{min-height:150px}.eko-card-scene .eko-scene{height:100%}
.eko-card-body{padding:14px 16px}.eko-card-body h3{margin:0 0 4px}
@media (max-width:700px){.eko-card{grid-template-columns:1fr}.eko-card-scene{height:140px}}
/* уређивач */
.eko-ed .eko-f{margin:6px 0}.eko-ed .eko-f label{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.eko-ed input,.eko-ed textarea,.eko-ed select{width:100%}
.eko-ed textarea{font:inherit;line-height:1.4}
.eko-ed-h{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.eko-ed-item{margin-bottom:10px}
.eko-ed-sub{border-top:1px dashed var(--line);margin-top:10px;padding-top:8px}
.eko-ed-choice{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;background:#fafafa}
.eko-ed-choice.var{background:#fffbeb}
.eko-effin{display:flex;flex-direction:column;font-size:12px;gap:2px}.eko-ed .eko-effin input{width:90px}
.eko-thumb{width:120px;height:48px;border-radius:6px;overflow:hidden;flex:0 0 auto}.eko-thumb .eko-scene{height:100%}
.eko-thumb.ico{width:48px}.eko-thumb.ico .eko-ico{width:48px;height:48px}
/* статистика одлука */
.eko-stat-row{display:grid;grid-template-columns:1fr 200px 40px auto;gap:10px;align-items:center;padding:4px 0;font-size:14px}
.eko-stat-row.choice{grid-template-columns:44px 1fr 200px 40px 40px}
.eko-stat-row .eko-ico{width:40px;height:40px}
.eko-stat-bar{height:12px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.eko-stat-bar div{height:100%;background:var(--brand);border-radius:999px}
.eko-stat-bar.ok div{background:#16a34a}.eko-stat-bar.bad div{background:#dc2626}
/* цео екран (пројектор) */
body.present .eko{border-radius:0;max-width:1500px;margin:0 auto}
body.present .eko-text{font-size:clamp(16px,2.2vh,24px)}
body.present .eko-choice-txt{font-size:clamp(15px,2vh,22px)}
body.present .eko-banner{height:clamp(160px,34vh,440px)}
body.present .eko-banner.big{height:clamp(180px,40vh,520px)}
body.present .eko-result-text,body.present .eko-why{font-size:clamp(15px,2vh,22px)}
body.present .eko-bar-lbl{font-size:clamp(14px,1.8vh,20px)}
@media (max-width:640px){.eko-final{grid-template-columns:1fr}.eko-score{min-width:0}.eko-score small{max-width:none}.eko-bars{grid-template-columns:auto 1fr 60px}.eko-bar-lbl{font-size:13px}.eko-stat-row{grid-template-columns:1fr 100px 40px auto}.eko-stat-row.choice{grid-template-columns:36px 1fr 80px 30px 34px}.eko-body{padding:12px}}
.eko-goal{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:#f1f5f9;border:1px solid var(--line);font-size:14px}
.eko-goal.ok{background:#fefce8;border-color:#fde68a}
.eko-goal b.ok{color:#15803d}.eko-goal b.bad{color:#b91c1c}
.eko.eko-t-vatra{--ek1:#1c1917;--ek2:#7f1d1d;--ekac:#fb923c}
.eko.eko-t-pescara{--ek1:#a16207;--ek2:#3f6212;--ekac:#fde68a}
.eko.eko-t-voda{--ek1:#0c4a6e;--ek2:#065f46;--ekac:#7dd3fc}
/* Телефон усправно: назив параметра у свој ред, трака преко целе ширине (иначе је трака била ~60 px) */
@media (max-width:480px){
  .eko-bars{grid-template-columns:1fr 56px;gap:2px 8px}
  .eko-bar-lbl{grid-column:1/-1;margin-top:4px;font-size:13px}
  .eko-bar-track{height:14px}
  .eko-bar-val b{font-size:16px}
}