:root{
  --bg: #2b2b2b;
  --bg-panel: #272727;
  --bg-panel-alt: #333333;
  --border-gold: #D2A900;
  --text-main: #e7e7e7;
  --text-dim: #9a9a9a;
  --accent1: #ff5d08;   /* rgb(255,93,8) - primary article accent */
  --accent2: #ff9231;   /* rgb(255,146,49) - secondary accent */
  --accent-label: #dd6900;
  --accent-strong: #ff5c0f;
  --gold: #CC9900;
  --link: #dd6900;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--text-main);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Header ---------- */
.site-header{
  background: linear-gradient(180deg, #3a3a3a 0%, #2b2b2b 100%);
}
.header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px;
  text-align: center;
}
.logo-img{
  max-width: 100%;
  height: auto;
  display:block;
  margin: 0 auto;
  border: 1px solid var(--border-gold);
  border-radius: 8px;
}
.logo-text{ padding: 20px 0; }
.logo-black{ font-family:'Cinzel',serif; font-weight:700; font-size: 42px; color:#e7e7ea; letter-spacing:1px; }
.logo-sun{ font-family:'Cinzel',serif; font-weight:700; font-size: 42px; color: var(--accent1); letter-spacing:1px; }
.logo-sub{ display:block; font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  text-align:center;
  max-width: 1160px;
  margin: 12px auto 0;
  padding: 8px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
}
.breadcrumb a{ color: var(--accent2); }

/* ---------- Layout ---------- */
.layout{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 20px;
  padding: 20px;
  align-items: start;
}
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
}

.sidebar .block{
  background: var(--bg-panel);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.sidebar .block p{ margin: 6px 0; }
.sidebar h2{
  font-family:'Cinzel',serif;
  font-size: 15px;
  color: var(--gold);
  margin: 0 0 10px 0;
  border-bottom: 1px solid #2a2c34;
  padding-bottom: 6px;
}
.label{ color: var(--accent-label); font-weight:600; }
.accent2{ color: var(--gold); }

.status-badge{
  display:inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight:600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.status-unknown{ background:#2a2c34; color: var(--text-dim); border:1px solid #3a3d47; }

.realmlist{ color:#ff4444 !important; font-weight:600; }

/* ---------- Login form ---------- */
.login-form .form-row{ margin-bottom: 10px; }
.login-form label{ display:block; font-size:12.5px; margin-bottom:3px; color: var(--text-dim); }
.login-form .req{ color: var(--accent1); }
.login-form input{
  width:100%;
  background:#0f1015;
  border:1px solid #2c2e37;
  border-radius:3px;
  color: var(--text-main);
  padding: 6px 8px;
  font-size: 13px;
}
.login-form .btn{
  margin-top: 8px;
  background: var(--accent-label);
  color:#111;
  border:none;
  border-radius:3px;
  padding: 7px 14px;
  font-weight:600;
  cursor:pointer;
}
.login-form .btn:hover{ background: var(--accent2); }
.small-link{ font-size:12px; margin-top:8px; }

/* ---------- Icon menu ---------- */
.icon-menu{ list-style:none; margin:0; padding:0; }
.icon-menu li{ margin-bottom: 8px; }
.icon-menu a{
  display:flex; align-items:center; gap:12px;
  color: var(--text-main);
  padding: 5px 4px;
  border-radius: 4px;
}
.icon-menu a:hover{ background: var(--bg-panel-alt); color: var(--accent2); text-decoration:none; }

.icon-frame{
  width: 24px; height: 24px;
  flex: 0 0 24px;
  display:flex; align-items:center; justify-content:center;
}

.icon-menu .icon{
  width:16px; height:16px;
  flex: 0 0 16px;
  fill:none;
  stroke: var(--accent1);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-img{
  width: 22px; height: 22px;
  object-fit: contain;
  flex: 0 0 22px;
  position: relative;
  z-index: 1;
}

/* ---------- Status graphic ---------- */
.status-img{ display:block; margin: 2px 0 8px; }

/* ---------- Roster (Hodnosti) ---------- */
.roster-faction{
  display:flex; align-items:center; gap:8px;
  font-weight:700;
  font-size: 14px;
  margin: 14px 0 6px;
}
.roster-faction:first-of-type{ margin-top: 0; }
.faction-icon{ width:18px; height:18px; }
.roster-alliance{ color: #4a8fe0; }
.roster-horda{ color: #ff5c0f; }
.roster-rank{ color: var(--accent-label); margin: 6px 0 2px; font-size: 12.5px; }
.roster-names{ margin: 0 0 2px; font-size: 13px; line-height: 1.9; }
.roster-names img{ vertical-align: middle; margin-right: 3px; }
.roster-more{ font-size: 12px; margin-top: 4px; }

.menu{ list-style:none; margin:0; padding:0; }
.menu li{ padding: 4px 0; }

/* ---------- Poll ---------- */
.poll-title{ font-size: 13px; color: var(--text-main); margin-bottom: 10px; }
.poll-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:6px; }
.poll-bar{ flex:1; background:#0f1015; border:1px solid #2c2e37; border-radius:3px; height:10px; overflow:hidden; }
.poll-fill{ height:100%; background: linear-gradient(90deg, var(--accent-label), var(--accent2)); }
.poll-total{ font-size:12px; color: var(--text-dim); margin-top:8px; }
.poll-meta{ font-size:11.5px; color: var(--text-dim); }

.under-construction{ text-align:center; color: var(--text-dim); font-style: italic; margin:0; }

/* ---------- Main content / articles ---------- */
.content{ min-width: 0; }

.post{
  background: var(--bg-panel);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 22px;
}
.post h2{
  font-family:'Cinzel',serif;
  font-size: 21px;
  color: var(--gold);
  margin: 0 0 6px 0;
}
.post .meta{
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 14px 0;
}
.post-body{
  font-size: 14.5px;
  line-height: 1.65;
}
.post-body big{ font-size: inherit; }
.post-body img{
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  margin: 8px 0;
}
.post-body ul{ margin: 8px 0 8px 22px; padding:0; }
.post-body li{ margin-bottom: 4px; }
.post-body a{ text-decoration: underline; }
.post-stats{
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid #23252d;
  margin-top: 14px;
  padding-top: 10px;
}

/* Broken/missing image placeholder */
img.missing-img{
  display:inline-block;
  min-width: 60px;
  min-height: 60px;
  background: repeating-linear-gradient(45deg, #1c1e26, #1c1e26 8px, #23252d 8px, #23252d 16px);
  border: 1px dashed var(--border-gold);
  position: relative;
}

/* ---------- Pager ---------- */
.pager{
  display:flex; gap:10px; align-items:center;
  padding: 10px 0;
  font-size: 13px;
}
.pager-current{
  background: var(--accent-label);
  color:#111;
  padding: 3px 9px;
  border-radius: 3px;
  font-weight:600;
}
.pager a{ color: var(--accent2); }
.pager-note{ font-size:12px; color: var(--text-dim); margin-top:0; }

/* ---------- Right sidebar extras ---------- */
.missing-note{ font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.block-title{ font-family:'Cinzel',serif; font-size:15px; color: var(--gold); margin:0 0 8px 0; }

.team-block .team-heading{
  text-align:center;
  color: var(--accent-strong);
  font-weight:700;
  margin: 14px 0 8px;
  font-family:'Cinzel',serif;
  letter-spacing: 1px;
}
.team-block .team-heading:first-child{ margin-top:0; }
.team-role{ color: var(--accent-label); margin: 8px 0 2px; font-size:12.5px; }
.team-names{ color: var(--gold); margin: 0 0 4px; font-size:13px; }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid #23252d;
  padding: 18px 20px 30px;
  text-align:center;
  font-size: 12px;
  color: var(--text-dim);
}