@font-face { font-family: 'Cinzel'; src: url('/static/fonts/Cinzel.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
:root {
  --bg: #0f0d0a;
  --bg-2: #171310;
  --panel: #1e1915;
  --panel-2: #26201a;
  --line: #3a3027;
  --text: #ece3d2;
  --muted: #a89a86;
  --gold: #c9a227;
  --gold-2: #e5c457;
  --alliance: #4a8fe7;
  --horde: #c93b3b;
  --ok: #5fb36b;
  --warn: #e0a84a;
  --err: #e06060;
  --radius: 10px;
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #2a2115 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
body.has-bg { background: linear-gradient(rgba(15,13,10,.86), rgba(15,13,10,.92)), url('/static/assets/bg.jpg') center top / cover fixed, var(--bg); }
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: 'Cinzel', Georgia, serif; letter-spacing: .01em; margin: 0 0 .5rem; color: #f4e9cf; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; color: var(--gold-2); }
p { margin: .4rem 0 .8rem; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

.header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(201,162,39,.08), transparent), var(--bg-2);
}
.brand { font-family: 'Cinzel', Georgia, serif; font-size: 1.25rem; color: #f4e9cf; display: flex; align-items: center; gap: .5rem; }
.brand-mark { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--gold); color: #1a1206; font-weight: 700; }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.nav a, .nav .linklike { color: var(--text); padding: .4rem .7rem; border-radius: 8px; font-size: .95rem; }
.nav a.active { background: var(--panel-2); color: var(--gold-2); }
.nav a:hover { background: var(--panel-2); text-decoration: none; }
.linklike { background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted); }
.linklike:hover { color: var(--text); }
form.inline { display: inline; margin: 0; }

.main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
.footer { text-align: center; color: var(--muted); font-size: .82rem; padding: 1rem; border-top: 1px solid var(--line); }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.card.gold { border-color: #6b5620; background: linear-gradient(180deg, rgba(201,162,39,.10), var(--panel)); }
.card h2 { margin-top: 0; }

.countdown { display: flex; gap: .8rem; flex-wrap: wrap; margin: .5rem 0; }
.countdown div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; min-width: 4.4rem; text-align: center; }
.countdown b { display: block; font-size: 1.6rem; color: var(--gold-2); font-family: 'Cinzel', Georgia, serif; }
.countdown span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.stat-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; font-size: .9rem; }
.stat b { color: var(--gold-2); }

.bars { display: grid; gap: .35rem; margin-top: .4rem; }
.bar { display: grid; grid-template-columns: 7rem 1fr 2rem; align-items: center; gap: .5rem; font-size: .9rem; }
.bar .track { height: .7rem; background: var(--bg-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar .fill { height: 100%; background: var(--gold); }
.bar .n { text-align: right; color: var(--muted); }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); white-space: nowrap; }
.badge.alliance { border-color: var(--alliance); color: #9dc1f3; }
.badge.horde { border-color: var(--horde); color: #f0a0a0; }
.badge.in { border-color: var(--ok); color: #9fdca7; }
.badge.probably { border-color: var(--warn); color: #f1cf8d; }
.badge.maybe { color: var(--muted); }
.badge.watching { color: var(--muted); border-style: dashed; }
.class-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; border: 1px solid rgba(0,0,0,.4); }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
tr:hover td { background: rgba(255,255,255,.02); }
.table-wrap { overflow-x: auto; }

.member { display: grid; grid-template-columns: 1fr; gap: .2rem; }
.member .name { font-weight: 600; font-size: 1rem; }
.member .realname { color: var(--muted); font-size: .85rem; }

form .field { display: grid; gap: .3rem; margin-bottom: .9rem; }
label { font-size: .88rem; color: var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(201,162,39,.5); border-color: var(--gold); }
textarea { min-height: 5rem; resize: vertical; }
.checks { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.checks label { display: inline-flex; gap: .4rem; align-items: center; color: var(--text); font-size: .92rem; cursor: pointer; }
.radios label { display: flex; gap: .5rem; align-items: baseline; color: var(--text); margin: .25rem 0; cursor: pointer; }
.radios .hint { color: var(--muted); font-size: .82rem; }
.cols { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.help { font-size: .82rem; color: var(--muted); margin-top: -.3rem; }

button, .btn {
  display: inline-block; padding: .55rem 1rem; border-radius: 8px; border: 1px solid #6b5620;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1206; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.05); text-decoration: none; }
button.secondary, .btn.secondary { background: var(--panel-2); color: var(--text); border-color: var(--line); }
button.danger { background: #5a2323; color: #fbd5d5; border-color: #7a2e2e; }
button.linklike { background: none; border: 0; padding: .4rem .7rem; font-weight: 400; }

.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--line); background: var(--panel); }
.flash.ok { border-color: var(--ok); } .flash.err { border-color: var(--err); }

.auth { max-width: 420px; margin: 2rem auto; }
.auth h1 { text-align: center; }
.callout { border-left: 3px solid var(--gold); padding: .4rem .8rem; background: var(--bg-2); border-radius: 0 8px 8px 0; margin: .6rem 0; }
code, kbd { background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem; font-size: .9em; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) {
  .bar { grid-template-columns: 5.5rem 1fr 2rem; }
  .main { padding: 1rem .8rem 2rem; }
}

/* voice */
.channels { list-style: none; margin: .3rem 0 0; padding: 0; }
.channels .channels { margin-left: 1rem; }
.channel { padding: .25rem 0; border-top: 1px dashed var(--line); }
.channel-name { color: var(--muted); font-size: .85rem; }
.people { list-style: none; margin: .15rem 0 .2rem; padding: 0 0 0 .6rem; }
.people li { padding: .1rem 0; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; background: var(--ok); vertical-align: 0; }
.dot.talking { background: var(--gold-2); box-shadow: 0 0 6px var(--gold-2); }
button.small { padding: .3rem .6rem; font-size: .82rem; }
tr.muted td { opacity: .55; }

/* Right now strip on Home */
.right-now { margin-bottom: 1rem; padding: .5rem 1.1rem; }
.rn-line { margin: .3rem 0; }
.rn-line[hidden] { display: none; }

/* optional artwork (see public/assets/README.md); every icon has a text fallback */
.icon { vertical-align: -0.2em; border-radius: 4px; margin-right: .35rem; }
.icon-faction { border-radius: 50%; }
.select-row { display: flex; align-items: center; gap: .5rem; }
.select-row select { flex: 1; }

.logo { text-align: center; margin: 1.5rem 0 -1rem; }
.logo img { max-width: 70vw; height: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }

/* characters and crafters */
.alts { margin-top: .2rem; }
.alt { display: inline-flex; align-items: center; gap: .25rem; margin-right: .5rem; }
.alt .icon, .alt .class-dot { margin-right: 0; }
.char-list { list-style: none; margin: .6rem 0; padding: 0; }
.char-list li { padding: .5rem 0; border-top: 1px dashed var(--line); }
.char-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.char-list details { margin-top: .3rem; }
.char-list summary { cursor: pointer; color: var(--gold-2); }
.char-list form.char-form { margin-top: .6rem; }
.crafter-list { list-style: none; margin: 0; padding: 0; }
.crafter-list li { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; border-top: 1px dashed var(--line); }
.crafter-list .skill { margin-left: auto; font-weight: 600; color: var(--gold-2); }

/* Noticeboard: plain text, line breaks kept, long URLs wrap instead of widening the card. */
.noticeboard-form { margin-bottom: .6rem; }
.noticeboard-form button { margin-top: .4rem; }
.post { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .6rem; }
.post p { margin: 0 0 .3rem; }
.post-body { white-space: pre-line; overflow-wrap: anywhere; }