@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --bg: #100d0a;
  --bg2: #1a1510;
  --wood: #2a2018;
  --wood2: #35291d;
  --iron: #6b6a66;
  --gold: #c9a24a;
  --gold2: #e6c76a;
  --ember: #c2552b;
  --blood: #8f2b2b;
  --moss: #6f8f4e;
  --ice: #7fa9b8;
  --text: #e8dcc2;
  --muted: #a3957c;
  --line: rgba(201,162,74,.28);
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--serif); font-size: 17px; color: var(--text); line-height: 1.5;
  background: var(--bg) radial-gradient(ellipse at 50% -10%, #3a2a16 0%, #1b150f 45%, #0f0c09 100%) fixed;
  padding: 0 clamp(16px, 4vw, 48px) 48px;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.45 0 0 0 0 0.25 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: var(--gold2); }
h1, h2, h3 { font-family: var(--display); letter-spacing: .06em; color: var(--gold2); text-transform: uppercase; margin: 0; }
h1 { font-size: clamp(22px, 4.2vw, 40px); font-weight: 900; text-shadow: 0 2px 0 #000, 0 0 30px rgba(201,162,74,.35); }
h2 { font-size: 15px; font-weight: 700; color: var(--gold); }
.mono { font-variant-numeric: tabular-nums; }

/* ---- header ---- */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 22px 0 14px; border-bottom: 1px solid var(--line); position: relative; }
header .brand { display: flex; align-items: center; gap: 16px; }
header .brand svg { width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(201,162,74,.5)); }
header .sub { font-style: italic; color: var(--muted); font-size: 15px; }
header .right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.35); font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--iron); box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.dot.ok { background: var(--moss); box-shadow: 0 0 10px var(--moss); }
.dot.warn { background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.dot.bad { background: var(--blood); box-shadow: 0 0 10px var(--blood); }
.btn { font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); background: linear-gradient(#3b2d1c, #241b12); border: 1px solid var(--gold); padding: 8px 16px; border-radius: 4px; cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.5); }
.btn:hover { background: linear-gradient(#4a3822, #2c2116); }
.btn.active { background: var(--gold); color: #1a130a; }

/* ---- ornament divider ---- */
.rule { display: flex; align-items: center; gap: 14px; margin: 30px 0 14px; color: var(--gold); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .55; }
.rule h2 { white-space: nowrap; }

/* ---- grids / cards ---- */
.grid { display: grid; gap: 16px; }
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.card {
  position: relative; padding: 18px 20px; border-radius: 6px;
  background: linear-gradient(160deg, rgba(58,44,28,.75), rgba(26,20,14,.9));
  border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.card::before, .card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--gold); opacity: .7; }
.card::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.card::after  { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }
.kpi .card { text-align: center; padding: 16px 10px; }
.kpi .v { font-family: var(--display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; color: var(--gold2); line-height: 1.1; }
.kpi .l { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.kpi .s { font-size: 13px; color: var(--muted); font-style: italic; }
.card h2 { margin-bottom: 12px; }
.chart { position: relative; height: 240px; }
.chart.tall { height: 300px; }

/* ---- tables ---- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 700; }
td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
tr:hover td { background: rgba(201,162,74,.06); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.name { font-weight: 500; color: var(--gold2); }
.rank { color: var(--muted); font-family: var(--display); font-size: 12px; }
.bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--ember)); box-shadow: 0 0 8px rgba(201,162,74,.4); }
.online-tag { display: inline-block; margin-left: 8px; font-size: 11px; letter-spacing: .1em; padding: 1px 7px; border-radius: 3px; background: rgba(111,143,78,.25); border: 1px solid var(--moss); color: #bfe09b; text-transform: uppercase; font-family: var(--display); }

/* ---- feed ---- */
.feed { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.feed li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 15px; }
.feed .t { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 110px; }
.feed .k { font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; min-width: 74px; }
.feed .k.death { color: var(--blood); } .feed .k.raid { color: var(--ember); } .feed .k.join { color: var(--moss); } .feed .k.leave { color: var(--ice); } .feed .k.server { color: var(--iron); }
.feed li.new { animation: flash 2.5s ease-out; }
@keyframes flash { from { background: rgba(201,162,74,.28); } to { background: transparent; } }

/* ---- online strip ---- */
.online { display: flex; flex-wrap: wrap; gap: 10px; }
.viking { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--line); }
.viking .shield { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--gold) 0 22%, #7a2e22 23% 100%); box-shadow: 0 0 0 2px #2b2016, 0 0 10px rgba(0,0,0,.6); }
.viking small { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 0; }
.login { width: min(100%, 420px); text-align: center; padding: 38px 32px; }
.login svg { width: 84px; height: 84px; margin-bottom: 10px; filter: drop-shadow(0 0 14px rgba(201,162,74,.5)); }
.login h1 { font-size: 30px; }
.login p { color: var(--muted); font-style: italic; margin: 8px 0 26px; }
.login input { width: 100%; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--text); background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 4px; text-align: center; letter-spacing: .3em; }
.login input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,.2); }
.login .btn { width: 100%; margin-top: 14px; padding: 12px; font-size: 14px; }
.login .err { color: #e59a8a; margin-top: 14px; }
.runes { font-size: 22px; letter-spacing: .5em; color: var(--gold); opacity: .55; margin-top: 24px; }
footer { margin-top: 40px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }
@media (max-width: 600px) { body { font-size: 16px; } .chart { height: 200px; } header .right { margin-left: 0; } }