/* Calradia: Beylikler Çağı — the logo's world: forged gold letters on crimson banners, a charred brown night. */
:root {
  --night: #110C0A;
  --sea: #1A1310;
  --sea-2: #241914;
  --vellum: #E2D2AE;
  --vellum-2: #CDB78A;
  --ink: #241811;
  --rust: #8C1D1B;
  --rust-2: #B3302A;
  --brass: #B48A48;
  --brass-2: #E2C487;
  --bone: #EFE6D3;
  --mist: #A89B8A;
  --rule: rgba(180, 138, 72, 0.30);
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --text: 'Alegreya', Georgia, serif;
}

body { background: var(--night); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(140, 29, 27, .16), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(180, 138, 72, .07), transparent 70%),
    var(--night);
}

/* ---------- header with the Calradia wordmark ---------- */
.top { background: linear-gradient(180deg, rgba(17, 12, 10, .9), rgba(17, 12, 10, 0)); }
.top.solid, .page-acct .top { background: rgba(17, 12, 10, .95); box-shadow: 0 1px 0 var(--rule), 0 10px 30px rgba(0,0,0,.35); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 40px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
@media (max-width: 520px) { .brand img { height: 30px; } }
.nav a { font-family: var(--display); font-size: 14px; letter-spacing: .06em; font-weight: 600; }
.nav .acct { border-color: var(--brass); background: linear-gradient(180deg, rgba(140,29,27,.55), rgba(90,18,16,.55)); }
.nav .acct:hover { background: var(--rust-2); color: var(--bone); }
.nav a[aria-current="page"] { color: var(--brass-2); opacity: 1; }

/* ---------- headings and buttons in the logo's lettering ---------- */
h1, h2, h3, .block-title, .page h1 { font-family: var(--display); letter-spacing: .03em; }
h3 { font-weight: 700; }
.block-title { font-weight: 700; text-transform: none; }
.sheen { background: linear-gradient(100deg, #E9DCC0 0%, #E9DCC0 38%, #FFE7A6 46%, #C8963F 50%, #FFF3CF 54%, #E9DCC0 62%, #E9DCC0 100%); background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-primary {
  font-family: var(--display); font-weight: 700; letter-spacing: .06em;
  background: linear-gradient(180deg, #B3302A 0%, #8C1D1B 55%, #6E1514 100%);
  border: 1px solid #D9B26A; color: #FFF2D6; box-shadow: inset 0 1px 0 rgba(255,220,160,.35), 0 6px 20px rgba(0,0,0,.45);
}
.btn-primary:hover { background: linear-gradient(180deg, #C63B33, #9A2320); color: #fff; }
.btn-ghost { font-family: var(--display); font-weight: 600; letter-spacing: .05em; border-color: var(--brass); color: var(--brass-2); background: rgba(17,12,10,.45); }
.btn-ghost:hover { background: rgba(180,138,72,.18); color: var(--bone); }

/* ---------- hero: the battle film behind the big seal ---------- */
.hero.hero-film { height: 100vh; min-height: 640px; max-height: none; background: #0B0807; display: grid; place-items: center; }
.hero.hero-film::after { content: none; }
.hero-film video, .hero-film .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-film .hero-poster { background: center / cover no-repeat; }
.hero-film .film-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(17,12,10,.15), rgba(17,12,10,.72) 100%),
    linear-gradient(180deg, rgba(17,12,10,.55) 0%, rgba(17,12,10,0) 22%, rgba(17,12,10,0) 60%, rgba(17,12,10,.96) 100%); }
.hero-center { position: relative; z-index: 3; width: min(92vw, 860px); text-align: center; padding: 90px 0 70px; }
.hero-center h1 { margin: 0; line-height: 0; }
.hero-center h1 img { width: min(100%, 760px); height: auto; margin: 0 auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.75)); animation: seal-in 1.6s cubic-bezier(.2,.8,.2,1) both .2s; }
@keyframes seal-in { from { opacity: 0; transform: scale(1.08) translateY(10px); filter: blur(6px) drop-shadow(0 18px 40px rgba(0,0,0,.75)); } to { opacity: 1; transform: none; } }
.hero-center .lead { margin: 6px auto 26px; max-width: 600px; font-size: clamp(18px, 1.8vw, 22px); color: #E6DAC2; text-shadow: 0 2px 12px rgba(0,0,0,.8); animation: fadeup 1s ease both 1.2s; }
.hero-center .actions { justify-content: center; animation: fadeup 1s ease both 1.4s; }
.hero-center .status { justify-content: center; color: #D7CBB4; text-shadow: 0 1px 8px rgba(0,0,0,.8); animation: fadeup 1s ease both 1.6s; }
.hero-film .scroll-hint { z-index: 4; }
.film-toggle { position: absolute; z-index: 4; right: clamp(16px, 3vw, 36px); bottom: 26px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: rgba(17,12,10,.55); color: var(--brass-2); cursor: pointer; font-size: 14px; }
.film-toggle:hover { border-color: var(--brass); }
@media (prefers-reduced-motion: reduce) { .hero-center h1 img, .hero-center .lead, .hero-center .actions, .hero-center .status { animation: none; } }

/* ---------- the live map now sits in its own framed panel ---------- */
.map-panel { position: relative; height: min(70vh, 640px); min-height: 420px; margin: 28px 0 34px; overflow: hidden; background: var(--sea);
  border: 1px solid var(--rule); box-shadow: 0 0 0 6px rgba(17,12,10,.9), 0 0 0 7px rgba(180,138,72,.25), 0 30px 60px rgba(0,0,0,.45); }
.map-panel #map { position: absolute; inset: 0; width: 100%; height: 100%; transform: none !important; }
.map-panel .legend { top: 16px; right: 16px; background: rgba(17,12,10,.82); opacity: 1; animation: none; }
.map-panel .map-open { right: 16px; bottom: 16px; }
.map-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,.65); }

/* ---------- surfaces ---------- */
.ticker { background: #160F0C; }
.ticker-track span::before { color: var(--rust-2); }
.ledger-tabs button, .live-col, .board-wrap, .decree, .changes li, .news li { border-color: var(--rule); }
.legend { background: rgba(17,12,10,.8); }

/* ---------- footer credit ---------- */
.foot { border-top: 1px solid var(--rule); background: #0D0907; }
.foot .credit { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); letter-spacing: .08em; font-size: 13px; color: var(--mist); text-decoration: none; }
.foot .credit b { color: var(--brass-2); font-weight: 700; }
.foot .credit:hover b { color: var(--bone); }
.foot .foot-mark { height: 34px; width: auto; opacity: .9; }

/* hero layout fixes (the shared .hero-text rules position it absolutely) */
.hero-film .hero-center { position: relative; left: auto; bottom: auto; max-width: none; transform: none; }
@media (max-width: 600px) { .hero-center { padding: 80px 0 60px; } .hero-center .actions a { flex: 1 1 auto; } }
.photo::after { opacity: .55; }

/* registration: e-mail code row */
.code-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; }
.code-row .btn-ghost { height: 50px; white-space: nowrap; padding: 0 16px; font-size: 14px; }
.code-row .field { margin: 0; }
.form-msg.ok { color: #9FC79A; }
@media (max-width: 520px) { .code-row { grid-template-columns: 1fr; } }
.mail-pref { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.mail-pref label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.mail-pref input { accent-color: #B3302A; width: 18px; height: 18px; }

/* announcement opened from the launcher */
.news li.news-hit{outline:1px solid #D9B26A;outline-offset:6px;border-radius:4px}