/* MU Drakon / acero, fuego y hielo. Shared theme for every public page. */
/* Extra public destination: switch to the existing drawer before links crowd. */
@media (max-width: 1280px) { .topbar .topbar__nav { display: none; } .topbar .hamburger { display: inline-flex; } }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/marcellus.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-semibold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-bold.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --bg-0: #0a0e11;
  --bg-1: #101519;
  --bg-2: #182026;
  --blood: #6b422e;
  --blood-deep: #322118;
  --crimson: #a67a44;
  --crimson-soft: #d4a061;
  --crimson-bright: #eecfa9;
  --tomato: #d4a061;
  --tomato-soft: #eccca5;
  --tomato-bright: #f6ddbe;
  --gold: #c5a16a;
  --gold-bright: #edd0a0;
  --text: #f5eadd;
  --text-dim: #b5bec6;
  --text-faint: #9ca6ae;
  --line: rgba(197, 161, 106, .3);
  --line-soft: rgba(197, 161, 106, .16);
  --line-strong: rgba(197, 161, 106, .6);
  --panel-bg: #141a1f;
  --panel-bg-strong: #0d1115;
  --good: #69d7a0;
  --danger: #ff4757;
  --font-display: "Marcellus", Georgia, serif;
  --font-serif: "Marcellus", Georgia, serif;
  --font-ui: "Barlow", "Segoe UI", sans-serif;
  --font-tech: "Barlow", "Segoe UI", sans-serif;
  --section-gap: clamp(44px, 5vw, 76px);
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 10px;
  --premium-max: 1360px;
  --premium-gutter: clamp(18px, 4.4vw, 76px);
  --gamer-panel: linear-gradient(150deg, #192026, #101519 72%);
  --gamer-metal: linear-gradient(180deg, #f4dfb7, #c5a16a);
}

html, body { background-color: var(--bg-0); }
body { font-size: 16px; line-height: 1.55; letter-spacing: .005em; }
body::before { opacity: .08; }
.bg-layer { background-image: url("img/drakon/drakon-background.webp"); filter: saturate(.8) brightness(.65); opacity: .5; }
.bg-overlay { background: linear-gradient(180deg, rgba(10, 14, 17,.3), rgba(10, 14, 17,.88) 1050px, #0a0e11 1900px); }
.bg-vignette { background: linear-gradient(90deg, rgba(10, 14, 17,.6), transparent 28% 72%, rgba(10, 14, 17,.6)); }
.embers { opacity: .22; }
.topbar { min-height: 82px; background: rgba(11, 16, 19,.97); border-color: var(--line); backdrop-filter: blur(10px); }
.topbar::after { opacity: .6; background: linear-gradient(90deg, transparent, #987665 22%, #c5a16a 50%, #987665 78%, transparent); }
.brand__logo { width: 54px; height: 54px; filter: drop-shadow(0 0 12px rgba(212, 160, 97,.23)); }
.brand__title, .footer__brand-title, .drawer__brand-title { font-family: var(--font-display); color: var(--text); font-weight: 400; letter-spacing: .055em; }
.brand__title { font-size: 27px; line-height: 1.1; text-transform: uppercase; }
.brand__sub { margin-top: 4px; font-size: 10px; letter-spacing: .23em; }
.topbar__nav { gap: clamp(18px, 2.2vw, 34px); }
.nav-link { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.nav-link:hover, .nav-link.is-active, .nav-link[aria-current] { color: var(--gold-bright); }
.topbar__actions { flex-shrink: 0; gap: 12px; }
.rune-menu { border-color: var(--line); background: rgba(14, 20, 25,.95); }
.rune-btn { color: var(--gold-bright); border-color: var(--line-soft); }
.rune-btn:hover { background: #242e36; box-shadow: 0 0 16px rgba(212, 160, 97,.16); }
@media (max-width: 1600px) { .rune-menu { display: none; } }
.drawer { background: #11181d; border-color: var(--line); }
.drawer__link { min-height: 48px; font-family: var(--font-ui); font-size: 16px; }
.drawer__link:hover { background: rgba(212, 160, 97,.08); }
.hamburger { width: 44px; height: 44px; border-color: var(--line); }

/* Controls: metal surfaces, clear focus, readable labels. */
.btn, .mk-btn, .ws-item__btn, .ws-cfg__buy, .svf-submit,
.mk-tab, .auth-tab, .rank-tab, .pf-back, .svf-back {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .07em;
  border-radius: var(--r-sm); text-shadow: none;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn--primary, .mk-btn:not(.mk-btn--ghost), .ws-item__btn, .ws-cfg__buy, .svf-submit {
  color: #fffbf6; background: linear-gradient(180deg, #b78951, #865035);
  border: 1px solid #d7ac77; box-shadow: inset 0 1px rgba(255, 255, 255,.18), 0 5px 20px rgba(117, 69, 45,.3);
}
.btn--primary:hover, .mk-btn:not(.mk-btn--ghost):hover, .ws-item__btn:hover, .ws-cfg__buy:hover, .svf-submit:hover {
  color: #fff; background: linear-gradient(180deg, #ce9e62, #9d6142); box-shadow: inset 0 1px rgba(255, 255, 255,.2), 0 6px 25px rgba(159, 97, 66,.38);
}
.btn--secondary, .mk-btn--ghost, .pf-back, .svf-back {
  color: var(--gold-bright); border: 1px solid var(--line-strong); background: rgba(19, 24, 28,.88);
  box-shadow: inset 0 1px rgba(255, 255, 255,.04);
}
.btn--secondary:hover, .mk-btn--ghost:hover { color: #fff5e0; background: #342a25; border-color: var(--gold); }
.btn--lg { min-height: 50px; padding: 14px 24px; font-size: 14px; }
.btn--sm { min-height: 40px; font-size: 12px; }
.btn:disabled, .mk-btn:disabled, .ws-item__btn:disabled, .ws-cfg__buy:disabled, .svf-submit:disabled { opacity: .5; transform: none; box-shadow: none; }
:focus-visible { outline: 2px solid #f0d3a2; outline-offset: 4px; }
.class-card:focus-visible { outline: 2px solid #f0d3a2; outline-offset: -4px; }
.field input, .field select, .field textarea, .mk-form-group input, .mk-form-group select,
.ws-cfg__group input, .ws-cfg__group select, .svf-field input, .wa-form__group input, .wa-form__group select {
  min-height: 46px; color: #ecf1f5; background: #0e1318;
  border: 1px solid #434d55; border-radius: 4px; font-family: var(--font-ui); font-size: 16px;
}
.field input:focus, .field select:focus, .mk-form-group input:focus, .ws-cfg__group select:focus, .svf-field input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 161, 106,.12);
}
.field__label, .mk-form-group label, .ws-cfg__group label, .svf-field__label {
  color: #c8d1d8; font-family: var(--font-ui); font-size: 12px; letter-spacing: .07em;
}
input::placeholder, textarea::placeholder { color: #909ea9; opacity: 1; }
.admin-modal__card, .event-editor__card, .mk-modal__card, .ws-modal__card, .dl-modal__card, .chaos-modal__card {
  color: var(--text); background: #141a1f; border-color: #736157; border-radius: 9px;
}
.mk-modal__head, .ws-modal__head, .admin-modal__head, .event-editor__head, .dl-modal__head, .chaos-modal__head {
  background: linear-gradient(100deg, rgba(144, 93, 68,.16), transparent); border-color: var(--line);
}

/* Portada: the artwork carries the atmosphere; content stays above the scene. */
.main { margin-top: 18px; padding-bottom: 36px; overflow-x: clip; }
.hud-strip { margin-top: 18px; background: linear-gradient(180deg, #1b232a, #12171c); border-color: var(--line); border-radius: 6px; }
.hud-strip__item { padding: 13px 24px; }
.hud-strip__icon { width: 38px; height: 38px; color: #e5bd87; background: #202930; border-color: #645248; }
.hud-strip__label { color: #adbac4; font-size: 10px; letter-spacing: .13em; }
.hud-strip__value { font-size: 17px; }
.hero {
  position: relative; display: flex; align-items: center; isolation: isolate;
  min-height: clamp(550px, 43vw, 660px); gap: 0; padding: clamp(32px, 5vw, 76px);
  overflow: hidden; border: 1px solid #79604e; border-radius: 8px 8px 0 0;
  background: #111619; box-shadow: 0 28px 64px rgba(3, 5, 7,.4);
}
.hero::before { display: none; }
.hero::after { z-index: 0; background: linear-gradient(90deg, rgba(10, 14, 18,.89), rgba(10, 14, 18,.58) 38%, rgba(10, 14, 18,.1) 65%), linear-gradient(0deg, rgba(10, 14, 18,.75), transparent 28%); }
.hero__scene { position: absolute; inset: 0; z-index: -1; }
.hero__scene img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 45%; }
.hero__content { position: relative; z-index: 2; width: 54%; max-width: 650px; }
.hero__corner { z-index: 3; width: 28px; height: 28px; opacity: .65; border-color: #deb880; }
.hero__eyebrow { margin: 0 0 20px; color: #efd2a5; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-shadow: 0 2px 10px #070a0d; }
.hero__title { display: block; max-width: 650px; margin: 0 0 22px; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.hero__title-primary, .hero__title-secondary {
  display: inline; color: #f4e1bf; background: none; font-family: var(--font-display);
  font-size: clamp(64px, 7.2vw, 108px); font-weight: 400; letter-spacing: -.055em;
  text-transform: uppercase; text-shadow: 0 3px 0 #50382e, 0 8px 28px rgba(0, 0, 0,.7);
  -webkit-text-fill-color: currentColor;
}
.hero__title-secondary { margin-left: .08em; }
.hero__tagline { max-width: 43ch; margin-bottom: 28px; color: #d5dadf; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; text-shadow: 0 2px 8px #0d1217; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cta .btn { min-width: 174px; }
.realm-strip { width: 100%; margin: 0 0 36px !important; border: 1px solid #715345; border-top: 0; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #1d2328, #14191e); }
.realm-strip__track { width: 100%; animation: none; }
.realm-strip__group { width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0,1fr)); }
.realm-strip__group[aria-hidden="true"] { display: none; }
.realm-strip__group > span { grid-template-columns: 1fr auto; min-height: 84px; padding: 16px 28px; gap: 0 12px; }
.realm-strip small { font-size: 11px; color: #c0cad2; letter-spacing: .1em; }
.realm-strip strong { grid-row: span 2; font-family: var(--font-ui); font-size: 31px; font-weight: 600; line-height: 1.3; }
.realm-strip em { grid-column: 1; font-size: 12px; color: #9ca8b2; }

/* Intentional section rhythm and engraved heading details. */
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 25px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.section-head h2 { display: flex; align-items: center; gap: 13px; margin: 0; font-size: clamp(27px, 2.8vw, 39px); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; text-transform: none; }
.section-head h2::before { content: ""; display: block; flex: 0 0 9px; width: 9px; height: 9px; border: 1px solid #cb9a64; background: #744e3b; transform: rotate(45deg); box-shadow: 0 0 0 4px rgba(197, 161, 106,.07); }
.section-head__hint { color: #a1adb6; font-size: 12px; letter-spacing: .035em; text-transform: none; }
.section-head--center { justify-content: space-between; text-align: left; }
.section-head--center h2 { margin: 0; }
.auth-title, .welcome-title, .hslider__title, .download-card__title, .mk-head h1, .ws-head h1, .cs-hero__title, .pf-name, .svf-title { font-weight: 400; letter-spacing: -.02em; }
.hslider { margin-bottom: 20px !important; border: 1px solid var(--line); border-radius: 7px; background: #12191e; }
.hslider__slide { min-height: 300px; padding: 42px 56px; }
.hslider__slide::before { filter: saturate(.95) brightness(.94); }
.hslider__slide::after { background: linear-gradient(90deg, rgba(9, 14, 17,.85), rgba(9, 14, 17,.5) 45%, transparent 80%); }
.hslider__content { max-width: 510px; }
.hslider__title { font-size: clamp(30px, 3.4vw, 46px); }
.hslider__eyebrow { font-size: 11px; }
.hslider__desc { font-size: 15px; }
.hslider__nav { width: 38px; height: 38px; }
.promo-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; border: 0; background: none; }
.promo-box { position: relative; isolation: isolate; min-height: 172px; padding: 28px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #141b20; }
.promo-box::before { content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; opacity: 1; background: linear-gradient(90deg, rgba(12, 17, 22,.92), rgba(12, 17, 22,.52)), url("img/drakon/gamer/drakon-arsenal.webp") 68% center / cover; transition: transform .4s; }
.promo-box:last-child { border-right: 1px solid var(--line); }
.promo-box:last-child::before { background-image: linear-gradient(90deg, rgba(12, 17, 22,.86), rgba(12, 17, 22,.28)), url("img/drakon/slides/castle-siege.webp"); }
.promo-box:hover { border-color: #b58265; background: #1a232b; transform: translateY(-3px); }
.promo-box:hover::before { transform: scale(1.035); }
.promo-box__icon { flex: 0 0 42px; width: 42px; height: 48px; border-radius: 4px; background: rgba(27, 37, 45,.85); color: #e6c28e; }
.promo-box__body h4 { color: #f2dfc7; font-size: 23px; font-weight: 400; }
.promo-box__body p { max-width: 26ch; color: #bfc9d2; font-size: 14px; line-height: 1.5; }
.promo-box__arrow { color: #e7c494; }

.auth-view { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.auth-card { padding: 30px; border-radius: 8px; background: var(--gamer-panel); border-color: var(--line); }
.auth-title { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.25; }
.auth-tabs { margin-bottom: 26px; }
.auth-tab { font-size: 14px; padding: 14px 20px; }
.auth-tab.is-active { color: #f5e7d6; background: rgba(172, 128, 74,.14); box-shadow: inset 0 -2px #d4a061; }
.auth-side { justify-content: flex-end; padding: 34px; min-height: 425px; gap: 15px; border-radius: 8px; border-color: var(--line); background: linear-gradient(0deg, rgba(11, 17, 22,.98), rgba(11, 17, 22,.72) 60%, rgba(11, 17, 22,.18)), url("img/drakon/slides/drakon-awakening.webp") 80% center / cover; }
.auth-side::after { display: none; }
.auth-side__title { color: #f6dfc3; background: none; -webkit-text-fill-color: currentColor; font: 400 33px/1.2 var(--font-display); letter-spacing: -.02em; }
.auth-side__text { max-width: 46ch; color: #c4ced6; font-size: 16px; }
.auth-side__features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.auth-side__features li { padding: 10px 12px 10px 25px; font-size: 13px; border-color: rgba(197, 161, 106,.18); background: rgba(16, 23, 29,.74); }
.auth-side__features li::before { left: 10px; color: var(--gold); }
.stats-grid { gap: 16px; }
.stat-card { min-height: 130px; padding: 23px; background: var(--gamer-panel); border-color: var(--line); }
.stat-card__icon { width: 76px; height: 76px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0,.35)); }
.stat-card__label { font-size: 12px; color: #b9c5cf; letter-spacing: .06em; }
.stat-card__value { font-family: var(--font-ui); font-size: 34px; font-weight: 600; }

/* Seven equally framed portraits, including the previously oversized wizard. */
.classes-view { display: block; }
.classes-view .section-head { position: static; margin-bottom: 25px; padding-bottom: 18px; }
.classes-view .section-head__hint { margin-top: 0; }
.classes-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-flow: dense; gap: 16px; }
.class-card, .class-card:first-child { grid-column: span 3; height: 380px; min-height: 0; padding: 0; border-radius: 7px; border-color: #615149; background: linear-gradient(180deg, #1b2329, #0f1419); }
.class-card:nth-child(n+5) { grid-column: span 4; }
.class-card::before { background: radial-gradient(ellipse at 50% 45%, rgba(151, 110, 90,.24), transparent 68%); opacity: 1; }
.class-card__art-wrap { flex: 0 0 268px; min-height: 0; padding: 16px 12px 0; }
.class-card .class-card__art, .class-card:first-child .class-card__art { width: 100%; height: 100%; max-width: 260px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 13px 13px rgba(0, 0, 0,.6)); transform: none; }
.class-card.is-premium-visible .class-card__art { transform: none; filter: drop-shadow(0 13px 13px rgba(0, 0, 0,.6)); }
.class-card__rune { color: #e2bd86; font-family: var(--font-ui); letter-spacing: .1em; font-size: 11px; background: #1e262d; border-color: #695048; }
.class-card__info { flex: 1; padding: 20px 14px; background: linear-gradient(180deg, rgba(15, 20, 25,0), #0f1419 20%); }
.class-card__name { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.22; letter-spacing: 0; text-wrap: balance; }
.class-card__role { margin-top: 8px; font-size: 10px; letter-spacing: .09em; color: #d4c6b5; }
.class-card__reveal { max-height: 0; opacity: 0; margin-top: 0; }
.class-card__desc { color: #c2cdd6; font-size: 14px; }
.class-card__stats li { border-color: var(--line); background: #192128; }
.class-card__stats li span { font-family: var(--font-ui); font-size: 10px; }
.class-card__stats li b { color: var(--gold-bright); font: 600 14px var(--font-ui); text-shadow: none; }
@media (hover: hover) and (min-width: 701px) {
  .class-card:hover .class-card__art-wrap, .class-card:focus-visible .class-card__art-wrap { flex-basis: 170px; }
  .class-card__art-wrap { transition: flex-basis .28s; }
  .class-card:hover .class-card__art, .class-card:focus-visible .class-card__art { transform: none; filter: drop-shadow(0 8px 16px rgba(76, 108, 134,.35)); }
  .class-card:hover .class-card__info, .class-card:focus-visible .class-card__info { padding-top: 12px; }
  .class-card:hover .class-card__reveal, .class-card:focus-visible .class-card__reveal { max-height: 200px; opacity: 1; margin-top: 10px; }
}

/* Competitive areas: thematic backdrops, readable data. */
.killer-view--podium { padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(90deg, rgba(14, 20, 25,.82), rgba(14, 20, 25,.38)), url("img/drakon/slides/castle-siege.webp") center / cover; }
.killer-view--podium .podium { margin-top: 0; }
.podium { background: linear-gradient(160deg, rgba(54, 41, 34,.95), rgba(13, 18, 23,.95)); border-color: #765447; border-top-color: var(--gold); animation: none; box-shadow: 0 14px 28px rgba(0, 0, 0,.35); }
.podium__name { color: #edd0a0; font: 400 26px/1.25 var(--font-display); text-shadow: none; }
.podium__badge, .podium__class { font-family: var(--font-ui); }
.ranking-view { padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, #192229, #10161b 70%); }
.rank-tabs { padding: 5px; gap: 6px; width: fit-content; max-width: 100%; overflow-x: auto; border-radius: 5px; }
.rank-tab { min-width: 49px; min-height: 40px; padding: 8px 14px; font-size: 12px; }
.rank-tab.is-active { color: #fff1e1; background: #4b362b; box-shadow: inset 0 -2px var(--tomato); }
.table-wrap { border: 1px solid var(--line-soft); border-radius: 5px; overflow-x: auto; }
.data-table { width: 100%; font-family: var(--font-ui); font-size: 15px; }
.data-table thead th, .cs-table th { padding: 15px 12px; background: #1f2830; color: #d4c9bb; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .07em; }
.data-table tbody td, .cs-table td { padding: 14px 12px; border-color: rgba(162, 142, 133,.15); }
.data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255,.015); }
.state-cell { color: #bbc5ce; font-family: var(--font-ui); font-size: 15px; }
.benefits-grid { gap: 24px; }
.benefit-card { padding: 28px; background: linear-gradient(155deg, #1b2228, #12191e); border-color: #5f4e45; }
.benefit-card--vip { background: linear-gradient(150deg, #3a302b, #141b20 65%); border-color: #b08b59; }
.benefit-card__head { min-height: 140px; align-items: center; }
.benefit-card__title { color: #f0d5b2; font-size: 29px; font-weight: 400; }
.benefit-card__art { filter: none; }
.benefit-list li { padding: 12px 15px; color: #cfd7de; font-size: 14px; border-color: rgba(197, 161, 106,.12); background: rgba(8, 12, 15,.2); }
.benefit-list li b { color: #f1d7b2; font-family: var(--font-ui); font-weight: 600; }

.events-grid { gap: 16px; padding-bottom: 16px; scroll-snap-type: x mandatory; }
.event-card, .event-card:hover, .event-card:focus-within { flex: 0 0 290px; min-height: 390px; transform: none; border-color: #685247; border-radius: 7px; background: radial-gradient(ellipse at 50% 24%, rgba(75, 104, 127,.19), transparent 60%), linear-gradient(170deg, #1a242c, #0f151a); }
.event-card__icon { filter: none; }
.event-card__head:not(:has(.event-card__icon))::before { content: ""; display: block; width: 170px; height: 170px; margin: 0 auto 18px; opacity: .7; background: url("img/drakon/mu-drakon-icon.webp") center / 106px no-repeat, radial-gradient(ellipse, rgba(176, 139, 93,.14), transparent 70%); }
.event-card__title { color: #f1e1d2; font-size: 25px; font-weight: 400; }
.event-card__cadence { font-size: 11px; color: #d3c2ac; }
.event-card__toggle { min-height: 40px; color: #e9dccc; font-family: var(--font-ui); font-size: 12px; border-color: #655148; background: rgba(90, 61, 47,.14); }
.event-card__toggle:hover { color: #fff; background: #4d392f; }
.gamer-rail-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gamer-rail-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 1px solid #705347; border-radius: 4px; background: #1d252c; color: #ead0a6; cursor: pointer; transition: background .2s, border-color .2s; }
.gamer-rail-button svg { width: 18px; height: 18px; }
.gamer-rail-button:hover { background: #48372e; border-color: #be9269; }
.gamer-rail-button:disabled { opacity: .35; cursor: default; }
.lm-card, .chaos-card, .my-char { background: var(--gamer-panel); border-color: var(--line); }
.chaos-card__title, .chaos-card__item, .lm-card__name { color: var(--text); font-family: var(--font-ui); }
.latest-market__grid > .state-cell, .chaos-feed__empty { padding: 40px 28px; border: 1px solid var(--line); border-radius: 7px; color: #c9d3db; background: linear-gradient(90deg, rgba(18, 25, 31,.94), rgba(18, 25, 31,.73)), url("img/drakon/gamer/drakon-arsenal.webp") 65% 55% / cover; font: 400 15px/1.6 var(--font-ui); letter-spacing: .015em; text-transform: none; }
.gallery { border-color: #745042; border-radius: 8px; }
.gallery__slide img { filter: none; }
.gallery__slide-caption { font-family: var(--font-ui); letter-spacing: .05em; }
.download-card { min-height: 385px; padding: 48px; border: 1px solid #8d6950; background: linear-gradient(90deg, rgba(12, 17, 21,.95), rgba(12, 17, 21,.68) 48%, rgba(12, 17, 21,.15)), url("img/drakon/gamer/drakon-knight.webp") center 35% / cover; }
.download-card__body { max-width: 670px; }
.download-card__title { font-size: clamp(32px, 4vw, 52px); color: #f2dbba; }
.download-card__desc { max-width: 44ch; color: #ced7df; }
.download-card__eyebrow { color: #d9c8b3; font: 600 12px var(--font-ui); letter-spacing: .12em; }
.download-card__cta { flex-wrap: wrap; gap: 12px; }
.download-card__cta .btn { white-space: normal; }
.footer { padding: 36px var(--premium-gutter) 38px; border-color: #765143; background: linear-gradient(180deg, #161c21, #0d1217); }
.footer__rune-row { opacity: .65; margin-bottom: 28px; }
.footer__nav { gap: 18px; }
.footer__nav a { color: #b7c3cd; font-family: var(--font-ui); font-size: 12px; letter-spacing: .08em; }
.footer__copy { color: #a1afba; font-size: 12px; }
.drakon-credit { border-color: #957260; background: linear-gradient(110deg, #36251c, #11181d); }
.drakon-credit__seal { color: #e6d1b8; border-color: #6d5346; }
.drakon-credit__copy small { color: #d6c7b4; }

/* Shared commerce layout: illustrated mastheads, quieter item grids. */
.mk-page, .ws-page, .pf-page, .cs-page { padding-top: 28px; padding-bottom: 64px; }
.mk-head, .ws-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; min-height: 245px; padding: 40px; margin-bottom: 26px; overflow: hidden; border: 1px solid #846348; border-radius: 8px; background: linear-gradient(90deg, rgba(14, 20, 25,.94), rgba(14, 20, 25,.64) 48%, rgba(14, 20, 25,.08)), url("img/drakon/gamer/drakon-arsenal.webp") center 55% / cover; }
.mk-head h1, .ws-head h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.12; text-transform: none; color: #f3dfbf; }
.mk-head h1::before, .ws-head h1::before { display: none; }
.mk-head__hint, .ws-head__hint { max-width: 48ch; font-size: 15px; color: #ccd6df; line-height: 1.5; letter-spacing: .02em; text-transform: none; }
.mk-tabs { border-color: #65544b; background: #131a1f; padding: 5px; }
.mk-tab { font-size: 13px; min-height: 42px; }
.mk-tab.is-active { background: #48352b; box-shadow: inset 0 -2px #d49a6b; }
.mk-grid, .ws-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 16px; }
.mk-card, .ws-item { display: flex; flex-direction: column; align-items: stretch; min-height: 320px; padding: 22px 18px; border-radius: 6px; border-color: #5b4b43; background: linear-gradient(150deg, #1c262e, #11181d); }
.mk-card__icon-wrap, .ws-item__icon-wrap { width: 100%; height: 134px; flex-shrink: 0; margin-bottom: 20px; border-radius: 4px; border-color: rgba(176, 137, 89,.18); background: radial-gradient(ellipse, rgba(76, 101, 121,.2), transparent 72%), #0f151a; }
.mk-card__icon, .ws-item__icon { max-width: 100px; max-height: 108px; filter: drop-shadow(0 10px 12px #070a0c); }
.mk-card__name, .ws-item__name { color: #f3e6da; font: 600 17px/1.35 var(--font-ui); min-height: 46px; }
.mk-card__price, .ws-item__price { color: #efd1a0; font-family: var(--font-ui); font-size: 18px; font-weight: 600; }
.mk-card__seller { color: #adbac4; font-size: 12px; letter-spacing: .035em; }
.mk-card__lvl { font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; }
.mk-card .mk-btn, .ws-item__btn { margin-top: auto; min-height: 44px; font-size: 12px; }
.mk-empty, .ws-empty, .pf-state, .cs-empty { color: #bbc7d0; border: 1px solid #67554c; border-radius: 6px; background: linear-gradient(135deg, #1c262e, #11171c); font: 400 16px/1.6 var(--font-ui); padding: 44px 24px; letter-spacing: normal; }
.mk-empty::before, .ws-empty::before, .pf-state::before { content: ""; display: block; width: 62px; height: 62px; margin: 0 auto 16px; background: url("img/drakon/mu-drakon-icon.webp") center / contain no-repeat; opacity: .65; }
.ws-page { grid-template-columns: 235px minmax(0,1fr); gap: 24px; }
.ws-head { margin-bottom: 0; }
.ws-sidebar { position: sticky; top: 102px; align-self: start; padding: 20px; background: linear-gradient(150deg, #1b242c, #11181e); border-color: #68564d; border-radius: 7px; }
.ws-wallet { border-color: #8d6b48; background: linear-gradient(135deg, #433030, #1d262d); padding: 18px; }
.ws-wallet__lbl { color: #d4cabe; font-size: 11px; }
.ws-wallet__val { font: 600 30px var(--font-ui); color: #f2d9b2; }
.ws-sidebar__title { color: #aebeca; font-size: 11px; letter-spacing: .09em; }
.ws-cats button { min-height: 42px; font-family: var(--font-ui); font-size: 14px; color: #cad3db; border-radius: 3px; }
.ws-cats button.is-active { color: #fff5e9; background: #4c372d; box-shadow: inset 3px 0 #dba66f; }
.ws-cat-code { font-size: 11px; }
.ws-cfg__preview, .ws-cfg__price { background: linear-gradient(135deg, #382c26, #141a1f); border-color: #765644; }
.ws-cfg__chk { min-height: 42px; font-family: var(--font-ui); font-size: 14px; background: #1a232b; border-color: #64554d; }
.ws-cfg__chk.is-on { color: #f8eddf; background: #48352b; border-color: #c5a47b; }
.pk-card { background: var(--gamer-panel); border-color: var(--line); }

/* Castle, account pages and focused registration. */
.cs-hero { min-height: 430px; padding: 48px; gap: 40px; grid-template-columns: minmax(170px,.65fr) minmax(0,1.8fr); background: linear-gradient(90deg, rgba(12, 17, 22,.9), rgba(12, 17, 22,.54)), url("img/drakon/slides/castle-siege.webp") 70% center / cover; border-color: #a28056; }
.cs-hero__mark { width: min(100%,220px); height: 220px; background: rgba(22, 29, 34,.68); border-color: #8a634f; box-shadow: inset 0 0 24px rgba(220, 170, 103,.05); }
.cs-hero__title { font-size: clamp(38px, 4.6vw, 65px); line-height: 1.12; color: #f2d7b1; }
.cs-hero__subtitle { color: #bac6cf; font-size: 15px; }
.cs-stats { margin-top: 24px; border-color: #775144; background: rgba(13, 19, 24,.72); }
.cs-panel { padding: 32px; background: linear-gradient(155deg, #192128, #10171c); border-color: #705047; border-radius: 8px; }
.cs-panel-title { color: #efddc7; font-size: 28px; font-weight: 400; }
.cs-timer-frame { padding: 23px; background: #2c221e; border-color: #805548; }
.cs-timer-value { color: #eed0a5; font-family: var(--font-ui); font-size: clamp(26px, 4vw, 44px); }
.cs-step.is-active { color: #efc790; background: #514139; border-color: #d3a570; }
.pf-hero { background: linear-gradient(90deg, rgba(20, 27, 33,.96), rgba(20, 27, 33,.77)), url("img/drakon/gamer/drakon-knight.webp") right 30% / cover; border-color: #88624f; border-radius: 8px; }
.pf-panel, .pf-equip { background: linear-gradient(145deg, #1c262e, #11171c); border-color: #68564c; border-radius: 8px; }
.pf-name { color: #efd4ad; font-size: clamp(35px, 4.5vw, 62px); overflow-wrap: anywhere; }
.pf-avatar img { filter: drop-shadow(0 14px 20px rgba(0, 0, 0,.5)); }
.pf-metric { background: #212a32; border-color: #5e5049; }
.pf-metric__lbl { font-size: 12px; color: #b0bdc8; }
.pf-metric__val { font-family: var(--font-ui); color: #f0d4ae; }
.pf-panel__title, .pf-equip__title { font-size: 26px; font-weight: 400; }
.pf-sibling, .pf-guild { background: #1c252d; border-color: #67564d; }
.page-svfast { background: #0d1217; }
.page-svfast .bg-layer { background-image: url("img/drakon/gamer/drakon-knight.webp"); filter: brightness(.63); opacity: .8; }
.svf-card { width: min(100%,560px); padding: 40px; background: rgba(20, 28, 34,.96); border-color: #967251; border-radius: 9px; box-shadow: 0 25px 80px rgba(3, 6, 8,.5); }
.svf-title { color: #f1daba; font-size: 41px; line-height: 1.2; }
.svf-brand-name { font-family: var(--font-display); font-weight: 400; }
.svf-badge { color: #dbb185; font-size: 11px; }
.svf-field__label { font-size: 12px; }
.svf-submit { min-height: 48px; font-size: 14px; }

/* Visible content must never depend on a scroll-trigger animation. */
.premium-reveal, .premium-media-reveal,
.premium-reveal.is-premium-visible, .premium-media-reveal.is-premium-visible { opacity: 1; transform: none; transition: none; }
.class-card.premium-media-reveal { transition: border-color .25s, box-shadow .25s; }
@media (min-width: 1181px) {
  .ranking-view { display: grid; grid-template-columns: 285px minmax(0,1fr); gap: 22px 30px; }
  .ranking-view > .section-head { grid-column: 1 / -1; margin-bottom: 0; }
  .ranking-view > .rank-tabs { grid-column: 1 / -1; margin-bottom: 0; }
  .ranking-view > .podium-wrap { margin: 0; }
  .ranking-view .podium { width: 100%; }
  .ranking-view > .table-wrap { align-self: start; }
}
@media (max-width: 1180px) {
  .topbar__nav { gap: 16px; }
  .nav-link { font-size: 12px; letter-spacing: .04em; }
  .hero { min-height: 520px; padding: 42px; }
  .hero__content { width: 57%; }
  .hero__title-primary, .hero__title-secondary { font-size: clamp(58px, 7vw, 85px); }
  .promo-box { padding: 24px 18px; gap: 12px; }
  .promo-box__icon { display: none; }
  .class-card__name { font-size: 20px; }
  .ws-page { grid-template-columns: 210px minmax(0,1fr); gap: 20px; }
  .cs-hero { padding: 36px; gap: 24px; }
}
@media (max-width: 900px) {
  .hero { min-height: 520px; }
  .hero__content { width: 64%; }
  .hero::after { background: linear-gradient(90deg, rgba(10, 14, 18,.92), rgba(10, 14, 18,.6) 55%, rgba(10, 14, 18,.08)); }
  .hero__cta .btn { min-width: 0; padding-inline: 20px; }
  .realm-strip__group > span { padding: 14px 18px; }
  .promo-box { min-height: 150px; }
  .auth-view { grid-template-columns: 1fr 1fr; }
  .auth-card, .auth-side { padding: 24px; }
  .auth-side__features { grid-template-columns: 1fr; }
  .stat-card { padding: 18px; }
  .stat-card__icon { width: 57px; height: 57px; }
  .class-card, .class-card:first-child, .class-card:nth-child(n+5) { grid-column: span 4; }
  .class-card:last-child { grid-column: 5 / span 4; }
  .ws-page { grid-template-columns: minmax(0,1fr); }
  .ws-sidebar { position: static; }
  .ws-cats { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding-bottom: 8px; }
  .ws-cats li { flex: 0 0 auto; }
  .ws-cats button { padding-inline: 14px; white-space: nowrap; }
  .ws-cats button.is-active { box-shadow: inset 0 -2px #dba66f; }
  .ws-wallet { margin-bottom: 18px; }
  .cs-hero { grid-template-columns: 160px minmax(0,1fr); }
  .cs-hero__mark { height: 170px; }
}
@media (max-width: 700px) {
  :root { --premium-gutter: 18px; --section-gap: 44px; }
  html { scroll-padding-top: 86px; }
  .topbar { min-height: 68px; padding-inline: 16px; }
  .brand__logo { width: 42px; height: 42px; }
  .brand__title { font-size: 22px; }
  .brand__sub { display: none; }
  .topbar__actions { gap: 8px; }
  .hud-strip { width: calc(100% - 36px); margin-top: 14px; }
  .hud-strip__item { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 11px 5px; }
  .hud-strip__icon { display: none; }
  .hud-strip__label { font-size: 9px; letter-spacing: .055em; }
  .hud-strip__value { font-size: 14px; }
  .main { margin-top: 14px; padding-inline: 18px; }
  .hero { min-height: 610px; align-items: flex-end; padding: 30px 24px; }
  .hero__scene img { object-position: 65% top; }
  .hero::after { background: linear-gradient(0deg, #0d1216 0%, rgba(13, 18, 22,.97) 25%, rgba(13, 18, 22,.66) 47%, rgba(13, 18, 22,.04) 80%); }
  .hero__content { width: 100%; max-width: none; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .15em; margin-bottom: 15px; }
  .hero__title { margin-bottom: 17px; }
  .hero__title-primary, .hero__title-secondary { font-size: clamp(52px, 12.2vw, 76px); }
  .hero__tagline { font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__cta .btn { min-height: 48px; width: 100%; font-size: 13px; }
  .hero__corner { width: 20px; height: 20px; }
  .realm-strip { margin-bottom: 28px !important; }
  .realm-strip__group { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .realm-strip__group > span { min-height: 73px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .realm-strip__group > span:nth-child(2n) { border-right: 0; }
  .realm-strip__group > span:nth-child(n+3) { border-bottom: 0; }
  .realm-strip strong { font-size: 25px; }
  .realm-strip small { font-size: 10px; letter-spacing: .04em; }
  .realm-strip em { display: block; font-size: 10px; }
  .section-head { gap: 10px; align-items: center; margin-bottom: 20px; }
  .section-head h2 { font-size: 27px; }
  .section-head__hint { font-size: 12px; line-height: 1.5; }
  .section-head__tools { flex-wrap: wrap; }
  .hslider__slide { min-height: 345px; padding: 32px 27px 64px; }
  .hslider__content { align-self: end; }
  .hslider__title { font-size: 33px; }
  .hslider__desc { font-size: 14px; }
  .hslider__slide::after { background: linear-gradient(0deg, rgba(11, 16, 21,.95), rgba(11, 16, 21,.7) 60%, rgba(11, 16, 21,.2)); }
  .promo-row { grid-template-columns: 1fr; gap: 12px; }
  .promo-box { min-height: 124px; padding: 22px; gap: 16px; }
  .promo-box__icon { display: flex; }
  .promo-box__body h4 { font-size: 23px; }
  .promo-box__body p { font-size: 14px; }
  .auth-view { grid-template-columns: 1fr; gap: 18px; }
  .auth-title { font-size: 28px; }
  .auth-side { min-height: 365px; padding: 26px; }
  .auth-side__features { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { min-height: 108px; padding: 20px; }
  .stat-card__icon { width: 67px; height: 67px; }
  .stat-card__value { font-size: 30px; }
  .classes-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(264px,82vw); gap: 12px; margin: 0; padding: 0 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #91786b #1c242b; }
  .class-card, .class-card:first-child, .class-card:nth-child(n+5), .class-card:last-child { grid-column: auto; height: auto; min-height: 486px; padding: 0; scroll-snap-align: start; }
  .class-card__art-wrap { flex: 0 0 252px; min-height: 0; height: 252px; }
  .class-card .class-card__art, .class-card:first-child .class-card__art { width: 100%; height: 100%; max-width: 260px; object-fit: contain; transform: none; }
  .class-card__info { padding: 20px; }
  .class-card__name { font-size: 24px; }
  .class-card__reveal { max-height: none; opacity: 1; margin-top: 14px; }
  .class-card__desc { min-height: 63px; font-size: 14px; }
  .gamer-rail-tools { flex-shrink: 0; }
  .gamer-rail-button { width: 40px; height: 40px; flex-basis: 40px; }
  .killer-view--podium, .ranking-view { padding: 22px 16px; }
  .killer-view--podium .podium { width: min(100%,290px); }
  .rank-tabs { width: 100%; gap: 4px; }
  .rank-tab { flex: 0 0 auto; min-width: 39px; padding: 8px 10px; }
  .data-table { font-size: 14px; }
  .data-table thead th, .data-table tbody td { padding: 12px 8px; }
  .benefits-grid { grid-template-columns: 1fr; gap: 20px; }
  .benefit-card { padding: 22px; }
  .benefit-card__head { min-height: 120px; }
  .benefit-card__title { font-size: 25px; }
  .events-grid { margin: 0; padding: 0 0 12px; gap: 12px; }
  .event-card, .event-card:hover, .event-card:focus-within { flex: 0 0 min(82vw,290px); min-height: 385px; }
  .download-card { min-height: 475px; padding: 30px 25px; background-position: 60% center; }
  .download-card__body { max-width: 100%; }
  .download-card__title { font-size: 36px; }
  .download-card__cta { display: grid; grid-template-columns: 1fr; }
  .download-card__cta .btn { width: 100%; padding-inline: 14px; font-size: 12px; }
  .footer { padding: 28px 18px; }
  .footer__inner { gap: 22px; }
  .footer__nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .drakon-credit { position: relative; right: auto; bottom: auto; margin: 20px auto calc(20px + env(safe-area-inset-bottom)); }
  .mk-page, .ws-page, .pf-page, .cs-page { padding: 20px 18px 40px; }
  .mk-head, .ws-head { min-height: 260px; padding: 28px; background-position: 60% center; }
  .mk-head h1, .ws-head h1 { font-size: 43px; }
  .mk-head__hint, .ws-head__hint { font-size: 14px; max-width: 29ch; }
  .mk-tabs { display: flex; width: 100%; }
  .mk-tab { flex: 1; padding: 10px 12px; }
  .mk-grid, .ws-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .mk-card, .ws-item { min-height: 316px; padding: 15px 12px; }
  .mk-card__name, .ws-item__name { font-size: 16px; }
  .mk-card__icon-wrap, .ws-item__icon-wrap { height: 120px; margin-bottom: 14px; }
  .ws-sidebar { padding: 18px; }
  .ws-modal__card, .mk-modal__card, .admin-modal__card, .event-editor__card { max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .cs-hero { grid-template-columns: minmax(0,1fr); padding: 30px 22px; gap: 26px; background-position: 70% center; }
  .cs-hero__mark { width: 150px; height: 150px; margin-inline: auto; }
  .cs-hero__title { font-size: 39px; text-align: center; }
  .cs-hero__subtitle { text-align: center; }
  .cs-stat { min-width: 0; padding: 12px; }
  .cs-panel { padding: 24px 16px; }
  .cs-panel-title { font-size: 26px; }
  .cs-timer-frame { padding: 18px 12px; }
  .cs-timer-value { font-size: clamp(23px,6vw,28px); }
  .pf-hero { padding: 26px 20px; }
  .pf-name { font-size: 37px; }
  .svf-shell { padding: 36px 18px; }
  .svf-card { padding: 30px 23px; }
  .svf-title { font-size: 33px; }
}
@media (max-width: 380px) {
  .hero { padding-inline: 20px; }
  .hero__title-primary, .hero__title-secondary { font-size: 49px; }
  .hero__eyebrow { font-size: 9px; letter-spacing: .12em; }
  .realm-strip__group > span { padding: 12px; }
  .realm-strip strong { font-size: 23px; }
  .mk-grid, .ws-grid { grid-template-columns: 1fr; }
  .section-head h2 { font-size: 25px; }
  .benefit-card__title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scene img, .promo-box::before, .class-card__art-wrap { transition: none; animation: none; }
  .classes-grid, .events-grid { scroll-behavior: auto; }
}