@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Cinzel+Decorative:wght@700&display=swap');

:root {
    color-scheme: dark;
    --bg: #121110;
    --bg-hi: #1e1b18;
    --panel: #1d1b19;
    --panel-alt: #232120;
    --border: #8a6a2c;
    --border-hi: #c9a640;
    --text: #ecdfc0;
    --muted: #a4906b;
    --accent: #d4af37;
    --accent-hover: #e8c65a;
    --accent-text: #1a1408;
    --danger: #6e1f1f;
    --danger-hover: #8a2626;
    --danger-border: #b83a3a;
    --ok: #3fb950;
}

* { box-sizing: border-box; }

body {
    background:
        radial-gradient(ellipse at top, var(--bg-hi) 0%, var(--bg) 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    min-height: 100vh;
    /* Establishes a block formatting context so a child's top/bottom margin (e.g.
       .center-page's "margin: 10vh auto") can't collapse through and push body itself
       down, which was silently inflating the document past 100vh and forcing a scrollbar. */
    display: flow-root;
}

.container { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.center-page { max-width: 380px; margin: 10vh auto; padding: 16px; text-align: center; }
.center-page .panel, .center-page .sidebar-box { text-align: left; }

/* Main content is centered on its own, full width, completely unaffected by the sidebar - it
   does NOT share a flex row with it. The sidebar is an absolutely-positioned child of this
   wrapper instead, so its top edge lines up with this wrapper's first child (the topmost panel)
   and it sits just to the right of the (independently centered) content column. */
.content-with-sidebar { position: relative; }

h1 {
    font-family: "Cinzel", serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    color: var(--accent);
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
    margin: 0 0 4px;
}
h2 {
    font-family: "Cinzel", serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--accent);
    margin: 28px 0 12px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
.subtitle { color: var(--muted); margin: 0 0 24px; font-size: 0.9rem; }
.fine-print { color: var(--muted); margin: 0 0 24px; font-size: 0.75rem; font-style: italic; }

.realm-eyebrow {
    font-family: "Cinzel Decorative", "Cinzel", serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 12px;
    background: linear-gradient(180deg, #f6e6a8 0%, var(--accent-hover) 45%, var(--accent) 75%, #a9791f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
    animation: emberGlow 4s ease-in-out infinite;
}
@keyframes emberGlow {
    0%, 100% { text-shadow: 0 0 16px rgba(212, 175, 55, 0.35), 0 0 3px rgba(255, 245, 210, 0.2); }
    50% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.7), 0 0 6px rgba(255, 245, 210, 0.4); }
}

.ornate-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ornate-divider::before, .ornate-divider::after {
    content: "";
    height: 1px;
    width: 56px;
    background: linear-gradient(90deg, transparent, var(--border-hi));
}
.ornate-divider::after { background: linear-gradient(90deg, var(--border-hi), transparent); }
.ornate-divider span { color: var(--accent); font-size: 0.75rem; }

.hero-divider { margin: 0 0 16px; }
.panel-divider { margin: 18px 0; }

.game-subheader {
    font-family: "Cinzel", serif;
    font-weight: 600;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
    margin: 0 0 12px;
    white-space: nowrap;
    width: max-content;
    max-width: 90vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.game-subheader .subheader-space { display: inline; }
.game-subheader .subheader-break { display: none; }

@media (max-width: 480px) {
    .game-subheader {
        white-space: normal;
        width: auto;
        max-width: 100%;
        position: static;
        left: auto;
        transform: none;
    }
    .game-subheader .subheader-space { display: none; }
    .game-subheader .subheader-break { display: block; }
}

nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
nav .links { display: flex; gap: 16px; align-items: center; }
nav a {
    color: var(--text); text-decoration: none; font-family: "Cinzel", serif;
    font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase;
}
nav a:hover { color: var(--accent); }
nav .muted { color: var(--muted); font-size: 0.85rem; }

.panel {
    background: linear-gradient(180deg, var(--panel-alt), var(--panel));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.08) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
}

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 12px 0 4px; }
input[type=text], input[type=password] {
    width: 100%; padding: 9px 10px; border-radius: 4px; border: 1px solid var(--border);
    background: #0b0906; color: var(--text); font-size: 0.95rem;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button, .btn {
    display: inline-block; margin-top: 14px; padding: 9px 18px; border-radius: 4px;
    border: 1px solid var(--border-hi);
    background: linear-gradient(180deg, var(--accent-hover), var(--accent));
    color: var(--accent-text); font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
    cursor: pointer; text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
button:hover, .btn:hover { background: linear-gradient(180deg, #f0d878, var(--accent-hover)); }
button.danger, .btn.danger { background: linear-gradient(180deg, var(--danger-hover), var(--danger)); color: var(--text); border-color: var(--danger-border); }
button.danger:hover, .btn.danger:hover { background: linear-gradient(180deg, var(--danger-border), var(--danger-hover)); }
button.secondary { background: linear-gradient(180deg, #3a3225, #2a2418); color: var(--text); border-color: var(--border); }
button.secondary:hover { background: linear-gradient(180deg, #453c2a, #332c1e); }
button:disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.alert { padding: 10px 12px; border-radius: 4px; margin-bottom: 16px; font-size: 0.9rem; }
.alert.error { background: #2e1414; color: #ff9a9d; border: 1px solid #5c2a2d; }
.alert.notice { background: #16281c; color: #86e6a0; border: 1px solid #2a5c38; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th {
    color: var(--accent); font-weight: 600; font-family: "Cinzel", serif;
    font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase;
}
tr.char-row { cursor: grab; }
tr.char-row.dragging { opacity: 0.4; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.75rem; border: 1px solid transparent; font-weight: 600; }
.badge.gm { background: #3a2f14; color: var(--accent); border-color: var(--border); }
/* GM level color-coding follows WoW's item-rarity progression (rare -> epic -> legendary),
   since level 3 (administrator) is the most powerful. */
.badge.gm-1 { background: #142a3a; color: #4ea6ff; border-color: #1f4a63; }
.badge.gm-2 { background: #2a1a3a; color: #c77dff; border-color: #4a2f63; }
.badge.gm-3 { background: #3a2410; color: #ff9d42; border-color: #63421f; }
.badge.online { background: #16281c; color: #86e6a0; border-color: #2a5c38; }
.badge.offline { color: var(--muted); }

/* Wrap the buttons in an inner div rather than flexing the <td> itself - display:flex on a
   table cell breaks border-collapse row-height alignment in some browsers. */
.char-controls { display: flex; gap: 6px; }
.char-controls button { margin: 0; padding: 3px 8px; font-size: 0.75rem; }
td.char-controls-cell { padding: 0; }
td.char-controls-cell .char-controls { padding: 8px 10px; }

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

.danger-zone { border-color: var(--danger-border); }

.sidebar-stack {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 40px;
    width: 240px;
}
.sidebar-stack > * + * { margin-top: 20px; }

.sidebar-box {
    background: linear-gradient(180deg, var(--panel-alt), var(--panel));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 18px 20px;
    font-size: 0.9rem;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.08) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
}
.status-name {
    font-family: "Cinzel Decorative", "Cinzel", serif;
    font-weight: 700; font-size: 1.05rem; color: var(--accent);
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
}
.status-realm { color: var(--muted); font-size: 0.8rem; margin-bottom: 14px; word-break: break-all; }
.help-hint { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.status-row { margin-top: 8px; }
.status-value { font-weight: 700; color: var(--accent); }
.status-server { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.status-online { color: var(--ok); font-weight: 600; }
.status-offline { color: #ff6a6a; font-weight: 600; }

.feature-list { list-style: none; margin: 10px 0 0; padding: 0; }
.feature-list li { position: relative; padding: 4px 0 4px 18px; font-size: 0.85rem; }
.feature-list li::before {
    content: "\25C6";
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-size: 0.7rem;
}

/* Below ~1300px there usually isn't room to the right of a centered 720px column for a 240px
   sidebar without it running off-screen - drop it back into normal flow, below the content, at
   the same full width as the panels rather than a narrower centered block. */
@media (max-width: 1300px) {
    .sidebar-stack { position: static; width: 100%; margin: 0 0 20px; }
    .sidebar-stack > * + * { margin-top: 20px; }
}