/* ==========================================================
   Тема «Классика 2005» — вёрстка на таблицах, всё нарисовано CSS.
   ========================================================== */

:root {
  --bg: #0a0705;
  --stone: #1b140d;
  --stone-2: #241a10;
  --parch: #e9dcbc;
  --gold: #d6a945;
  --gold-hi: #f6dc8c;
  --gold-lo: #6e5121;
  --blood: #5c120c;
  --fel: #6dff4a;
  --text: #d9ccb0;
  --muted: #9b8b6c;
  --link: #f0c24b;
}

/* Отдельный неподвижный слой: без background-attachment: fixed,
   чтобы Safari не перерисовывал фон вместе с прокруткой страницы. */
html {
  background: #07050a;
  min-height: 100%;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background:
    radial-gradient(ellipse 900px 420px at 50% -60px, rgba(109, 255, 74, .12), transparent 70%),
    /* затемнение низа картинки: тот же размер, что у bg.jpg (1915x821), плавно уходит в цвет фона */
    linear-gradient(to bottom, transparent 50%, rgba(7, 5, 10, .55) 75%, #07050a 99%)
      center top / max(100vw, 1500px) calc(max(100vw, 1500px) * 0.4287) no-repeat,
    url(/themes/classic/bg.jpg?v=todtx7) center top / max(100vw, 1500px) auto no-repeat,
    #07050a;
}
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0 0 30px;
  color: var(--text);
  font: 12px/1.5 Verdana, Tahoma, Arial, sans-serif;
  background: transparent;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: #fff2c0; text-decoration: underline; }
b.gold, .gold { color: var(--gold-hi); }
.small { font-size: 11px; color: var(--muted); }
.center { text-align: center; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; color: var(--gold-hi); font-weight: 700; margin: 6px 0 8px; }
h3 { font-size: 15px; border-bottom: 1px solid var(--gold-lo); padding-bottom: 2px; }
p { margin: 0 0 9px; }
ul { margin: 4px 0 10px 22px; padding: 0; }

/* ---------- Каркас ---------- */
#page {
  margin-top: 14px;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px var(--gold-lo), 0 0 0 4px #000, 0 0 0 5px #3a2a12, 0 0 40px rgba(0,0,0,.9);
  background: #0e0a07;
}
td.gap { background: #0e0a07; font-size: 1px; }

td.topbar {
  background: linear-gradient(#2a1d10, #140e08);
  border-bottom: 1px solid #000;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 10px;
}
td.topbar b { color: var(--gold-hi); }

/* ---------- Шапка ---------- */
td.header {
  height: 180px;
  padding: 0;
  background: url(/themes/classic/header.jpg?v=tocyif) no-repeat right top, #070905;
  border-top: 1px solid #3a2a12;
  border-bottom: 3px double var(--gold-lo);
  box-shadow: inset 0 0 40px rgba(0,0,0,.8);
}
.fel { color: #bfff9f; text-shadow: 0 0 6px rgba(109,255,74,.6); }
.h-pre {
  font-family: Cinzel, Georgia, serif;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #b9a06a;
  font-size: 13px;
}
.h-title a {
  font-family: 'Cinzel Decorative', Cinzel, Georgia, serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(#fff6c8 0%, #f2cf6b 38%, #b07a22 62%, #f4d27a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(109,255,74,.55)) drop-shadow(0 2px 0 #000);
}
.h-sub { margin-top: 4px; color: #9fd28a; font-size: 12px; letter-spacing: 1px; text-shadow: 0 0 6px rgba(109,255,74,.5); }

/* ---------- Анимация Тёмного портала в шапке ----------
   Координаты привязаны к header.jpg (978×180, прижата вправо):
   проём портала — x 700..764, y 86..165; центр вихря — (732.5, 121.5). */
.hwrap { position: relative; height: 180px; }
.pfx {
  position: absolute;
  right: 214px; top: 86px;
  width: 64px; height: 79px;
  overflow: hidden;
  border-radius: 3px;
  pointer-events: none;
  /* внизу шапка затемнена — гасим анимацию так же */
  -webkit-mask-image: linear-gradient(#000 0, #000 58px, rgba(0,0,0,.35) 79px);
  mask-image: linear-gradient(#000 0, #000 58px, rgba(0,0,0,.35) 79px);
}
.pfx-swirl {
  position: absolute;
  left: 32.5px; top: 35.5px;
  width: 63px; height: 63px;
  margin: -31.5px 0 0 -31.5px;
  background: url(/themes/classic/portal-swirl.png?v=tocylq) center / 100% 100% no-repeat;
  animation: pfx-spin 8s linear infinite;
  will-change: transform;
}
.pfx-swirl2 {
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  opacity: .45;
  mix-blend-mode: screen;
  animation: pfx-spin-back 15s linear infinite;
}
.pfx-flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(200,255,150,.55), rgba(109,255,74,.15) 55%, transparent 75%);
  mix-blend-mode: screen;
  animation: pfx-pulse 3.2s ease-in-out infinite;
}
.pfx-aura {
  position: absolute;
  right: 176px; top: 58px;
  width: 140px; height: 130px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(109,255,74,.38), rgba(109,255,74,.12) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: pfx-aura 3.2s ease-in-out infinite;
}
@keyframes pfx-spin { to { transform: rotate(360deg); } }
@keyframes pfx-spin-back { from { transform: rotate(0deg) scale(1.05); } to { transform: rotate(-360deg) scale(1.05); } }
@keyframes pfx-pulse { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
@keyframes pfx-aura { 0%, 100% { opacity: .35; transform: scale(.95); } 50% { opacity: .9; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .pfx-swirl, .pfx-flash, .pfx-aura { animation: none; }
}

/* Мини-табло в шапке */
table.hstat {
  border: 1px solid #000;
  box-shadow: 0 0 0 1px var(--gold-lo);
  background: linear-gradient(#1a130b, #0c0905);
  width: 140px;
}
td.hstat-cap { text-align: center; font: 700 10px Cinzel, Georgia, serif; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding: 5px 0 1px; }
td.hstat-val { font: 700 13px Verdana, sans-serif; color: var(--gold-hi); padding: 0 8px 4px 0; text-align: left; }
td.hstat-num { text-align: center; font: 900 26px Cinzel, Georgia, serif; color: #bfff9f; text-shadow: 0 0 8px rgba(109,255,74,.7); padding-bottom: 6px; }
.led { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 6px 4px 10px; vertical-align: middle; border: 1px solid #000; }
.led-sm { width: 8px; height: 8px; margin: 0 2px 1px 0; }
.led-on { background: radial-gradient(circle at 35% 35%, #eaffd8, #3fd11c 60%, #145a08); box-shadow: 0 0 8px #6dff4a; }
.led-off { background: radial-gradient(circle at 35% 35%, #ffd0c8, #c0281a 60%, #4a0905); box-shadow: 0 0 8px #ff3a2a; }

/* ---------- Кнопки навигации ---------- */
/* Полоса — сгенерированная картинка (tools/make_navbar.py), 2x:
   бронзовые торцы с самоцветами 36/38px по краям, середина с заклёпками повторяется.
   Железная полоса с рунами (tools/make_navbar_iron.py): navbar-iron.png,
   параметры: height 58px, padding 14px 0, border-width 0 27.5px 0 26.5px, slice 0 55 0 53. */
td.navbar {
  background: none;
  height: 55px;
  box-sizing: border-box;
  padding: 12px 0 13px;
  border-style: solid;
  border-width: 0 38px 0 36px;
  border-image: url(/themes/classic/navbar-bronze.png?v=todv4h) 0 76 0 72 fill / 0 38px 0 36px round;
}
/* Кнопки — сгенерированная картинка (tools/make_buttons.py), 2x: 9-slice,
   торцы 9px (железная рамка с заклёпками и скосами), середина тянется */
a.navbtn, input.btn, .cbox input[type=submit] {
  display: inline-block;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  margin: 0 2px;
  padding: 0 9px;
  font: 700 13px/30px Cinzel, Georgia, serif;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--gold-hi);
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.8);
  background: none;
  border-style: solid;
  border-width: 0 9px;
  border-image: url(/themes/classic/btn-normal.png?v=todux6) 0 18 fill / 0 9px stretch;
  cursor: pointer;
}
a.navbtn:hover, input.btn:hover, .cbox input[type=submit]:hover {
  text-decoration: none;
  color: #fff;
  border-image-source: url(/themes/classic/btn-hover.png?v=todux6);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255,190,80,.8);
}
/* Предзагрузка состояний кнопок, чтобы не мигали при первом наведении */
body::after {
  content: url(/themes/classic/btn-hover.png?v=todux6) url(/themes/classic/btn-active.png?v=todux6);
  position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; opacity: 0;
}
a.navbtn-on, a.navbtn-on:hover {
  color: #ffe9a8;
  border-image-source: url(/themes/classic/btn-active.png?v=todux6);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(109,255,74,.75);
  /* зелёное свечение Скверны по контуру кнопки (drop-shadow повторяет форму с прозрачностью) */
  filter: drop-shadow(0 0 3px rgba(109,255,74,.9)) drop-shadow(0 0 7px rgba(109,255,74,.45));
}

/* ---------- Бегущая строка ---------- */
td.ticker {
  background: linear-gradient(90deg, #12052a, #000 30%, #000 70%, #12052a);
  border-bottom: 1px solid var(--gold-lo);
  color: #cbb98f;
  font-size: 11px;
  padding: 3px 0;
}
td.ticker b { color: #bfff9f; }
td.ticker marquee { display: block; width: 100%; overflow: hidden; }
#page { overflow: hidden; }

/* ---------- Колонки ---------- */
td.col-side { padding: 0 7px; }
td.sbox-head { white-space: nowrap; }
td.sbox-body .code { white-space: nowrap; font-size: 10px; padding: 4px 4px; }
td.col-main { padding: 0 4px; }

/* Боковые блоки */
table.sbox { box-shadow: 0 3px 12px rgba(0,0,0,.7); }
/* Тонкая кованая рамка боковых блоков (из текстуры оригинального шаблона) */
td.sf-tl, td.sf-tr, td.sf-bl, td.sf-br { width: 13px; height: 13px; padding: 0; font-size: 1px; }
td.sf-tl { background: url(/themes/classic/sframe-tl.png?v=tocz1g) no-repeat; } td.sf-tr { background: url(/themes/classic/sframe-tr.png?v=tocz1g) no-repeat; }
td.sf-bl { background: url(/themes/classic/sframe-bl.png?v=tocz1g) no-repeat; } td.sf-br { background: url(/themes/classic/sframe-br.png?v=tocz1g) no-repeat; }
td.sf-t { height: 13px; background: url(/themes/classic/sframe-t.png?v=tocxyy) repeat-x; font-size: 1px; }
td.sf-b { height: 13px; background: url(/themes/classic/sframe-b.png?v=tocxyy) repeat-x; font-size: 1px; }
td.sf-l { width: 13px; background: url(/themes/classic/sframe-l.png?v=tocxyy) repeat-y; }
td.sf-r { width: 13px; background: url(/themes/classic/sframe-r.png?v=tocxyy) repeat-y; }
td.sf-c { background: linear-gradient(var(--stone-2), var(--stone)); padding: 0; }
td.sbox-head {
  font: 700 12px Cinzel, Georgia, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-hi);
  padding: 5px 8px 4px;
  background: linear-gradient(#24451a, #0b1a08);
  border-bottom: 1px solid var(--gold-lo);
  text-shadow: 0 1px 0 #000;
}
.gem { color: var(--fel); text-shadow: 0 0 6px var(--fel); font-size: 10px; }
td.sbox-body { padding: 8px; font-size: 11px; }

table.menu td { border-bottom: 1px dotted #3a2a14; padding: 3px 2px; }
table.menu td a { display: block; color: #e2cf9f; }
table.menu td a:hover { color: #fff; text-decoration: none; background: rgba(214,169,69,.12); }
table.menu td.menu-on a { color: var(--fel); }

table.kv td { border-bottom: 1px dotted #3a2a14; font-size: 11px; }

.code {
  margin: 5px 0;
  padding: 4px 6px;
  font: 11px 'Courier New', monospace;
  color: #bfff9f;
  background: #000;
  border: 1px inset #3a2a12;
}

.counter { text-align: center; margin-top: 4px; }
.counter span {
  display: inline-block;
  width: 15px; height: 21px; margin: 0 1px;
  font: 700 15px/21px 'Courier New', monospace;
  color: #bfff9f;
  background: linear-gradient(#111, #000 50%, #0a0a0a 51%, #000);
  border: 1px solid #333;
  text-shadow: 0 0 5px var(--fel);
}

/* Формы */
input.inp, .cbox input[type=text], .cbox input[type=password] {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 4px;
  font: 12px Verdana, sans-serif;
  color: #f3e7c6;
  background: #0b0805;
  border: 1px solid;
  border-color: #000 #6e5121 #6e5121 #000;
}
.cbox input[type=text], .cbox input[type=password] { width: 260px; }
input.btn, .cbox input[type=submit] { padding: 0 10px; font-size: 12px; }

/* ---------- Центральные рамки (свиток) ---------- */
table.cbox { margin-bottom: 12px; }
/* Кованая рамка — текстура из оригинального шаблона Burning_Crusade */
td.cbox-tl, td.cbox-tr, td.cbox-bl, td.cbox-br { width: 26px; height: 26px; padding: 0; }
td.cbox-tl { background: url(/themes/classic/frame-tl.png?v=tocz1g) no-repeat; } td.cbox-tr { background: url(/themes/classic/frame-tr.png?v=tocz1g) no-repeat; }
td.cbox-bl { background: url(/themes/classic/frame-bl.png?v=tocz1g) no-repeat; } td.cbox-br { background: url(/themes/classic/frame-br.png?v=tocz1g) no-repeat; }
td.cbox-t {
  height: 26px;
  padding: 0 10px;
  font: 700 15px/26px Cinzel, Georgia, serif;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--gold-hi);
  text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 8px rgba(214,169,69,.45);
  background: url(/themes/classic/frame-t.png?v=tocxv2) repeat-x;
}
span.cbox-title {
  display: inline-block;
  padding: 0 14px;
  line-height: 20px;
  background: linear-gradient(#24451a, #0b1a08);
  border: 1px solid #b58b3a;
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.7);
}
td.cbox-b { height: 26px; background: url(/themes/classic/frame-b.png?v=tocxv2) repeat-x; }
td.cbox-l { width: 26px; background: url(/themes/classic/frame-l.png?v=tocxv2) repeat-y; }
td.cbox-r { width: 26px; background: url(/themes/classic/frame-r.png?v=tocxv2) repeat-y; }
td.cbox-c {
  padding: 14px 16px;
  color: #2b1d0c;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(110,70,20,.35), transparent 60%),
    linear-gradient(#efe2c0, #e3d1a6);
  box-shadow: inset 0 0 30px rgba(90,55,15,.45);
}
td.cbox-c a { color: #1f5a10; font-weight: bold; }
td.cbox-c a:hover { color: #3c8f1c; }
td.cbox-c h3 { color: #2a4a14; border-bottom-color: #b89a5c; }
td.cbox-c b { color: #3a1408; }
td.cbox-c .small { color: #6b5532; }
td.cbox-c .code, td.cbox-c pre { background: #2a1d0c; color: #f3e7c6; border: 1px solid #000; }
td.cbox-c label { display: block; margin-top: 10px; font-weight: bold; color: #3a1408; }

/* Таблицы данных внутри свитка */
table.cgrid-frame { border: 1px solid #6e5121; box-shadow: 0 0 0 1px #000; margin: 4px 0 10px; }
table.cgrid-frame table { width: 100%; border-collapse: collapse; }
td.rankingHeader {
  font: 700 12px Cinzel, Georgia, serif;
  color: var(--gold-hi);
  background: linear-gradient(#24451a, #0b1a08);
  padding: 4px 6px;
  border: 1px solid #000;
  text-shadow: 0 1px 0 #000;
}
td.serverStatus1, td.serverStatus2 { padding: 3px 6px; border: 1px solid #c9b383; color: #2b1d0c; }
td.serverStatus1 { background: #f3e8ca; }
td.serverStatus2 { background: #e6d6ab; }
td.serverStatus1 b, td.serverStatus2 b { color: #3a1408 !important; }

/* Сообщения */
.msg { margin: 0 0 10px; padding: 8px 12px; font-weight: bold; border: 1px solid #000; box-shadow: 0 0 0 1px var(--gold-lo); }
.msg-success { background: linear-gradient(#1f4a0e, #112a06); color: #dfffc8; }
.msg-error { background: linear-gradient(#5a1a12, #2a0805); color: #ffd7cc; }
div.success, div.error, div.notice { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid; }
div.success { background: #e5f2d6; border-color: #9fc77a; color: #234303; }
div.error { background: #fbd8d7; border-color: #dcbfb4; color: #6a0d0b; }

/* Хлебные крошки */
table.crumbs td { padding: 4px 8px 8px; font-size: 11px; color: var(--muted); }
table.crumbs b { color: var(--gold-hi); }

/* Новости */
table.news { margin-bottom: 12px; }
td.news-date {
  width: 64px; text-align: center; vertical-align: top;
  padding: 8px 4px;
  background: linear-gradient(#2a1d0c, #120c06);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px var(--gold-lo);
  font: 700 22px/1 Cinzel, Georgia, serif;
  color: var(--gold-hi);
}
td.news-date small { display: block; font: 10px Verdana, sans-serif; color: var(--muted); margin-top: 4px; }
td.news-body { padding-left: 10px; vertical-align: top; }
.news-title { font: 700 17px Cinzel, Georgia, serif; color: #24440f; }
.news-meta { font-size: 11px; color: #6b5532; margin-bottom: 6px; border-bottom: 1px solid #b89a5c; padding-bottom: 3px; }

/* ---------- Подвал ---------- */
td.footer {
  background: linear-gradient(#1a1209, #0a0705);
  border-top: 3px double var(--gold-lo);
  padding: 10px 0 14px;
  text-align: center;
}
span.b88 {
  display: inline-block;
  width: 86px; height: 29px;
  border: 1px solid;
  border-color: #ddd #333 #333 #ddd;
  text-align: left;
  overflow: hidden;
  font: 9px/1 Verdana, sans-serif;
  vertical-align: middle;
}
span.b88 b { display: block; padding: 4px 4px 1px; font: 700 11px Verdana, sans-serif; }
span.b88 i { display: block; padding: 0 4px; font-style: normal; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.b88-a { background: linear-gradient(90deg, #5a1a12, #b0401f); color: #ffe6b0; }
.b88-b { background: linear-gradient(90deg, #1e3a12, #4f9a2e); color: #eaffd8; }
.b88-c { background: linear-gradient(90deg, #2a1d0c, #b58b3a); color: #fff2c0; }
.b88-d { background: linear-gradient(90deg, #102a4a, #3a78c8); color: #e8f2ff; }
.b88-e { background: repeating-linear-gradient(45deg, #333 0 4px, #222 4px 8px); color: #ffde5a; }
.copy { margin-top: 8px; color: #7b6c50; font-size: 10px; }