/* Last Chaos Aurum (D-081): сайт как lc.mail.ru в марте 2010 года (те же картинки из веб-архива, наш логотип и
   наши надписи) плюс то, чего тогда не было: эффекты в шапке, анимации кнопок и прокрутки, живой статус,
   рейтинг без перезагрузки, два языка, телефон. Координаты шапки — как в оригинале (сцена 1001x444). */

:root {
  --bg: #edeae5;
  --text: #6c5145;
  --title: #5f2105;
  --link: #8c3519;
  --line: #d4b39e;
  --cream: #f7e0b4;
  --paper: #fefbef;
  --green: #3f6b1d;
  --font-title: "Ruslan Display", "Times New Roman", serif;
  --font-text: Tahoma, "PT Sans", Verdana, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
  scrollbar-color: #b28a66 var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.5 var(--font-text); overflow-x: clip; }
img { display: block; border: 0; }
::selection { background: #f3d9a4; color: var(--title); }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: #b8401f; }
:focus-visible { outline: 2px solid #d9a441; outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--paper); padding: 6px 12px; }
.skip:focus { top: 8px; }

/* Тонкая полоса сверху (у Mail.ru на этом месте была панель портала) */
.strip { background: #3a2417; color: var(--cream); font-size: 12px; }
.strip__inner { width: min(100% - 24px, 1001px); margin: 0 auto; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.strip__brand { display: inline-flex; align-items: center; gap: 7px; color: var(--cream); text-decoration: none; font-weight: bold; }
.strip__right { display: flex; align-items: center; gap: 14px; }
.strip__right > a { color: var(--cream); text-decoration: none; font-weight: bold; }
.strip__right > a:hover { color: #fff; text-decoration: underline; }
.lang { display: inline-flex; border: 1px solid rgb(247 224 180 / .35); border-radius: 3px; overflow: hidden; }
.lang a { padding: 1px 7px; font-size: 11px; font-weight: bold; color: var(--cream); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--cream); color: #3a2417; }

/* Шапка: сцена 1001x444 по центру, края арта по бокам; на узких экранах JS масштабирует (--k, --ox, --h) */
.hdr { --k: 1; --ox: -500.5px; --h: 444px; position: relative; height: var(--h); overflow: hidden; }
.hdr__stage { position: absolute; top: 0; left: 50%; width: 1001px; height: 444px; transform-origin: 0 0; transform: translateX(var(--ox)) scale(var(--k)); }
.hdr__stage > img { position: absolute; top: 0; max-width: none; }
.hdr__side--l { right: 100%; }
.hdr__side--r { left: 100%; }
.hdr__woman { left: 0; }
.hdr__logobg { left: 332px; }
.hdr__man { left: 674px; }
.hdr__logo { position: absolute; left: 378px; top: 4px; width: 250px; margin: 0; line-height: 0; z-index: 3; }
.hdr__logo img { width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgb(20 40 80 / .25)); }

/* Вырезанные герои (tools/heroes_cut.py): дышат, покачиваются, ветер, тянутся к курсору. Всё — от нижнего края
   (y = 350, под полосой меню), поэтому низ фигур стоит на месте и шва с неподвижной частью нет */
.hl { position: absolute; z-index: 1; pointer-events: none; }
.hl__lean, .hl__sway, .hl__img { transform-origin: 50% 100%; }
.hl__lean, .hl__sway { width: 100%; height: 100%; }
.hl__img { display: block; width: 100%; height: 100%; max-width: none; }
.hdr--b .hl--mage .hl__img, .hdr--c .hl--mage .hl__img { filter: url(#wind-mage); }
.hdr--b .hl--knight .hl__img, .hdr--c .hl--knight .hl__img { filter: url(#wind-knight); }
.hdr--c .hl__lean { transform: skewX(calc(var(--lean, 0) * var(--lean-k, 1.4deg))) scaleY(calc(1 + var(--near, 0) * .006)); transition: transform 1.2s var(--ease-out); }
.hl--knight { --lean-k: .8deg; }

/* Эффекты поверх картинки */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fx > * { position: absolute; }
.fx__sun {
  left: 45px; top: -140px; width: 340px; height: 340px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 252 235 / 0) 0deg 9deg, rgb(255 250 225 / .42) 11deg 13deg, rgb(255 252 235 / 0) 15deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%); mask: radial-gradient(circle, #000 12%, transparent 66%);
  mix-blend-mode: screen; opacity: .75;
}
.fx__sun::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 245 / .9), rgb(255 250 220 / 0) 70%); }
.fx__orb { left: 343px; top: 286px; width: 120px; height: 120px; }
.fx__orb-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgb(255 236 255 / .85), rgb(232 170 255 / .38) 34%, rgb(210 140 255 / 0) 70%); mix-blend-mode: screen; }
.fx__sparks { position: absolute; left: 60px; top: 60px; }
.fx__sparks i { position: absolute; left: 0; top: 0; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: #fff4ff; box-shadow: 0 0 6px 2px rgb(240 180 255 / .8); opacity: 0; }
.fx__blade { left: 703px; top: 282px; width: 36px; height: 68px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
.fx__blade span { position: absolute; left: 0; right: 0; top: -40px; height: 34px; background: linear-gradient(transparent, rgb(255 255 255 / .9), transparent); mix-blend-mode: screen; }
.fx__twinkle { left: 675px; top: 245px; width: 30px; height: 30px; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 2px, transparent 3px), linear-gradient(transparent 46%, rgb(255 255 255 / .9) 50%, transparent 54%), linear-gradient(90deg, transparent 46%, rgb(255 255 255 / .9) 50%, transparent 54%); }
.fx__armor { left: 772px; top: 96px; width: 200px; height: 254px; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 38%, rgb(255 255 255 / .32) 49%, transparent 60%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 40%, transparent 78%); mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 40%, transparent 78%); }
.fx__dust { inset: 0 0 94px 0; }
.fx__dust i { position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: #fffbe8; box-shadow: 0 0 4px 1px rgb(255 245 200 / .7); opacity: 0; }
.fx__light { inset: 0; opacity: 0; transition: opacity .6s; mix-blend-mode: soft-light;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), rgb(255 248 225 / .75), transparent 70%); }
.hdr:hover .fx__light { opacity: 1; }

/* Кнопки «Скачать игру» и «Регистрация»: картинки оригинала без надписей, текст наш */
.hbtn { position: absolute; top: 235px; height: 97px; display: block; text-decoration: none; z-index: 4; transition: filter .25s, transform .25s var(--ease-out); }
.hbtn--download { left: 332px; width: 342px; background: url("../img/mr/download-blank.jpg") no-repeat; }
.hbtn--register { left: 674px; width: 292px; background: url("../img/mr/register-blank.jpg") no-repeat; }
.hbtn__title { position: absolute; left: 28px; top: 26px; white-space: nowrap; font: 21px/1 var(--font-title); letter-spacing: .02em; color: #f5e2b3; text-shadow: 0 2px 0 #2e0f05, 0 0 10px rgb(0 0 0 / .45); transition: color .25s, text-shadow .35s; }
.hbtn--register .hbtn__title { left: 26px; }
.hbtn__sub { position: absolute; left: 32px; top: 58px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
.hbtn--register .hbtn__sub { left: 27px; }
:lang(en) .hbtn__title { font-size: 18px; top: 28px; }
.hbtn--register .hbtn__title { font-size: 19px; }
.hbtn::after {
  /* блик пробегает по табличке: сам по себе раз в несколько секунд и при наведении */
  content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 70px; border-radius: 3px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgb(255 236 190 / .55) 48%, rgb(255 255 255 / .75) 50%, rgb(255 236 190 / .55) 52%, transparent 62%) -120% 0 / 60% 100% no-repeat;
}
.hbtn--register::after { right: 10px; top: 15px; }
.hbtn:hover { filter: brightness(1.12) saturate(1.08); transform: translateY(-2px); }
.hbtn:hover .hbtn__title { color: #fff3cf; text-shadow: 0 2px 0 #2e0f05, 0 0 14px rgb(255 205 110 / .9); }
.hbtn:active { transform: translateY(1px); filter: brightness(.98); }

/* Меню на пергаментной полосе (у Mail.ru здесь был Flash) */
.menu { position: absolute; left: 0; top: 350px; width: 1001px; height: 94px; background: url("../img/mr/topmenubg.jpg") no-repeat; z-index: 3; }
.menu ul { position: absolute; left: 36px; right: 36px; top: 27px; height: 42px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-around; align-items: center; }
.menu a { position: relative; display: block; padding: 8px 6px 9px; font: 17px/1 var(--font-title); color: var(--title); text-decoration: none; text-shadow: 0 1px 0 rgb(255 255 255 / .55); transition: color .2s, text-shadow .3s, transform .25s var(--ease-out); }
.menu a::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; background: var(--link); transform: rotate(45deg) scale(0); transition: transform .3s var(--ease-out); }
.menu a:hover { color: #a3310f; text-shadow: 0 0 9px rgb(255 214 130 / .95), 0 1px 0 #fff; transform: translateY(-1px); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: rotate(45deg) scale(1); }
.menu a[aria-current="page"] { color: var(--link); }

.mcta, .mtabs { display: none; }

/* Основная часть: пергамент 931 px, по бокам продолжение арта */
.page { position: relative; width: 931px; margin: 0 auto; background: url("../img/mr/mainbg.jpg") repeat-y; }
.page::before { content: ""; position: absolute; left: 0; top: 0; width: 931px; height: 149px; background: url("../img/mr/maintop.jpg") no-repeat; }
.page__side { position: absolute; top: 0; max-width: none; }
.page__side--l { right: 100%; }
.page__side--r { left: 100%; }
.page__cols { position: relative; display: grid; grid-template-columns: 617px 314px; padding-top: 14px; min-height: 700px; }
.col-center { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding-bottom: 24px; }
.col-right { display: grid; gap: 16px; align-content: start; justify-items: center; padding-bottom: 24px; }

.promos { display: flex; gap: 14px; padding-left: 14px; }
.banner { position: relative; display: block; line-height: 0; text-decoration: none; color: #fff; transition: transform .3s var(--ease-out), filter .3s; }
.banner img { max-width: 100%; height: auto; }
.banner::after { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 12px; pointer-events: none; mix-blend-mode: screen; border-radius: 3px;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .5) 50%, transparent 60%) -120% 0 / 60% 100% no-repeat; }
a.banner:hover { transform: translateY(-3px); filter: brightness(1.08); }
a.banner:hover::after { animation: shine .9s var(--ease-out); }
.banner__title { position: absolute; left: 24px; top: 22px; max-width: 150px; font: 21px/1.08 var(--font-title); color: #fff6dc; text-shadow: 0 2px 0 rgb(40 15 5 / .8), 0 0 12px rgb(0 0 0 / .4); }
.banner__title--small { font-size: 16px; top: 38px; }
.banner__kind { position: absolute; left: 24px; top: 20px; font: bold 10px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #ffe7a8; text-shadow: 0 1px 2px #000; }
.banner__text { position: absolute; left: 24px; bottom: 22px; max-width: 150px; font: 11px/1.3 var(--font-text); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .8); }
.banner__timer { position: absolute; left: 24px; bottom: 20px; font: bold 13px/1 var(--font-text); color: #ffe7a8; text-shadow: 0 1px 2px #000; }
.banner--vote .banner__title { top: 20px; max-width: 130px; font-size: 19px; }
.banner--vote .banner__text { bottom: 20px; max-width: 120px; }

/* Бумажные блоки (фон — листы оригинала) */
.paper { position: relative; width: 610px; margin-left: 7px; padding: 18px 40px 46px 30px; min-height: 305px; background: url("../img/mr/newsbgbottom.jpg") no-repeat left bottom, url("../img/mr/newsbg.jpg") no-repeat left top; }
.paper--rank { min-height: 537px; padding-bottom: 20px; background: url("../img/mr/reitingbg.jpg") no-repeat left top; }
.paper--about { min-height: 0; }
.paper p { margin: 0 0 10px; }
.ptitle { display: flex; align-items: center; gap: 4px; height: 42px; margin: 0 0 8px; font: 21px/1 var(--font-title); color: var(--title); }
.ptitle::before { content: ""; flex: none; width: 24px; height: 42px; background: url("../img/mr/titleleaf.png") no-repeat center; }
.ptitle-row { display: flex; align-items: center; justify-content: space-between; }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--link); }
.more::before { content: ""; width: 9px; height: 6px; background: url("../img/mr/arrow.gif") no-repeat; }
.empty { color: var(--text); font-style: italic; }

.news { list-style: none; margin: 0; padding: 0; }
.news__row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.cat { flex: none; width: 86px; height: 16px; border-radius: 8px; font: bold 10px/16px var(--font-text); text-align: center; color: #fbe9c6; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), inset 0 -1px 0 rgb(0 0 0 / .3); }
.cat--update { background: #8c3519; }
.cat--event { background: #5b6e1d; }
.cat--news { background: #6b4a2a; }
.news__dash { flex: none; width: 10px; height: 1px; background: var(--text); align-self: center; }
.news__title { flex: 1; min-width: 0; color: var(--link); }
.news__date { flex: none; font-size: 11px; }

.allclasses { font-size: 12px; font-weight: bold; color: var(--link); padding: 2px 8px; border-radius: 8px; }
.allclasses[aria-current="true"] { background: #8c3519; color: #fbe9c6; text-decoration: none; }
.portraits { list-style: none; margin: 2px 0 10px; padding: 0; display: flex; justify-content: center; gap: 10px; }
.portrait { position: relative; display: block; width: 76px; height: 125px; text-decoration: none; transition: transform .3s var(--ease-out), filter .3s; }
.portrait img { position: absolute; inset: 0; }
.portrait__b { opacity: 0; transition: opacity .3s; }
.portrait__name { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: bold 10px/1 var(--font-text); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; }
.portrait:hover, .portrait[aria-current="true"] { transform: translateY(-4px); filter: drop-shadow(0 6px 8px rgb(95 33 5 / .35)); }
.portrait:hover .portrait__b, .portrait[aria-current="true"] .portrait__b { opacity: 1; }
.portrait[aria-current="true"] .portrait__name { color: #ffe39a; }
.ranks { transition: opacity .25s; }
.ranks.is-loading { opacity: .4; }
.ranks table { width: 100%; border-collapse: collapse; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 12px; }
.ranks th { padding: 3px 6px; color: var(--link); font-weight: bold; text-align: left; border-bottom: 1px solid var(--line); }
.ranks td { padding: 3px 6px; border-bottom: 1px dashed var(--line); }
.ranks td:first-child { width: 58px; text-align: center; }
.ranks__name { font-weight: bold; color: #3d2a20; }

/* Правая колонка */
.auth { position: relative; width: 314px; height: 149px; background: url("../img/mr/authbg.jpg") no-repeat; }
.auth__form { position: absolute; left: 24px; top: 34px; width: 266px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.auth__field { display: grid; gap: 2px; color: var(--cream); font-size: 11px; }
.auth__field input { width: 117px; height: 19px; padding: 2px 4px; border: 0; background: url("../img/mr/authloginbg.jpg") no-repeat; color: var(--link); font: 11px var(--font-text); }
.auth__field input:focus { outline: 1px solid #f0c060; }
.auth__row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--cream); }
.auth__row a { color: var(--cream); }
.auth__check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.auth__check input { width: 13px; height: 13px; margin: 0; accent-color: #8c3519; }
.auth__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.sbtn { display: flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border: 1px solid #c79a5b; border-radius: 3px; background: #4a1809; color: var(--cream); font: bold 10px/1 var(--font-text); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: background-color .2s, box-shadow .3s, color .2s; }
.sbtn:hover { background: #6a2410; color: #fff; box-shadow: 0 0 10px rgb(240 190 100 / .6); }
.sbtn--go { background: #7a2a10; }

.rblock { width: 291px; }
.rtitle { margin: 2px 0 8px; padding-bottom: 7px; font: 17px/1 var(--font-title); color: var(--title); background: url("../img/mr/rightline.gif") no-repeat left bottom; }
.srv { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: bold; }
.srv.is-up { color: var(--green); }
.srv.is-down { color: #8f8779; }
.srv__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.srv.is-up .srv__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.facts { width: 100%; border-collapse: collapse; }
.facts th { text-align: left; font-weight: normal; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.facts td { text-align: right; font-weight: bold; color: var(--link); padding: 3px 0; border-bottom: 1px dashed var(--line); }
.road { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; }
.road::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.road__stop { position: relative; padding: 3px 0 6px; }
.road__stop::before { content: ""; position: absolute; left: -16px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.road__stop.is-now::before { background: #8c3519; box-shadow: 0 0 0 3px rgb(140 53 25 / .2); }
.road__name { display: block; font: 15px/1.2 var(--font-title); color: var(--title); }
.road__note { font-size: 11px; }
.road__stop.is-now .road__note { color: var(--green); font-weight: bold; }

/* Подвал */
.foot__edge { width: 931px; height: 42px; margin: 0 auto; background: url("../img/mr/bottomcenter.jpg") no-repeat; }
.foot__inner { width: min(100% - 24px, 931px); margin: 0 auto; padding: 12px 20px 30px; display: grid; grid-template-columns: auto 1fr; gap: 10px 30px; align-items: center; font-size: 11px; }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--title); font: 16px/1 var(--font-title); text-decoration: none; }
.foot__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; }
.foot__nav a { color: var(--text); }
.foot__note { grid-column: 1 / -1; margin: 0; padding-top: 10px; color: #a8937f; background: url("../img/mr/copyline.gif") no-repeat left top; }

.paper--soon { min-height: 305px; }

/* Формы регистрации, входа и кабинета (D-082): тот же пергамент, поля — светлая бумага с пунктиром, как таблицы */
.paper--form { min-height: 305px; background: url("../img/mr/newsbgbottom.jpg") no-repeat left bottom, url("../img/mr/newsbg.jpg") no-repeat left top, url("../img/mr/newsbgmid.jpg") repeat-y left top; }
.note { margin: 0 0 10px; padding: 7px 10px; border: 1px dashed var(--line); border-radius: 3px; background: var(--paper); }
.note--err { border-color: #c77b5b; color: #9a2a0c; }
.note--ok { border-color: #8fae6a; color: var(--green); }
.form { display: grid; gap: 10px; max-width: 420px; }
.form__field { display: grid; gap: 3px; }
.form__field > span { font-weight: bold; color: var(--title); }
.form__field input { height: 26px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--text); font: 13px var(--font-text); }
.form__field input:focus { outline: 2px solid #f0c060; outline-offset: 0; border-color: #c79a5b; }
.form__field small { font-size: 11px; color: #8b7466; }
.form__check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.form__check input { accent-color: #8c3519; }
.form__note { margin: 0; font-size: 12px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; font-size: 12px; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sbtn--big { height: 30px; padding: 0 16px; font-size: 11px; }
.terms { max-height: 380px; overflow: auto; padding: 4px 14px 4px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); scrollbar-color: #c79a5b transparent; }
.terms:focus-visible { outline: 2px solid #f0c060; }
.terms h3 { margin: 14px 0 6px; font: 15px/1.2 var(--font-title); color: var(--title); }
.terms p { margin: 0 0 8px; }
.terms ul { margin: 0 0 8px; padding-left: 20px; }
.terms__ver { margin: 6px 0 12px; font-size: 11px; color: #8b7466; }
.terms__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.acc__hello { font-weight: bold; color: var(--title); }
.acc__title { margin: 18px 0 8px; font: 16px/1.2 var(--font-title); color: var(--title); }
.acc__facts td { text-align: right; }
.acc__small { margin: 4px 0 0; font-size: 11px; color: #8b7466; }
.acc__name { font-weight: bold; color: var(--link); }
.acc__vote { display: inline-flex; }
.auth--in .auth__in { position: absolute; left: 24px; top: 38px; width: 266px; display: grid; gap: 10px; color: var(--cream); }
.auth__who { margin: 0; font-size: 12px; }
.auth__who b { color: #fff; }
.auth--in .auth__actions form { display: contents; }
.auth--in .auth__actions button { width: 100%; }
.strip__out { display: inline; margin: 0; }
.strip__out button { padding: 0; border: 0; background: none; color: var(--cream); font: bold 12px var(--font-text); cursor: pointer; }
.strip__out button:hover { color: #fff; text-decoration: underline; }

/* Движение */
@keyframes shine { from { background-position: -120% 0; } to { background-position: 220% 0; } }
@keyframes idle-shine { 0%, 82% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes breathe { 0%, 100% { transform: scale(.86); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -110px)) scale(1.1); } }
@keyframes glint { 0%, 70% { top: -40px; } 86%, 100% { top: 80px; } }
@keyframes twinkle { 0%, 84% { opacity: 0; transform: scale(.3) rotate(0); } 90% { opacity: 1; transform: scale(1.1) rotate(25deg); } 100% { opacity: 0; transform: scale(.4) rotate(45deg); } }
@keyframes sheen { 0%, 60% { background-position: 110% 0; } 100% { background-position: -10% 0; } }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0); } 20%, 80% { opacity: var(--o, .8); } 100% { opacity: 0; transform: translate(var(--dx, 20px), var(--dy, -30px)); } }
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes hero-breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.003, 1.011); } }
@keyframes hero-sway { 0%, 100% { transform: skewX(calc(var(--sway, .35deg) * -1)); } 50% { transform: skewX(var(--sway, .35deg)); } }

@media (prefers-reduced-motion: no-preference) {
  .hdr--live .hl--mage .hl__img { animation: hero-breathe 4.4s ease-in-out infinite; }
  .hdr--live .hl--knight .hl__img { animation: hero-breathe 5.2s ease-in-out -1.7s infinite; }
  .hdr--live .hl--mage .hl__sway { --sway: .4deg; animation: hero-sway 7.5s ease-in-out infinite; }
  .hdr--live .hl--knight .hl__sway { --sway: .22deg; animation: hero-sway 9s ease-in-out -3s infinite; }
  .fx__sun { animation: spin 90s linear infinite; }
  .fx__orb-glow { animation: breathe 3.4s ease-in-out infinite; }
  .fx__sparks i { animation: spark var(--dur, 2.6s) ease-out var(--delay, 0s) infinite; }
  .fx__blade span { animation: glint 6s ease-in-out infinite; }
  .fx__twinkle { animation: twinkle 6s ease-out infinite; }
  .fx__armor { animation: sheen 9s ease-in-out 1.5s infinite; }
  .fx__dust i { animation: mote var(--dur, 9s) ease-in-out var(--delay, 0s) infinite; }
  .hbtn::after { animation: idle-shine 7s ease-in-out infinite; }
  .hbtn--register::after { animation-delay: 3.5s; }
  .hbtn:hover::after { animation: shine .8s var(--ease-out); }
  .srv.is-up .srv__dot::after { animation: ping 2s ease-out infinite; }
  .hdr__logo img { animation: logo-in 1.2s var(--ease-out) both; }
  @keyframes logo-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }

  /* блоки разворачиваются, как свиток, когда доходят до экрана */
  .js [data-reveal] { transition: clip-path 1s var(--ease-out), transform .9s var(--ease-out), opacity .6s ease; }
  .js [data-reveal].pre { clip-path: inset(0 0 100% 0); transform: translateY(18px); opacity: 0; }
  .js [data-reveal].in { clip-path: inset(0 0 0 0); }
  .js .news__row { transition: opacity .5s ease, transform .6s var(--ease-out); transition-delay: calc(.3s + var(--i, 0) * 70ms); }
  .js .pre .news__row { opacity: 0; transform: translateX(-14px); }
  .js .portraits li { transition: opacity .5s ease, transform .7s var(--ease-out); transition-delay: calc(.25s + var(--i, 0) * 80ms); }
  .js .pre .portraits li { opacity: 0; transform: translateY(24px) scale(.9); }
}

/* Узкий экран: пергамент на всю ширину, без боковых картинок */
@media (max-width: 960px) {
  .page { width: auto; margin: 0 8px; background: #f6efe1 url("../img/mr/maintop.jpg") no-repeat center top; border: 1px solid #dcc6a4; border-top: 0; }
  .page::before, .page__side { display: none; }
  .page__cols { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 0; min-height: 0; }
  .col-right { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); justify-items: center; align-items: start; }
  .paper, .paper--rank { width: auto; margin: 0; min-height: 0; padding: 14px 16px 16px; background: #fffaf1; border: 1px solid #e6d3b3; border-radius: 3px; box-shadow: 0 2px 6px rgb(95 33 5 / .08); }
  .promos { padding: 0; justify-content: center; flex-wrap: wrap; }
  .foot__edge { display: none; }
  .foot__inner { border-top: 1px solid #dcc6a4; }
}

/* Телефон: шапка крупнее по центру (логотип и герои), кнопки и меню отдельно под ней */
@media (max-width: 759px) {
  body { font-size: 14px; }
  .hdr .hbtn, .menu { display: none; }
  .mcta { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 8px 4px; background: var(--bg); }
  .hbtn--static { position: relative; top: auto; left: auto; flex: none; }
  .mtabs { display: block; position: sticky; top: 0; z-index: 20; background: #efe0bd; border-block: 2px solid #8c5a2b; box-shadow: 0 3px 8px rgb(60 30 10 / .2); }
  .mtabs ul { display: flex; gap: 2px; margin: 0; padding: 0 6px; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .mtabs ul::-webkit-scrollbar { display: none; }
  .mtabs li { flex: none; scroll-snap-align: start; }
  .mtabs a { display: block; padding: 11px 12px; font: 15px/1 var(--font-title); color: var(--title); text-decoration: none; }
  .mtabs a[aria-current="page"] { color: var(--link); box-shadow: inset 0 -3px 0 var(--link); }
  .strip__brand span { display: none; }
  .news__row { flex-wrap: wrap; row-gap: 2px; }
  .news__title { flex-basis: 100%; order: 3; }
  .news__dash { display: none; }
  .news__date { margin-left: auto; }
  .portraits { flex-wrap: wrap; gap: 8px; }
  .ranks { overflow-x: auto; }
  .ranks table { min-width: 420px; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__nav { justify-content: flex-start; }
}
@media (max-width: 360px) {
  .hbtn--static { transform: scale(.9); }
}

/* Страница выбора анимации героев (/demo/heroes) */
.page-demo { padding-bottom: 40px; }
.winddefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.demo { margin: 0 0 28px; }
.demo__title { width: min(100% - 24px, 1001px); margin: 22px auto 2px; font: 22px/1.2 var(--font-title); color: var(--title); }
.demo__title b { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 8px; border-radius: 50%; background: var(--link); color: #fbe9c6; font-weight: 400; }
.demo__text { width: min(100% - 24px, 1001px); margin: 0 auto 10px; }

/* ===== Страница выбора вариантов (/demo/pages) и страницы новостей, рейтинга, блок замков (выбор 2026-09-30) ===== */
.has-demo { padding-bottom: 130px; }
.demobar { position: fixed; left: 50%; bottom: 12px; z-index: 50; transform: translateX(-50%); width: min(100% - 24px, 900px); display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: rgb(58 36 23 / .95); color: var(--cream); box-shadow: 0 6px 22px rgb(0 0 0 / .35); font-size: 12px; }
.demobar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.demobar a { padding: 4px 9px; border-radius: 5px; color: var(--cream); text-decoration: none; }
.demobar a:hover { background: rgb(255 255 255 / .12); }
.demobar a[aria-current="true"] { background: var(--cream); color: #3a2417; font-weight: bold; }
.demobar__sep { flex: 1; }
.demobar__v b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 3px; border-radius: 50%; background: #8c3519; color: #fbe9c6; font-size: 11px; }
.demobar__text { margin: 0; color: #e9d2a8; }

/* новости */
.nmeta { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 11px; }
.ndraft { display: inline-block; padding: 0 6px; border-radius: 8px; background: #ddd2c2; color: #6f6254; font: 10px/16px var(--font-text); vertical-align: middle; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.tabs a { padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: bold; color: var(--link); text-decoration: none; border: 1px solid transparent; }
.tabs a:hover { border-color: var(--line); }
.tabs a[aria-current="true"] { background: #8c3519; color: #fbe9c6; }
.ncards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ncard { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 4px; background: var(--paper); transition: box-shadow .3s, transform .3s var(--ease-out); }
.ncard:hover { box-shadow: 0 4px 12px rgb(95 33 5 / .12); transform: translateY(-2px); }
.ncard__title { margin: 2px 0 4px; font: 15px/1.25 var(--font-title); color: var(--title); }
.ncard__more > summary { cursor: pointer; list-style: none; font-size: 12px; }
.ncard__more > summary::-webkit-details-marker { display: none; }
.ncard__more > summary b { color: var(--link); white-space: nowrap; }
.ncard__more[open] .ncard__short, .ncard__more[open] > summary b { display: none; }
.ncard__more p { margin: 0; font-size: 12px; }

/* рейтинг */
.rsearch { display: flex; gap: 8px; margin: 0 0 10px; }
.rsearch input { flex: 1; max-width: 240px; height: 24px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--text); font: 12px var(--font-text); }
.rsearch input:focus { outline: 2px solid #f0c060; }
.place { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; font-weight: bold; }
.place--1 { background: linear-gradient(#ffe58a, #d19a1d); color: #4a2a00; box-shadow: 0 1px 3px rgb(120 70 0 / .4); }
.place--2 { background: linear-gradient(#f4f4f4, #a9a9a9); color: #333; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.place--3 { background: linear-gradient(#f1bd8a, #a8622a); color: #3a1c05; box-shadow: 0 1px 3px rgb(100 50 10 / .4); }
.pager { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; font-size: 12px; }
.pager a { min-width: 26px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; text-align: center; color: var(--link); text-decoration: none; background: var(--paper); }
.pager a[aria-current="page"] { background: #8c3519; border-color: #8c3519; color: #fbe9c6; }

/* замки */
.facts--castles td { text-align: right; }
.facts--castles td small { display: block; font-weight: normal; font-size: 11px; color: var(--text); }
.facts__note { margin: 6px 0 0; font-size: 11px; color: #8b7466; }
@media (max-width: 759px) {
  .ncards { grid-template-columns: minmax(0, 1fr); }
  .rsearch input { max-width: none; }
  .demobar { font-size: 11px; }
}

/* ===== Маркетплейс персонажей и меню с восемью пунктами (страница выбора) ===== */
/* меню шире на 60 px с каждой стороны (выбор владельца 2026-09-30): края с прозрачностью ← tools/menu_caps.py */
.menu::before, .menu::after { content: ""; position: absolute; top: 0; width: 120px; height: 94px; pointer-events: none; }
.menu::before { left: -60px; background: url("../img/mr/menu-ext-l.png") no-repeat; }
.menu::after { left: 941px; background: url("../img/mr/menu-ext-r.png") no-repeat; }
.menu ul { left: -24px; right: -24px; z-index: 1; }
.mintro { margin: 0 0 10px; }
.price { display: inline-flex; align-items: center; gap: 4px; font-weight: bold; color: var(--title); white-space: nowrap; }
.price img { filter: drop-shadow(0 1px 1px rgb(60 20 5 / .4)); }
.goods { list-style: none; margin: 4px 0 6px; padding: 0; font-size: 11px; }
.goods li { padding: 1px 0; border-bottom: 1px dashed var(--line); }
.goods b { color: var(--link); }
.mcard__name { margin: 0; font: 16px/1.2 var(--font-title); color: var(--title); }
.mcard__cls { margin: 0; font-size: 12px; }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.msplit { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
.mlist { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; border: 1px dashed var(--line); border-radius: 4px; background: var(--paper); }
.mlist a { display: grid; grid-template-columns: 1fr auto; gap: 0 6px; padding: 5px 8px; border-bottom: 1px dashed var(--line); text-decoration: none; color: var(--text); font-size: 12px; }
.mlist a span:nth-child(2) { font-size: 11px; }
.mlist a span.num { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: bold; color: var(--title); }
.mlist a[aria-current="true"] { background: #8c3519; color: #fbe9c6; }
.mlist a[aria-current="true"] span.num, .mlist a[aria-current="true"] b { color: #fff; }
.mhero { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 4px; background: var(--paper); }
.mhero__top { display: flex; gap: 12px; }
.mslots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 8px 0; }
.mslot { display: grid; justify-items: center; padding: 4px 2px; border: 1px solid #c79a5b; border-radius: 3px; background: linear-gradient(#4a1809, #2c0e05); color: #ffe39a; }
.mslot small { font-size: 9px; color: #e9c98f; }
.mrules { margin: 14px 0 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 4px; background: var(--paper); font-size: 12px; }
.mrules summary { cursor: pointer; font: 14px/1.2 var(--font-title); color: var(--title); }
.mrules ol { margin: 8px 0 0; padding-left: 20px; }
.msell__form { display: grid; gap: 8px; max-width: 420px; }
.msell__form select { height: 26px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--text); font: 12px var(--font-text); }
.msell__fee { margin: 0; font-size: 12px; }
@media (max-width: 759px) {
}
.mfilter { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr auto; gap: 8px; align-items: end; margin: 0 0 12px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 4px; background: var(--paper); font-size: 12px; }
.mfilter label { display: grid; gap: 2px; }
.mfilter label > span:first-child { font-weight: bold; color: var(--title); }
.mfilter select, .mfilter input { height: 24px; min-width: 0; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--text); font: 12px var(--font-text); }
.mfilter__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mfilter__go { display: flex; align-items: center; gap: 8px; }
.mslot em { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 9px var(--font-text); color: #f0dcb8; }
.mbuy { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.mbuy__form { display: grid; gap: 6px; }
.price--big { font-size: 16px; }