/* Web je vždy tmavý; vzhled určuje frakce (přepínač vlevo nahoře, site/theme.js).
   Aliance = noční modrá + stříbro, Horda = černý kov + krev a bronz.
   Principy zůstávají "uncommon" zelené v obou. Bez JavaScriptu se zobrazí Aliance. */
:root{
  --bg:#070d1c; --bg-2:#13234a;
  --panel:#0c1530; --panel-edge:#8a9bb8; --panel-inner:#1c2a50;
  --ink:#e6ebf5; --muted:#9fb0cc;
  --title:#5aa2ff; --accent:#c9d3e3;
  --hi:#e8f1ff; --mid:#5aa2ff; --lo:#1d4fa8;
  --red:#ff5a4a; --warn-bg:#05060d;
  --shadow:rgba(0,0,0,.6);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-faction="horde"]{
  --bg:#120808; --bg-2:#3a110c;
  --panel:#1a0e0c; --panel-edge:#8a5a3a; --panel-inner:#3a1e16;
  --ink:#f0e6e0; --muted:#c0a89c;
  --title:#ff5444; --accent:#d4975a;
  --hi:#ffd0c4; --mid:#e8382a; --lo:#7a1208;
  --red:#ff6a5a; --warn-bg:#070302;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); background:var(--bg)}
body{
  margin:0; color:var(--ink);
  background:radial-gradient(ellipse 120% 70% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed, var(--bg);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem; line-height:1.7;
}
.wrap{max-width:46rem; margin:0 auto; padding:3.5rem 1.1rem 4rem}

/* Hlavička */
header{text-align:center; margin-bottom:2.6rem}
.crest{font-size:2.8rem; line-height:1; display:block; margin-bottom:.8rem; filter:drop-shadow(0 3px 6px var(--shadow))}
h1{
  font-family:"Cinzel","Trajan Pro",Georgia,serif; font-weight:900;
  font-size:clamp(2.2rem,9vw,3.9rem); line-height:1.02; letter-spacing:.01em;
  margin:0;
  background:linear-gradient(180deg,var(--hi) 0%,var(--mid) 55%,var(--lo) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 var(--shadow)) drop-shadow(0 6px 14px var(--shadow));
}
.sub{
  font-family:"Cinzel",Georgia,serif; font-weight:700; color:var(--title);
  font-size:clamp(1.05rem,3.6vw,1.4rem); letter-spacing:.18em; margin:.5rem 0 0;
}
.game{color:var(--muted); font-style:italic; margin:.3rem 0 1.8rem}
.creed p{margin:0}
.creed{
  font-style:italic; font-size:1.15rem; line-height:1.65; margin:0 auto; max-width:35rem;
}
.divider{display:block; margin:2rem auto 0; width:min(18rem,70%); height:12px}

/* Panely článků */
article{
  position:relative; background:var(--panel);
  border:1px solid var(--panel-edge); border-radius:5px;
  box-shadow:inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--panel-inner), 0 8px 24px var(--shadow);
  padding:1.7rem 1.6rem 1.2rem; margin:0 0 1.4rem;
}
.head{margin:0 0 .9rem}
/* Číslo článku jako vodoznak vpravo nahoře, text leží nad ním. */
article{overflow:hidden}
article > :not(.head), .head h2{position:relative; z-index:1}
.num{
  position:absolute; top:.3rem; right:.9rem; z-index:0;
  font-family:"Cinzel",Georgia,serif; font-weight:900; line-height:1;
  font-size:clamp(4.5rem,16vw,7rem); letter-spacing:-.02em;
  background:linear-gradient(200deg, var(--title) 0%, transparent 75%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.4; pointer-events:none; user-select:none;
}
/* Odkazy: bez podtržení, při najetí zesvětlí a rozzáří se barvou frakce. */
a{color:inherit; text-decoration:none; transition:color .2s, text-shadow .2s}
a:hover{color:var(--hi); text-shadow:0 0 .6em var(--mid)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){a{transition:none}}
h2{font-family:"Cinzel",Georgia,serif; font-weight:700; font-size:1.4rem; line-height:1.3; margin:0; color:var(--title)}
h3{font-family:"Cinzel",Georgia,serif; font-weight:700; font-size:1.05rem; color:var(--title); margin:1.4rem 0 .4rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem; padding-left:1.15rem}
ol{padding-left:1.4rem}
li{margin-bottom:.65rem}
li::marker{color:var(--accent)}
strong{font-weight:600}

/* Principy ve stylu zeleného efektu předmětu */
/* Princip článku: barva akcentu frakce s linkou v barvě nadpisu. */
.formula{
  font-family:"Cinzel",Georgia,serif; font-weight:700; color:var(--accent);
  font-size:clamp(1.05rem,3.8vw,1.25rem); margin:0 0 1.1rem; line-height:1.35;
  border-left:3px solid var(--title); padding:.2rem 0 .2rem .85rem;
}
.formula p{margin:0}

.note{
  border-top:1px solid var(--panel-inner); padding-top:.9rem; margin:1rem 0 .4rem;
  font-style:italic;
}
.note p{margin:0}

.memories ul{list-style:none; padding:0}
.memories li{border-left:2px solid var(--accent); padding:.15rem 0 .15rem .9rem}

/* Varování: tmavý box s červeným rámečkem a vykřičníkem jako vodoznakem vpravo nahoře. */
.offtopic-title{
  color:var(--red); font-family:"Cinzel",Georgia,serif; font-weight:700; letter-spacing:.03em;
  margin:0 0 .55rem;
}
.offtopic{
  position:relative; overflow:hidden;
  background:var(--warn-bg); border:1px solid var(--red); border-radius:4px;
  padding:.9rem 1.2rem .6rem;
}
.offtopic::after{
  content:"!"; position:absolute; top:.1rem; right:1rem;
  font:900 clamp(4.5rem,16vw,6.5rem)/1 "Cinzel",Georgia,serif;
  background:linear-gradient(200deg, var(--red) 0%, transparent 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.45; pointer-events:none;
}
.offtopic ul{position:relative; z-index:1}
.offtopic + p{color:var(--muted); font-style:italic; font-size:.95rem; margin:.6rem 0 1rem}
.offtopic ul{list-style:none; padding:0; margin:0}
.offtopic li{margin-bottom:.35rem}

footer p{margin:0}
footer{text-align:center; color:var(--muted); font-style:italic; padding-top:1.6rem}

@media (max-width:520px){
  article{padding:1.4rem 1.15rem 1rem}
}

/* Přepínač frakcí */
.faction-switch{
  position:fixed; top:calc(.8rem + env(safe-area-inset-top,0px)); left:calc(.8rem + env(safe-area-inset-left,0px)); z-index:10;
  display:inline-flex; padding:.25rem; gap:.2rem;
  border-radius:999px; background:var(--panel);
}
.faction-switch[hidden]{display:none}
.faction-switch button{
  font:600 .8rem/1 "Cinzel",Georgia,serif; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .75rem; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--muted); transition:background-color .2s, color .2s;
}
.faction-switch button:hover{color:var(--ink)}
.faction-switch button[aria-pressed="true"]{background:var(--panel-inner); color:var(--title); box-shadow:inset 0 0 0 1px var(--title)}
.faction-switch button[aria-pressed="false"] img{filter:saturate(.55) brightness(1.15); opacity:.8; transition:filter .2s, opacity .2s}
.faction-switch button[aria-pressed="false"]:hover img{filter:none; opacity:1}
.faction-switch button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.faction-switch img.emoji{vertical-align:0}
@media (prefers-reduced-motion:reduce){.faction-switch button{transition:none}}

/* Emoji jako obrázky (Noto 3D): stejné na všech systémech */
img.emoji{height:1.15em; width:1.15em; margin:0 .06em; vertical-align:-.22em; display:inline-block}
.crest img.emoji{height:1em; width:1em; vertical-align:0}
.credits{text-align:center; color:var(--muted); font-size:.8rem; margin:1.2rem 0 0}
.credits a{color:var(--accent)}
.faction-switch img.faction-logo{height:1.45em; margin:-.15em 0; width:auto; display:block}

/* Erb frakce v hlavičce */
/* Pevná výška rámečku: přepnutí frakce nesmí posunout stránku. */
.crest:has(.crest-img){height:clamp(6.5rem,22vw,9rem)}
.crest img.crest-img{height:100%; width:auto; display:inline-block}
/* Erb Hordy je užší a vyšší, opticky ho dorovnáme (transform layout nemění). */
.crest img.crest-horde{transform:scale(1.14); transform-origin:50% 55%}
:root:not([data-faction="horde"]) .crest-horde,
:root[data-faction="horde"] .crest-alliance{display:none}