/* =========================================================
   AstraMentalica · Tunel — dizajni in postavitve (2026-10-15)
   Dizajn: html[data-dizajn] = vesoljski (privzeto) | starinski | stekleni | minimalisticni | kovinski | leseni
   Postavitev: html[data-postavitev] = klasicna (privzeto) | osrednja | slikovna
   ========================================================= */
:root{--pas:#0a0c1499;--vizual-dno:#0a0e18;--na-gumbu:#0a0c14;--pisava:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--naslovna:var(--pisava);--ozadje-slika:radial-gradient(circle at 15% 10%,#1a2547 0%,transparent 45%),radial-gradient(circle at 85% 90%,#241a3d 0%,transparent 50%)}
body{font-family:var(--pisava);transition:background .4s,color .4s}
h1{font-family:var(--naslovna)}
body::before{background:var(--ozadje-slika),var(--bg)!important}
.top,.controls,.bottom{background:var(--pas)!important}
.visual{background:linear-gradient(180deg,var(--panel) 0%,var(--vizual-dno) 100%)!important}
.btn.primary{color:var(--na-gumbu)!important}
.btn.primary:hover{filter:brightness(1.1);background:var(--accent)!important;border-color:var(--accent)!important}

/* ── starinski (svetel pergament) ── */
html[data-dizajn="starinski"]{--bg:#eadcbc;--bg-2:#e2d1a9;--panel:#f6ecd4;--line:#c9b083;--line-soft:#d8c49c;--ink:#3a2a16;--muted:#6d5638;--dim:#8f7a58;--accent:#8b3a2b;--accent-2:#a8743a;--gold:#9b6b2d;--good:#4f7a3a;
  --pas:#efe2c4e6;--vizual-dno:#e6d3a8;--na-gumbu:#f8eedb;--pisava:'Crimson Pro',Georgia,'Times New Roman',serif;--naslovna:'Cormorant Garamond',Georgia,serif;
  --ozadje-slika:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.55),transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(120,80,30,.18),transparent 55%)}
html[data-dizajn="starinski"] h1{font-weight:600;letter-spacing:0}

/* ── stekleni ── */
html[data-dizajn="stekleni"]{--bg:#16203a;--panel:rgba(255,255,255,.08);--line:rgba(255,255,255,.22);--line-soft:rgba(255,255,255,.12);--ink:#f4f7ff;--muted:#c3cbe0;--dim:#94a0bc;--accent:#8fd3ff;--accent-2:#d0a8ff;--gold:#ffe29a;
  --pas:rgba(255,255,255,.07);--vizual-dno:rgba(255,255,255,.02);--na-gumbu:#0e1630;
  --ozadje-slika:radial-gradient(circle at 10% 15%,#3b6cff88 0%,transparent 40%),radial-gradient(circle at 90% 20%,#b04bff77 0%,transparent 42%),radial-gradient(circle at 50% 100%,#00c2b366 0%,transparent 45%)}
html[data-dizajn="stekleni"] .visual,html[data-dizajn="stekleni"] .question textarea,html[data-dizajn="stekleni"] .panel{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(255,255,255,.25)}
html[data-dizajn="stekleni"] .copy{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:24px 26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ── minimalistični ── */
html[data-dizajn="minimalisticni"]{--bg:#ffffff;--bg-2:#f6f6f6;--panel:#f7f7f7;--line:#e2e2e2;--line-soft:#ededed;--ink:#111111;--muted:#555555;--dim:#888888;--accent:#111111;--accent-2:#777777;--gold:#111111;--good:#2b7a4b;
  --pas:#ffffffee;--vizual-dno:#f0f0f0;--na-gumbu:#ffffff;--ozadje-slika:none}
html[data-dizajn="minimalisticni"] .visual{box-shadow:none!important;border-radius:4px}
html[data-dizajn="minimalisticni"] .btn{border-radius:4px}
html[data-dizajn="minimalisticni"] h1{font-weight:500;letter-spacing:-.02em}

/* ── kovinski ── */
html[data-dizajn="kovinski"]{--bg:#1d2026;--panel:#2b3038;--line:#4a525e;--line-soft:#363c46;--ink:#eef2f6;--muted:#aab4c0;--dim:#7d8794;--accent:#c9d3df;--accent-2:#8fa6bd;--gold:#e0bd62;
  --pas:linear-gradient(180deg,#3a4049f2,#262a31f2);--vizual-dno:#1a1d22;--na-gumbu:#16191e;
  --ozadje-slika:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(160deg,#3a4049 0%,#1d2026 55%,#2b3038 100%)}
html[data-dizajn="kovinski"] .visual{border:1px solid #6c7682!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 50px #0008!important}
html[data-dizajn="kovinski"] .btn.primary{background:linear-gradient(180deg,#e9eef4,#a9b4c1)!important;border-color:#c9d3df!important}
html[data-dizajn="kovinski"] h1{letter-spacing:.02em;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.2rem)}

/* ── leseni ── */
html[data-dizajn="leseni"]{--bg:#3a2316;--panel:#4b2f1e;--line:#7a5235;--line-soft:#5c3b27;--ink:#f6e8d2;--muted:#d6bc98;--dim:#a88a68;--accent:#e0a35e;--accent-2:#c27c47;--gold:#f0c36d;
  --pas:#2c1a10ee;--vizual-dno:#2c1a10;--na-gumbu:#2c1a10;--pisava:Georgia,'Times New Roman',serif;--naslovna:Georgia,serif;
  --ozadje-slika:repeating-linear-gradient(95deg,rgba(0,0,0,.10) 0 2px,transparent 2px 9px,rgba(255,220,170,.035) 9px 11px,transparent 11px 23px),linear-gradient(180deg,#4a2c1a,#2e1b10)}
html[data-dizajn="leseni"] .visual{border:3px solid #7a5235!important;border-radius:10px}

/* ── postavitve ── */
html[data-postavitev="osrednja"] .screen{grid-template-columns:minmax(0,760px);justify-content:center;text-align:center}
html[data-postavitev="osrednja"] .side{order:-1}
html[data-postavitev="osrednja"] .visual{width:min(60vw,220px)}
html[data-postavitev="osrednja"] .detail{border-left:0;padding-left:0}
html[data-postavitev="osrednja"] .caption{display:none}
html[data-postavitev="slikovna"] .screen{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
html[data-postavitev="slikovna"] .side{order:-1}
html[data-postavitev="slikovna"] .visual{width:min(100%,520px)}

/* ── izbirnik ── */
.izbira-mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:10px 0 18px}
.izbira-mreza button{border:1px solid var(--line);border-radius:14px;padding:12px 10px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;font-size:.86rem;text-align:left}
.izbira-mreza button.izbrano{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.izbira-mreza .vzorec{display:block;height:34px;border-radius:8px;margin-bottom:8px;border:1px solid rgba(0,0,0,.15)}
@media (max-width:760px){html[data-postavitev] .screen{grid-template-columns:1fr}}

/* ── ozki in nizki zasloni: vsebina koraka se lahko pomika (prej je bilo besedilo odrezano) ── */
@media (max-width:760px),(max-height:720px){
  main#app{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .screen{min-height:auto;align-items:start}
  .copy{max-height:none;overflow:visible}
  .visual{width:min(64vw,260px)}
}

/* ── nižja noga na telefonu (Damir 2026-10-15: »noga zasede pol ekrana«) ── */
@media (max-width:760px),(max-height:720px){
  .bottom{padding:6px 12px 8px}
  .bottom .note{display:none}
  .links{flex-wrap:nowrap;overflow-x:auto;gap:4px 14px;padding-bottom:2px;scrollbar-width:none}
  .links::-webkit-scrollbar{display:none}
  .links a,.foot-btn{white-space:nowrap;font-size:.66rem}
  .links a[data-soon]::after{display:none}
  .controls{padding:8px 12px;gap:6px}
  .controls .btn{padding:8px 13px;font-size:.82rem}
  .top{padding:8px 12px}
}

/* ── TELEFON (2026-10-15, Damir: »tunel ni več za telefonski prikaz«): stran se normalno pomika,
      slika manjša, gumbi prilepljeni na dno, noga v eni vrstici ── */
@media (max-width:760px){
  html,body{height:auto!important;overflow:auto!important}
  body{display:block!important;min-height:100dvh}
  .top{position:sticky;top:0;z-index:20}
  main#app{overflow:visible!important;min-height:0;padding:14px 16px 10px!important}
  .screen{display:flex!important;flex-direction:column;gap:14px;text-align:left}
  .side{order:-1;gap:6px}
  .visual{width:min(46vw,190px)!important;border-radius:16px}
  .caption{display:none}
  .copy{overflow:visible!important;max-height:none!important;padding-right:0}
  h1{font-size:1.5rem}
  .question textarea{min-height:44px}
  .controls{position:sticky;bottom:0;z-index:20}
  .controls .spacer{display:none}
  .controls #next{flex:1 1 100%;order:-1}
  .progress{position:sticky;bottom:0;z-index:21}
}