/* ============================================================
   AZEROTH FOREVER · vizuál inspirovaný herním UI World of Warcraft
   ============================================================ */
:root{
  --gold:#ffd100; --gold-2:#f8b700; --bronze:#7b5a1e; --bronze-d:#3a2a0c; --ink:#0b0805;
  --stone-1:#1d150b; --stone-2:#120c06; --parch-1:#e3cd97; --parch-2:#c9a768; --parch-ink:#3b2610;
  --blood:#8a1c0e; --text:#e9dcc0; --muted:#a9977a;
  --acc:#2a62b8; --acc-2:#6fa6ff; --acc-glow:rgba(70,130,255,.35);
  --q-poor:#9d9d9d; --q-common:#ffffff; --q-uncommon:#1eff00; --q-rare:#0070dd; --q-epic:#a335ee; --q-legendary:#ff8000;
}
body[data-faction="A"]{ --acc:#1f56b3; --acc-2:#7db0ff; --acc-glow:rgba(70,130,255,.38); }
body[data-faction="H"]{ --acc:#9c1c12; --acc-2:#ff6a4d; --acc-glow:rgba(255,70,40,.36); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; color:var(--text); background:var(--ink);
  font-family:"EB Garamond","Palatino Linotype",Georgia,serif; font-size:19px; line-height:1.5; min-height:100vh; overflow-x:hidden; }
body::before{ content:""; position:fixed; inset:0; z-index:-2;
  background: radial-gradient(1100px 700px at 50% -10%, var(--acc-glow), transparent 65%),
              radial-gradient(900px 600px at 100% 100%, rgba(255,160,40,.10), transparent 60%),
              linear-gradient(#0d0906,#070503); }
h1,h2,h3,h4,.cinzel{font-family:"Cinzel","Trajan Pro",Georgia,serif; letter-spacing:.04em}
a{color:var(--gold); text-decoration:none} a:hover{text-decoration:underline}
img{display:block}
button{font:inherit; color:inherit}

/* ---------- HLAVIČKA ---------- */
.topbar{ position:sticky; top:0; z-index:50;
  background:linear-gradient(#2a1d0d,#150e06 70%,#0d0804); border-bottom:2px solid #000;
  box-shadow:0 1px 0 var(--bronze), 0 6px 22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,140,.18); }
.topbar::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background:linear-gradient(90deg,transparent,var(--gold-2),transparent); opacity:.55}
.topbar-in{max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:8px 18px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto; cursor:pointer}
.brand img{height:44px; width:auto}
.brand b{display:block; font:700 20px/1 "Cinzel Decorative","Cinzel",serif; color:var(--gold); letter-spacing:.12em; text-shadow:0 0 12px rgba(255,190,40,.4), 0 2px 0 #000}
.brand small{display:block; font:600 11px/1.4 "Cinzel",serif; color:var(--muted); letter-spacing:.34em; text-transform:uppercase}
.nav{display:flex; gap:6px; flex-wrap:wrap}
.nav a{ display:flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; color:#d8c79e; text-decoration:none;
  font:600 13px "Cinzel",serif; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(#2d2110,#1a1208); border:1px solid #000; border-radius:4px;
  box-shadow:inset 0 0 0 1px #5d4417, inset 0 1px 0 rgba(255,220,140,.2); transition:.15s; }
.nav a img{width:26px;height:26px;border-radius:3px;box-shadow:0 0 0 1px #000, 0 0 0 2px var(--bronze)}
.nav a:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--gold-2), 0 0 14px rgba(255,190,40,.3)}
.nav a.on{color:var(--gold); background:linear-gradient(#4a3512,#2a1d0a); box-shadow:inset 0 0 0 1px var(--gold-2), 0 0 16px var(--acc-glow)}
main{max-width:1240px; margin:0 auto; padding:30px 18px 90px}

/* ---------- PANELY ---------- */
.panel{ position:relative; background:linear-gradient(180deg,rgba(29,21,11,.96),rgba(18,12,6,.97));
  border:2px solid #000; border-radius:6px; padding:24px 26px;
  box-shadow: inset 0 0 0 2px var(--bronze), inset 0 0 0 4px #1a1206, inset 0 0 60px rgba(0,0,0,.65), 0 10px 30px rgba(0,0,0,.6); }
.panel::before,.panel::after{ content:""; position:absolute; width:22px; height:22px; pointer-events:none; border:3px solid var(--gold-2); filter:drop-shadow(0 0 4px rgba(255,190,40,.5)); }
.panel::before{top:-4px; left:-4px; border-right:0; border-bottom:0; border-radius:6px 0 0 0}
.panel::after{bottom:-4px; right:-4px; border-left:0; border-top:0; border-radius:0 0 6px 0}
.panel h2{margin:0 0 14px; font-size:28px; color:var(--gold); text-shadow:0 2px 0 #000, 0 0 18px rgba(255,190,40,.25)}
.sub{color:var(--muted); font-style:italic; margin:0 0 16px}
.divider{height:18px; margin:6px auto 22px; max-width:520px;
  background:center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 18'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23ffb400' stop-opacity='0'/><stop offset='.5' stop-color='%23ffd100'/><stop offset='1' stop-color='%23ffb400' stop-opacity='0'/></linearGradient></defs><rect x='0' y='8' width='520' height='2' fill='url(%23g)'/><path d='M260 1 L270 9 L260 17 L250 9Z' fill='%23ffd100' stroke='%23000' stroke-width='1'/></svg>")}

/* ---------- TLAČÍTKA ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  padding:12px 30px; font:700 15px "Cinzel",serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  background:linear-gradient(#8b2a14,#4a0f06 55%,#2c0803); border:2px solid #000; border-radius:5px;
  box-shadow: inset 0 0 0 2px #b8862b, inset 0 2px 0 rgba(255,230,160,.35), 0 4px 0 #000, 0 8px 18px rgba(0,0,0,.6);
  text-shadow:0 2px 0 #000; transition:.12s; text-decoration:none; }
.btn:hover{filter:brightness(1.25); text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(3px)}
.btn[disabled]{filter:grayscale(1) brightness(.55); cursor:not-allowed; transform:none}
.btn.ghost{background:linear-gradient(#2b2012,#17100a); color:#d8c79e}

/* ---------- HERO (reálný artwork) ---------- */
.hero{position:relative; margin:-30px -18px 0; padding:70px 18px 50px; text-align:center; overflow:hidden; border-bottom:2px solid #000;
  background:linear-gradient(rgba(7,5,3,.25),rgba(7,5,3,.55) 60%,#0b0805), var(--hero-img) center 20%/cover no-repeat, #0b0805;
  box-shadow:inset 0 -80px 80px -40px #0b0805}
.hero .logo{width:min(560px,86vw); margin:0 auto 10px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.9))}
.hero .eyebrow{font:600 13px "Cinzel",serif; letter-spacing:.5em; color:#e3d3a8; text-transform:uppercase; text-shadow:0 2px 6px #000}
.hero h1{ margin:10px 0 6px; font:900 clamp(34px,6vw,70px)/1.05 "Cinzel Decorative","Cinzel",serif; letter-spacing:.05em;
  background:linear-gradient(#fff3b0 8%,#ffd100 40%,#b86a00 62%,#ffcf3a 88%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 0 #000) drop-shadow(0 0 26px rgba(255,170,30,.38)); }
.hero p.lead{max-width:760px; margin:6px auto 0; font-size:21px; color:#efe3c4; text-shadow:0 2px 8px #000}
.hero .ver{display:inline-block; margin-top:14px; padding:3px 14px; border:1px solid var(--bronze); border-radius:30px; background:rgba(0,0,0,.55); font:600 12px "Cinzel",serif; letter-spacing:.2em; color:var(--gold-2); text-transform:uppercase}

.factions{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:880px; margin:30px auto 10px}
.banner{ position:relative; cursor:pointer; padding:22px 18px 26px; text-align:center; border:2px solid #000; border-radius:6px 6px 40px 40px/6px 6px 54px 54px;
  background:linear-gradient(#222,#0a0a0a); box-shadow: inset 0 0 0 2px #555, 0 10px 28px rgba(0,0,0,.7); transition:.2s; overflow:hidden; }
.banner img{width:110px;height:110px;margin:0 auto 6px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.8))}
.banner h3{margin:6px 0 2px; font-size:26px; text-shadow:0 2px 0 #000}
.banner small{display:block; color:#d1c4a6; font-style:italic}
.banner.A{--bn-glow:rgba(80,140,255,.7); background:radial-gradient(circle at 50% 0,#2f63c9,#10234f 62%,#071022)}
.banner.A h3{color:#cfe1ff}
.banner.H{--bn-glow:rgba(255,70,40,.7); background:radial-gradient(circle at 50% 0,#b02a1a,#4d0e08 62%,#1b0503)}
.banner.H h3{color:#ffd3c8}
.banner:hover{transform:translateY(-4px); box-shadow: inset 0 0 0 2px var(--gold-2), 0 16px 36px rgba(0,0,0,.8), 0 0 36px var(--bn-glow)}
.banner.sel{box-shadow: inset 0 0 0 3px var(--gold), 0 0 44px var(--bn-glow)}
.banner.dim{filter:grayscale(.85) brightness(.55)}

.step-title{display:flex; align-items:center; gap:14px; margin:30px 0 14px}
.step-title .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 18px "Cinzel";color:#000;background:radial-gradient(#ffe27a,#c58a12);box-shadow:0 0 0 2px #000,0 0 14px rgba(255,190,40,.5)}
.step-title h2{margin:0; font-size:24px}
.slots{display:flex; flex-wrap:wrap; gap:14px}
.slot{ position:relative; width:112px; padding:10px 6px 9px; text-align:center; cursor:pointer;
  background:linear-gradient(#1f160b,#0f0a05); border:2px solid #000; border-radius:6px; box-shadow: inset 0 0 0 2px #4b3913; transition:.15s; }
.slot .ico{width:64px;height:64px;margin:0 auto 6px;border-radius:5px;box-shadow:0 0 0 2px #000, 0 0 0 4px var(--bronze), inset 0 0 8px #000; position:relative; overflow:hidden}
.slot .ico img{width:100%;height:100%}
.slot .ico::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -14px 14px -10px rgba(0,0,0,.6)}
.slot b{display:block; font:600 14px/1.15 "Cinzel",serif; letter-spacing:.04em}
.slot small{display:block; font-size:12px; color:var(--muted); line-height:1.2; margin-top:2px}
.slot:hover{transform:translateY(-3px); box-shadow: inset 0 0 0 2px var(--gold-2), 0 0 18px rgba(255,190,40,.35)}
.slot.sel{box-shadow: inset 0 0 0 2px var(--gold), 0 0 22px var(--acc-glow), 0 0 0 2px var(--gold); background:linear-gradient(#3a2a10,#1a1208)}
.slot.sel .ico{box-shadow:0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 16px rgba(255,209,0,.6)}
.slot.off{opacity:.28; filter:grayscale(1); pointer-events:none}
.slot .new{position:absolute; top:-9px; right:-6px; font:700 10px "Cinzel"; letter-spacing:.1em; padding:2px 7px; color:#000; background:linear-gradient(#ffe27a,#d89a14); border:1px solid #000; border-radius:3px}
.pick-summary{margin-top:30px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; justify-content:center}
.charcard{display:flex; align-items:center; gap:16px; padding:12px 22px; background:rgba(0,0,0,.55); border:2px solid #000; box-shadow:inset 0 0 2px 2px var(--bronze); border-radius:6px}
.charcard .ico{width:56px;height:56px;border-radius:5px;box-shadow:0 0 0 2px #000,0 0 0 4px var(--bronze)}
.charcard strong{font:700 22px "Cinzel"; display:block; text-shadow:0 2px 0 #000}
.charcard span{color:var(--muted); font-size:15px}

/* ---------- TOOLTIP ---------- */
.tt{ background:linear-gradient(rgba(10,12,26,.97),rgba(4,5,12,.97)); border:2px solid #3a3d52; border-radius:6px;
  box-shadow: inset 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.7); padding:14px 16px; font-size:17px; }
.tt h4{margin:0 0 4px; font-size:19px; letter-spacing:.03em}
.q-poor{color:var(--q-poor)} .q-common{color:var(--q-common)} .q-uncommon{color:var(--q-uncommon)} .q-rare{color:#4aa3ff} .q-epic{color:#c25cff} .q-legendary{color:var(--q-legendary)}
.tt.q-poor{border-color:#5a5a5a} .tt.q-common{border-color:#8d8d8d} .tt.q-uncommon{border-color:#1b8a0c} .tt.q-rare{border-color:#0b4f96} .tt.q-epic{border-color:#6a2394} .tt.q-legendary{border-color:#b35a00}
.tt .body{color:#d6cfae}

/* ---------- XP LIŠTA ---------- */
.xpbar{ position:relative; height:26px; background:#050308; border:2px solid #000; border-radius:4px;
  box-shadow:inset 0 0 0 1px #5d4417, inset 0 4px 8px #000, 0 2px 0 var(--bronze); overflow:hidden; }
.xpbar .rest{position:absolute;inset:0 auto 0 0; background:linear-gradient(#4a8bff,#1d57c9 60%,#12358a); opacity:.9}
.xpbar .fill{position:absolute;inset:0 auto 0 0; background:linear-gradient(#c36bff,#8a2be2 55%,#5a1a99); box-shadow:0 0 14px rgba(170,70,255,.7)}
.xpbar .ticks{position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.65) calc(10% - 1px) 10%)}
.xpbar .lab{position:absolute; inset:0; display:grid; place-items:center; font:700 13px "Cinzel"; letter-spacing:.14em; color:#fff; text-shadow:0 1px 0 #000, 0 0 6px #000}
.lvlrange{width:100%; margin:12px 0 0; accent-color:var(--gold-2); height:6px}

/* ---------- ROUTE / QUEST LOG ---------- */
.route-head{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
.route-head .who{display:flex; align-items:center; gap:16px}
.route-head .who img{width:70px;height:70px;border-radius:6px;box-shadow:0 0 0 2px #000,0 0 0 5px var(--bronze),0 0 20px var(--acc-glow)}
.route-head .who h2{margin:0; font-size:32px}
.route-head .who small{color:var(--muted); font-size:16px}
.route-ctrl{flex:1 1 380px; min-width:300px}
.quick{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:22px 0}
.quick .tt{display:flex; gap:12px; align-items:flex-start}
.quick .tt img{width:44px;height:44px;border-radius:4px;box-shadow:0 0 0 2px #000,0 0 0 3px #7a7a7a;flex:none}
.timeline{position:relative; margin-top:26px; padding-left:46px}
.timeline::before{content:""; position:absolute; left:19px; top:6px; bottom:6px; width:4px; border-radius:3px; background:linear-gradient(var(--gold-2),var(--bronze) 50%,var(--gold-2)); box-shadow:0 0 12px rgba(255,190,40,.35)}
.stage{position:relative; margin:0 0 26px}
.stage .node{position:absolute; left:-46px; top:14px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  font:700 15px "Cinzel"; color:#1a1004; background:radial-gradient(#ffe688,#c58a12); border:2px solid #000; box-shadow:0 0 0 3px var(--bronze), 0 0 14px rgba(255,190,40,.4)}
.stage.cur .node{animation:pulse 1.6s infinite; box-shadow:0 0 0 3px var(--gold), 0 0 28px rgba(255,209,0,.9)}
.stage.past{opacity:.6}
.stage.past .node{background:radial-gradient(#9fe890,#2d8a1e)}
@keyframes pulse{50%{transform:scale(1.14)}}
.quest{ position:relative; border:2px solid #000; border-radius:4px; color:var(--parch-ink); overflow:hidden;
  background: var(--parch-img, none) center/cover, radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.35), transparent 55%), linear-gradient(var(--parch-1),var(--parch-2));
  background-blend-mode:multiply,normal,normal;
  box-shadow: inset 0 0 0 2px #8a6a30, inset 0 0 40px rgba(110,60,10,.45), 0 8px 22px rgba(0,0,0,.6); }
.stage.cur .quest{box-shadow: inset 0 0 0 2px var(--gold-2), inset 0 0 40px rgba(110,60,10,.45), 0 0 34px rgba(255,190,40,.35), 0 8px 22px rgba(0,0,0,.6)}
.quest-art{height:150px; background:var(--zone-img) center/cover no-repeat; border-bottom:2px solid #000; position:relative}
.quest-art::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(40,22,6,.85)); }
.quest-art .ttl{position:absolute; left:20px; bottom:10px; z-index:1; font:700 12px "Cinzel"; letter-spacing:.3em; color:#f2deaa; text-transform:uppercase; text-shadow:0 2px 4px #000}
.quest-h{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:14px 20px 8px; cursor:pointer}
.quest-h h3{margin:0; font-size:26px; color:#5a0f05; text-shadow:0 1px 0 rgba(255,240,200,.6)}
.quest-h .hub{flex-basis:100%; margin-top:-6px; font-style:italic; color:#5d4521}
.lv{font:700 13px "Cinzel"; padding:3px 12px; border-radius:20px; color:var(--gold); background:linear-gradient(#3b2a0d,#1b1206); border:1px solid #000; box-shadow:inset 0 0 0 1px #b8862b; letter-spacing:.1em}
.badge{font:700 11px "Cinzel"; letter-spacing:.14em; padding:3px 9px; border-radius:3px; border:1px solid #000; text-transform:uppercase}
.badge.new{background:linear-gradient(#ffe27a,#d89a14); color:#2a1700}
.quest .chev{margin-left:auto; font-size:22px; transition:.2s; color:#5a0f05}
.stage.collapsed .chev{transform:rotate(-90deg)}
.stage.collapsed .quest-b, .stage.collapsed .quest-art{display:none}
.quest-b{position:relative; padding:4px 20px 18px; font-size:19px}
.quest-b p.desc{margin:0 0 10px; font-style:italic; color:#4b361b}
.qsteps{list-style:none; margin:0; padding:0}
.qsteps li{display:flex; gap:12px; align-items:flex-start; padding:7px 8px; margin:2px 0; border-radius:3px; cursor:pointer; transition:.12s}
.qsteps li:hover{background:rgba(255,255,255,.28)}
.mk{flex:none; width:26px; height:26px; display:grid; place-items:center; font:900 24px/1 "Cinzel",serif; border-radius:50%}
.mk.bang,.mk.ques{color:#ffd100; text-shadow:-1px -1px 0 #6a3d00, 1px -1px 0 #6a3d00, -1px 1px 0 #6a3d00, 1px 1px 0 #6a3d00, 0 0 8px rgba(255,200,40,.9)}
.mk.ico2{width:26px;height:26px;border-radius:4px;box-shadow:0 0 0 1px #000, 0 0 0 2px #7b5a1e;overflow:hidden}
.mk.ico2 img{width:100%;height:100%}
.qsteps li.done{opacity:.5} .qsteps li.done span.t{text-decoration:line-through}
.qsteps li.done .mk{filter:grayscale(1)}
.qsteps li .chk{flex:none; margin-left:auto; width:22px; height:22px; border:2px solid #5d4417; border-radius:3px; background:rgba(0,0,0,.12); display:grid; place-items:center; font:700 15px/1 sans-serif; color:#14631c}
.qsteps li.done .chk::after{content:"✔"}
.tipline{margin-top:14px; display:flex; gap:12px; align-items:center; padding:10px 14px; border-radius:4px; background:rgba(20,12,4,.88); color:#e5d7b4; border:1px solid #000; box-shadow:inset 0 0 0 1px #6a4d18; font-size:17px}
.tipline b{color:var(--gold); font-family:"Cinzel"; letter-spacing:.08em}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; font:600 13px "Cinzel"; letter-spacing:.04em; color:#e7d9b7; background:linear-gradient(#2a1c0c,#150e06); border:1px solid #000; border-radius:4px; box-shadow:inset 0 0 0 1px #6d4f18}
.chip img{width:24px;height:24px;border-radius:3px;box-shadow:0 0 0 1px #000}
.chip.fit{box-shadow:inset 0 0 0 1px var(--gold-2), 0 0 12px rgba(255,190,40,.35); color:#fff}
.qprog{margin-left:auto; font:600 12px "Cinzel"; color:#5a0f05; letter-spacing:.1em}

/* ---------- MAPA ---------- */
.mapwrap{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start}
.map-frame{position:relative; border:3px solid #000; border-radius:6px; box-shadow: inset 0 0 0 3px var(--bronze), 0 14px 40px rgba(0,0,0,.7); overflow:hidden; background:#1a1209}
.map-frame svg{display:block; width:100%; height:auto}
.map-tabs{margin-bottom:12px}
.pin{cursor:pointer}
.pin circle.base{fill:#1a1004; stroke:#ffd100; stroke-width:2.2}
.pin text{font:700 11px "Cinzel",serif; fill:#ffe9a8; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.pin:hover circle.base,.pin.sel circle.base{fill:#8a1c0e; stroke:#fff}
.pin.cur circle.halo{animation:halo 1.4s infinite}
@keyframes halo{0%{r:12;opacity:.9}100%{r:26;opacity:0}}
.pin.past circle.base{fill:#1e5a14; stroke:#9fe890}
.zlabel{font:600 11px "Cinzel",serif; fill:#fff4cf; text-anchor:middle; paint-order:stroke; stroke:rgba(10,6,2,.9); stroke-width:3.5px; pointer-events:none; letter-spacing:.04em}
.route-line{fill:none; stroke:#ffd100; stroke-width:3; stroke-dasharray:8 6; stroke-linecap:round; animation:march 1.2s linear infinite; filter:drop-shadow(0 0 3px #000)}
@keyframes march{to{stroke-dashoffset:-28}}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:15px; color:var(--muted)}

/* ---------- DUNGEONY ---------- */
.dfilters{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; margin-bottom:18px}
.seg{display:inline-flex; border:2px solid #000; border-radius:5px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--bronze)}
.seg button{padding:8px 16px; background:linear-gradient(#2b2012,#17100a); border:0; border-right:1px solid #000; cursor:pointer; font:600 13px "Cinzel"; letter-spacing:.08em; color:#cdbb92}
.seg button:last-child{border:0}
.seg button.on{background:linear-gradient(#5a4015,#2e200a); color:var(--gold)}
.dgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
.dcard{position:relative; display:flex; gap:14px; align-items:center; padding:12px 14px}
.dcard .ico{width:52px;height:52px;border-radius:5px;box-shadow:0 0 0 2px #000,0 0 0 3px #8d8d8d;flex:none}
.dcard h4{margin:0; font-size:18px}
.dcard .meta{font-size:15px; color:#b9b09a}
.dcard .lvbar{position:relative; height:8px; margin-top:7px; background:#000; border-radius:4px; box-shadow:inset 0 0 0 1px #3d3d3d}
.dcard .lvbar i{position:absolute; top:0; bottom:0; border-radius:4px; background:linear-gradient(#ffe27a,#d89a14)}
.dcard.fit{box-shadow:inset 0 0 0 1px #000, 0 0 0 2px var(--gold-2), 0 0 24px rgba(255,190,40,.4)}
.dcard.dim{opacity:.4}
.dcard .badge{position:absolute; top:-9px; right:10px}

/* ---------- TŘÍDA ---------- */
.class-hero{display:flex; flex-wrap:wrap; gap:26px; align-items:center}
.class-hero img.big{width:128px;height:128px;border-radius:8px;box-shadow:0 0 0 3px #000,0 0 0 6px var(--cc),0 0 40px var(--cc)}
.class-hero h2{font-size:48px; margin:0; color:var(--cc); text-shadow:0 3px 0 #000, 0 0 24px var(--cc)}
.stars i{display:inline-block;width:14px;height:14px;margin-right:4px;background:var(--gold);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.stars i.off{background:#4a3a1a}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:22px; margin-top:22px}
.ul{list-style:none; padding:0; margin:0}
.ul li{position:relative; padding:9px 0 9px 36px; border-bottom:1px solid rgba(255,220,140,.08)}
.ul li::before{content:""; position:absolute; left:6px; top:14px; width:14px; height:14px; background:var(--cc,var(--gold)); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.spikes{display:flex; flex-direction:column; gap:12px}
.spike{display:flex; gap:14px; align-items:center}
.spike .lvl{flex:none; width:58px;height:58px;display:grid;place-items:center;border-radius:50%;font:700 22px "Cinzel";color:#1a1004;background:radial-gradient(#ffe688,#c58a12);box-shadow:0 0 0 2px #000,0 0 0 4px var(--bronze)}
.class-pick{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px}
.class-pick .slot{width:98px}

/* ---------- TIPY ---------- */
.tgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:18px}
.tgrid .tt{display:flex; gap:14px}
.tgrid .tt>img{width:58px;height:58px;border-radius:5px;flex:none;box-shadow:0 0 0 2px #000,0 0 0 4px currentColor}
.tgrid .src{margin-top:8px; font-size:14px; color:#7d7a6c}
.legend-q{display:flex; flex-wrap:wrap; gap:16px; margin:0 0 20px; font:600 14px "Cinzel"; letter-spacing:.05em}
.srcs a{display:block; padding:10px 0; border-bottom:1px solid rgba(255,220,140,.1)}
.warn{margin-top:20px; padding:14px 18px; border:1px solid #6a4d18; border-left:5px solid var(--gold-2); background:rgba(0,0,0,.4); border-radius:4px}
/* piny na reálné mapě */
.pinbtn{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:0; padding:0; cursor:pointer; z-index:2}
.pinbtn i{font:700 13px "Cinzel",serif; font-style:normal; width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  color:#ffe9a8; background:radial-gradient(#3b2a0d,#150e04); border:2px solid #ffd100; box-shadow:0 0 0 2px #000, 0 4px 10px rgba(0,0,0,.8); transition:.15s}
.pinbtn em{font:600 11px "Cinzel",serif; font-style:normal; color:#fff4cf; white-space:nowrap; text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000; opacity:.0; transition:.15s}
.pinbtn:hover i,.pinbtn.sel i{background:radial-gradient(#b02a1a,#4d0e08); border-color:#fff; transform:scale(1.15)}
.pinbtn:hover em,.pinbtn.sel em,.pinbtn.cur em{opacity:1}
.pinbtn.past i{background:radial-gradient(#2d8a1e,#0f3a08); border-color:#9fe890}
.pinbtn.cur i{box-shadow:0 0 0 2px #000, 0 0 0 5px rgba(255,209,0,.55), 0 0 22px #ffd100; animation:pulse 1.6s infinite}
.zoom{cursor:zoom-in}
.portrait{object-fit:cover}
.sidecard .quest-art{height:140px}
#lightbox{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.88); display:grid; place-items:center; cursor:zoom-out; padding:20px}
#lightbox[hidden]{display:none}
#lightbox img{max-width:min(1400px,96vw); max-height:92vh; border:3px solid #000; box-shadow:0 0 0 3px var(--bronze), 0 20px 60px #000; border-radius:4px}
#lightbox span{position:fixed; top:16px; right:24px; font:700 30px "Cinzel"; color:var(--gold)}
/* ================= v2: průvodce, deník, animace ================= */
.view.enter{animation:vin .38s cubic-bezier(.2,.8,.2,1)}
@keyframes vin{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.hero.compact{padding:26px 18px 30px; margin-bottom:0; background-position:center 20%}
.hero.compact .logo{width:min(250px,60vw); margin-bottom:4px}
.hero.compact h1{font-size:clamp(26px,4.2vw,46px); margin:2px 0 8px}

/* kroky průvodce */
.wizsteps{display:flex; align-items:center; justify-content:center; gap:0; margin:26px 0 10px; flex-wrap:wrap}
.wizsteps u{width:46px; height:2px; background:linear-gradient(90deg,var(--bronze),#3a2a0c); margin:0 4px}
.wizsteps button{display:flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; cursor:pointer; background:linear-gradient(#2b2012,#17100a);
  border:2px solid #000; border-radius:30px; box-shadow:inset 0 0 0 1px #4b3913; color:#8d7d5c; font:600 13px "Cinzel"; letter-spacing:.1em; text-transform:uppercase}
.wizsteps button i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px "Cinzel";font-style:normal;background:#2a2012;color:#8d7d5c;box-shadow:0 0 0 1px #000}
.wizsteps button.on{color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-2), 0 0 18px var(--acc-glow)}
.wizsteps button.on i,.wizsteps button.done i{background:radial-gradient(#ffe27a,#c58a12); color:#1a1004}
.wizsteps button.done:not(.on){color:#cdbb92}
.wizsteps button[disabled]{opacity:.45; cursor:default}
.wizbody{min-height:420px; padding:10px 0 30px; animation:vin .4s}
.wiz-h{font-size:clamp(26px,3.4vw,38px); text-align:center; margin:18px 0 26px; color:var(--gold); text-shadow:0 3px 0 #000, 0 0 22px rgba(255,190,40,.3)}
.banner p{margin:10px 0 0; font-size:16px; color:#e8dcc0}
.banner{padding:34px 20px 40px}
.banner img{width:150px;height:170px}

/* 3D karty ras a tříd */
.cards{display:flex; flex-wrap:wrap; gap:22px; justify-content:center; perspective:900px}
.card3d{position:relative; width:176px; padding:18px 12px 16px; text-align:center; cursor:pointer; border:2px solid #000; border-radius:8px;
  background:linear-gradient(160deg,#2a1d0d,#120c06 70%); box-shadow:inset 0 0 0 2px #5d4417, 0 12px 26px rgba(0,0,0,.6);
  transition:transform .25s, box-shadow .25s; transform-style:preserve-3d}
.card3d:hover{transform:translateY(-8px) rotateX(4deg) scale(1.04); box-shadow:inset 0 0 0 2px var(--gold-2), 0 18px 34px rgba(0,0,0,.75), 0 0 28px var(--acc-glow)}
.card3d.cls:hover{box-shadow:inset 0 0 0 2px var(--cc), 0 18px 34px rgba(0,0,0,.75), 0 0 30px var(--cc)}
.card3d .portrait{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #000,0 0 0 5px var(--bronze),0 0 24px rgba(0,0,0,.8)}
.card3d.cls .portrait{border-radius:10px; box-shadow:0 0 0 3px #000,0 0 0 5px var(--cc),0 0 22px var(--cc)}
.card3d .portrait img{width:100%;height:100%}
.card3d b{display:block; font:700 18px "Cinzel"; letter-spacing:.05em}
.card3d small{display:block; margin-top:3px; color:var(--muted); font-size:14px; line-height:1.2}
.card3d em{display:block; margin-top:8px; font-style:italic; font-size:14px; color:#cdbb92; line-height:1.25}
.card3d.sel{box-shadow:inset 0 0 0 2px var(--gold), 0 0 30px var(--acc-glow)}
.card3d.off{opacity:.25; filter:grayscale(1); pointer-events:none}
.card3d .new{position:absolute; top:-10px; right:-8px; font:700 10px "Cinzel"; letter-spacing:.1em; padding:3px 8px; color:#000; background:linear-gradient(#ffe27a,#d89a14); border:1px solid #000; border-radius:3px; z-index:2}

/* finální obrazovka postavy */
.final{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0; border:2px solid #000; border-radius:8px; overflow:hidden; box-shadow:inset 0 0 0 2px var(--bronze), 0 16px 40px rgba(0,0,0,.7); background:#120c06}
.final-art{position:relative; min-height:420px; background:center/cover no-repeat}
.final-art::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 40%,#120c06), linear-gradient(transparent 50%,rgba(0,0,0,.7))}
.final-chars{position:absolute; left:50%; bottom:28px; transform:translateX(-50%); display:flex; gap:20px; z-index:1}
.final-chars img{width:110px;height:110px;border-radius:12px;box-shadow:0 0 0 3px #000,0 0 0 6px var(--gold-2),0 0 34px rgba(0,0,0,.9)}
.final-chars .p2{box-shadow:0 0 0 3px #000,0 0 0 6px var(--cc),0 0 34px var(--cc)}
.final-info{padding:34px 36px}
.final-info .eyebrow{font:600 12px "Cinzel"; letter-spacing:.4em; color:var(--muted); text-transform:uppercase}
.final-info h2{margin:6px 0 16px; font-size:clamp(30px,4vw,46px); text-shadow:0 3px 0 #000}
.stats{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.stats div{flex:1 1 120px; padding:10px 14px; background:rgba(0,0,0,.45); border:1px solid #000; box-shadow:inset 0 0 0 1px #5d4417; border-radius:5px}
.stats b{display:block; font:700 20px "Cinzel"; color:var(--gold)} .stats span{font-size:14px; color:var(--muted)}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px}

/* ====== DENÍK CESTY ====== */
.route-top{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; padding:16px 24px}
.route-top .who{display:flex; align-items:center; gap:16px}
.route-top .who .portrait{width:62px;height:62px;border-radius:8px;box-shadow:0 0 0 2px #000,0 0 0 4px var(--bronze),0 0 18px var(--acc-glow)}
.route-top .who h2{margin:0; font-size:26px} .route-top .who small{color:var(--muted)}
.route-top .route-ctrl{flex:1 1 380px; min-width:280px}
.book{display:grid; grid-template-columns:300px minmax(0,1fr); gap:22px; margin-top:22px; align-items:start}
.ladder{padding:16px 12px; max-height:calc(100vh - 230px); overflow-y:auto; position:sticky; top:84px}
.ladder h3{margin:0 8px 10px; color:var(--gold); font-size:18px}
.ladder::-webkit-scrollbar{width:8px} .ladder::-webkit-scrollbar-thumb{background:var(--bronze); border-radius:4px}
.lrow{display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; margin:3px 0; cursor:pointer; text-align:left; background:rgba(0,0,0,.28); border:1px solid transparent; border-radius:5px; color:#cdbb92; transition:.12s}
.lrow i{flex:none; width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font:700 13px "Cinzel";font-style:normal;color:#1a1004;background:radial-gradient(#ffe688,#c58a12);box-shadow:0 0 0 2px #000}
.lrow b{display:block; font:600 14px/1.15 "Cinzel"; color:#e9dcc0} .lrow small{color:var(--muted); font-size:13px}
.lrow:hover{background:rgba(255,209,0,.1); border-color:var(--bronze)}
.lrow.sel{background:linear-gradient(90deg,rgba(255,190,40,.22),rgba(255,190,40,.04)); border-color:var(--gold-2); box-shadow:0 0 14px rgba(255,190,40,.2)}
.lrow.cur i{animation:pulse 1.6s infinite; box-shadow:0 0 0 2px #000,0 0 14px var(--gold)}
.lrow.ok i{background:radial-gradient(#9fe890,#2d8a1e); color:#05200a}
.lrow.past:not(.ok){opacity:.6}

.detail{min-width:0}
.dart{position:relative; height:300px; border:2px solid #000; border-radius:6px 6px 0 0; background:center/cover no-repeat; box-shadow:inset 0 0 0 2px var(--bronze); cursor:zoom-in; overflow:hidden}
.dart-sh{position:absolute; inset:0; background:linear-gradient(transparent 25%, rgba(8,5,2,.92)), linear-gradient(90deg,rgba(8,5,2,.6),transparent 60%)}
.dart-txt{position:absolute; left:28px; right:28px; bottom:20px}
.dart-txt .eyebrow{font:600 12px "Cinzel"; letter-spacing:.34em; color:#f0dca4; text-transform:uppercase; text-shadow:0 2px 4px #000}
.dart-txt h2{margin:4px 0 8px; font-size:clamp(30px,4.4vw,52px); color:var(--gold); text-shadow:0 3px 0 #000, 0 0 26px rgba(255,190,40,.4)}
.dart-meta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; color:#efe3c4; font-style:italic; text-shadow:0 2px 4px #000}
.dart .hint{position:absolute; top:14px; right:16px; font:600 12px "Cinzel"; letter-spacing:.1em; padding:5px 12px; border-radius:20px; background:rgba(0,0,0,.6); color:#e7d9b7; opacity:0; transition:.2s}
.dart:hover .hint{opacity:1}
.dbody{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; padding:18px; background:linear-gradient(#171008,#0f0a05); border:2px solid #000; border-top:0; box-shadow:inset 0 0 0 2px var(--bronze)}
.dside{display:flex; flex-direction:column; gap:14px}
.dside .tt{padding:12px 14px}
.dl{display:flex; gap:10px; align-items:center; padding:7px 0; border-top:1px solid rgba(255,255,255,.07)}
.dl:first-of-type{border-top:0}
.dl img{width:34px;height:34px;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 2px #7a7a7a}
.dl b{display:block; font:600 15px "Cinzel"; color:#4aa3ff} .dl small{color:#a9a9a9; font-size:14px; line-height:1.2; display:block}
.navrow{display:flex; gap:14px; justify-content:space-between; align-items:center; padding:16px 18px; flex-wrap:wrap;
  background:linear-gradient(#1d150b,#120c06); border:2px solid #000; border-top:0; border-radius:0 0 6px 6px; box-shadow:inset 0 0 0 2px var(--bronze)}
.navrow .btn{padding:12px 22px}

.maphead{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.maphead h2{margin:0}
.class-pick .mini{width:54px;height:54px;padding:0;border:2px solid #000;border-radius:7px;background:#120c06;cursor:pointer;overflow:hidden;box-shadow:inset 0 0 0 2px #4b3913;transition:.15s}
.class-pick .mini img{width:100%;height:100%}
.class-pick .mini:hover{transform:translateY(-3px); box-shadow:0 0 0 2px var(--cc), 0 0 16px var(--cc)}
.class-pick .mini.sel{box-shadow:0 0 0 3px var(--cc), 0 0 22px var(--cc); transform:translateY(-3px)}
.cpane{animation:vin .3s; min-height:160px}

/* DING! – level up jako ve hře */
.ding{position:fixed; inset:0; z-index:200; pointer-events:none; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%, rgba(255,209,0,.28), transparent 55%); animation:dfade 2.2s ease-out forwards}
.ding-in{position:relative; text-align:center}
.ding .d1{font:900 clamp(70px,14vw,170px)/1 "Cinzel Decorative","Cinzel",serif; letter-spacing:.08em; background:linear-gradient(#fff6c0 8%,#ffd100 45%,#b86a00 70%,#ffd53a); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 40px rgba(255,190,40,.8)); animation:dpop 1.1s cubic-bezier(.2,1.6,.4,1)}
.ding .d2{font:700 clamp(24px,4vw,46px) "Cinzel"; color:#fff4cf; letter-spacing:.2em; text-shadow:0 3px 0 #000, 0 0 20px #ffd100; text-transform:uppercase}
.ding i{position:absolute; left:50%; top:40%; width:10px; height:10px; border-radius:50%; background:#ffd100; box-shadow:0 0 14px #ffb400; animation:dspark 1.3s ease-out forwards; animation-delay:var(--d); transform:rotate(var(--a)) translateX(0)}
@keyframes dfade{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes dpop{0%{transform:scale(.3); opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1); opacity:1}}
@keyframes dspark{to{transform:rotate(var(--a)) translateX(min(34vw,360px)); opacity:0}}

@media (max-width:980px){
  .book{grid-template-columns:1fr}
  .ladder{position:static; max-height:none; display:flex; gap:8px; overflow-x:auto; padding:12px}
  .ladder h3{display:none} .lrow{flex:none; width:auto; min-width:170px}
  .dbody{grid-template-columns:1fr} .final{grid-template-columns:1fr} .final-art{min-height:260px}
}
@media (max-width:640px){ .dart{height:220px} .card3d{width:150px} .wizsteps button span{display:none} }
/* ===== účet, přihlášení, postavy ===== */
.acct{display:flex; gap:8px; align-items:center}
.acct-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; cursor:pointer; text-decoration:none; font:700 12px "Cinzel"; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  background:linear-gradient(#8b2a14,#4a0f06 60%,#2c0803); border:1px solid #000; border-radius:4px; box-shadow:inset 0 0 0 1px #b8862b; white-space:nowrap}
.acct-btn.ghost{background:linear-gradient(#2b2012,#17100a); color:#cdbb92; box-shadow:inset 0 0 0 1px #5d4417}
.acct-btn:hover{filter:brightness(1.25); text-decoration:none}
.authbox{max-width:520px; margin:30px auto}
.authbox label{display:block; margin:14px 0 6px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#cdbb92}
.authbox input, .namebox input{width:100%; padding:12px 14px; font:500 19px "EB Garamond",serif; color:var(--text); background:#0a0704; border:2px solid #000; border-radius:5px; box-shadow:inset 0 0 0 1px #5d4417, inset 0 3px 8px #000; outline:none}
.authbox input:focus, .namebox input:focus{box-shadow:inset 0 0 0 2px var(--gold-2), 0 0 16px rgba(255,190,40,.3)}
.autherr{min-height:22px; margin-top:10px; color:#ff7a6a; font-size:16px}
.namebox{margin:6px 0 4px; max-width:380px}
.namebox label{display:block; margin-bottom:6px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#cdbb92}
.chargrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; margin-top:6px}
.charcard2{position:relative; display:flex; flex-direction:column; gap:12px; padding:18px; border:2px solid #000; border-radius:8px; text-align:left;
  background:linear-gradient(160deg,#2a1d0d,#120c06 70%); box-shadow:inset 0 0 0 2px #5d4417, 0 10px 24px rgba(0,0,0,.6); transition:.2s}
.charcard2:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 2px var(--cc,var(--gold-2)), 0 14px 30px rgba(0,0,0,.7), 0 0 24px var(--cc,transparent)}
.charcard2.act{box-shadow:inset 0 0 0 2px var(--gold), 0 0 26px var(--acc-glow)}
.cc-head{display:flex; align-items:center; gap:14px}
.cc-ports{display:flex; flex:none}
.cc-ports img{width:52px;height:52px;border-radius:8px;box-shadow:0 0 0 2px #000,0 0 0 3px var(--bronze); object-fit:cover}
.cc-ports img+img{margin-left:-14px; box-shadow:0 0 0 2px #000,0 0 0 3px var(--cc)}
.cc-head b{display:block; font:700 20px "Cinzel"; line-height:1.1} .cc-head small{color:var(--muted)}
.cc-head .del{margin-left:auto; width:30px;height:30px; cursor:pointer; border:1px solid #000; border-radius:5px; background:#1a1208; color:#9d7b6a; box-shadow:inset 0 0 0 1px #4b3913}
.cc-head .del:hover{color:#fff; background:#7a1a0c}
.cc-line{display:flex; justify-content:space-between; gap:10px; font-size:16px; color:#cdbb92}
.cc-prog{position:relative; height:22px; background:#050308; border:2px solid #000; border-radius:4px; box-shadow:inset 0 0 0 1px #4b3913; overflow:hidden}
.cc-prog i{position:absolute; inset:0 auto 0 0; background:linear-gradient(#5fe04a,#2d8a1e 60%,#1a5a10)}
.cc-prog span{position:absolute; inset:0; display:grid; place-items:center; font:600 12px "Cinzel"; letter-spacing:.08em; color:#fff; text-shadow:0 1px 0 #000}
.charcard2 .btn{padding:10px 18px; font-size:13px}
.charcard2.newc{align-items:center; justify-content:center; text-align:center; min-height:230px; cursor:pointer; border-style:dashed; border-color:#5d4417; background:rgba(0,0,0,.25); color:var(--gold)}
.charcard2.newc .plus{font:300 64px/1 "Cinzel"; color:var(--gold-2)}
.charcard2.newc small{color:var(--muted)}
/* ===== v3: vše na jednu obrazovku (bez scrollování) ===== */
main{max-width:1400px; padding:22px 20px 40px}
.topbar-in{max-width:1680px; padding:6px 24px; gap:14px}
.brand img{height:38px}
.brand b{font-size:17px} .brand small{font-size:10px; letter-spacing:.28em}
.nav{flex-wrap:nowrap; gap:5px}
.nav a{padding:5px 11px 5px 6px; font-size:12px; gap:7px}
.nav a img{width:22px; height:22px}
.acct-btn{padding:7px 14px}

.hero.compact{display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin:-22px -20px 0; padding:12px 20px; min-height:0}
.hero.compact .logo{width:auto; height:104px; margin:0}
.hero.compact h1{font-size:clamp(22px,2.7vw,40px); margin:0}
.hero.compact .ver{margin:0; font-size:11px}
.wizsteps{margin:14px 0 2px}
.wizbody{min-height:0; padding:0 0 10px}
.wiz-h{font-size:clamp(22px,2.4vw,32px); margin:12px 0 16px}
.factions{margin:0 auto; gap:20px}
.banner{padding:16px 16px 22px}
.banner img{width:100px; height:118px; margin-bottom:2px}
.banner h3{font-size:24px} .banner p{margin-top:6px}
.cards{gap:14px}
.card3d{width:150px; padding:14px 10px 12px}
.card3d .portrait{width:76px; height:76px; margin-bottom:8px}
.card3d.cls{width:122px; padding:12px 8px 10px}
.card3d.cls .portrait{width:64px; height:64px}
.card3d.cls b{font-size:15px} .card3d.cls small{font-size:12px} .card3d.cls em{font-size:12px; margin-top:5px}
.card3d b{font-size:16px} .card3d em{font-size:13px; margin-top:6px}
.final-art{min-height:330px}
.final-info{padding:22px 28px}
.final-info h2{margin:4px 0 10px}
.final-info p{margin:8px 0}

/* deník cesty: jedna zóna na výšku okna */
.route-top{padding:10px 20px}
.route-top .who .portrait{width:50px; height:50px}
.route-top .who h2{font-size:22px}
.book{margin-top:14px; gap:16px}
.ladder{max-height:calc(100vh - 190px); top:76px}
.dart{height:clamp(130px,22vh,210px)}
.dart-txt{bottom:12px}
.dart-txt h2{font-size:clamp(24px,3.2vw,40px); margin:2px 0 4px}
.dbody{padding:12px 14px; gap:14px}
.quest-b{padding:2px 16px 12px; font-size:18px}
.qsteps li{padding:5px 8px}
.navrow{padding:10px 14px}
.navrow .btn{padding:10px 20px}

/* mapa nesmí přerůst okno */
.map-frame{max-width:calc((100vh - 250px) * 1.5)}
.mapwrap{grid-template-columns:minmax(0,1fr) 330px}

@media (max-width:1180px){ .nav a span{display:none} .nav a{padding:5px} .brand small{display:none} }
@media (max-width:980px){ .nav{flex-wrap:wrap} .map-frame{max-width:none} }
footer{max-width:1240px; margin:0 auto; padding:0 18px 40px; text-align:center; color:#7d7360; font-size:14px}

@media (max-width:980px){ .mapwrap{grid-template-columns:1fr} .nav a span{display:none} .nav a{padding:6px} }
@media (max-width:640px){ .factions{grid-template-columns:1fr} .timeline{padding-left:36px} .stage .node{left:-38px;width:34px;height:34px;font-size:12px} .timeline::before{left:14px} body{font-size:18px} .brand small{display:none} .panel{padding:18px 16px} }