/* =========================================================
   ELDORIA – štýly
   Farby a fonty upravíš v :root nižšie
   ========================================================= */
:root {
  --bg: #0d0a0b;
  --bg-2: #141011;
  --surface: #1b1516;
  --surface-2: #231b1c;
  --line: rgba(212, 162, 76, .16);
  --line-strong: rgba(212, 162, 76, .38);
  --text: #efe6d8;
  --muted: #a99c8c;
  --gold: #d4a24c;
  --gold-2: #f1c87a;
  --ember: #e0663a;
  --crimson: #a8262c;
  --green: #4ccf7a;
  --radius: 14px;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
  --font-head: "Cinzel", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 1em; }
code { background: var(--surface-2); padding: .1em .4em; border-radius: 6px; font-size: .9em; color: var(--gold-2); }
::selection { background: var(--gold); color: #1a1208; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---------- Tlačidlá ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 700; font-size: .92rem; letter-spacing: .02em; white-space: nowrap;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, #b07f2f);
  color: #1d1408; box-shadow: 0 8px 24px -8px rgba(212, 162, 76, .6), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--gold:hover { box-shadow: 0 12px 32px -8px rgba(241, 200, 122, .75), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--ghost { border-color: var(--line-strong); background: rgba(13, 10, 11, .35); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.btn--discord { background: #5865f2; color: #fff; box-shadow: 0 10px 30px -10px rgba(88,101,242,.7); }
.btn--discord svg { width: 22px; height: 22px; }

/* ---------- Navigácia ---------- */
.nav {
  position: relative; z-index: 50; height: var(--nav-h);
  background: rgba(13, 10, 11, .96);
  transition: background .3s, border-color .3s, height .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { border-color: var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); }
.logo__mark { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(212,162,76,.45)); }
.logo__text { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff1cf, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav__menu { display: flex; gap: 4px; margin-left: auto; }
.nav__menu a { position: relative; padding: 8px 12px; font-weight: 600; font-size: .93rem; color: var(--muted); transition: color .2s; white-space: nowrap; }
.nav__menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform .25s; }
.nav__menu a:hover, .nav__menu a.is-active { color: var(--text); }
.nav__menu a.is-active::after, .nav__menu a:hover::after { transform: scaleX(1); }
.nav__menu-actions { display: none; }
.nav__actions { display: flex; gap: 10px; align-items: center; }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; }
.burger span { width: 20px; height: 2px; background: var(--text); transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero slider ---------- */
.hero { position: relative; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 620px; overflow: hidden;
  background: radial-gradient(ellipse 70% 40% at 70% 0%, rgba(224,102,58,.22), transparent 70%), var(--bg); }
.slider, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 1.2s; display: flex; align-items: center; }
.slide.is-active { opacity: 1; visibility: visible; }
/* obrázok začína pod menu, aby postava nebola schovaná za navigáciou */
.slide__bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
  transform: scale(1.12); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px); }
.slide__bg { background-position: var(--pos, center top); }
.slide.is-active .slide__bg { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,10,11,.92) 0%, rgba(13,10,11,.65) 38%, rgba(13,10,11,.05) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(13,10,11,0) 30%),
    linear-gradient(180deg, rgba(13,10,11,.35) 0%, rgba(13,10,11,0) 14%);
}
.slide__content { position: relative; z-index: 2; }
.slide__content > * { max-width: 600px; }
.slide__title { font-size: clamp(2.3rem, 5.5vw, 4.4rem); font-weight: 900; margin: 18px 0 20px; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.slide__title em { font-style: normal; display: block;
  background: linear-gradient(180deg, #ffe2a6, var(--gold) 60%, var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slide__content p { font-size: clamp(1rem, 1.4vw, 1.15rem); color: #d9cdbd; max-width: 520px; }
.slide__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.slide.is-active .slide__content > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.slide.is-active .slide__content > *:nth-child(2) { animation-delay: .12s; }
.slide.is-active .slide__content > *:nth-child(3) { animation-delay: .24s; }
.slide.is-active .slide__content > *:nth-child(4) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.slider__controls { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 5; display: flex; justify-content: space-between; align-items: center; }
.slider__dots { display: flex; gap: 10px; }
.slider__dots button { width: 34px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: rgba(239,230,216,.25); overflow: hidden; position: relative; }
.slider__dots button::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.slider__dots button.is-active { width: 56px; }
.slider__dots button.is-active::after { animation: progress var(--dur, 7s) linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
.slider__arrows { display: flex; gap: 10px; }
.slider__arrows button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(13,10,11,.4);
  backdrop-filter: blur(6px); font-size: 1.1rem; transition: border-color .2s, color .2s, background .2s; }
.slider__arrows button:hover { border-color: var(--gold); color: var(--gold-2); background: rgba(13,10,11,.7); }

.scroll-hint { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 5; width: 26px; height: 42px;
  border: 2px solid rgba(239,230,216,.4); border-radius: 14px; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: scroll 1.8s infinite; }
@keyframes scroll { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Štatistiky ---------- */
.stats { position: relative; z-index: 3; margin-top: -1px; }
.stats__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: var(--shadow); }
.stats__grid--online-hidden { grid-template-columns: 1.4fr repeat(3, 1fr); }
.stat { padding: 26px 24px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat strong { display: block; font-family: var(--font-head); font-size: 1.7rem; color: var(--gold-2); line-height: 1.2; }
.stat small { color: var(--muted); font-size: .85rem; }
.stat--status { display: flex; align-items: center; gap: 16px; }
.stat--status strong { font-size: 1.15rem; color: var(--text); }
.pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 12px var(--green); }
.pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--green); animation: ping 2s infinite; }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Sekcie ---------- */
.section { padding: clamp(72px, 10vw, 120px) 0; position: relative; }
.section--alt { background:
  radial-gradient(900px 400px at 85% 0%, rgba(168,38,44,.12), transparent 70%),
  radial-gradient(700px 400px at 0% 100%, rgba(212,162,76,.07), transparent 70%),
  var(--bg-2);
  border-block: 1px solid var(--line); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section__head .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.section__head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 12px; }
.section__head p { color: var(--muted); }

/* ---------- Novinky ---------- */
.news { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(3, auto); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.card--featured { grid-row: 1 / 4; }
.card__img { aspect-ratio: 16 / 9; background-size: cover; position: relative; flex: 1 1 auto; min-height: 220px; }
.card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--surface), transparent 60%); }
.card__body { padding: 24px 26px 26px; }
.card { position: relative; }
.card--featured .card__img + .card__body { padding: 0 30px 30px; margin-top: -30px; position: relative; }
.card--featured .card__body { padding: 30px; }
.card--featured h3 { font-size: 1.6rem; }
.card h3 { font-size: 1.15rem; transition: color .2s; }
.card:hover h3 { color: var(--gold-2); }
.card p { color: var(--muted); font-size: .95rem; }
.card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: .82rem; color: var(--muted); }
.tag { padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tag--event { background: rgba(224,102,58,.15); color: #ff9a72; }
.tag--update { background: rgba(212,162,76,.15); color: var(--gold-2); }
.tag--info { background: rgba(120,160,255,.13); color: #9db8ff; }
.link { font-weight: 700; font-size: .9rem; color: var(--gold); }
.link:hover { color: var(--gold-2); }

.countdown { margin-top: 40px; padding: 30px 34px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: linear-gradient(110deg, rgba(168,38,44,.22), rgba(212,162,76,.08) 60%, transparent), var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.countdown h3 { font-size: 1.45rem; margin: 8px 0 0; }
.countdown__timer { display: flex; gap: 12px; }
.countdown__timer div { min-width: 74px; text-align: center; padding: 12px 8px; border-radius: 10px; background: rgba(13,10,11,.6); border: 1px solid var(--line); }
.countdown__timer b { display: block; font-family: var(--font-head); font-size: 1.8rem; color: var(--gold-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__timer small { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- O serveri ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(27,21,22,.6);
  transition: border-color .3s, transform .3s, background .3s; }
.feature:hover { border-color: var(--line-strong); transform: translateY(-4px); background: var(--surface); }
.feature__icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(140deg, rgba(212,162,76,.22), rgba(168,38,44,.18)); border: 1px solid var(--line-strong); }
.feature__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 1.15rem; }
.feature p { color: var(--muted); font-size: .95rem; margin: 0; }

.info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.info__table, .steps { padding: 32px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.info h3 { font-size: 1.3rem; margin-bottom: 20px; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
dl div:last-child { border-bottom: 0; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 700; color: var(--gold-2); text-align: right; }
.steps ol { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 0 0 22px 60px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: #1d1408;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 46px; bottom: 4px; width: 2px; background: var(--line-strong); }
.steps li b { display: block; }
.steps li span { color: var(--muted); font-size: .93rem; }

/* ---------- Rebríčky ---------- */
.tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 28px; padding: 6px; width: fit-content; margin-inline: auto;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.tabs button { border: 0; background: transparent; padding: 10px 26px; border-radius: 8px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; }
.tabs button.is-active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1d1408; }
.ranking { display: none; max-width: 900px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.ranking.is-active { display: block; animation: rise .5s both; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 20px; text-align: left; }
th { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); font-weight: 700; }
.ranking tbody tr { border-top: 1px solid var(--line); transition: background .2s; }
.ranking tbody tr:hover { background: rgba(212,162,76,.05); }
.ranking td:first-child { width: 64px; }
.ranking td:last-child, .ranking th:last-child { text-align: right; font-weight: 700; color: var(--gold-2); }
.rank { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-weight: 800; font-size: .85rem; background: var(--surface-2); }
tr:nth-child(1) .rank { background: linear-gradient(180deg, #ffe08a, #c99a2e); color: #2a1d05; }
tr:nth-child(2) .rank { background: linear-gradient(180deg, #e9eef3, #9aa5b1); color: #1d2329; }
tr:nth-child(3) .rank { background: linear-gradient(180deg, #f0b98a, #a5622e); color: #2a1406; }
.player { font-weight: 700; }
.realm { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.realm::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* ---------- Stiahnuť ---------- */
.download { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.download h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 12px; }
.download__main p { color: var(--muted); max-width: 520px; }
.download__buttons { display: grid; gap: 12px; margin-top: 28px; max-width: 460px; }
.dl { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface); transition: border-color .2s, transform .2s, background .2s; }
.dl:first-child { background: linear-gradient(110deg, rgba(212,162,76,.18), var(--surface)); }
.dl:hover { border-color: var(--gold); transform: translateX(4px); }
.dl svg { width: 28px; height: 28px; fill: none; stroke: var(--gold-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dl b { display: block; }
.dl small { color: var(--muted); }
.download__req { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.download__req h3 { font-size: 1.2rem; margin-bottom: 16px; }
.download__req table { font-size: .92rem; }
.download__req th, .download__req td { padding: 10px 12px; }
.download__req th { background: transparent; border-bottom: 1px solid var(--line-strong); }
.download__req td:first-child { color: var(--gold); font-weight: 700; }
.download__req tbody tr { border-top: 1px solid var(--line); }

/* ---------- CTA ---------- */
.cta { padding: 80px 0; background:
  linear-gradient(90deg, rgba(13,10,11,.95), rgba(13,10,11,.7)), var(--cta-bg, none) center 35% / cover; border-bottom: 1px solid var(--line); }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.cta p { color: var(--muted); margin: 0; }

/* ---------- Pätička ---------- */
.footer { padding: 70px 0 0; background: #090708; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer__about { color: var(--muted); margin-top: 16px; max-width: 300px; font-size: .93rem; }
.footer h4 { font-size: .95rem; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer__grid a:not(.logo) { display: block; color: var(--muted); padding: 4px 0; font-size: .93rem; transition: color .2s; }
.footer__grid a:not(.logo):hover { color: var(--text); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.footer__bottom a:hover { color: var(--text); }

/* ---------- Modály ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.modal.is-open { visibility: visible; opacity: 1; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(5,3,4,.75); backdrop-filter: blur(6px); }
.modal__box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 36px 32px 30px; border-radius: 18px;
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 30px 80px rgba(0,0,0,.7);
  transform: translateY(20px) scale(.97); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.modal.is-open .modal__box { transform: none; }
.modal__box h3 { font-size: 1.6rem; text-align: center; margin-bottom: 24px; }
.modal__close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 1.6rem; color: var(--muted); }
.modal__close:hover { color: var(--text); background: rgba(255,255,255,.05); }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.form input:not([type="checkbox"]) { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(13,10,11,.6);
  color: var(--text); font: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,162,76,.18); }
.form .check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.form .check input { accent-color: var(--gold); width: 16px; height: 16px; }
.form a { color: var(--gold); }
.form__alt { text-align: center; color: var(--muted); font-size: .88rem; margin: 0; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  padding: 14px 22px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--gold); box-shadow: var(--shadow); transition: opacity .3s, transform .3s; max-width: calc(100% - 32px); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* Odhalenie pri scrollovaní */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* ---------- Doplnky pre PHP verziu ---------- */
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card .link { position: relative; }
.center { text-align: center; margin-top: 32px; }
.muted { color: var(--muted); }
.news--single { grid-template-columns: 1fr; }
.news--single .card--featured { grid-row: auto; }

/* Equipment previews use the actual transparent native game icons. */
.stats__grid--facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.item-gallery { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 24px 20px; background: radial-gradient(ellipse at center, #30221b, #151113 75%); border-bottom: 1px solid var(--line); }
.item-gallery__item { margin: 0; min-width: 0; text-align: center; }
.item-gallery__slot { display: grid; place-items: center; width: 64px; height: 104px; border: 1px solid #85633b66; border-radius: 6px; background: #0d0a0b80; box-shadow: inset 0 0 20px #0006; }
.item-gallery__slot img { display: block; width: auto; height: auto; max-width: 48px; max-height: 88px; object-fit: contain; image-rendering: pixelated; }
.news.news--balanced { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-template-rows: none; }
.news--balanced .card__body { display: flex; flex-direction: column; flex: 1; }
.news--balanced .card__body .link { margin-top: auto; padding-top: 24px; }
.news--balanced .card__img { flex: none; min-height: 180px; }
.news-article { max-width: 920px; margin: 0 auto; }
.news-article > .card__meta { margin-top: 28px; }
.news-article h1 { line-height: 1.25; margin: 16px 0 24px; }
.news-article__lead { font-size: 1.15rem; line-height: 1.8; color: var(--muted); margin-bottom: 32px; }
.news-article__body { max-width: 760px; line-height: 1.9; margin: 32px 0; }
.news-article__body p { margin-bottom: 24px; }
.news-article__image { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.item-gallery--detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 20px; gap: 24px 16px; }
.item-gallery--detail .item-gallery__slot { margin: 0 auto 14px; width: 80px; height: 112px; }
.item-gallery figcaption { font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
.item-gallery figcaption small { display: block; color: var(--muted); margin-top: 5px; font-size: .75rem; }
.news-list .item-gallery, .news--balanced .item-gallery { gap: 6px; padding-inline: 10px; }
.news-list .item-gallery__slot, .news--balanced .item-gallery__slot { width: 48px; }
.news-list .item-gallery__slot img, .news--balanced .item-gallery__slot img { max-width: 40px; }
@media (max-width: 600px) {
  .stats__grid--facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats__grid--facts .stat:first-child { grid-column: 1 / -1; }
  .item-gallery--detail { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px 12px; }
}
.realm-sub { display: block; font-weight: 500; font-size: .8rem; margin-top: 2px; }
.stat--status.is-offline .pulse { background: var(--crimson); box-shadow: 0 0 12px var(--crimson); }
.stat--status.is-offline .pulse::after { border-color: var(--crimson); }
.inline-form { display: inline; margin: 0; }
.btn--icon { width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-strong); background: rgba(13,10,11,.35); border-radius: 10px; }
.btn--icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--icon:hover { border-color: var(--ember); color: #ff9a72; }
.user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.nav.is-solid { background: rgba(13, 10, 11, .92); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.page { padding: 56px 0 90px; min-height: 70vh;
  background: radial-gradient(900px 380px at 80% 0%, rgba(168,38,44,.13), transparent 70%), var(--bg); }
.page__narrow { max-width: 560px; }
.page__head { margin-bottom: 36px; }
.page__title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 12px 0 16px; }
.panel { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.panel h3 { font-size: 1.2rem; margin-bottom: 4px; }
.panel .form { gap: 14px; }
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: .93rem; }
.alert--error { background: rgba(168,38,44,.18); border: 1px solid rgba(224,86,58,.4); color: #ffb39a; }
.alert--success { background: rgba(76,207,122,.12); border: 1px solid rgba(76,207,122,.35); color: #9be8b5; }

.account { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.account__info { text-align: center; position: sticky; top: 20px; }
.account__info dl { text-align: left; margin: 20px 0; }
.account__info dl div { flex-direction: column; gap: 2px; }
.account__info dd { text-align: left; }
.account__info dd { font-size: .88rem; word-break: break-all; }
.account__forms { display: grid; gap: 20px; }
.account__forms .btn { justify-self: start; }
.avatar { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: #1d1408;
  background: linear-gradient(160deg, var(--gold-2), var(--gold) 60%, var(--ember)); box-shadow: 0 10px 30px -10px rgba(212,162,76,.7); }

.article { max-width: 780px; margin: 0 auto; }
.article__meta { margin-top: 28px; }
.article__img { aspect-ratio: 16 / 7; background-size: cover; background-position: center 20%; border-radius: var(--radius); border: 1px solid var(--line); margin: 10px 0 30px; }
.article__body { font-size: 1.05rem; color: #ddd2c3; }
.article__body a { color: var(--gold); text-decoration: underline; }
.article__lead { font-size: 1.2rem; color: var(--text); }
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card__img--sm { flex: none; min-height: 0; }

/* =========================================================
   RESPONZIVITA
   ========================================================= */
@media (max-width: 1080px) {
  .nav__actions { display: none; }
  .burger { display: flex; }
  .nav__menu {
    position: absolute; top: 100%; right: 0; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
    width: min(340px, 100%); margin: 0; padding: 16px 24px 24px; overflow-y: auto;
    flex-direction: column; gap: 2px; background: #0f0b0c; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s, visibility .35s;
  }
  .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav.menu-open { background: rgba(13,10,11,.96); border-color: var(--line); }
  .nav__menu a { padding: 14px 6px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__menu a::after { display: none; }
  .nav__menu-actions { display: grid; gap: 10px; margin-top: 24px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat--status { grid-column: 1 / -1; border-top: 0; }
  .stats__grid--online-hidden .stat:last-child { grid-column: 1 / -1; border-right: 0; }
  .stat:nth-child(even) { border-right: 1px solid var(--line); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .download { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 820px) {
  .account { grid-template-columns: 1fr; }
  .account__info { position: static; }
  .news { grid-template-columns: 1fr; }
  .card--featured { grid-row: auto; }
  .info { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .slide::after { background:
    linear-gradient(0deg, var(--bg) 0%, rgba(13,10,11,.75) 45%, rgba(13,10,11,.35) 100%); }
  .slide__content { align-self: flex-end; padding-bottom: 130px; }
  .scroll-hint { display: none; }
  .countdown { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .panel { padding: 24px 20px; }
  :root { --nav-h: 66px; }
  .logo__text { font-size: 1.25rem; }
  .logo__mark { width: 28px; height: 28px; }
  .slide__cta { flex-direction: column; }
  .slide__cta .btn { width: 100%; }
  .slider__controls { bottom: 32px; }
  .slider__arrows button { width: 40px; height: 40px; }
  .stat { padding: 20px 18px; }
  .stat strong { font-size: 1.35rem; }
  .features { grid-template-columns: 1fr; }
  .feature { padding: 24px; }
  .info__table, .steps, .download__req { padding: 24px 20px; }
  .card--featured .card__body, .card__body { padding-left: 20px; padding-right: 20px; }
  .countdown { padding: 24px 20px; }
  .countdown__timer { width: 100%; gap: 8px; }
  .countdown__timer div { flex: 1; min-width: 0; }
  .countdown__timer b { font-size: 1.4rem; }
  th, td { padding: 12px 12px; }
  .hide-sm { display: none; }
  .footer__grid { gap: 28px; }
  .modal__box { padding: 32px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Typy oznámení */
.toast--error { border-color: var(--ember); color: #ffb39a; }
.toast--success { border-color: var(--green); color: #b6f0c9; }

/* ---------- Prepínač jazykov ---------- */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: rgba(13,10,11,.4); color: var(--text); font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.lang__btn svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.7; }
.lang__btn::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.lang.is-open .lang__btn::after { transform: rotate(-135deg) translateY(-1px); }
.lang__btn:hover, .lang.is-open .lang__btn { border-color: var(--gold); }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 220px; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px;
  border-radius: 12px; border: 1px solid var(--line-strong); background: #17120f; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #e8cf8f; font-weight: 600; font-size: .92rem; }
.lang__menu a:hover { background: rgba(212,162,76,.1); }
.lang__menu a.is-active { background: rgba(212,162,76,.16); color: var(--gold-2); }
.lang__menu a.is-active::after { content: "✓"; margin-left: auto; color: var(--gold-2); }
.lang__code { min-width: 26px; padding: 1px 0; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--muted); font-size: .68rem; font-weight: 800; text-align: center; letter-spacing: .04em; }
.lang--mobile { display: none; }
/* písma bez gréčtiny/azbuky → nadpisy v serife */
.lang-el .slide__title, .lang-ru .slide__title, .lang-el h1, .lang-el h2, .lang-el h3, .lang-ru h1, .lang-ru h2, .lang-ru h3 { font-family: Georgia, "Times New Roman", serif; }
@media (max-width: 1080px) {
  .lang--mobile { display: block; margin-left: auto; }
  .lang--mobile + .burger { margin-left: 8px; }
  .lang--mobile .lang__btn { height: 44px; }
}

/* postavy v Môj účet */
.chars { margin-top: 10px; font-size: .95rem; }
.chars th { background: transparent; border-bottom: 1px solid var(--line-strong); padding: 10px 8px; }
.chars td { padding: 10px 8px; border-top: 1px solid var(--line); }

/* ---------- Kompaktné menu ----------
   Keď sa položky menu (napr. v dlhšom jazyku) nezmestia do jedného riadku,
   JavaScript pridá triedu .is-compact a menu sa prepne na rozbaľovacie – rovnako ako na mobile. */
.nav__actions .btn { white-space: nowrap; }
.nav.is-compact .nav__actions { display: none; }
.nav.is-compact .burger { display: flex; }
.nav.is-compact .lang--mobile { display: block; margin-left: auto; }
.nav.is-compact .lang--mobile + .burger { margin-left: 8px; }
.nav.is-compact .lang--mobile .lang__btn { height: 44px; }
.nav.is-compact .nav__menu {
  position: absolute; top: 100%; right: 0; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
  width: min(340px, 100%); margin: 0; padding: 16px 24px 24px; overflow-y: auto;
  flex-direction: column; gap: 2px; background: #0f0b0c; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s, visibility .35s;
}
.nav.is-compact .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
.nav.is-compact.menu-open { background: rgba(13,10,11,.96); border-color: var(--line); }
.nav.is-compact .nav__menu a { padding: 14px 6px; font-size: 1.05rem; border-bottom: 1px solid var(--line); white-space: normal; }
.nav.is-compact .nav__menu a::after { display: none; }
.nav.is-compact .nav__menu-actions { display: grid; gap: 10px; margin-top: 24px; }
/* horné menu môže byť širšie než obsah stránky, aby sa zmestili aj dlhšie preklady */
.nav .container.nav__inner { width: min(1400px, 100% - 32px); gap: 20px; }
.nav__actions { gap: 8px; }
.nav__actions .btn { padding: 10px 16px; }

/* ---------- Slider na mobile ----------
   Obrázok je samostatný blok pod menu, text a tlačidlá začínajú až pod ním. */
@media (max-width: 820px) {
  .hero { height: auto; min-height: 0; }
  .slider { position: relative; display: grid; }
  .slide { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: stretch; }
  .slide::after { display: none; }
  .slide__bg {
    position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; max-height: 50vh; flex: none;
    background-size: auto 140%; background-position: var(--pos-m, var(--pos, center top));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 80%, transparent 100%);
  }
  .slide__content { align-self: auto; padding: 18px 0 96px; margin-top: 0; }
  .slide__title { margin: 12px 0 14px; }
  .slider__controls { bottom: 28px; }
}
.registration-status { margin:0;padding:12px 14px;line-height:1.6;font-size:.9rem; }
.registration-status[hidden] { display:none; }
#modal-register button:disabled { opacity:.7;cursor:wait; }

/* Current Lorain campaign: concise copy and gameplay imagery. */
.lr-test{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin-top:36px;padding:28px 32px;border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:6px;background:radial-gradient(ellipse at 0 0,#b78b3820,transparent 75%),#141410}
.lr-test h2{font:600 clamp(24px,2.6vw,36px)/1.22 var(--font-head);margin:10px 0 12px;color:var(--text)}
.lr-test p{max-width:750px;margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.75}.lr-test strong{display:block;color:var(--gold);font-size:13px;line-height:1.65}
.lr-test .eyebrow{font-size:11px}.lr-test .eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7ac889;box-shadow:0 0 12px #7ac88977;margin-right:9px}
.lr-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.lr-test .lr-actions{flex-direction:column;align-items:stretch;text-align:center;max-width:220px}.lr-actions .btn{white-space:normal;text-align:center}.lr-text-link{font-size:13px;color:var(--gold);line-height:1.6}
.lr-news-visual{aspect-ratio:16/10;overflow:hidden;background:#131410}.lr-news-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}.card:hover .lr-news-visual img{transform:scale(1.035)}
.lr-news-visual--detail{aspect-ratio:auto;background:none;max-width:860px;margin:28px auto}.lr-news-visual--detail img{height:auto;max-height:420px;object-fit:contain;border:0;transform:none!important}
.news-article .lr-actions{margin-top:28px}.news-list .lr-news-visual{border-bottom:1px solid var(--line)}
.presentation-a .lr-dm-emblem{width:80px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e7c781;border:1px solid #caa35666;border-radius:4px;background:#b78b3812}.presentation-a .lr-dm-emblem strong{font:600 39px/1.1 var(--font-head)}.presentation-a .lr-dm-emblem span{font-size:11px;letter-spacing:.18em}
.presentation-a .lr-friends .pres-a-friends-benefits .pres-text-link{font-size:11px;margin-top:10px;display:inline-flex}
.presentation-a .lr-night-feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:center;margin:0 0 24px;padding:0}.presentation-a .lr-night-feature figure{margin:0}.presentation-a .lr-night-feature img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;border:0}.presentation-a .lr-night-feature h3{font:600 clamp(24px,2.3vw,34px)/1.22 var(--font-head);color:#eee7d6;margin:10px 0 16px}.presentation-a .lr-night-feature p{font-size:12px;line-height:1.8;color:#bdb5a5;margin:12px 0 0}
.lr-night-stats{display:flex;flex-wrap:wrap;gap:7px}.lr-night-stats b{font:600 12px/1.4 var(--font-body);padding:7px 10px;background:#c9994d12;color:#dfc68c;border:1px solid #c9994d33;border-radius:3px}
@media(max-width:850px){.lr-test{grid-template-columns:1fr;gap:20px}.lr-test .lr-actions{flex-direction:row;align-items:center;max-width:none}.presentation-a .lr-night-feature{gap:20px}.presentation-a .lr-night-feature p{font-size:11px}}
@media(max-width:600px){.lr-test{padding:23px 21px;margin-top:24px}.lr-test p{font-size:13px}.lr-test .lr-actions{align-items:stretch;flex-direction:column}.lr-news-visual{aspect-ratio:16/10}.presentation-a .lr-dm-emblem{width:48px;height:60px}.presentation-a .lr-dm-emblem strong{font-size:27px}.presentation-a .lr-dm-emblem span{font-size:9px}.presentation-a .lr-night-feature{grid-template-columns:1fr;gap:20px}.presentation-a .lr-night-feature h3{font-size:26px}.presentation-a .lr-night-feature p{font-size:12px}}

/* Always-visible invite reward below the opening section. */
.lr-invite-strip{grid-column:1/-1;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:20px;border-top:1px solid #c9994d42;padding-top:24px}
.lr-invite-amount{display:flex;flex-direction:column;justify-content:center;align-items:center;width:76px;height:76px;background:linear-gradient(145deg,#b8872d25,#b8872d06);border:1px solid #c9994d66;border-radius:5px;color:#eac77d;font-size:13px;letter-spacing:.1em}
.lr-invite-amount b{font:600 36px/1.1 var(--font-head);letter-spacing:0}.lr-invite-strip h3{font:600 clamp(21px,2.1vw,29px)/1.25 var(--font-head);color:#f0d29b;margin:0 0 8px}.lr-test .lr-invite-strip p{font-size:12px;margin:0;max-width:690px;line-height:1.75}.lr-invite-strip .btn{font-size:12px;max-width:225px;white-space:normal;text-align:center}
@media(max-width:850px){.lr-invite-strip{grid-template-columns:65px minmax(0,1fr);gap:15px}.lr-invite-amount{width:65px;height:70px}.lr-invite-strip .btn{grid-column:2;justify-self:start}}
@media(max-width:540px){.lr-invite-strip{grid-template-columns:50px minmax(0,1fr);align-items:start;gap:14px}.lr-invite-amount{width:50px;height:62px;font-size:11px}.lr-invite-amount b{font-size:28px}.lr-invite-strip h3{font-size:22px}.lr-invite-strip .btn{grid-column:1/-1;max-width:none;width:100%}}