/* ==========================================================
   GLOBAL THEME — Hearth · warm oak frame + OSRS-tan parchment
   + brass inlay + OSRS yellow/orange accents. Variable NAMES
   keep their legacy meaning so layout.css/modal.css don't
   need refactoring; only the values shift.
   Snapshot of pre-port state: archive/ui-snapshot-2026-05-31/
   ========================================================== */

/* ── Root palette vars ── */
:root {
    /* Brass (was --gold) — Hearth's tarnished-but-warm metalwork */
    --gold:        #b08628;
    --gold-light:  #d4a838;
    --gold-dark:   #5e4220;
    /* Warm oak frame (was stone) — was near-black, now medium-warm-brown */
    --stone-dark:  #1a120a;
    --stone-mid:   #2e2010;
    --stone-light: #5e4220;
    /* OSRS-tan parchment text (was stone-text) */
    --stone-text:  #c8a878;
    --stone-muted: #8a6c38;
    --border-dark: #0a0608;

    /* Hearth-specific extensions (used by new chrome) */
    --wood-deep:   #1a120a;
    --wood-1:      #2e2010;
    --wood-2:      #443012;
    --wood-3:      #5e4220;
    --wood-hi:     #8a6438;
    --parch-0:     #c8a878;
    --parch-1:     #b08e5a;
    --parch-2:     #8a6c38;
    --parch-shadow:#443012;
    --parch-lite:  #d6b888;
    --gold-pale:   #e8c860;
    --gold-deep:   #4a3010;
    --osrs-yellow:    #ffd64a;
    --osrs-yellow-hi: #fff080;
    --osrs-orange:    #ff981f;
    --ink:            #0a0608;
    --ink-soft:       #2a1e10;

    /* Semantic colour tokens — HP now oxblood not crimson */
    --color-hp:           #6e1a1a;
    --color-hp-low:       #903030;
    --color-positive:     #4a7028;
    --color-positive-bright: #ffd64a;
    --color-danger:       #903030;
    --color-other-player: #5ad6a4;

    /* Z-index scale */
    --z-hud:         20;
    --z-hud-overlay: 25;
    --z-panel:       100;
    --z-modal:       2000;
    --z-modal-high:  2100;
    --z-context:     3000;
    --z-toast:       3500;
    --z-dpad:        4000;
    --z-tooltip:     4500;

    /* Typography scale (5-stop) */
    --fs-fine:   11px;
    --fs-body:   14px;
    --fs-ui:     17px;
    --fs-title:  21px;
    --fs-hero:   26px;

    /* Font families — Hearth set */
    --font-serif:   'Cardo', 'Georgia', "Times New Roman", serif;
    --font-display: 'Cinzel', 'Cardo', serif;
    --font-caps:    'IM Fell DW Pica SC', 'Cinzel', serif;
    --font-pixel:   'VT323', 'Courier New', monospace;
    --font-italic:  'IM Fell English', 'Cardo', serif;

    /* Item rarity tier (border / chip colors) — gold/orange OSRS hierarchy */
    --rarity-uncommon:  #4a7028;
    --rarity-rare:      #b08628;
    --rarity-epic:      #ff981f;
    --rarity-legendary: #ffd64a;

    /* HP bar gradient stops — kept readable on parchment */
    --color-hp-high:        #5e8a3a;
    --color-hp-high-dark:   #3a5a20;
    --color-hp-mid:         #ffd64a;
    --color-hp-mid-dark:    #b08628;
    --color-hp-low-dark:    #5a0e0e;
    --color-positive-dark:  #2a4818;
    --color-danger-dark:    #5a0e0e;
    --color-danger-bg:      #2a1208;

    /* Chat channel semantic colors — bright on dark chat box */
    --chat-global:  #ffd64a;
    --chat-party:   #ff8030;
    --chat-whisper: #c89aee;
}

/* Body now uses Cardo as the base serif, dark oak background */
html, body {
    font-family: var(--font-serif);
    background-color: var(--wood-deep);
    color: var(--stone-text);
}

/* ── Atmospheric backdrop behind the game viewport ──────────────────────────
   Replaces the flat --wood-deep fill framing the canvas with a deep warm base,
   a faint heraldic "diaper" lattice (tapestry weave), a warm focal glow that
   haloes the viewport, and a corner vignette for depth — a "lamplit stone
   hall" rather than dead black. `!important` so it wins over the older
   page-chrome `body` gradients in layout.css. The glow + vignette ride on
   body::before (viewport-fixed) so they stay centred on screen, behind all
   page content and never intercepting input. */
body {
    background:
        url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 1.5 L70.5 36 L36 70.5 L1.5 36 Z' fill='none' stroke='%23e0bc6e' stroke-opacity='0.20' stroke-width='1.1'/%3E%3Cpath d='M36 15 L57 36 L36 57 L15 36 Z' fill='none' stroke='%23e0bc6e' stroke-opacity='0.09' stroke-width='1'/%3E%3Cg fill='%23f0d27a'%3E%3Ccircle cx='36' cy='36' r='2' fill-opacity='0.24'/%3E%3Ccircle cx='1.5' cy='36' r='1.7' fill-opacity='0.16'/%3E%3Ccircle cx='70.5' cy='36' r='1.7' fill-opacity='0.16'/%3E%3Ccircle cx='36' cy='1.5' r='1.7' fill-opacity='0.16'/%3E%3Ccircle cx='36' cy='70.5' r='1.7' fill-opacity='0.16'/%3E%3C/g%3E%3C/svg%3E") repeat,
        linear-gradient(180deg, #2c2014 0%, #18100a 56%, #0d0805 100%) #160e08 !important;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 54% 48% at 44% 39%,
            rgba(224, 176, 64, 0.16) 0%, rgba(216, 168, 56, 0.05) 45%, rgba(216, 168, 56, 0) 64%),
        radial-gradient(ellipse 128% 120% at 50% 40%,
            rgba(0, 0, 0, 0) 44%, rgba(7, 4, 2, 0.64) 100%);
}

/* ─────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────── */

header {
    background: linear-gradient(180deg, #1f1a12 0%, #14110b 100%);
    border-bottom: 1px solid var(--gold-dark);
    border-top: none;
    padding: 10px 24px;
    position: relative;
}
header::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.55;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   LOGIN SCREEN + FORM
   ───────────────────────────────────────────────────────── */

/* ── Login title block ── */
#login-title-block {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

#login-game-title {
    font-family: 'Press Start 2P', cursive;
    font-size: var(--fs-hero);
    color: var(--gold-light);
    line-height: 1.7;
    letter-spacing: 0.04em;
    animation: loginTitleGlow 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    #login-game-title,
    .login-particle,
    .server-status,
    #status,
    #target-frame { animation: none !important; }
    .login-particle { opacity: 0 !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes loginTitleGlow {
    0%,100% { text-shadow: 2px 2px 0 #3a2a08,
                            0 0 20px rgba(232,200,120,0.3),
                            0 0 50px rgba(200,160,80,0.15); }
    50%      { text-shadow: 2px 2px 0 #3a2a08,
                            0 0 30px rgba(232,200,120,0.5),
                            0 0 70px rgba(200,160,80,0.25); }
}

#login-title-rule {
    width: 280px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 14px auto 12px;
}

#login-subtitle {
    color: var(--stone-muted);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-ui);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: none;
}

/* ── Login panel ── */
#login-form {
    background: var(--stone-dark) !important;
    border: 1px solid var(--gold) !important;
    border-image: none !important;
    border-radius: 0 !important;
    padding: 22px 26px !important;
    width: 300px !important;
    max-width: none !important;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 40px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(232,200,120,0.08) !important;
    text-align: left !important;
    animation: popIn 0.4s ease-out;
}

#login-form h2 { display: none !important; }

.login-corner {
    position: absolute;
    width: 8px;
    height: 8px;
}
.login-corner-tl { top: 0; left: 0;
    border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.login-corner-tr { top: 0; right: 0;
    border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.login-corner-bl { bottom: 0; left: 0;
    border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.login-corner-br { bottom: 0; right: 0;
    border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

#login-tabs {
    display: flex;
    border-bottom: 1px solid var(--stone-light);
    margin-bottom: 18px;
}
.login-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--stone-muted);
    font-family: var(--font-serif);
    font-size: var(--fs-ui);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 7px 0 9px;
    cursor: pointer;
    transition: color 0.1s;
}
.login-tab.active {
    border-bottom-color: var(--gold);
    color: var(--gold-light);
}
.login-tab:hover { color: var(--gold-light); }

#login-form input {
    width: 100% !important;
    background: var(--border-dark) !important;
    border: 1px solid var(--stone-light) !important;
    border-radius: 0 !important;
    color: var(--stone-text) !important;
    font-family: var(--font-serif) !important;
    font-size: var(--fs-ui) !important;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box;
    transition: border-color 0.1s !important;
}
#login-form input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px var(--gold) !important;
    outline: none !important;
    background: var(--border-dark) !important;
}
#login-form input::placeholder { color: #5a4a28 !important; font-style: italic; }

#login-submit-btn,
#register-btn {
    width: 100%;
    display: block;
    background: var(--stone-mid) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 0 !important;
    color: var(--gold-light) !important;
    font-family: var(--font-serif) !important;
    font-size: var(--fs-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 11px 0 !important;
    cursor: pointer;
    margin-bottom: 8px !important;
    transition: background 0.1s !important;
    box-shadow: none !important;
}
#login-submit-btn:hover,
#register-btn:hover { background: var(--stone-light) !important; }

#guest-btn {
    width: 100%;
    display: block;
    background: transparent !important;
    border: 1px solid var(--stone-light) !important;
    border-radius: 0 !important;
    color: var(--stone-muted) !important;
    font-family: var(--font-serif) !important;
    font-size: var(--fs-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 9px 0 !important;
    cursor: pointer;
    margin-bottom: 8px !important;
    transition: background 0.1s !important;
    box-shadow: none !important;
}
#guest-btn:hover { background: var(--stone-mid) !important; }

#login-error {
    color: var(--color-hp);
    margin: -6px 0 10px;
    font-size: var(--fs-ui);
    font-family: var(--font-serif);
    min-height: 0;
}

#guest-disclaimer {
    text-align: center;
    color: #5a4a28;
    font-family: var(--font-serif);
    font-size: var(--fs-ui);
    font-style: italic;
    margin: 0;
}

/* ── Login status bar ── */
#login-status-bar {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--stone-muted);
    font-family: var(--font-serif);
    font-size: var(--fs-ui);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: var(--z-panel);
    pointer-events: none;
}
.login-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-positive);
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.login-status-sep { color: var(--stone-light); }

/* ─────────────────────────────────────────────────────────
   STATUS BAR (connection indicator)
   ───────────────────────────────────────────────────────── */

#status {
    background: var(--stone-mid);
    border: 1px solid var(--gold);
    border-radius: 0;
    color: #8aaa6a;
    font-family: Georgia, serif;
    font-size: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    animation: none;
    padding: 6px 14px;
}
#status.disconnected { color: #c05040; border-color: #8a3020; }

/* ─────────────────────────────────────────────────────────
   SIDEBAR PANELS (landing page: Latest Updates, Server Status)
   ───────────────────────────────────────────────────────── */

/* Already set correctly at source in layout.css; no overrides needed */

/* ─────────────────────────────────────────────────────────
   GAME CONTROLS PANEL (column of icon buttons left of canvas)
   ───────────────────────────────────────────────────────── */

/* Already set correctly at source in layout.css; no overrides needed */

/* ─────────────────────────────────────────────────────────
   MAP TOGGLE BUTTON (below canvas)
   ───────────────────────────────────────────────────────── */

#map-toggle-btn {
    border-radius: 0;
    font-family: Georgia, serif;
    font-size: 17px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────
   GAME CANVAS
   ───────────────────────────────────────────────────────── */

#game-canvas {
    border: 3px solid #000;
    box-shadow: 0 0 0 1px var(--gold), 0 8px 28px rgba(0,0,0,0.6);
}
#game-canvas:hover {
    box-shadow: 0 0 0 1px var(--gold-light), 0 8px 28px rgba(0,0,0,0.6);
}

/* ─────────────────────────────────────────────────────────
   MINIMAP
   ───────────────────────────────────────────────────────── */

#minimap-container {
    background: #0e1608;
    border: 1px solid #c8a050;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #8a6830;
    padding: 0;
}
#minimap-canvas {
    border: none;
    border-radius: 50%;
    box-shadow: none;
}
#minimap-toggle-btn { display: none; }
#minimap-compass { display: none; }

/* ─────────────────────────────────────────────────────────
   SUBZONE LABEL
   ───────────────────────────────────────────────────────── */

#subzone-label {
    background: rgba(10, 8, 4, 0.88);
    border: 1px solid var(--gold);
    border-radius: 0;
    color: var(--stone-text);
    font-family: Georgia, serif;
}

/* ─────────────────────────────────────────────────────────
   SKILL BARS
   ───────────────────────────────────────────────────────── */

.skill-bar-container {
    background: #0a0804;
    border: 1px solid var(--stone-light);
    border-radius: 0;
    height: 5px;
}
.skill-bar {
    background: linear-gradient(90deg, #5a7840 0%, var(--gold) 100%);
    box-shadow: none;
    border-radius: 0;
}

/* ─────────────────────────────────────────────────────────
   CHAT WINDOW
   ───────────────────────────────────────────────────────── */

#chat-window {
    background: var(--stone-dark);
    border: none;
    border-style: solid;
    border-width: 12px;
    border-image: url('/static/assets/sprites/ui/ui_panel_frame.png') 12 fill / 12px / 0px;
    border-image-width: 12px;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}
#chat-header {
    background: linear-gradient(180deg, #1f1a12 0%, #14110b 100%);
    border-bottom: 1px solid var(--gold-dark);
    padding: 8px 14px;
    position: relative;
}
#chat-header::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
    pointer-events: none;
}
#chat-header h3 { color: var(--gold-light); font-family: Georgia, serif; font-weight: normal; font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: 0.1em; }
#chat-toggle-btn { color: var(--gold); }
#chat-toggle-btn:hover { color: var(--gold-light); }

#chat-tabs {
    background: var(--stone-mid);
    border-bottom: 1px solid var(--stone-light);
}
.chat-tab-btn {
    background: var(--stone-mid);
    color: var(--stone-muted);
    font-family: Georgia, serif;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.chat-tab-btn:hover { background: var(--stone-light); color: var(--gold-light); }
.chat-tab-btn.active { background: var(--stone-dark); color: var(--gold-light); border-bottom-color: var(--gold); }

.chat-tab-content, #chat-box {
    background: var(--stone-dark);
    color: var(--stone-text);
    border: none;
}

#chat-input-row { background: var(--stone-mid); border-top: 1px solid var(--stone-light); }
#chat-input {
    background: #0e0c08;
    border: 1px solid var(--stone-light);
    border-radius: 0;
    color: var(--stone-text);
    font-family: Georgia, serif;
}
#chat-input:focus { border-color: var(--gold); outline: none; }
#chat-send-btn { border-radius: 0; }

.chat-message { background: rgba(200,160,80,0.05); color: var(--stone-text); }
.system-message { color: var(--gold); background: rgba(200,160,80,0.1); font-style: italic; }

.player-list-item {
    background: rgba(200,160,80,0.06);
    border-left-color: var(--gold);
    color: var(--stone-text);
    border-radius: 0;
    transform: none;
}
.player-list-item:hover { background: rgba(200,160,80,0.12); transform: none; }

/* ─────────────────────────────────────────────────────────
   EQUIPMENT SLOTS (paper-doll in left panel)
   ───────────────────────────────────────────────────────── */

.equipment-slot {
    border-color: var(--stone-light);
    background: var(--stone-dark);
    border-radius: 0;
}
.equipment-slot:hover { border-color: var(--gold); }
.equipment-slot-name { color: var(--stone-muted); font-size: var(--fs-body); }

.equipment-stats-summary h4 {
    color: var(--gold);
    font-size: var(--fs-ui);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: normal;
}

/* ─────────────────────────────────────────────────────────
   HUD DIVIDER
   ───────────────────────────────────────────────────────── */

.hud-divider {
    position: relative;
    height: 1px;
    background: var(--stone-light);
    margin: 14px 14px 10px;
}
.hud-divider[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--stone-dark);
    padding: 0 8px;
    font-family: Georgia, serif;
    font-size: var(--fs-fine);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-dark);
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────
   CHARACTER PANEL
   ───────────────────────────────────────────────────────── */

.char-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--stone-light);
}

.char-avatar-sprite {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    border: 1px solid var(--gold-dark);
    background: rgba(8, 6, 4, 0.7);
    flex-shrink: 0;
}

.char-name {
    font-family: Georgia, serif;
    font-size: var(--fs-ui);
    color: var(--gold-light);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    letter-spacing: 0.02em;
}

.char-sublabel {
    font-family: Georgia, serif;
    font-size: var(--fs-fine);
    color: var(--stone-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.char-stat-bars {
    padding: 12px 14px 0;
}

.char-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 14px;
    margin-bottom: 5px;
}

.char-stat-bars .char-stat-row {
    padding: 0;
    margin-bottom: 4px;
}

.char-stat-label {
    font-family: Georgia, serif;
    font-size: var(--fs-fine);
    color: var(--stone-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.char-stat-value {
    font-family: Georgia, serif;
    font-size: var(--fs-body);
    color: var(--stone-text);
    text-align: right;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.char-bar-track {
    height: 6px;
    background: rgba(8, 6, 4, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
    overflow: hidden;
}

.char-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s;
}

.char-bar-hp { background: linear-gradient(180deg, var(--color-hp-low), var(--color-hp)); }

.char-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px 14px 14px;
}

.char-action-btn {
    background: var(--stone-mid);
    border: 1px solid var(--stone-light);
    color: var(--stone-text);
    font-family: Georgia, serif;
    font-size: var(--fs-fine);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 0;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.char-action-btn:hover {
    background: var(--stone-light);
    border-color: var(--gold-dark);
    color: var(--gold-light);
}

.char-action-btn-danger {
    background: rgba(46, 24, 16, 0.85);
    border-color: rgba(138, 48, 32, 0.6);
    color: var(--color-hp-low);
}

.char-action-btn-danger:hover {
    background: rgba(80, 32, 24, 0.95);
    border-color: var(--color-hp-low);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────
   COMBAT PANEL
   ───────────────────────────────────────────────────────── */

.combat-active-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 14px 0;
}

.combat-active-label {
    font-family: Georgia, serif;
    font-size: var(--fs-fine);
    color: var(--stone-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.combat-active-value {
    font-family: Georgia, serif;
    font-size: var(--fs-body);
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────────────────────
   COMBAT STANCE BUTTONS
   ───────────────────────────────────────────────────────── */

.combat-stance-btn {
    font-size: var(--fs-ui);
    padding: 8px 12px;
}

/* ─────────────────────────────────────────────────────────
   INVENTORY SHELL (right panel)
   ───────────────────────────────────────────────────────── */

.inventory-header-row { color: var(--stone-text); }
.inventory-header-row strong { color: var(--gold-light); }

/* ─────────────────────────────────────────────────────────
   PANEL SIZING — remove scroll-forcing max-heights
   ───────────────────────────────────────────────────────── */

/* Inventory panel: hidden by default, shown by rail button / I key */
#ui-panel {
    display: none !important;
    max-height: none !important;
    overflow: hidden !important;
}
#ui-panel.visible {
    display: flex !important;
    flex-direction: column !important;
    max-height: 540px !important;
}

#inventory-panel-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Left HUD panel: full height side panel */
#left-hud-panel {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Skills section needs extra room for the 3-column drilldown */
#left-hud-panel:has(.hud-section[data-section="skills"].active) {
    width: 520px !important;
}

#left-hud-body {
    flex: 1;
    overflow-y: auto;
}

/* HUD sections */
.hud-section {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Modal panels: near-full-height, no unnecessary scroll */
.game-panel, #map-panel, #trade-panel, #leaderboard-panel,
#economy-panel, #controls-panel {
    max-height: 96vh !important;
}
.equipment-select-modal { max-height: 96vh !important; }

/* Equipment-select items list: no artificial height limit */
.equipment-select-items { overflow-y: visible !important; max-height: none !important; }

#coord-widget {
    position: absolute;
    top: 38px;
    right: 12px;
    z-index: 12;
    min-width: 112px;
    padding: 4px 6px;
    background: rgba(10, 8, 4, 0.82);
    border: 1px solid rgba(200, 160, 80, 0.45);
    color: var(--gold-light);
    font-size: var(--fs-ui);
    line-height: 1.4;
    text-transform: uppercase;
    pointer-events: none;
}

/* ==========================================================
   HEARTH CHROME — appended for the structural port to the
   OSRS-flavored visual direction. Builds on the palette
   variables above. Rules are scoped to override prior CSS
   without breaking handlers.
   ========================================================== */

/* Heavy carved-cabinet wood-frame primitive — applied to header,
   game-area, sidebar panels via :is() selectors below. */
:root {
    --hearth-wood-frame-shadow:
        inset 0 0 0 4px var(--wood-1),
        inset 0 0 0 6px var(--gold-deep),
        inset 0 0 0 7px var(--gold),
        inset 0 0 0 9px var(--wood-deep),
        0 8px 30px rgba(0,0,0,0.55);
}

/* ── Header ── */
header {
    /* Heraldic banner tiled across the bar. `auto 100%` fits the 768x128 band
       to the bar height (aspect preserved — no horizontal stretch); `repeat-x`
       tiles it edge to edge at any width. A light scrim keeps the wordmark +
       nav legible; wood gradient is the base so the bar degrades gracefully if
       the PNG is absent. */
    background:
        linear-gradient(180deg, rgba(14, 10, 6, 0.48) 0%, rgba(14, 10, 6, 0.52) 42%, rgba(14, 10, 6, 0.70) 100%),
        url('/static/assets/sprites/ui/ui_banner_heraldry.png') left center / auto 100% repeat-x,
        linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 55%, var(--wood-2) 100%) !important;
    image-rendering: pixelated;
    border-top: 2px solid var(--wood-hi) !important;
    border-bottom: 2px solid var(--wood-deep) !important;
    box-shadow:
        inset 0 0 0 1px var(--gold-deep),
        inset 0 0 0 2px var(--gold-dark);
}
header::after {
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent) !important;
    opacity: 0.6 !important;
}
header h1.logo,
header h1 {
    font-family: var(--font-display) !important;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--osrs-yellow);
    text-shadow: 0 1px 0 #000, 0 0 8px rgba(255,214,74,0.18);
    text-transform: uppercase;
}
header nav a {
    font-family: var(--font-caps) !important;
    letter-spacing: 0.22em !important;
    color: var(--stone-text) !important;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #000;
}
header nav a:hover {
    color: var(--osrs-yellow) !important;
    background: linear-gradient(180deg, rgba(90, 60, 24, 0.72) 0%, rgba(36, 24, 11, 0.88) 100%) !important;
}

/* ── Brass Crest top-bar (Variant A) ──
   Heraldic crest + gradient wordmark + motto + ornament seam + nav
   diamond separators. Builds on the wood-gradient header above; reuses
   the brass/oxblood palette and the Cinzel / IM Fell fonts. */
header .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
header .site-crest {
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
header .brand-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    min-width: 0;
}
/* Gradient-filled wordmark with oxblood-orange drop caps. Inherits
   font-family / transform / letter-spacing from `header h1.logo` above. */
header h1.logo {
    margin: 0;
    line-height: 1;
    background: linear-gradient(180deg, var(--gold-pale) 0%, var(--osrs-yellow) 42%, var(--gold) 74%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Dark outline so the gold reads over the (bright) banner art */
    text-shadow: 0 1px 1px #000, 0 0 4px rgba(0,0,0,0.9),
                 1px 0 1px rgba(0,0,0,0.7), -1px 0 1px rgba(0,0,0,0.7);
}
header h1.logo .drop {
    -webkit-text-fill-color: var(--osrs-orange);
    color: var(--osrs-orange);
}
header .brand-motto {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--parch-lite);
    text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,0.85);
    margin-top: 4px;
    white-space: nowrap;
}
/* Signature ornament mark riding the bottom seam */
header::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 40px;
    height: 13px;
    transform: translateX(-50%);
    background: url('/static/assets/sprites/ui/ui_header_ornament.png') center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 5px rgba(176, 134, 40, 0.4));
    pointer-events: none;
    z-index: 1;
}
/* Nav: brass diamond separators + brass underline on hover */
header nav {
    display: flex;
    align-items: center;
}
header nav a {
    position: relative;
    margin: 0 4px;
    padding: 6px 12px;
    /* Carry legibility over the banner regardless of where nav reflows:
       a dark wood-tab backing plate behind each link keeps text readable
       while leaving the banner vivid in the gaps. */
    color: var(--parch-lite) !important;
    text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.75) !important;
    background: linear-gradient(180deg, rgba(46, 32, 16, 0.60) 0%, rgba(14, 10, 6, 0.80) 100%);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.40),
                inset 0 1px 0 rgba(176, 134, 40, 0.10);
}
header nav a + a::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--gold-dark);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}
header nav a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 1px;
    background: var(--gold);
    opacity: 0;
    transition: opacity 0.14s;
}
header nav a:hover::after {
    opacity: 0.85;
}

/* ── Login title ── */
#login-game-title {
    font-family: var(--font-display) !important;
    font-weight: 900;
    font-size: 56px !important;
    color: var(--rs-red, #6e1a1a);
    text-shadow:
        1px 1px 0 #2a0a0a,
        2px 2px 0 rgba(0,0,0,0.45),
        0 0 18px rgba(110,26,26,0.4);
    letter-spacing: 0.08em;
    animation: none !important;
    line-height: 1.05;
}
#login-subtitle {
    font-family: var(--font-italic) !important;
    font-style: italic;
    color: var(--osrs-orange);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 #000;
}
#login-form {
    background: linear-gradient(180deg, #e8d8a4 0%, #c8a878 100%) !important;
    border-image: none !important;
    border-style: solid !important;
    border-width: 0 !important;
    border-top: 2px solid var(--parch-lite) !important;
    border-left: 2px solid var(--parch-lite) !important;
    border-right: 2px solid var(--wood-deep) !important;
    border-bottom: 2px solid var(--wood-deep) !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 0 1px var(--gold-deep),
        inset 0 0 0 2px var(--gold),
        inset 0 0 0 3px var(--gold-deep),
        0 10px 32px rgba(0,0,0,0.75) !important;
    color: var(--ink) !important;
}
.login-tab {
    color: var(--stone-text) !important;
    background: linear-gradient(180deg, var(--wood-3), var(--wood-1)) !important;
    border: 1px solid var(--wood-deep) !important;
    text-shadow: 0 1px 0 #000;
    font-family: var(--font-display) !important;
    font-weight: 800;
    letter-spacing: 0.22em;
    padding: 8px 14px !important;
}
.login-tab.active {
    color: var(--osrs-yellow) !important;
    background: linear-gradient(180deg, #903030, #6e1a1a 60%, #380808) !important;
}
#login-error {
    color: var(--osrs-orange) !important;
    text-shadow: 0 1px 0 #000;
}
#login-form input { color: var(--ink) !important; }
#login-form input::placeholder { color: rgba(10,6,8,0.45) !important; font-style: italic; }
#guest-disclaimer, .guest-disclaimer { color: var(--ink-soft) !important; }
#login-game-title {
    color: var(--osrs-yellow) !important;
    text-shadow:
        2px 2px 0 #000,
        0 1px 0 #000,
        0 0 18px rgba(255,214,74,0.35) !important;
}
/* Vignette overlay was painting on top of the form, darkening it. */
#login-screen::after { background: transparent !important; }
#login-screen::before { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,214,74,0.06) 0%, transparent 70%) !important; }
#login-form, #login-title-block { position: relative; z-index: 5; }
#login-form input,
#login-form input[type="text"],
#login-form input[type="password"] {
    font-family: var(--font-pixel) !important;
    font-size: 18px !important;
    color: var(--ink) !important;
    background: #efd9b0 !important;
    border-top: 1px solid var(--parch-shadow) !important;
    border-left: 1px solid var(--parch-shadow) !important;
    border-right: 1px solid var(--parch-lite) !important;
    border-bottom: 1px solid var(--parch-lite) !important;
}
.login-tab,
#login-submit-btn,
#register-btn,
#guest-btn {
    font-family: var(--font-display) !important;
    font-weight: 800;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
}
#login-submit-btn,
#register-btn {
    background: linear-gradient(180deg, #903030 0%, var(--color-hp) 45%, #380808 100%) !important;
    color: #f3e3c2 !important;
    border: 1.5px solid #180a0a !important;
    text-shadow: 0 1px 0 #000;
    box-shadow:
        inset 0 1px 0 rgba(255,200,160,0.28),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        0 3px 0 #1a0606,
        0 6px 14px rgba(0,0,0,0.4) !important;
}
#guest-btn {
    background: linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 100%) !important;
    color: var(--stone-text) !important;
    border: 1.5px solid var(--wood-deep) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,220,160,0.18),
        inset 0 0 0 1px var(--gold-deep),
        0 3px 0 var(--wood-deep) !important;
}

/* ── Game panel chrome (used by crafting/tanning/inventory/journal/etc) ── */
/* NB: #chat-window is intentionally NOT in this list — chat uses the
   thin-bordered black-with-yellow OSRS treatment defined below, not the
   chunky wood-frame chrome. */
.game-panel,
#trade-panel,
#map-panel,
#leaderboard-panel,
#economy-panel,
#mount-collection-panel,
#party-panel,
#band-panel,
#auction-panel,
#courier-panel,
#letter-composer-panel,
#player-trade-panel,
#ui-panel,
#left-hud-panel,
.sidebar-panel,
#minimap-container,
#unit-frames .unit-frame {
    background: linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 55%, var(--wood-2) 100%) !important;
    /* reset legacy sprite border-image */
    border-image: none !important;
    border-style: solid !important;
    border-width: 0 !important;
    border-top: 1.5px solid var(--wood-hi) !important;
    border-left: 1.5px solid var(--wood-hi) !important;
    border-right: 1.5px solid var(--wood-deep) !important;
    border-bottom: 1.5px solid var(--wood-deep) !important;
    box-shadow:
        inset 0 0 0 1px var(--wood-deep),
        inset 0 0 0 2px var(--gold-deep),
        0 4px 14px rgba(0,0,0,0.55) !important;
    border-radius: 0 !important;
}

/* Panel headers (titles) */
.panel-header,
.panel-header h3,
.panel-header h2,
.panel-title {
    font-family: var(--font-display) !important;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--osrs-yellow) !important;
    text-shadow: 0 1px 0 #000, 0 0 6px rgba(255,214,74,0.16);
    text-transform: uppercase;
}
.panel-header {
    background: linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 100%) !important;
    border-bottom: 1px solid var(--gold-deep) !important;
}

/* Buttons across the UI — chunky wood-tab feel */
button,
.btn,
.char-action-btn,
.combat-stance-btn,
.btn-panel-close {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}

/* ── Chat — yellow VT323 on black, like OSRS ── */
#chat-box {
    background: var(--ink) !important;
    color: var(--osrs-yellow) !important;
    font-family: var(--font-pixel) !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
    border-top: 1.5px solid var(--wood-deep) !important;
    border-left: 1.5px solid var(--wood-deep) !important;
    border-right: 1.5px solid var(--wood-3) !important;
    border-bottom: 1.5px solid var(--wood-3) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5) !important;
}
#chat-box .chat-line {
    color: #fff;
}
#chat-box .chat-name,
#chat-box .who,
#chat-box .player-name {
    color: var(--osrs-yellow);
}
#chat-input {
    font-family: var(--font-pixel) !important;
    font-size: 16px !important;
    background: #efd9b0 !important;
    color: var(--ink) !important;
    border-top: 1px solid var(--parch-shadow) !important;
    border-left: 1px solid var(--parch-shadow) !important;
    border-right: 1px solid var(--parch-lite) !important;
    border-bottom: 1px solid var(--parch-lite) !important;
}
#chat-send-btn {
    font-family: var(--font-display) !important;
    font-weight: 800;
    letter-spacing: 0.18em;
    background: linear-gradient(180deg, #903030 0%, var(--color-hp) 60%, #380808 100%) !important;
    color: #f3e3c2 !important;
    border: 1px solid #180a0a !important;
    text-shadow: 0 1px 0 #000;
}
.chat-channel-btn {
    font-family: var(--font-caps) !important;
    letter-spacing: 0.2em;
    color: var(--stone-text) !important;
    background: linear-gradient(180deg, var(--wood-3), var(--wood-1)) !important;
    border-top: 1px solid var(--wood-hi) !important;
    border-left: 1px solid var(--wood-hi) !important;
    border-right: 1px solid var(--wood-deep) !important;
    border-bottom: 1px solid var(--wood-deep) !important;
}
.chat-channel-btn.active {
    color: var(--osrs-yellow) !important;
    background: linear-gradient(180deg, var(--wood-hi), var(--wood-3)) !important;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.3) !important;
}

/* ── Rail buttons (left rail) — OSRS wooden tab feel ── */
#left-rail {
    background: linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 100%) !important;
    border-top: 1.5px solid var(--wood-hi) !important;
    border-left: 1.5px solid var(--wood-hi) !important;
    border-right: 1.5px solid var(--wood-deep) !important;
    border-bottom: 1.5px solid var(--wood-deep) !important;
    box-shadow: inset 0 0 0 1px var(--wood-deep), inset 0 0 0 2px var(--gold-deep) !important;
}
.rail-btn {
    background: linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 100%) !important;
    border-top: 1px solid var(--wood-hi) !important;
    border-left: 1px solid var(--wood-hi) !important;
    border-right: 1px solid var(--wood-deep) !important;
    border-bottom: 1px solid var(--wood-deep) !important;
    color: var(--stone-text) !important;
}
.rail-btn:hover {
    background: linear-gradient(180deg, var(--wood-hi), var(--wood-3)) !important;
}
.rail-btn.active,
.rail-btn[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--parch-2), var(--parch-0)) !important;
    border-top-color: var(--parch-shadow) !important;
    border-left-color: var(--parch-shadow) !important;
    border-right-color: var(--parch-lite) !important;
    border-bottom-color: var(--parch-lite) !important;
    color: var(--ink) !important;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2) !important;
}
.rail-btn-label {
    font-family: var(--font-caps) !important;
    letter-spacing: 0.18em;
    color: inherit !important;
}

/* ── Unit frames (player + target) — parchment plate on wooden frame ── */
.unit-frame {
    padding: 4px !important;
}
.unit-frame-info {
    background: linear-gradient(180deg, var(--parch-0), var(--parch-1)) !important;
    border-top: 1px solid var(--parch-lite);
    border-left: 1px solid var(--parch-lite);
    border-right: 1px solid var(--parch-shadow);
    border-bottom: 1px solid var(--parch-shadow);
    padding: 6px 10px 8px !important;
}
.unit-frame-name {
    font-family: var(--font-display) !important;
    font-weight: 800;
    color: var(--ink) !important;
    letter-spacing: 0.04em;
}
.unit-frame-level {
    font-family: var(--font-caps) !important;
    letter-spacing: 0.18em;
    color: var(--osrs-orange) !important;
}
.unit-frame-bar {
    background: var(--ink) !important;
    border-top: 1.5px solid var(--wood-deep) !important;
    border-left: 1.5px solid var(--wood-deep) !important;
    border-right: 1.5px solid var(--wood-hi) !important;
    border-bottom: 1.5px solid var(--wood-hi) !important;
}
.unit-frame-bar-fill {
    background: linear-gradient(180deg, #c84545 0%, var(--color-hp) 50%, #380808 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,200,160,0.4);
}
.unit-frame-bar-text {
    font-family: var(--font-pixel) !important;
    color: var(--osrs-yellow);
    font-size: 13px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.85);
}

/* ── Minimap surround — circular wooden ring ── */
#minimap-container {
    padding: 6px !important;
}
#minimap-canvas {
    clip-path: circle(50%);
    border: 2px solid var(--wood-deep) !important;
    box-shadow:
        inset 0 0 0 1.5px var(--gold-deep),
        0 0 0 1.5px var(--wood-3) !important;
}
#minimap-region {
    font-family: var(--font-caps) !important;
    color: var(--osrs-yellow) !important;
    letter-spacing: 0.18em;
    font-style: normal !important;
    font-weight: 700 !important;
    /* Readable against any zone palette: dark pill + thick outline. */
    background: rgba(10, 8, 4, 0.78) !important;
    border: 1px solid rgba(200, 160, 80, 0.55) !important;
    padding: 2px 10px !important;
    border-radius: 2px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 80% !important;
    text-shadow:
        -1px 0 0 #000,
        1px 0 0 #000,
        0 -1px 0 #000,
        0 1px 0 #000,
        0 1px 3px rgba(0, 0, 0, 0.95) !important;
}
#minimap-compass {
    font-family: var(--font-pixel) !important;
    color: var(--osrs-yellow) !important;
    text-shadow: 0 1px 0 #000;
}
#minimap-nearby-count {
    font-family: var(--font-pixel) !important;
    color: var(--stone-text);
}

/* Status badge above canvas */
#status {
    font-family: var(--font-caps) !important;
    letter-spacing: 0.18em;
    color: var(--osrs-yellow);
    background: rgba(10,8,4,0.85);
    border: 1px solid var(--gold-deep);
    text-shadow: 0 1px 0 #000;
}

/* ── Inventory slots ── */
.inventory-grid .inv-slot,
.inventory-slot,
.inv-slot {
    background: linear-gradient(180deg, var(--parch-0) 0%, var(--parch-1) 100%) !important;
    border-top: 1.5px solid var(--parch-lite) !important;
    border-left: 1.5px solid var(--parch-lite) !important;
    border-right: 1.5px solid var(--parch-shadow) !important;
    border-bottom: 1.5px solid var(--parch-shadow) !important;
}
.inv-slot:hover {
    background: linear-gradient(180deg, var(--gold-pale), var(--gold-bright)) !important;
}
.inv-slot .qty,
.inv-slot .stack-count {
    font-family: var(--font-pixel) !important;
    color: var(--osrs-yellow) !important;
    text-shadow: 0 1px 0 #000, 0 0 2px #000;
}

/* ── Gold pouch / gp readouts ── */
#inv-gold {
    font-family: var(--font-pixel) !important;
    color: var(--osrs-yellow);
    background: var(--ink);
    padding: 0 6px;
    text-shadow: 0 1px 0 #000;
}

/* ── Action progress bar ── */
#action-progress {
    background: linear-gradient(180deg, var(--wood-3), var(--wood-1)) !important;
    border-top: 1.5px solid var(--wood-hi);
    border-left: 1.5px solid var(--wood-hi);
    border-right: 1.5px solid var(--wood-deep);
    border-bottom: 1.5px solid var(--wood-deep);
}
#action-progress-label {
    font-family: var(--font-caps) !important;
    color: var(--osrs-yellow) !important;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 0 #000;
}
#action-progress-fill {
    background: linear-gradient(180deg, var(--osrs-yellow-hi), var(--osrs-orange)) !important;
    box-shadow: inset 0 1px 0 rgba(255,235,180,0.45);
}

/* ── Character HP bar inside char panel ── */
.char-bar-track {
    background: var(--ink) !important;
    border-top: 1.5px solid var(--wood-deep);
    border-left: 1.5px solid var(--wood-deep);
    border-right: 1.5px solid var(--wood-hi);
    border-bottom: 1.5px solid var(--wood-hi);
}
.char-bar-fill {
    background: linear-gradient(180deg, #c84545, var(--color-hp), #380808) !important;
    box-shadow: inset 0 1px 0 rgba(255,200,160,0.4);
}
.char-bar-fill.char-bar-hp { background: linear-gradient(180deg, #c84545, var(--color-hp), #380808) !important; }

/* ── HUD dividers / section labels ── */
.hud-divider {
    border-color: var(--gold-deep) !important;
}
.hud-divider[data-label]::before {
    font-family: var(--font-caps) !important;
    color: var(--osrs-orange) !important;
    letter-spacing: 0.3em;
}

/* ── Modal close button ── */
.btn-panel-close {
    background: linear-gradient(180deg, var(--wood-3), var(--wood-1)) !important;
    color: var(--osrs-yellow) !important;
    border: 1px solid var(--wood-deep) !important;
    text-shadow: 0 1px 0 #000;
}

/* Tooltip — parchment with wood border */
#item-tooltip {
    background: linear-gradient(180deg, var(--parch-0), var(--parch-1)) !important;
    border-top: 1.5px solid var(--parch-lite) !important;
    border-left: 1.5px solid var(--parch-lite) !important;
    border-right: 1.5px solid var(--wood-deep) !important;
    border-bottom: 1.5px solid var(--wood-deep) !important;
    color: var(--ink) !important;
    font-family: var(--font-serif) !important;
}

/* ── Below-viewport version + info row ── */
#version-badge,
.info-value {
    font-family: var(--font-pixel) !important;
    color: var(--osrs-orange);
    text-shadow: 0 1px 0 #000;
    font-size: 14px !important;
}
#below-viewport-row {
    background: linear-gradient(180deg, var(--wood-1), var(--wood-deep)) !important;
    border-image: none !important;
    border-top: 1px solid var(--gold-deep);
    color: var(--stone-text);
    padding: 8px 12px !important;
}
#below-viewport-row .info-label,
#below-viewport-row h3,
#below-viewport-row label {
    font-family: var(--font-caps) !important;
    color: var(--osrs-yellow) !important;
    letter-spacing: 0.18em !important;
    text-shadow: 0 1px 0 #000;
}

/* Activity sidebar list */
.sidebar-panel h3,
#rw-activity-panel h3 {
    font-family: var(--font-display) !important;
    font-weight: 900;
    color: var(--osrs-yellow) !important;
    text-shadow: 0 1px 0 #000;
    letter-spacing: 0.08em;
}
#rw-activity-list {
    /* Match chat: transparent so the panel's dark glass shows through,
       yellow pixel text on near-black instead of yellow on parchment. */
    background: transparent !important;
    border: none !important;
    color: var(--osrs-yellow) !important;
}

/* ==========================================================
   PHASE 2 — chat OVERLAY on canvas (OSRS Resizable mode).
   #chat-window is positioned absolute inside #canvas-wrap,
   anchored to the bottom-left, semi-transparent so the game
   world shows through behind it.
   #canvas-wrap clips all overlay overflow so nothing ever
   extends past the viewport bounds.
   ========================================================== */
#canvas-wrap { position: relative; overflow: hidden; }
#chat-window {
    position: absolute !important;
    left: 4px !important;
    right: auto !important;
    bottom: 4px !important;
    width: 55% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    max-height: calc(100% - 16px) !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 25 !important;

    /* dark semi-transparent overlay so game world shows behind */
    background: rgba(8, 6, 4, 0.78) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: var(--osrs-yellow) !important;
    font-family: var(--font-pixel) !important;

    /* thin OSRS borders, no chunky cabinet */
    padding: 6px 10px !important;
    border-image: none !important;
    border-style: solid !important;
    border-width: 0 !important;
    border-top: 1px solid rgba(208, 168, 56, 0.55) !important;
    border-left: 1px solid rgba(208, 168, 56, 0.55) !important;
    border-right: 1px solid rgba(0,0,0,0.9) !important;
    border-bottom: 1px solid rgba(0,0,0,0.9) !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(74, 48, 16, 0.6),
        0 -2px 12px rgba(0,0,0,0.5) !important;
}
#chat-window.chat-collapsed,
body.chat-collapsed #chat-window {
    height: 30px !important;
    overflow: hidden;
}
#chat-header {
    background: transparent !important;
    border-bottom: 1px solid var(--gold-deep) !important;
    padding: 4px 0 6px !important;
}
#chat-header h3 {
    color: var(--osrs-orange) !important;
    font-family: var(--font-caps) !important;
    font-size: 12px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase;
}
#chat-toggle-btn {
    background: transparent !important;
    color: var(--osrs-yellow) !important;
    border: none !important;
    box-shadow: none !important;
}
#chat-box {
    background: transparent !important;
    color: var(--osrs-yellow) !important;
    font-family: var(--font-pixel) !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
    border: none !important;
    box-shadow: none !important;
    height: 130px !important;
    padding: 6px 0 !important;
}
#chat-input {
    background: rgba(20,16,8,0.85) !important;
    color: var(--osrs-yellow) !important;
    font-family: var(--font-pixel) !important;
    font-size: 15px !important;
    border: 1px solid var(--gold-deep) !important;
}
#chat-send-btn {
    background: linear-gradient(180deg, var(--wood-3), var(--wood-1)) !important;
    color: var(--osrs-yellow) !important;
    border: 1px solid var(--gold-deep) !important;
    font-family: var(--font-caps) !important;
    letter-spacing: 0.18em !important;
}
.chat-channel-btn {
    background: linear-gradient(180deg, var(--wood-3), var(--wood-1)) !important;
    color: var(--parch-0) !important;
}
.chat-channel-btn.active {
    color: var(--osrs-yellow) !important;
    background: linear-gradient(180deg, var(--wood-hi), var(--wood-3)) !important;
}

/* Wood-frame cabinet around the whole game window (canvas + chat).
   Applied to #game-container which is the parent of #canvas-wrap. */
#game-container {
    background: linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 55%, var(--wood-2) 100%) !important;
    border-image: none !important;
    border-style: solid !important;
    border-width: 0 !important;
    border-top: 2px solid var(--wood-hi) !important;
    border-left: 2px solid var(--wood-hi) !important;
    border-right: 2px solid var(--wood-deep) !important;
    border-bottom: 2px solid var(--wood-deep) !important;
    box-shadow:
        inset 0 0 0 4px var(--wood-1),
        inset 0 0 0 6px var(--gold-deep),
        inset 0 0 0 7px var(--gold),
        inset 0 0 0 9px var(--wood-deep),
        0 8px 30px rgba(0,0,0,0.55) !important;
    padding: 12px !important;
}

/* Chat container internal sizing — fit nicely under the canvas */
#chat-window {
    padding: 6px !important;
}
#chat-box {
    height: 162px !important;
    min-height: 0 !important;
    max-height: none !important;
}
#chat-tabs {
    margin-bottom: 4px !important;
}
#chat-channel-strip {
    margin-bottom: 4px !important;
}

/* ==========================================================
   PHASE 3 — circular minimap is already handled via clip-path
   on #minimap-canvas above. Ensure the surrounding wooden
   container hugs the disc.
   ========================================================== */
#minimap-container {
    width: 168px !important;
    height: 168px !important;
    border-radius: 6px !important;
}
#minimap-canvas {
    width: 138px !important;
    height: 138px !important;
    display: block;
    margin: 0 auto;
}

/* ==========================================================
   PHASE 4 — left rail → bottom horizontal strip (OSRS-style).
   Reposition #left-rail from absolute canvas-overlay to a
   third row in the game-and-sidebar grid spanning both cols.
   Keeps all 12 button handlers intact.
   ========================================================== */
@media (min-width: 900px) {
    /* Phase 4 — rail OVERLAYED on canvas (horizontal strip, bottom-right of
       viewport, like OSRS resizable mode). Rail is already inside #canvas-wrap.
       Wraps to a second row if there isn't enough horizontal space. */
    #left-rail {
        position: absolute !important;
        left: auto !important;
        right: 4px !important;
        bottom: 4px !important;
        top: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        padding: 4px !important;
        z-index: 26 !important;
        max-width: calc(100% - 8px) !important;
        background: rgba(8, 6, 4, 0.78) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-top: 1px solid rgba(208, 168, 56, 0.55) !important;
        border-left: 1px solid rgba(208, 168, 56, 0.55) !important;
        border-right: 1px solid rgba(0,0,0,0.9) !important;
        border-bottom: 1px solid rgba(0,0,0,0.9) !important;
        box-shadow:
            inset 0 0 0 1px rgba(74, 48, 16, 0.6),
            0 -2px 12px rgba(0,0,0,0.5) !important;
    }
    .rail-btn {
        flex-direction: column !important;
        width: 44px !important;
        height: 40px !important;
        padding: 3px 2px !important;
        margin: 0 !important;
        align-self: center !important;
    }
    .rail-btn-label {
        font-size: 8px !important;
        letter-spacing: 0.08em !important;
    }
    /* Override the column-layout positioning of Map (margin-top:12px;padding:10px 18px)
       and Help (margin-top:auto) so they sit aligned with siblings in the row */
    #left-rail #map-toggle-btn {
        margin-top: 0 !important;
        padding: 3px 2px !important;
        width: 44px !important;
        height: 40px !important;
        font-family: var(--font-caps) !important;
        font-weight: normal !important;
        background: linear-gradient(180deg, var(--wood-3) 0%, var(--wood-1) 100%) !important;
        box-shadow: none !important;
    }
    /* Vertical dividers between rail groups (was horizontal in column layout) */
    #left-rail .rail-divider {
        width: 1px !important;
        height: 28px !important;
        margin: 0 4px !important;
        background: var(--gold-deep) !important;
        border: none !important;
        align-self: center !important;
    }
    /* Active indicator: top edge bar since rail is horizontal */
    #left-rail .rail-btn.active::before,
    #left-rail .rail-btn.active-tab::before {
        left: 0 !important;
        right: 0 !important;
        top: -1px !important;
        bottom: auto !important;
        width: auto !important;
        height: 3px !important;
    }
    .rail-tooltip {
        bottom: calc(100% + 6px) !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    /* "More" flyout opens upward when the rail is a horizontal bottom strip.
       Laid out as a ROW: a vertical stack of six buttons (~300px) gets clipped
       by #canvas-wrap{overflow:hidden} on short viewports (1024×768 etc.);
       a single 40px-tall row always fits. */
    #rail-more-flyout {
        left: auto !important;
        right: 0 !important;
        bottom: calc(100% + 6px) !important;
        flex-direction: row !important;
    }

    /* Sidebar (just Activity now — Updates + Status are rail-toggle popups)
       is an OVERLAY on the canvas, positioned top-right below the minimap.
       Bounded by canvas-wrap on every side. */
    #sidebar {
        position: absolute !important;
        top: 168px !important;       /* below minimap */
        right: 4px !important;
        bottom: 64px !important;     /* above the bottom rail strip */
        left: auto !important;
        width: 240px !important;
        max-width: calc(100% - 8px) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        z-index: 24 !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    #below-viewport-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    /* Each overlayed panel inside the sidebar is a semi-transparent dark
       glass cell with thin gold borders — matches chat / rail aesthetic */
    #sidebar > .sidebar-panel,
    #sidebar #below-viewport-row > .sidebar-panel {
        background: rgba(8, 6, 4, 0.78) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-image: none !important;
        border-style: solid !important;
        border-width: 0 !important;
        border-top: 1px solid rgba(208, 168, 56, 0.55) !important;
        border-left: 1px solid rgba(208, 168, 56, 0.55) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.9) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.9) !important;
        box-shadow:
            inset 0 0 0 1px rgba(74, 48, 16, 0.6),
            0 2px 8px rgba(0, 0, 0, 0.4) !important;
        padding: 8px 10px !important;
        border-radius: 0 !important;
    }
}

/* Sidebar panel internals (Activity / Latest Updates / Server Status) —
   readable text colors and compact padding on the wood-frame chrome */
#sidebar .sidebar-panel,
#below-viewport-row .sidebar-panel {
    padding: 10px 12px !important;
}
#sidebar .sidebar-panel h3,
#below-viewport-row .sidebar-panel h3 {
    font-family: var(--font-display) !important;
    font-weight: 900;
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
    color: var(--osrs-yellow) !important;
    text-shadow: 0 1px 0 #000;
    text-transform: uppercase;
    margin: 0 0 8px !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid var(--gold-deep);
}
#sidebar .info-row,
#below-viewport-row .info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 4px 0 !important;
    border-bottom: 1px dotted rgba(208, 168, 56, 0.25);
    font-size: 13px;
}
#sidebar .info-row:last-child,
#below-viewport-row .info-row:last-child { border-bottom: none; }
#sidebar .info-label,
#below-viewport-row .info-label {
    font-family: var(--font-caps) !important;
    color: var(--osrs-orange) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    font-size: 11px !important;
    text-shadow: 0 1px 0 #000;
}
#sidebar .info-value,
#below-viewport-row .info-value {
    font-family: var(--font-pixel) !important;
    color: var(--osrs-yellow) !important;
    font-size: 15px !important;
    text-shadow: 0 1px 0 #000;
}
#sidebar .panel-message,
#below-viewport-row .panel-message {
    color: var(--osrs-yellow) !important;
    font-family: var(--font-pixel) !important;
    font-size: 16px !important;
    font-style: italic;
    opacity: 0.95;
    text-shadow: 0 1px 0 #000;
}
/* Activity list — VT323 pixel-yellow on near-black for max readability,
   like the chat box. Targets the list container AND anything inside it
   (items are injected by JS with their own markup). */
#rw-activity-list,
#rw-activity-list * {
    color: var(--osrs-yellow) !important;
    font-family: var(--font-pixel) !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 0 #000, 0 0 1px #000;
}
#rw-activity-list a,
#rw-activity-list .activity-name,
#rw-activity-list strong { color: var(--osrs-yellow-hi) !important; }
#rw-activity-list .activity-time,
#rw-activity-list time,
#rw-activity-list .when { color: #c8a050 !important; }
#rw-activity-list .activity-quest,
#rw-activity-list .activity-xp { color: #8aa850 !important; }
/* Slightly bump panel header contrast on dark glass */
#sidebar .sidebar-panel h3,
#below-viewport-row .sidebar-panel h3 {
    color: var(--osrs-yellow-hi) !important;
    text-shadow: 0 1px 0 #000, 0 0 6px rgba(255, 240, 128, 0.18);
}

/* Activity collapse — matches the chat-toggle pattern */
#rw-activity-panel .panel-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    border-bottom: 1px solid var(--gold-deep);
    padding-bottom: 6px !important;
}
#rw-activity-toggle-btn {
    background: transparent !important;
    border: none !important;
    color: var(--osrs-yellow) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 6px !important;
    transition: transform 0.15s;
}
#rw-activity-panel.collapsed #rw-activity-toggle-btn { transform: rotate(-90deg); }
#rw-activity-panel.collapsed #rw-activity-list { display: none !important; }
#rw-activity-panel.collapsed .panel-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* ────────────────────────────────────────────────
   Rail-toggle popups (Server Status + Latest Updates).
   Hidden by default; revealed when their toggle class is
   set on <body>. Both anchored top-right of canvas-wrap,
   clipped to viewport bounds.
   ──────────────────────────────────────────────── */
#server-status-panel,
#latest-updates-panel { display: none !important; }

body.server-status-open #server-status-panel,
body.latest-updates-open #latest-updates-panel {
    display: block !important;
    position: absolute !important;
    top: 168px !important;
    width: 240px !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100% - 240px) !important;
    overflow-y: auto !important;
    z-index: 28 !important;
    background: rgba(8, 6, 4, 0.92) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-image: none !important;
    border-style: solid !important;
    border-width: 0 !important;
    border-top: 1px solid rgba(208, 168, 56, 0.7) !important;
    border-left: 1px solid rgba(208, 168, 56, 0.7) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.95) !important;
    box-shadow:
        inset 0 0 0 1px rgba(74, 48, 16, 0.7),
        0 4px 16px rgba(0, 0, 0, 0.55) !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
}
body.server-status-open #server-status-panel { right: 260px !important; }
body.latest-updates-open #latest-updates-panel { right: 260px !important; }

#server-status-panel .panel-header,
#latest-updates-panel .panel-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
#server-status-close-btn,
#latest-updates-close-btn {
    background: transparent !important;
    border: none !important;
    color: var(--osrs-yellow) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 0 6px !important;
}
/* Active state for the rail button when its panel is open */
body.server-status-open  #server-status-btn,
body.latest-updates-open #latest-updates-btn {
    background: linear-gradient(180deg, var(--parch-2), var(--parch-0)) !important;
    border-top-color: var(--parch-shadow) !important;
    border-left-color: var(--parch-shadow) !important;
    border-right-color: var(--parch-lite) !important;
    border-bottom-color: var(--parch-lite) !important;
    color: var(--ink) !important;
}

@media (min-width: 900px) {
    /* Sidebar now overlays canvas — sizing handled in the canvas-wrap rules above. */

    /* Center the whole game window horizontally on the page */
    main { display: flex !important; justify-content: center !important; }
    #main-content { margin: 0 auto !important; max-width: 1340px !important; width: 100% !important; }
    #game-content-wrapper { margin: 0 auto !important; align-items: center !important; }
    #game-and-sidebar { margin: 0 auto !important; }
}