/* ============================================================
   KINGDOM 218 – Royal Stylesheet
   Fonts: Cinzel Decorative (headings) · Cormorant Garamond (body)
   ============================================================ */

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

/* ── Variables ─────────────────────────────────────────── */
:root {
  --gold:         #C9A84C;
  --gold-light:   #F0D080;
  --gold-pale:    #FAF0CC;
  --gold-dark:    #8B6914;
  --gold-grad:    linear-gradient(135deg,#F0D080,#C9A84C,#8B6914);
  --cream:        #FAF7EE;
  --parchment:    #EDE0C0;
  --parch-dark:   #D4C09A;
  --brown-deep:   #2C1810;
  --brown-mid:    #5C3D2E;
  --brown-light:  #8B6055;
  --burgundy:     #800020;
  --burg-dark:    #4A0010;
  --navy:         #1B3A6B;
  --midnight:     #0D1420;
  --shadow-sm:    0 2px 8px rgba(0,0,0,.18);
  --shadow-md:    0 6px 24px rgba(0,0,0,.22);
  --shadow-lg:    0 12px 48px rgba(0,0,0,.28);
  --radius:       6px;
  --transition:   .28s ease;
}

/* ── Reset & base ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

html { scroll-behavior:smooth }

body {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:18px;
  line-height:1.7;
  color:var(--brown-deep);
  background-color:var(--cream);
  background-image:
    radial-gradient(ellipse at 15% 30%, rgba(201,168,76,.06) 0, transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(140,100,20,.05) 0, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='none'/%3E%3Ccircle cx='2' cy='2' r='.4' fill='%23C9A84C' fill-opacity='.12'/%3E%3C/svg%3E");
  min-height:100vh;
}

a { color:inherit; text-decoration:none; transition:color var(--transition) }
img { max-width:100%; display:block }
button { cursor:pointer; font-family:inherit }

/* ── Page transition overlay ───────────────────────────── */
#page-veil {
  position:fixed; inset:0;
  background:rgba(13,20,32,.55);
  backdrop-filter:blur(3px);
  z-index:9999;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
#page-veil.active { opacity:1; pointer-events:all }

/* ── Flash messages ────────────────────────────────────── */
.flash {
  padding:12px 22px;
  margin:0 0 18px;
  border-radius:var(--radius);
  border-left:4px solid var(--gold);
  background:var(--gold-pale);
  font-family:'Cinzel',serif;
  font-size:.85rem;
  letter-spacing:.04em;
}
.flash--success { border-color:#4a8c4a; background:#edfaed }
.flash--error   { border-color:var(--burgundy); background:#faeaea }
.flash--warning { border-color:#c07a00; background:#fdf5e0 }

/* ════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════ */
.site-header {
  position:relative;
  background:
    linear-gradient(180deg,
      #060e1a 0%,
      #0d1b30 25%,
      #1B3A6B 55%,
      #2C1810 82%,
      #1a0800 100%);
  padding:0;
  overflow:hidden;
}

/* Star field */
.site-header::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,220,.18) 0, transparent 2px),
    radial-gradient(ellipse at 55% 15%, rgba(255,255,220,.14) 0, transparent 2px),
    radial-gradient(ellipse at 75% 40%, rgba(255,255,220,.16) 0, transparent 2px),
    radial-gradient(ellipse at 35% 55%, rgba(255,255,220,.10) 0, transparent 2px),
    radial-gradient(ellipse at 90% 20%, rgba(255,255,220,.12) 0, transparent 2px),
    radial-gradient(ellipse at 10% 70%, rgba(255,255,220,.10) 0, transparent 2px);
  pointer-events:none;
}

/* Castle silhouette at bottom */
.site-header::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:40px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40'%3E%3Cpath fill='%231a0800' d='M0 40V20h30V5h10V0h10V5h10V20h30V5h10V0h10V5h10V20h60V5h10V0h10V5h10V20h30V5h10V0h10V5h10V20h240V5h10V0h10V5h10V20h30V5h10V0h10V5h10V20h240V5h10V0h10V5h10V20h30V5h10V0h10V5h10V20h240V5h10V0h10V5h10V20h30V5h10V0h10V5h10V20H1440v20z'/%3E%3C/svg%3E") bottom/1440px 40px repeat-x;
  pointer-events:none;
}

.header-inner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  max-width:1400px;
  margin:0 auto;
  padding:28px 32px 50px;
  position:relative; z-index:1;
}

.header-crown { text-align:center }
.crown-img { width:80px; height:auto; filter:drop-shadow(0 0 18px rgba(201,168,76,.7)); animation:crownFloat 4s ease-in-out infinite }
@keyframes crownFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.header-title { text-align:center }

.site-title {
  font-family:'Cinzel Decorative', serif;
  font-size:clamp(1.6rem,4vw,2.8rem);
  font-weight:900;
  letter-spacing:.14em;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;
  line-height:1.15;
}
.site-title a { background:inherit; -webkit-background-clip:inherit; -webkit-text-fill-color:inherit; background-clip:inherit }
.site-title a:hover { filter:brightness(1.15) }

.site-subtitle {
  font-family:'Cormorant Garamond', serif;
  font-size:1rem;
  font-style:italic;
  color:rgba(240,208,128,.8);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-top:6px;
}

.header-actions { text-align:right }

.user-menu {
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.user-greeting {
  font-family:'Cinzel',serif;
  font-size:.8rem;
  color:var(--gold-light);
  letter-spacing:.08em;
}

.btn-header {
  display:inline-block;
  padding:8px 20px;
  background:transparent;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  color:var(--gold-light);
  font-family:'Cinzel',serif;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:all var(--transition);
}
.btn-header:hover {
  background:var(--gold);
  color:var(--brown-deep);
  box-shadow:0 0 18px rgba(201,168,76,.5);
}
.btn-logout { border-color:rgba(128,0,32,.8); color:rgba(255,160,160,.9) }
.btn-logout:hover { background:var(--burgundy); border-color:var(--burgundy); color:#fff }

/* ════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════ */
.main-nav {
  background:linear-gradient(90deg,#0d0600 0%,#1c0e00 20%,#2c1810 50%,#1c0e00 80%,#0d0600 100%);
  border-top:2px solid var(--gold-dark);
  border-bottom:2px solid var(--gold-dark);
  position:sticky; top:0; z-index:100;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.nav-inner {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  max-width:1400px; margin:0 auto;
}

/* shared look for direct links and dropdown triggers */
.nav-link,
.nav-btn {
  display:flex; align-items:center; gap:7px;
  padding:16px 20px;
  color:rgba(240,208,128,.8);
  font-family:'Cinzel',serif;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:3px solid transparent;
  transition:all var(--transition);
  white-space:nowrap;
  background:none; border-top:none; border-left:none; border-right:none;
  cursor:pointer;
}
.nav-link i, .nav-btn i { font-size:.85rem; color:var(--gold); }
.nav-caret {
  font-size:.6rem !important;
  opacity:.7;
  transition:transform .2s ease;
}
.nav-link:hover, .nav-link.active,
.nav-btn:hover, .nav-item.has-active > .nav-btn {
  color:var(--gold-light);
  border-bottom-color:var(--gold);
  background:rgba(201,168,76,.08);
  text-shadow:0 0 12px rgba(201,168,76,.4);
}
.nav-link.active { background:rgba(201,168,76,.13) }
.nav-item.has-active > .nav-btn { background:rgba(201,168,76,.13) }

/* Dropdown container */
.nav-item {
  position:relative;
  display:flex;
  align-items:stretch;
}

/* Open caret rotation */
.nav-item.open > .nav-btn .nav-caret,
.nav-item:hover > .nav-btn .nav-caret { transform:rotate(180deg) }

/* Dropdown panel */
.nav-dropdown {
  position:absolute;
  top:calc(100% + 2px);
  left:50%; transform:translateX(-50%);
  min-width:210px;
  background:linear-gradient(160deg,#1c0e00,#2c1810);
  border:1px solid var(--gold-dark);
  border-top:2px solid var(--gold);
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  z-index:200;
  opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
}
.nav-item:hover > .nav-dropdown,
.nav-item.open  > .nav-dropdown {
  opacity:1; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}

/* Dropdown items */
.nav-drop-link {
  display:flex; align-items:center; gap:10px;
  padding:11px 20px;
  color:rgba(240,208,128,.82);
  font-family:'Cinzel',serif; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid rgba(201,168,76,.1) !important;
  white-space:nowrap; width:100%;
}
.nav-drop-link:last-child { border-bottom:none !important }
.nav-drop-link:hover, .nav-drop-link.active {
  background:rgba(201,168,76,.12);
  color:var(--gold-light);
  border-bottom-color:rgba(201,168,76,.1) !important;
  text-shadow:none;
}

/* ════════════════════════════════════════════════════════
   MAIN CONTENT WRAPPER
   ════════════════════════════════════════════════════════ */
.content-wrapper {
  min-height:60vh;
  padding:44px 0 60px;
}
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.container-narrow {
  max-width:860px;
  margin:0 auto;
  padding:0 24px;
}

/* ── Page title ─────────────────────────────────────────── */
.page-title-block {
  text-align:center;
  margin-bottom:42px;
}
.page-title {
  font-family:'Cinzel Decorative', serif;
  font-size:clamp(1.4rem,3.5vw,2.4rem);
  font-weight:700;
  color:var(--brown-deep);
  line-height:1.2;
  padding-bottom:16px;
}
.page-title-sub {
  font-style:italic;
  color:var(--brown-mid);
  font-size:1.05rem;
  letter-spacing:.06em;
}

/* ── Ornate dividers ────────────────────────────────────── */
.divider {
  display:flex; align-items:center; gap:16px;
  margin:30px 0;
  color:var(--gold);
}
.divider::before,.divider::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dark),transparent);
}
.divider-sm { margin:18px 0 }
.divider-sym { font-size:1.1rem }

/* ════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════ */
.royal-card {
  background:linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:1px solid rgba(201,168,76,.45);
  border-radius:var(--radius);
  padding:36px 40px;
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.7);
  position:relative;
  transition:box-shadow var(--transition);
}
.royal-card::before {
  content:'';
  position:absolute; top:7px; left:7px; right:7px; bottom:7px;
  border:1px solid rgba(201,168,76,.2);
  border-radius:4px;
  pointer-events:none;
}
.royal-card:hover { box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.7) }

.card-grid {
  display:grid;
  gap:28px;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
}

/* ── Entry list (history, alliances…) ──────────────────── */
.entry-card {
  background:linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:1px solid rgba(201,168,76,.4);
  border-radius:var(--radius);
  padding:24px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.entry-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.entry-card-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:12px;
}
.entry-title {
  font-family:'Cinzel',serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--brown-deep);
}
.entry-date {
  font-size:.8rem;
  color:var(--brown-light);
  font-style:italic;
  white-space:nowrap;
  margin-left:12px;
}
.entry-excerpt {
  font-size:.95rem;
  color:var(--brown-mid);
  line-height:1.6;
}
.entry-footer { margin-top:16px }

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */
.btn-royal {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 28px;
  background:var(--gold-grad);
  color:var(--brown-deep);
  border:1px solid var(--gold-dark);
  border-radius:var(--radius);
  font-family:'Cinzel',serif;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.4);
  transition:all var(--transition);
}
.btn-royal:hover {
  filter:brightness(1.12);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(201,168,76,.4), inset 0 1px 0 rgba(255,255,255,.4);
  color:var(--brown-deep);
}
.btn-royal:active { transform:translateY(0) }

.btn-sm { padding:7px 18px; font-size:.72rem }
.btn-outline {
  background:transparent;
  color:var(--gold-dark);
  border-color:var(--gold);
  box-shadow:none;
}
.btn-outline:hover { background:rgba(201,168,76,.1); color:var(--brown-deep) }
.btn-danger {
  background:linear-gradient(135deg,#c0392b,#96281b);
  color:#fff;
  border-color:#7b241c;
}
.btn-danger:hover { filter:brightness(1.12) }

/* ════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════ */
.form-group {
  margin-bottom:22px;
}
label {
  display:block;
  font-family:'Cinzel',serif;
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--brown-mid);
  margin-bottom:7px;
}
.form-control {
  width:100%;
  padding:12px 16px;
  background:#fffdf4;
  border:1px solid var(--parch-dark);
  border-radius:var(--radius);
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;
  color:var(--brown-deep);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-control:focus {
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.18);
}
select.form-control { cursor:pointer }
textarea.form-control { resize:vertical; min-height:120px }

/* ════════════════════════════════════════════════════════
   BADGE / TAGS
   ════════════════════════════════════════════════════════ */
.badge {
  display:inline-block;
  padding:3px 10px;
  border-radius:30px;
  font-family:'Cinzel',serif;
  font-size:.68rem;
  letter-spacing:.07em;
  font-weight:600;
  background:var(--gold-pale);
  border:1px solid var(--gold);
  color:var(--gold-dark);
}
.badge-green  { background:#edfaed; border-color:#4a8c4a; color:#2a5a2a }
.badge-red    { background:#faeaea; border-color:var(--burgundy); color:var(--burgundy) }
.badge-navy   { background:#eaf0ff; border-color:var(--navy); color:var(--navy) }

/* ════════════════════════════════════════════════════════
   NEWSPAPER
   ════════════════════════════════════════════════════════ */
.chronicle-masthead {
  text-align:center;
  border:3px double var(--gold);
  padding:28px 36px;
  margin-bottom:34px;
  background:linear-gradient(180deg,#fdfaf0,#f0e8d0);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.chronicle-masthead::before,
.chronicle-masthead::after {
  content:'❧';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:var(--gold);
  font-size:2rem;
}
.chronicle-masthead::before { left:16px }
.chronicle-masthead::after  { right:16px; transform:translateY(-50%) scaleX(-1) }

.chronicle-title {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--brown-deep);
}
.chronicle-edition {
  font-style:italic;
  color:var(--brown-mid);
  font-size:.95rem;
  margin-top:6px;
}
.chronicle-nav {
  display:flex; justify-content:space-between; align-items:center;
  margin:24px 0;
  padding:14px 20px;
  background:var(--parchment);
  border:1px solid rgba(201,168,76,.35);
  border-radius:var(--radius);
}

/* ════════════════════════════════════════════════════════
   CHAT
   ════════════════════════════════════════════════════════ */
.chat-layout {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:24px;
  align-items:start;
}
@media(max-width:768px){ .chat-layout { grid-template-columns:1fr } }

.chat-box {
  background:linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:1px solid rgba(201,168,76,.4);
  border-radius:var(--radius);
  display:flex; flex-direction:column;
  height:520px;
}
.chat-header {
  background:linear-gradient(90deg,#2C1810,#1a0800);
  color:var(--gold-light);
  font-family:'Cinzel',serif;
  font-size:.8rem;
  letter-spacing:.1em;
  padding:14px 20px;
  display:flex; align-items:center; gap:10px;
}
.chat-messages {
  flex:1;
  overflow-y:auto;
  padding:18px;
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar { width:6px }
.chat-messages::-webkit-scrollbar-track { background:transparent }
.chat-messages::-webkit-scrollbar-thumb { background:var(--parch-dark); border-radius:3px }

.msg { display:flex; gap:12px; margin-bottom:16px; animation:msgIn .25s ease }
@keyframes msgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.msg-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--gold-grad);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif;
  font-size:.85rem;
  font-weight:700;
  color:var(--brown-deep);
  flex-shrink:0;
  border:2px solid var(--gold-dark);
}
.msg-body { flex:1 }
.msg-meta {
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:4px;
}
.msg-name {
  font-family:'Cinzel',serif;
  font-size:.78rem;
  color:var(--gold-dark);
  font-weight:600;
}
.msg-time {
  font-size:.72rem;
  color:var(--brown-light);
  font-style:italic;
}
.msg-text {
  background:#fff9ec;
  border:1px solid rgba(201,168,76,.3);
  border-radius:0 12px 12px 12px;
  padding:10px 14px;
  font-size:.95rem;
  line-height:1.6;
  word-break:break-word;
}
.msg-text img { max-width:280px; border-radius:6px; margin-top:6px }
.msg.own { flex-direction:row-reverse }
.msg.own .msg-text {
  border-radius:12px 0 12px 12px;
  background:rgba(201,168,76,.15);
}
.msg.own .msg-name { color:var(--burgundy) }

.msg-system {
  text-align:center;
  color:var(--brown-light);
  font-style:italic;
  font-size:.82rem;
  padding:6px 0;
}

.chat-input-area {
  border-top:1px solid rgba(201,168,76,.3);
  padding:14px 16px;
  background:rgba(250,247,238,.9);
  overflow:visible;
  position:relative;
  z-index:10;
}
.chat-input-row {
  display:flex; gap:10px; align-items:flex-end;
}
.chat-input {
  flex:1;
  padding:11px 16px;
  background:#fff9ec;
  border:1px solid var(--parch-dark);
  border-radius:20px;
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;
  color:var(--brown-deep);
  resize:none;
  min-height:44px; max-height:120px;
  overflow-y:auto;
  transition:border-color var(--transition);
}
.chat-input:focus { outline:none; border-color:var(--gold) }
.chat-send-btn {
  padding:10px 22px;
  background:var(--gold-grad);
  border:1px solid var(--gold-dark);
  border-radius:20px;
  font-family:'Cinzel',serif;
  font-size:.75rem;
  letter-spacing:.07em;
  color:var(--brown-deep);
  font-weight:700;
  transition:all var(--transition);
}
.chat-send-btn:hover { filter:brightness(1.12); transform:translateY(-1px) }

.chat-toolbar {
  display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;
}
.chat-tool-btn {
  padding:5px 12px;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.35);
  border-radius:20px;
  font-size:.82rem;
  color:var(--brown-mid);
  transition:all var(--transition);
}
.chat-tool-btn:hover { background:rgba(201,168,76,.25); color:var(--brown-deep) }

.emoji-picker-wrap {
  position:relative;
}
.emoji-grid {
  display:none;
  position:absolute; bottom:calc(100% + 8px); left:0;
  background:#fffdf4;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  padding:12px;
  width:320px;
  max-height:240px;
  overflow-y:auto;
  z-index:200;
  box-shadow:var(--shadow-md);
  display:none;
}
.emoji-grid.open { display:grid }
.emoji-grid { grid-template-columns:repeat(auto-fill,34px); gap:4px }
.emoji-btn { font-size:1.3rem; cursor:pointer; padding:3px; border-radius:4px; border:none; background:none; transition:background .15s }
.emoji-btn:hover { background:rgba(201,168,76,.2) }

.chat-sidebar {
  background:linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:1px solid rgba(201,168,76,.4);
  border-radius:var(--radius);
  overflow:hidden;
}
.chat-sidebar-title {
  background:linear-gradient(90deg,#2C1810,#1a0800);
  color:var(--gold-light);
  font-family:'Cinzel',serif;
  font-size:.78rem;
  letter-spacing:.1em;
  padding:12px 16px;
}
.online-users { padding:14px 16px }
.online-user {
  display:flex; align-items:center; gap:10px;
  padding:7px 0;
  border-bottom:1px solid rgba(201,168,76,.2);
  font-size:.9rem;
}
.online-dot {
  width:9px; height:9px; border-radius:50%;
  background:#4a8;
  box-shadow:0 0 6px rgba(60,200,120,.6);
  flex-shrink:0;
}

/* ════════════════════════════════════════════════════════
   RADIO / JUKEBOX
   ════════════════════════════════════════════════════════ */
.jukebox {
  max-width:720px; margin:0 auto;
  background:linear-gradient(145deg,#2C1810,#1a0800,#0d0600);
  border:3px solid var(--gold-dark);
  border-radius:16px;
  padding:36px;
  box-shadow:0 16px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
}
.jukebox::before {
  content:'';
  position:absolute; top:8px; left:8px; right:8px; bottom:8px;
  border:1px solid rgba(201,168,76,.25);
  border-radius:12px;
  pointer-events:none;
}

.jukebox-display {
  background:#050e05;
  border:2px solid var(--gold-dark);
  border-radius:10px;
  padding:24px;
  margin-bottom:28px;
  text-align:center;
  box-shadow:inset 0 4px 20px rgba(0,0,0,.7);
  min-height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
}
.jukebox-record {
  width:120px; height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #1a1a1a, #050505);
  border:3px solid #333;
  position:relative;
  box-shadow:0 0 30px rgba(201,168,76,.25);
  animation:spin 4s linear infinite;
  animation-play-state:paused;
}
.jukebox-record.playing { animation-play-state:running }
.jukebox-record::after {
  content:'';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:22px; height:22px;
  border-radius:50%;
  background:var(--gold-grad);
  box-shadow:0 0 8px rgba(201,168,76,.6);
}
@keyframes spin { to { transform:rotate(360deg) } }

.jukebox-song-title {
  font-family:'Cinzel',serif;
  font-size:1.05rem;
  color:var(--gold-light);
  letter-spacing:.06em;
}
.jukebox-artist {
  font-style:italic;
  color:rgba(240,208,128,.6);
  font-size:.88rem;
}

.jukebox-controls {
  display:flex; justify-content:center; align-items:center; gap:18px;
  margin-bottom:24px;
}
.juke-btn {
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(201,168,76,.12);
  border:2px solid var(--gold-dark);
  color:var(--gold-light);
  font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.juke-btn:hover { background:rgba(201,168,76,.3); transform:scale(1.1) }
.juke-btn.play-pause {
  width:66px; height:66px;
  font-size:1.5rem;
  background:var(--gold-grad);
  color:var(--brown-deep);
  border-color:var(--gold);
  box-shadow:0 0 20px rgba(201,168,76,.4);
}
.juke-btn.play-pause:hover { filter:brightness(1.15) }

.jukebox-volume {
  display:flex; align-items:center; gap:12px;
  margin-bottom:24px;
}
.jukebox-volume label { font-family:'Cinzel',serif; font-size:.72rem; color:var(--gold); min-width:60px; letter-spacing:.08em }
.volume-slider {
  flex:1;
  -webkit-appearance:none;
  height:4px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold) var(--vol,70%),rgba(255,255,255,.15) var(--vol,70%));
  cursor:pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--gold-grad);
  border:2px solid var(--gold-dark);
  box-shadow:0 0 6px rgba(201,168,76,.5);
}

.jukebox-toggle {
  display:flex; justify-content:center; align-items:center; gap:14px;
  padding:16px 0 0;
  border-top:1px solid rgba(201,168,76,.2);
}
.toggle-label { font-family:'Cinzel',serif; font-size:.8rem; color:var(--gold-light); letter-spacing:.08em }
.toggle-switch {
  width:54px; height:28px;
  background:#333;
  border:1px solid var(--gold-dark);
  border-radius:14px;
  position:relative;
  cursor:pointer;
  transition:background .3s;
}
.toggle-switch.on { background:var(--gold-dark) }
.toggle-knob {
  position:absolute; top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--gold-grad);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:transform .3s;
}
.toggle-switch.on .toggle-knob { transform:translateX(26px) }

.jukebox-playlist {
  margin-top:28px;
  background:linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:1px solid rgba(201,168,76,.4);
  border-radius:var(--radius);
  overflow:hidden;
}
.playlist-header {
  background:linear-gradient(90deg,var(--brown-deep),var(--brown-mid));
  color:var(--gold-light);
  font-family:'Cinzel',serif;
  font-size:.8rem;
  letter-spacing:.1em;
  padding:12px 20px;
}
.playlist-item {
  display:flex; align-items:center; gap:14px;
  padding:12px 18px;
  border-bottom:1px solid rgba(201,168,76,.2);
  cursor:pointer;
  transition:background var(--transition);
}
.playlist-item:last-child { border-bottom:none }
.playlist-item:hover { background:rgba(201,168,76,.1) }
.playlist-item.active {
  background:rgba(201,168,76,.18);
  border-left:3px solid var(--gold);
}
.playlist-num {
  font-family:'Cinzel',serif;
  font-size:.75rem;
  color:var(--gold-dark);
  min-width:22px;
}
.playlist-info { flex:1 }
.playlist-song { font-size:.95rem; font-weight:600 }
.playlist-artist { font-size:.8rem; color:var(--brown-light); font-style:italic }

/* ════════════════════════════════════════════════════════
   BAR / DRINKS
   ════════════════════════════════════════════════════════ */
.bar-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:28px;
}
.drink-card {
  background:linear-gradient(145deg,#fdfaf0,#f0e4c4);
  border:1px solid rgba(201,168,76,.45);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.drink-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md) }
.drink-img {
  width:100%; height:200px; object-fit:cover;
  border-bottom:2px solid rgba(201,168,76,.3);
}
.drink-img-placeholder {
  width:100%; height:200px;
  background:linear-gradient(145deg,var(--parchment),var(--parch-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
  color:var(--gold);
  border-bottom:2px solid rgba(201,168,76,.3);
}
.drink-body { padding:20px 22px }
.drink-name {
  font-family:'Cinzel',serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--brown-deep);
  margin-bottom:8px;
}
.drink-desc { font-size:.9rem; color:var(--brown-mid); line-height:1.6 }
.drink-footer {
  padding:12px 22px 16px;
  display:flex; justify-content:space-between; align-items:center;
}
.drink-price {
  font-family:'Cinzel',serif;
  font-size:1rem;
  color:var(--gold-dark);
  font-weight:600;
}

/* ════════════════════════════════════════════════════════
   ALLIANCE CARDS
   ════════════════════════════════════════════════════════ */
.alliance-card {
  background:linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:1px solid rgba(201,168,76,.4);
  border-radius:var(--radius);
  padding:26px 30px;
  display:flex; gap:22px; align-items:flex-start;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.alliance-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md) }
.alliance-logo {
  width:72px; height:72px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--gold);
  flex-shrink:0;
  box-shadow:0 0 14px rgba(201,168,76,.3);
}
.alliance-logo-placeholder {
  width:72px; height:72px;
  border-radius:50%;
  background:var(--gold-grad);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  color:var(--brown-deep);
  border:3px solid var(--gold);
  flex-shrink:0;
  font-family:'Cinzel',serif;
  font-weight:700;
  box-shadow:0 0 14px rgba(201,168,76,.3);
}
.alliance-info { flex:1 }
.alliance-name {
  font-family:'Cinzel',serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--brown-deep);
  margin-bottom:4px;
}
.alliance-leader {
  font-style:italic;
  color:var(--brown-light);
  font-size:.9rem;
  margin-bottom:10px;
}
.alliance-desc { font-size:.92rem; color:var(--brown-mid); line-height:1.6 }

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.site-footer {
  background:linear-gradient(180deg,#1a0800,#0d0600);
  color:rgba(240,208,128,.7);
  border-top:2px solid var(--gold-dark);
  padding:48px 0 28px;
  position:relative;
}
.site-footer::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.footer-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:36px;
  margin-bottom:36px;
}
@media(max-width:700px){ .footer-inner { grid-template-columns:1fr } }
.footer-col h4 {
  font-family:'Cinzel',serif;
  font-size:.8rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.footer-links { list-style:none }
.footer-links li { margin-bottom:8px }
.footer-links a {
  color:rgba(240,208,128,.65);
  font-size:.9rem;
  transition:color var(--transition);
}
.footer-links a:hover { color:var(--gold-light) }
.footer-seal {
  text-align:center;
  font-size:2.4rem;
  margin-bottom:12px;
  filter:drop-shadow(0 0 10px rgba(201,168,76,.4));
}
.footer-bottom {
  text-align:center;
  border-top:1px solid rgba(201,168,76,.18);
  padding-top:22px;
  font-size:.8rem;
  color:rgba(240,208,128,.4);
  font-style:italic;
}

/* ════════════════════════════════════════════════════════
   HELP PAGE
   ════════════════════════════════════════════════════════ */
.help-toc {
  padding:28px 32px;
  margin-bottom:36px;
}
.help-toc-title {
  font-family:'Cinzel',serif;
  font-size:1rem;
  letter-spacing:.06em;
  color:var(--brown-deep);
  margin-bottom:16px;
}
.help-toc-list {
  margin:0; padding-left:22px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:6px 24px;
}
.help-toc-list li { font-size:.92rem }
.help-toc-link {
  color:var(--gold-dark);
  text-decoration:none;
  font-family:'Cinzel',serif;
  font-size:.82rem;
  letter-spacing:.04em;
  transition:color var(--transition);
}
.help-toc-link:hover { color:var(--burgundy); text-decoration:underline }

.help-entries { display:grid; gap:36px }

.help-entry {
  background:linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:1px solid rgba(201,168,76,.35);
  border-radius:var(--radius);
  overflow:hidden;
  scroll-margin-top:90px;
}
.help-entry-header {
  display:flex; align-items:center; gap:16px;
  padding:18px 24px;
  background:linear-gradient(90deg,#2C1810,#1a0800);
}
.help-entry-num {
  flex-shrink:0;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold);
  color:var(--brown-deep);
  border-radius:50%;
  font-family:'Cinzel',serif;
  font-size:.75rem;
  font-weight:700;
}
.help-entry-title {
  flex:1;
  font-family:'Cinzel',serif;
  font-size:1rem;
  color:var(--gold-light);
  letter-spacing:.06em;
  margin:0;
}
.help-back-top {
  flex-shrink:0;
  color:rgba(240,208,128,.5);
  font-size:.8rem;
  text-decoration:none;
  transition:color var(--transition);
}
.help-back-top:hover { color:var(--gold-light) }
.help-entry-body {
  padding:24px 28px;
}

/* ════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════ */
.login-wrap {
  min-height:80vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 16px;
}
.login-box {
  width:100%; max-width:440px;
  background:linear-gradient(145deg,#fdfaf0,#f0e4c4);
  border:1px solid rgba(201,168,76,.5);
  border-radius:var(--radius);
  padding:48px 44px;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.login-box::before {
  content:'';
  position:absolute; top:8px; left:8px; right:8px; bottom:8px;
  border:1px solid rgba(201,168,76,.22);
  border-radius:4px;
  pointer-events:none;
}
.login-crest {
  text-align:center;
  font-size:2.4rem;
  margin-bottom:20px;
  color:var(--gold);
  filter:drop-shadow(0 0 8px rgba(201,168,76,.4));
}
.login-title {
  font-family:'Cinzel Decorative',serif;
  text-align:center;
  color:var(--brown-deep);
  font-size:1.3rem;
  margin-bottom:30px;
}

/* ════════════════════════════════════════════════════════
   WYSIWYG CONTENT (rendered from editor)
   ════════════════════════════════════════════════════════ */
.wysiwyg-content {
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;
  line-height:1.9;
  color:var(--brown-deep);
}
.wysiwyg-content h1,.wysiwyg-content h2,.wysiwyg-content h3 {
  font-family:'Cinzel',serif;
  color:var(--brown-deep);
  margin:1.4em 0 .6em;
  line-height:1.25;
}
.wysiwyg-content h1 { font-size:1.8rem }
.wysiwyg-content h2 { font-size:1.45rem }
.wysiwyg-content h3 { font-size:1.2rem }
.wysiwyg-content p  { margin-bottom:1em }
.wysiwyg-content img { border-radius:var(--radius); box-shadow:var(--shadow-sm); margin:1em auto }
.wysiwyg-content ul,.wysiwyg-content ol { padding-left:1.6em; margin-bottom:1em }
.wysiwyg-content li { margin-bottom:.4em }
.wysiwyg-content blockquote {
  border-left:4px solid var(--gold);
  padding:12px 24px;
  margin:1.4em 0;
  background:rgba(201,168,76,.07);
  font-style:italic;
  border-radius:0 var(--radius) var(--radius) 0;
}
.wysiwyg-content a { color:var(--burgundy); text-decoration:underline }
.wysiwyg-content table { width:100%; border-collapse:collapse; margin:1.4em 0 }
.wysiwyg-content th,.wysiwyg-content td {
  border:1px solid var(--parch-dark);
  padding:10px 14px;
}
.wysiwyg-content th {
  background:var(--parchment);
  font-family:'Cinzel',serif;
  font-size:.82rem;
  letter-spacing:.05em;
}

/* ════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════ */
.pagination {
  display:flex; justify-content:center; gap:8px;
  margin-top:36px;
}
.page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:transparent;
  border:1px solid rgba(201,168,76,.4);
  border-radius:var(--radius);
  font-family:'Cinzel',serif;
  font-size:.8rem;
  color:var(--brown-mid);
  transition:all var(--transition);
}
.page-btn:hover,.page-btn.active {
  background:var(--gold-grad);
  border-color:var(--gold-dark);
  color:var(--brown-deep);
  box-shadow:0 2px 8px rgba(201,168,76,.3);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media(max-width:900px) {
  .header-inner { grid-template-columns:auto 1fr; grid-template-rows:auto auto }
  .header-actions { grid-column:1/-1; text-align:center }
  .royal-card { padding:24px 20px }
  .royal-card::before { display:none }
}
@media(max-width:600px) {
  .header-inner { padding:20px 16px 44px; grid-template-columns:1fr }
  .crown-img { width:60px }
  .nav-link span, .nav-btn span { display:none }
  .nav-link { padding:14px 12px }
  .nav-btn   { padding:14px 12px }
  .nav-caret { display:none }
  /* on mobile the dropdown opens downward inside the sticky bar */
  .nav-dropdown { position:fixed; top:auto; left:0; right:0; transform:none;
                  width:100%; border-left:none; border-right:none; }
  .nav-item:hover > .nav-dropdown { opacity:0; pointer-events:none; }
  .nav-item.open  > .nav-dropdown { opacity:1; pointer-events:all; transform:none; }
  .chat-layout { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr }
}

/* ── Scroll to top btn ──────────────────────────────────── */
#scroll-top {
  position:fixed; bottom:28px; right:28px;
  width:46px; height:46px;
  background:var(--gold-grad);
  border:1px solid var(--gold-dark);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--brown-deep);
  font-size:1.1rem;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform var(--transition);
  z-index:99;
}
#scroll-top.visible { opacity:1; pointer-events:all }
#scroll-top:hover { transform:scale(1.1) }

/* ═══════════════════════════════════════════════════════
   CHRONICLE ENGAGEMENT (reactions, comments, suggestion modal)
   ═══════════════════════════════════════════════════════ */

/* Reactions bar (no longer contains suggestion button) */
.chr-engage-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  margin: 0 0 4px;
  border-top: 1px solid rgba(201,168,76,.2);
  border-bottom: 1px solid rgba(201,168,76,.2);
}
.chr-reactions { display:flex; flex-wrap:wrap; gap:6px; }

.reaction-btn {
  display: inline-flex; align-items:center; gap:5px;
  padding: 5px 12px;
  background: rgba(255,245,220,.7);
  border: 1.5px solid rgba(201,168,76,.25);
  border-radius: 20px;
  cursor: pointer; font-size:.85rem; line-height:1;
  transition: all .15s ease;
}
.reaction-btn:hover:not([disabled]) {
  border-color: var(--gold);
  background: rgba(201,168,76,.14);
  transform: scale(1.1);
}
.reaction-btn.reacted {
  border-color: var(--gold);
  background: rgba(201,168,76,.2);
  box-shadow: 0 0 0 2px rgba(201,168,76,.18);
}
.reaction-btn[disabled] { opacity:.45; cursor:default; }
.r-emoji { font-size:1.1rem; line-height:1; }
.r-count {
  font-family:'Cinzel',serif; font-size:.68rem;
  color:var(--brown-mid); min-width:8px;
}

/* Comments section */
.chr-comments-section { margin-top:32px; }
.chr-comments-title {
  font-family:'Cinzel',serif; font-size:1rem;
  color:var(--brown-deep); margin-bottom:20px;
  display:flex; align-items:center; gap:8px;
}
.chr-comment-count { color:var(--brown-light); font-size:.85rem; }

.comment-item {
  display:flex; gap:14px; padding:14px 0;
  border-bottom: 1px solid rgba(201,168,76,.12);
  transition: opacity .3s;
}
.comment-item:last-child { border-bottom:none }

.comment-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background: var(--gold-grad);
  color:var(--brown-deep);
  font-family:'Cinzel',serif; font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
}
.comment-body { flex:1; min-width:0; }
.comment-meta {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:5px;
}
.comment-author {
  font-family:'Cinzel',serif; font-size:.8rem;
  font-weight:600; color:var(--brown-deep);
}
.comment-time {
  font-size:.72rem; color:var(--brown-light); font-style:italic;
}
.comment-del-btn {
  margin-left:auto; background:none; border:none;
  color:rgba(180,60,60,.45); cursor:pointer;
  font-size:.75rem; padding:2px 6px; border-radius:3px;
  transition: color .15s, background .15s;
}
.comment-del-btn:hover { color:#c42b2b; background:rgba(196,43,43,.1); }
.comment-content {
  font-size:.9rem; color:var(--brown-mid);
  line-height:1.65; word-break:break-word;
}
.chr-no-comments {
  text-align:center; font-style:italic;
  color:var(--brown-light); padding:28px 0; font-size:.9rem;
}
.chr-login-prompt {
  text-align:center; font-style:italic;
  color:var(--brown-light); font-size:.9rem; padding:18px 0 8px;
}

/* Comment form */
.chr-comment-form {
  display:flex; gap:14px; align-items:flex-start;
  padding-top:16px;
  border-top:1px solid rgba(201,168,76,.2);
  margin-top:8px;
}
.chr-form-avatar { flex-shrink:0; margin-top:4px; }
.chr-comment-input-wrap { flex:1; min-width:0; }
.chr-comment-textarea {
  width:100%; padding:14px 16px;
  border:1.5px solid rgba(201,168,76,.3);
  border-radius:var(--radius);
  background:rgba(255,250,235,.7);
  font-family:'Cormorant Garamond',serif; font-size:1rem;
  color:var(--brown-deep); resize:vertical;
  min-height:130px;
  transition:border-color .2s, box-shadow .2s;
  display:block;
}
.chr-comment-textarea:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.12);
}

/* Floating suggestion button (FAB) */
.chr-suggest-fab {
  position: fixed;
  top: 140px;
  right: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #c9a84c, #a87820);
  color: var(--brown-deep);
  border: 1.5px solid var(--gold-dark);
  border-radius: 24px;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.32), 0 0 0 0 rgba(201,168,76,.4);
  transition: transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.chr-suggest-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,.42), 0 0 0 4px rgba(201,168,76,.18);
}
.chr-suggest-fab i { font-size: .85rem; }
@media (max-width:600px) {
  .chr-suggest-fab span { display:none; }
  .chr-suggest-fab { padding:12px 14px; border-radius:50%; top:auto; bottom:88px; }
}

/* Suggestion modal */
.chr-modal-overlay {
  position:fixed; inset:0;
  background:rgba(10,5,0,.78);
  backdrop-filter:blur(3px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.chr-modal-box {
  background: linear-gradient(145deg,#fdfaf0,#f5ead8);
  border:2px solid var(--gold-dark);
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(201,168,76,.15);
  max-width:520px; width:100%; padding:36px 32px 28px;
  position:relative; max-height:90vh; overflow-y:auto;
}
.chr-modal-close {
  position:absolute; top:14px; right:14px;
  background:none; border:none; color:var(--brown-light);
  font-size:1rem; cursor:pointer; padding:4px 8px;
  border-radius:3px; transition:color .15s,background .15s;
}
.chr-modal-close:hover { color:var(--brown-deep); background:rgba(0,0,0,.06); }
.chr-modal-header { text-align:center; margin-bottom:22px; }
.chr-modal-icon { font-size:2rem; color:var(--gold); margin-bottom:8px; display:block; }
.chr-modal-title {
  font-family:'Cinzel',serif; font-size:1.2rem;
  color:var(--brown-deep); margin:0 0 6px;
}
.chr-modal-sub {
  font-size:.82rem; color:var(--brown-light);
  font-style:italic; margin:0;
}
.chr-modal-label {
  font-size:.8rem; font-family:'Cinzel',serif;
  color:var(--brown-mid); display:block; margin-bottom:5px;
}
   ═══════════════════════════════════════════════════════ */

.inh-section       { margin-bottom: 56px; }
.inh-section-hd    { text-align: center; margin-bottom: 36px; }

.inh-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1.9rem; font-weight: 700;
  margin: 0 0 8px;
}
.inh-section-sub   { font-style: italic; font-size: .95rem; margin: 0 0 14px; }

.inh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 28px;
}

.inh-card {
  border-radius: 6px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.inh-card:hover { transform: translateY(-5px); }

.inh-img {
  width: 100%; height: 245px;
  object-fit: cover; display: block;
}
.inh-img-ph {
  width: 100%; height: 245px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
}

.inh-body  { padding: 18px 20px; }
.inh-name  { font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.inh-sub   { font-size: .78rem; margin-bottom: 10px; }
.inh-desc  { font-size: .9rem; line-height: 1.6; }
.inh-empty { text-align: center; font-style: italic; color: var(--brown-light); padding: 40px 0; }

/* ── Hall of Fame ─────────────────────────────────────── */

.hof-crown-icon { font-size: 2.8rem; margin-bottom: 6px; }
.hof-title      { color: var(--gold-dark); }

.hof-ornament {
  font-family: 'Cinzel', serif;
  color: var(--gold); font-size: .7rem;
  letter-spacing: .18em; opacity: .7; margin-top: 10px;
}

.hof-card {
  background: linear-gradient(160deg, #fdfaf0, #f5ead8);
  border: 2px solid var(--gold);
  box-shadow: 0 3px 18px rgba(201,168,76,.2),
              inset 0 0 0 1px rgba(201,168,76,.12);
}
.hof-card:hover { box-shadow: 0 10px 32px rgba(201,168,76,.38); }

.hof-frame {
  position: relative;
  background: var(--gold-grad);
  padding: 3px;
}
.hof-frame img { border-radius: 2px; }

.hof-ph { background: linear-gradient(145deg, #f5ead8, #e8d5a8); color: var(--gold-dark); }

.hof-laurels {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 10px; pointer-events: none;
}
.hl-left, .hl-right {
  font-size: 1.3rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.hl-right { transform: scaleX(-1); display: inline-block; }

.hof-card .inh-name { color: var(--brown-deep); }
.hof-sub { color: var(--gold-dark); font-weight: 600; font-style: italic; }

.hof-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  background: var(--gold-grad);
  color: var(--brown-deep);
  font-family: 'Cinzel', serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--gold-dark);
}

/* ── Most Wanted ─────────────────────────────────────── */

.mw-alert-banner {
  display: inline-block;
  background: #7a0000; color: #ffd700;
  font-family: 'Cinzel', serif;
  font-size: .95rem; font-weight: 700;
  letter-spacing: .25em;
  padding: 7px 28px;
  border: 2px solid #ffd700;
  border-radius: 2px; margin-bottom: 14px;
}
.mw-title { color: #7a0000; }
.mw-sub   { color: #6b3030; }

.mw-card {
  background: linear-gradient(160deg, #f9f0d5, #e8d8a0);
  border: 3px solid #3a1a00;
  box-shadow: 5px 5px 0 #1a0800, 0 8px 24px rgba(0,0,0,.32);
  border-radius: 3px;
  position: relative;
}
.mw-card::before {
  content: '';
  position: absolute; inset: 5px;
  border: 1px dashed rgba(58,26,0,.22);
  pointer-events: none; z-index: 1; border-radius: 1px;
}
.mw-card:hover { box-shadow: 8px 8px 0 #1a0800, 0 14px 36px rgba(0,0,0,.42); }

.mw-poster-top {
  background: #7a0000; color: #ffd700;
  font-family: 'Cinzel', serif;
  font-size: 1rem; font-weight: 700; letter-spacing: .45em;
  text-align: center; padding: 9px 0;
  border-bottom: 2px solid #3a1a00;
}

.mw-img-wrap { position: relative; overflow: hidden; }
.mw-img      { filter: sepia(28%) contrast(1.08) brightness(.97); }
.mw-ph       { background: #c8a060; color: #3a1a00; }

.mw-bars {
  position: absolute; inset: 0;
  display: flex; justify-content: space-around;
  pointer-events: none;
}
.mw-bar {
  width: 9px;
  background: linear-gradient(180deg,
    rgba(8,4,0,.82) 0%, rgba(28,14,0,.58) 50%, rgba(8,4,0,.82) 100%);
  border-left:  1px solid rgba(255,200,80,.1);
  border-right: 1px solid rgba(0,0,0,.55);
  border-radius: 1px 1px 3px 3px;
}

.mw-body   { background: linear-gradient(#f9f0d5, #e8d8a0); }
.mw-name   { color: #1a0800; }
.mw-charge {
  color: #7a0000;
  font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  border-top: 1px solid rgba(58,26,0,.18);
  border-bottom: 1px solid rgba(58,26,0,.18);
  padding: 4px 0; margin-bottom: 10px;
}
.mw-desc       { color: #2a1000; }
.mw-chain-deco { text-align: center; font-size: 1rem; margin-top: 12px; letter-spacing: .3em; opacity: .5; }

/* ── Admin form type labels ───────────────────────────── */
.inh-type-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 10px 20px;
  border: 2px solid transparent; border-radius: var(--radius);
  transition: background .18s;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
  .inh-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .inh-img, .inh-img-ph { height: 180px; }
}
@media (max-width: 420px) {
  .inh-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   THE GREAT DEBATES
   ═══════════════════════════════════════════════════════ */

/* Topic list */
.debates-list { display:flex; flex-direction:column; gap:20px; }

.debate-card {
  background: linear-gradient(160deg,#fdfaf0,#f5ead8);
  border: 1px solid rgba(201,168,76,.35);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color .18s, box-shadow .18s;
}
.debate-card:hover {
  border-left-color: var(--gold-dark);
  box-shadow: 0 4px 20px rgba(201,168,76,.18);
}
.debate-card-header {
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:10px;
}
.debate-card-title {
  font-family:'Cinzel',serif; font-size:1.1rem; font-weight:700;
  color:var(--brown-deep); margin:0; flex:1; line-height:1.3;
}
.debate-card-badges { display:flex; gap:6px; flex-shrink:0; align-items:center; }

.badge-poll {
  background: rgba(201,168,76,.18); color: var(--gold-dark);
  font-family:'Cinzel',serif; font-size:.65rem; font-weight:700;
  padding: 3px 10px; border-radius:12px;
  border: 1px solid rgba(201,168,76,.4);
  white-space:nowrap; display:inline-flex; align-items:center; gap:4px;
  text-decoration:none;
}
.badge-comments {
  background: rgba(100,80,60,.1); color: var(--brown-mid);
  font-family:'Cinzel',serif; font-size:.65rem;
  padding: 3px 10px; border-radius:12px;
  border: 1px solid rgba(100,80,60,.2);
  white-space:nowrap;
}
.debate-excerpt {
  font-size:.9rem; color:var(--brown-mid);
  line-height:1.65; margin-bottom:14px;
}
.debate-card-footer {
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.debate-meta-info { font-size:.78rem; color:var(--brown-light); font-style:italic; }
.debate-meta-info i { color:var(--gold); font-size:.7rem; }

/* Single topic */
.debate-comments-title {
  font-family:'Cinzel',serif; font-size:1rem;
  color:var(--brown-deep); margin-bottom:20px;
  display:flex; align-items:center; gap:8px;
}
.debate-comment-count { color:var(--brown-light); font-size:.85rem; }

.debate-comment {
  display:flex; gap:14px; padding:14px 0;
  border-bottom:1px solid rgba(201,168,76,.12);
  transition:opacity .3s;
}
.debate-comment:last-child { border-bottom:none; }

/* Quote block inside a comment */
.debate-quote-block {
  background: rgba(201,168,76,.1);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 7px 12px;
  margin-bottom: 8px;
  font-size: .82rem;
}
.debate-quote-block.debate-quote-deleted { opacity:.5; }
.debate-quote-attr {
  display:block; font-family:'Cinzel',serif; font-size:.7rem;
  color:var(--gold-dark); font-weight:600; margin-bottom:3px;
}
.debate-quote-text { color:var(--brown-mid); line-height:1.5; }

/* Active quote preview (above textarea) */
.debate-active-quote {
  display:flex; align-items:flex-start; gap:10px;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 14px;
  border-bottom: none;
  margin-top:16px;
}
.debate-active-quote-inner { flex:1; min-width:0; }
.debate-cancel-quote {
  background:none; border:none; color:var(--brown-light);
  cursor:pointer; font-size:.85rem; padding:2px 6px;
  border-radius:3px; flex-shrink:0;
  transition:color .15s;
}
.debate-cancel-quote:hover { color:#c42b2b; }

/* Per-comment actions row */
.debate-comment-actions {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px; margin-top:8px;
}
.debate-comment-reactions { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.reaction-btn-sm {
  padding: 3px 8px;
  font-size: .78rem;
  border-radius: 14px;
}
.debate-quote-btn {
  background:none; border:1px solid rgba(100,80,60,.2);
  color:var(--brown-light); font-family:'Cinzel',serif;
  font-size:.68rem; padding:3px 10px; border-radius:14px;
  cursor:pointer; transition:all .15s;
  display:inline-flex; align-items:center; gap:5px;
}
.debate-quote-btn:hover { border-color:var(--gold); color:var(--brown-deep); }

/* Poll card */
.debate-poll-card { margin-top:24px; }
.debate-poll-title {
  font-family:'Cinzel',serif; font-size:1rem;
  color:var(--brown-deep); margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.debate-poll-question {
  font-size:1rem; font-style:italic; color:var(--brown-mid);
  margin-bottom:18px; line-height:1.55;
}

/* Vote buttons */
.poll-option-btn {
  display:block; width:100%; text-align:left;
  padding:12px 18px; margin-bottom:8px;
  background:rgba(255,250,235,.8);
  border:2px solid rgba(201,168,76,.3);
  border-radius:var(--radius);
  font-family:'Cinzel',serif; font-size:.85rem;
  color:var(--brown-deep); cursor:pointer;
  transition:all .18s ease;
}
.poll-option-btn:hover {
  border-color:var(--gold); background:rgba(201,168,76,.12);
  transform:translateX(4px);
}

/* Poll results */
.poll-result-row {
  display:grid; align-items:center;
  grid-template-columns:1fr 3fr auto;
  gap:10px; padding:7px 0;
  border-radius:var(--radius);
}
.poll-result-row.poll-my-vote .poll-result-label { color:var(--brown-deep); font-weight:600; }
.poll-result-label {
  font-family:'Cinzel',serif; font-size:.78rem; color:var(--brown-mid);
  display:flex; align-items:center; gap:6px;
}
.poll-check { color:var(--gold); }
.poll-bar-wrap {
  background:rgba(201,168,76,.15); border-radius:10px;
  height:10px; overflow:hidden;
}
.poll-bar {
  height:100%; border-radius:10px;
  background:var(--gold-grad);
  transition:width .6s ease;
  min-width:2px;
}
.poll-my-vote .poll-bar { background:linear-gradient(90deg,#b8862a,#f0d060); }
.poll-result-pct {
  font-family:'Cinzel',serif; font-size:.75rem;
  color:var(--brown-deep); white-space:nowrap; text-align:right;
}
.poll-vote-cnt { color:var(--brown-light); font-size:.68rem; }
.poll-total { font-size:.78rem; color:var(--brown-light); font-style:italic; margin-top:14px; }

/* Admin poll modal option rows */
.pm-option-row {
  display:flex; gap:8px; align-items:center;
}
.pm-option-row .form-control { flex:1; }