/* ── Theme Tokens (WASM dark — WCAG AA compliant) ───────────────────────── */
:root {
    /* Backgrounds */
    --wasm-bg:          #0a0a0f;
    --wasm-bg-alt:      #0a0a12;
    --wasm-surface:     #0e0e18;
    --wasm-surface2:    #1a1a2a;
    --wasm-border:      #2a2a3a;

    /* Text — all WCAG AA ≥4.5:1 on --wasm-bg */
    --wasm-text:        #d0d0e0;  /* 11.8:1 */
    --wasm-text-dim:    #8090a0;  /* 5.8:1 */
    --wasm-text-sub:    #707585;  /* 4.7:1 */
    --wasm-text-bright: #f0f0f0;  /* 15.4:1 */
    --wasm-text-flavor: #5a6575;  /* 3.5:1 — flavor text only (≥18px) */

    /* Semantic — WCAG AA ≥4.5:1 on --wasm-bg */
    --wasm-gold:        #e6b847;  /* 9.2:1  — Luminaris gold */
    --wasm-sc:          #a080e0;  /* 5.8:1  — Thari shadow currency */
    --wasm-hp:          #e04040;  /* 5.1:1  — health */
    --wasm-xp:          #4ade80;  /* 7.9:1  — experience */
    --wasm-accent:      #6e8aa8;  /* 5.2:1  — UI accent */
    --wasm-steel:       #c0d0e4;  /* 11.0:1 — steel blue */

    /* Faction colors */
    --fac-luminaris:    #f0c850;  /* 10.5:1 */
    --fac-entropia:     #c070ff;  /* 6.0:1 */
    --fac-shadow:       #a0b8d0;  /* 7.5:1 */

    /* Font scale (8-tier) */
    --fs-xs:    10px;  /* bar values, labels */
    --fs-sm:    12px;  /* HUD body */
    --fs-base:  14px;  /* panels body */
    --fs-md:    16px;  /* dialog text */
    --fs-lg:    18px;  /* panel titles */
    --fs-xl:    22px;  /* modal titles */
    --fs-xxl:   28px;  /* loading logo */
    --fs-hero:  36px;  /* death / victory */

    /* Line heights */
    --lh-tight:   1.25;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;
}

/* ── Loading Screen ──────────────────────────────────────────────────────── */
#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--wasm-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999; transition: opacity 0.6s ease;
}
#loading-screen.hidden { opacity: 0; pointer-events: none; }
.load-logo {
    font-family: 'Cinzel', 'Trajan Pro', 'JetBrains Mono', monospace;
    font-size: var(--fs-xxl); color: var(--wasm-text-dim); letter-spacing: 6px;
    margin-bottom: 8px; font-weight: 600;
}
.load-logo span { color: var(--wasm-steel); }
.load-sub {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    font-size: var(--fs-sm); color: var(--wasm-text-sub); letter-spacing: 3px;
    margin-bottom: 32px;
}
.load-bar-wrap {
    width: 320px; height: 6px; background: var(--wasm-surface2);
    border: 1px solid var(--wasm-border); border-radius: 3px;
    overflow: hidden; margin-bottom: 12px;
}
.load-bar-fill {
    height: 100%; width: 0%; background: linear-gradient(90deg, var(--wasm-accent), var(--wasm-steel));
    transition: width 0.2s ease;
}
.load-status {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    font-size: var(--fs-xs); color: var(--wasm-text-sub);
}
.load-lore {
    margin-top: 48px; max-width: 400px; text-align: center;
    font-family: 'EB Garamond', 'Crimson Text', 'Georgia', serif;
    font-size: var(--fs-md); color: var(--wasm-text-flavor); font-style: italic;
    line-height: var(--lh-relaxed);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--wasm-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--wasm-border); }
body {
    background: var(--wasm-bg);
    color: var(--wasm-text);
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Consolas',
                 'Menlo', 'Courier New', monospace;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── HUD Top Bar ──────────────────────────────────────────────────────────── */
#header {
    background: var(--wasm-surface);
    border-bottom: 1px solid var(--wasm-border);
    padding: 0 12px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
#header .logo {
    font-family: 'Cinzel', 'Trajan Pro', 'JetBrains Mono', monospace;
    color: var(--wasm-accent);
    font-size: var(--fs-base);
    letter-spacing: 0.18em;
    font-weight: 600;
    white-space: nowrap;
}
#header .logo span { color: var(--wasm-gold); }
#hud-identity { display: flex; align-items: center; margin-left: auto; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; white-space: nowrap; }

/* Stat bars */
.bar-group { display: flex; align-items: center; gap: 5px; }
.bar-label { font-size: var(--fs-xs); color: var(--wasm-text-dim); letter-spacing: 0.1em; width: 18px; }
.bar-wrap {
    width: 110px; height: 12px;
    background: var(--wasm-bg-alt); border: 1px solid var(--wasm-border);
    position: relative;
}
.bar-fill { height: 100%; transition: width 0.3s; }
.bar-fill.hp { background: var(--wasm-hp); }
.bar-fill.sc { background: var(--wasm-sc); }
.bar-fill.sc.debt { background: var(--wasm-hp); }
.bar-text {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    font-size: var(--fs-xs); color: var(--wasm-text-bright);
    display: flex; align-items: center; justify-content: center;
    text-shadow: 0 0 2px #000;
}

/* Fluency */
.fluency-group { display: flex; align-items: center; gap: 5px; }
.fluency-lvl { font-size: var(--fs-sm); color: var(--wasm-gold); font-weight: bold; }
.fluency-label { font-size: var(--fs-xs); color: var(--wasm-gold); letter-spacing: 0.06em; }
.fluency-bar-wrap { width: 70px; height: 8px; background: var(--wasm-bg-alt); border: 1px solid var(--wasm-border); }
.fluency-fill { height: 100%; background: var(--wasm-gold); }

/* ── Dialog bubble (E20 S1) ──────────────────────────────────────────── */
#dialog-bubble {
    display: none;
    position: absolute;
    bottom: 160px; left: 50%; transform: translateX(-50%);
    min-width: 240px; max-width: 360px;
    background: rgba(4,4,12,0.93);
    border: 1px solid var(--wasm-gold);
    padding: 10px 14px 8px;
    z-index: 40;
    pointer-events: none;
    animation: dlg-fadein 0.2s ease;
}
#dialog-bubble::after {
    content: '';
    position: absolute;
    bottom: -7px; left: 50%; transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--wasm-gold);
}
#dialog-bubble.visible { display: block; }
#dialog-bubble.border-warm  { border-color: var(--wasm-gold); }
#dialog-bubble.border-cold  { border-color: #7eb8d4; }
#dialog-bubble.border-teal  { border-color: #4ad4a6; }
#dialog-bubble.border-purple{ border-color: var(--wasm-sc); }
.dlg-npc-name {
    font-family: 'Cinzel', 'Trajan Pro', 'JetBrains Mono', monospace;
    font-size: var(--fs-xs); color: var(--wasm-gold); letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 5px;
}
.dlg-text {
    font-family: 'EB Garamond', 'Crimson Text', 'Georgia', serif;
    font-size: var(--fs-md); color: var(--wasm-text); line-height: var(--lh-relaxed);
}
.dlg-thinking { text-align: center; }
.dlg-dot {
    display: inline-block; font-size: 18px; color: var(--wasm-gold);
    animation: dlg-blink 1.2s infinite;
}
.dlg-dot:nth-child(2) { animation-delay: 0.3s; }
.dlg-dot:nth-child(3) { animation-delay: 0.6s; }
@keyframes dlg-blink { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }
@keyframes dlg-fadein { from{opacity:0;transform:translateX(-50%) translateY(6px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Quest complete overlay (E20 S2) ─────────────────────────────────── */
#quest-complete-overlay {
    display: none;
    position: absolute;
    top: 40%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(4,4,12,0.95);
    border: 1px solid var(--wasm-gold);
    padding: 20px 36px;
    text-align: center;
    z-index: 50;
    pointer-events: none;
}
#quest-complete-overlay.visible { display: block; animation: dlg-fadein 0.3s ease; }
.qco-title { font-size: 11px; color: var(--wasm-gold); letter-spacing: 0.18em; margin-bottom: 6px; }
.qco-name  { font-size: 15px; color: var(--wasm-text-bright); margin-bottom: 8px; }
.qco-xp    { font-size: 20px; color: var(--wasm-xp); letter-spacing: 0.1em; }

/* ── Nasłuchiwanie panel (E25-S1-1) ───────────────────────────────────────
   60s fluency challenge in Cmentarz. Slide-up from bottom-center.
   Uses shadow palette: grey-blue (#a0b8d0) on deep dark background. */
#nasluchiw-panel {
    display: none;
    position: absolute;
    bottom: 90px; left: 50%; transform: translateX(-50%);
    width: 320px;
    background: rgba(4, 6, 14, 0.96);
    border: 1px solid var(--fac-shadow);
    padding: 18px 20px 14px;
    text-align: center;
    z-index: 60;
}
#nasluchiw-panel.visible { display: block; }
#nl-title {
    font-size: 13px; letter-spacing: 0.25em;
    color: var(--fac-shadow); margin-bottom: 4px;
}
#nl-subtitle {
    font-size: 10px; color: var(--wasm-text-dim);
    letter-spacing: 0.06em; margin-bottom: 12px; line-height: 1.4;
}
#nl-timer-wrap {
    height: 3px; background: #161830; margin-bottom: 12px;
}
#nl-timer-bar {
    height: 100%; width: 100%;
    background: var(--fac-shadow);
    transition: width linear;
}
#nl-timer-bar.urgent { background: var(--wasm-hp); }
#nl-prompt {
    font-size: 16px; color: var(--wasm-text-bright);
    letter-spacing: 0.15em; margin-bottom: 14px; min-height: 22px;
}
#nl-input-row {
    display: flex; gap: 6px; margin-bottom: 8px;
}
#nl-input {
    flex: 1; background: #080812; border: 1px solid #304060;
    color: var(--wasm-text); font-family: inherit; font-size: 12px;
    padding: 5px 8px; letter-spacing: 0.1em;
}
#nl-submit {
    background: transparent; border: 1px solid var(--fac-shadow);
    color: var(--fac-shadow); font-family: inherit; font-size: 10px;
    padding: 5px 10px; cursor: pointer; letter-spacing: 0.1em;
}
#nl-result {
    font-size: 11px; letter-spacing: 0.1em; margin-bottom: 8px;
}
#nl-result.correct { color: var(--wasm-xp); }
#nl-result.wrong   { color: var(--wasm-hp); }
#nl-close {
    background: transparent; border: none;
    color: var(--wasm-text-dim); font-family: inherit;
    font-size: 10px; cursor: pointer; letter-spacing: 0.08em;
}

/* ── Word milestone overlay (E25-S1-3) ───────────────────────────────────
   Shown briefly (4s) when hitting 10/30/80/139 words. */
#word-milestone-overlay {
    display: none;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(4, 4, 10, 0.96);
    border: 1px solid var(--wasm-gold);
    padding: 22px 36px;
    text-align: center;
    pointer-events: none;
    z-index: 70;
}
#word-milestone-overlay.visible { display: block; }
#wm-count {
    font-size: 36px; color: var(--wasm-gold);
    letter-spacing: 0.05em; line-height: 1;
}
#wm-title {
    font-size: 11px; color: var(--wasm-text-dim);
    letter-spacing: 0.25em; margin-top: 4px;
}
#wm-subtitle {
    font-size: 13px; color: var(--wasm-text-bright);
    letter-spacing: 0.12em; margin-top: 8px;
}

/* Zone transition overlay (E21 S1-5) */
#zone-transition-overlay {
    display: none;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(2,2,8,0.92);
    border: 1px solid #4a3a6a;
    padding: 24px 48px;
    text-align: center;
    z-index: 60;
    pointer-events: none;
}
#zone-transition-overlay.visible {
    display: block;
    animation: zt-fadein 0.5s ease;
}
/* Vel-Annar: fioletowo-czerwony border + colour (E22 S2-7) */
#zone-transition-overlay.vel-annar {
    border-color: var(--wasm-hp);
    background: rgba(20,2,2,0.94);
}
#zone-transition-overlay.vel-annar #zt-zone-name {
    color: var(--wasm-hp);
    text-shadow: 0 0 12px var(--wasm-hp);
}
/* Wymarły: szaro-grafitowy border + colour (E23 S1-7) */
#zone-transition-overlay.wymarły {
    border-color: var(--wasm-surface2);
    background: rgba(8,8,8,0.96);
}
#zone-transition-overlay.wymarły #zt-zone-name {
    color: var(--wasm-text-dim);
    text-shadow: 0 0 8px var(--wasm-surface2);
}
/* Złota Klepsydra overlay (E23 S3-3) — złoty pełnoekranowy */
#zlota-klepsydra-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 3, 0, 0.97);
    border: 2px solid var(--wasm-gold);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 40px;
}
#zlota-klepsydra-overlay.visible { display: flex; animation: dlg-fadein 0.8s ease; }
#zk-title {
    font-size: 20px;
    color: var(--wasm-gold);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 0 16px var(--wasm-gold);
}
#zk-subtitle {
    font-size: 11px;
    color: var(--wasm-gold);
    letter-spacing: 0.2em;
    margin-bottom: 32px;
}
#zk-lines {
    max-width: 600px;
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 2.2;
    color: var(--wasm-gold);
    min-height: 280px;
}
#zk-close {
    margin-top: 28px;
    background: transparent;
    border: 1px solid #4a3a10;
    color: var(--wasm-gold);
    font-family: inherit;
    font-size: 10px;
    padding: 6px 20px;
    cursor: pointer;
    letter-spacing: 0.15em;
    display: none;
}
#zk-close:hover { border-color: var(--wasm-gold); color: var(--wasm-gold); }

/* Strefa Pamięci overlay (E23 S1-6) — niebiesko-fioletowy, półprzezroczysty */
#strefa-pamieci-overlay {
    display: none;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(5, 5, 20, 0.96);
    border: 1px solid var(--wasm-accent);
    padding: 28px 40px;
    min-width: 340px;
    text-align: center;
    z-index: 80;
    font-family: inherit;
}
#strefa-pamieci-overlay.visible { display: block; animation: dlg-fadein 0.4s ease; }
#sp-title {
    font-size: 14px;
    color: var(--wasm-accent);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
#sp-subtitle {
    font-size: 10px;
    color: var(--wasm-accent);
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}
#sp-zones {
    font-size: 11px;
    color: var(--wasm-accent);
    margin-bottom: 20px;
    text-align: left;
}
#sp-btn-wymarły {
    background: transparent;
    border: 1px solid var(--wasm-accent);
    color: var(--wasm-accent);
    font-family: inherit;
    font-size: 11px;
    padding: 6px 20px;
    cursor: pointer;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    display: block;
    width: 100%;
}
#sp-btn-wymarły:hover { border-color: var(--wasm-accent); color: var(--wasm-steel); }
#sp-close {
    background: transparent;
    border: 1px solid var(--wasm-border);
    color: var(--wasm-accent);
    font-family: inherit;
    font-size: 10px;
    padding: 4px 16px;
    cursor: pointer;
    letter-spacing: 0.1em;
}
#sp-close:hover { border-color: var(--wasm-accent); color: var(--wasm-accent); }
/* Wymarły zone modifiers HUD indicator (E23 S1-7) */
#zm-dampening { color: var(--wasm-text-dim); }
#zt-zone-name {
    font-size: 18px;
    color: var(--wasm-sc);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
@keyframes zt-fadein {
    from { opacity: 0; transform: translate(-50%, -52%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Kernel lore overlay (E21 S2-5) */
#kernel-overlay {
    display: none;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(2,2,10,0.96);
    border: 1px solid var(--wasm-gold);
    padding: 24px 36px;
    max-width: 420px;
    text-align: left;
    z-index: 70;
}
#kernel-overlay.visible { display: block; animation: dlg-fadein 0.3s ease; }
#ko-title { font-size: 10px; color: var(--wasm-gold); letter-spacing: 0.2em; margin-bottom: 12px; }
#ko-lore  { font-size: 12px; color: #c8c0d8; line-height: 1.6; margin-bottom: 16px; }
#ko-close { background: transparent; border: 1px solid #4a3a6a; color: #8878a8;
            font-size: 10px; padding: 4px 12px; cursor: pointer; font-family: inherit; }
#ko-close:hover { border-color: var(--wasm-gold); color: var(--wasm-gold); }

/* Zone modifiers panel (E21 S2-7) */
#zone-modifiers {
    display: none;
    position: absolute;
    top: 60px; right: 8px;
    background: rgba(2,2,10,0.88);
    border: 1px solid var(--wasm-border);
    padding: 6px 12px;
    font-size: 10px;
    z-index: 30;
    pointer-events: none;
}
#zone-modifiers.visible { display: block; animation: dlg-fadein 0.5s ease; }
#zm-luminaris { color: #d4c060; }
#zm-entropia  { color: #a050c8; }

/* Kraina Umarłych overlay (E21 S3-3) */
#underworld-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,4,0.96);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 80;
    text-align: center;
}
#underworld-overlay.visible {
    display: flex;
    animation: uw-fadein 0.8s ease;
}
/* E24 S1-7: Mroczny Tkacz death — red variant */
#underworld-overlay.visible.mroczny-tkacz {
    background: rgba(10,0,0,0.97);
    border-top: 2px solid var(--wasm-hp);
}
#uw-title {
    font-size: 24px;
    color: #7848a8;
    letter-spacing: 0.3em;
    margin-bottom: 24px;
    text-shadow: 0 0 20px #4020a0;
}
#uw-kernels {
    font-size: 13px;
    color: #6858a8;
    margin-bottom: 32px;
    letter-spacing: 0.1em;
}
#uw-deaths {
    font-size: 11px;
    color: #8860b0;
    margin-bottom: 8px;
    letter-spacing: 0.12em;
}
/* ŚMIERĆ dialog bubble */
#uw-smierc-bubble {
    max-width: 420px;
    border: 1px solid #5030a0;
    background: rgba(10,0,30,0.85);
    padding: 18px 22px;
    margin: 20px auto;
    text-align: left;
}
#uw-smierc-name {
    font-size: 11px;
    color: var(--wasm-sc);
    letter-spacing: 0.25em;
    margin-bottom: 8px;
}
#uw-smierc-thinking {
    color: #6848a8;
    font-size: 18px;
    letter-spacing: 0.5em;
}
#uw-smierc-text {
    color: #d0c0f0;
    font-size: 13px;
    line-height: 1.6;
    display: none;
}
#uw-return {
    background: transparent;
    border: 1px solid #6848a8;
    color: #a888e8;
    font-size: 12px;
    padding: 10px 24px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.15em;
}
#uw-return:disabled { opacity: 0.35; cursor: default; }
#uw-return:not(:disabled):hover { border-color: var(--wasm-sc); color: #e8d8ff; }
@keyframes uw-fadein {
    from { opacity: 0; background: rgba(0,0,0,0); }
    to   { opacity: 1; background: rgba(0,0,4,0.96); }
}

/* Biały Certyfikat flash overlay (E22 S3-3) */
#certyfikat-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,245,200,0.08);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 90;
    text-align: center;
    pointer-events: none;
}
#certyfikat-overlay.visible {
    display: flex;
    animation: cert-flash 4s ease forwards;
}
#cert-title {
    font-size: 32px;
    color: #f0d060;
    letter-spacing: 0.4em;
    text-shadow: 0 0 30px #c8a020, 0 0 60px #ffffff40;
    margin-bottom: 12px;
}
#cert-subtitle {
    font-size: 18px;
    color: #e8e8e8;
    letter-spacing: 0.5em;
}
@keyframes cert-flash {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Phi meter */
.phi-meter {
    font-size: 10px; color: #788898;
    border: 1px solid var(--wasm-border); padding: 1px 6px; background: #080812;
}

/* Header buttons */
.hbtn {
    background: transparent;
    border: 1px solid var(--wasm-border);
    color: #9ab0bc;
    font-family: inherit;
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.hbtn:hover { border-color: #5a7a8a; color: #c8dce4; }
.hbtn.active { border-color: var(--wasm-gold); color: var(--wasm-gold); }
#header a.hbtn { text-decoration: none; }

/* Latency pill */
#latency {
    font-size: 10px; color: var(--wasm-xp);
    padding: 2px 6px; border: 1px solid #1e3a1e; background: #0a180a;
    letter-spacing: 0.06em; white-space: nowrap;
}
#latency.warn { color: #facc15; border-color: #3a3010; background: #181208; }
#latency.bad  { color: var(--wasm-hp); border-color: #3a1010; background: #180808; }

/* VFX counter */
#vfx-counter { font-size: 10px; color: #607080; white-space: nowrap; }
#vfx-counter.gpu { color: #60a5fa; }

/* Faction crest */
.faction-crest {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--wasm-text-dim); letter-spacing: 0.06em;
}
.faction-icon {
    width: 18px; height: 18px; border: 1px solid var(--wasm-text-dim);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* Connection status */
#status {
    padding: 2px 8px; border: 1px solid var(--wasm-border);
    font-size: 10px; color: var(--wasm-hp); white-space: nowrap;
}
#status.connected { color: var(--wasm-xp); border-color: #1e3a1e; }

/* ── Main layout ──────────────────────────────────────────────────────────── */
#main {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}
#game-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #070710;
    position: relative;
}
canvas#game {
    display: block;
    border: 1px solid #1e1e2e;
    /* Responsive: CSS display size scales down; pixel buffer stays 1280×720 */
    max-width: 100%;
    max-height: 100%;
}

/* ── Disconnect overlay ───────────────────────────────────────────────────── */
#disconnect-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(5,5,12,0.88);
    backdrop-filter: blur(4px);
    font-family: 'JetBrains Mono', monospace;
    color: var(--wasm-text);
}
#disconnect-overlay.visible { display: flex; }
#disc-icon { font-size: 28px; margin-bottom: 12px; opacity: 0.7; }
#disc-reason { font-size: 14px; letter-spacing: 0.15em; color: #c08080; margin-bottom: 8px; }
#disc-countdown { font-size: 11px; color: #605878; letter-spacing: 0.1em; margin-bottom: 18px; }
#disc-reconnect {
    background: transparent;
    border: 1px solid #504870;
    color: #a090c0;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 6px 14px;
    cursor: pointer;
}
#disc-reconnect:hover { border-color: #8070b0; color: #c0b0e0; }

/* ── Touch D-pad ──────────────────────────────────────────────────────────── */
#touch-dpad {
    display: none;
    position: fixed;
    bottom: 20px; left: 20px;
    z-index: 800;
    width: 120px; height: 120px;
    user-select: none;
}
.dpad-btn {
    position: absolute;
    width: 38px; height: 38px;
    background: rgba(30,20,50,0.72);
    border: 1px solid #403560;
    border-radius: 4px;
    color: #a090c0;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    touch-action: none;
}
.dpad-btn:active { background: rgba(70,50,110,0.8); border-color: #8070c0; }
#dpad-n { top: 0;    left: 41px; }
#dpad-s { bottom: 0; left: 41px; }
#dpad-w { top: 41px; left: 0;   }
#dpad-e { top: 41px; right: 0;  }
@media (pointer: fine) { #touch-dpad { display: none !important; } }

/* ── Nameplate overlay ────────────────────────────────────────────────────── */
#nameplates {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; overflow: hidden;
}
.np {
    position: absolute; font-size: 10px;
    font-family: 'Courier New', monospace;
    color: #e0e8f0;
    background: rgba(10,10,20,0.72);
    border: 1px solid rgba(90,120,140,0.4);
    padding: 1px 5px; white-space: nowrap;
    letter-spacing: 0.06em; pointer-events: none; display: none;
}
/* Combat VFX — floating damage number (WebGPU port of legacy JS) */
.dmg-float {
    position: absolute; font-size: 13px; font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #ff5a4a; text-shadow: 0 1px 2px #000, 0 0 4px rgba(255,90,74,0.6);
    pointer-events: none; white-space: nowrap;
    transform: translate(-50%, 0);
    animation: dmg-rise 0.9s ease-out forwards;
}
@keyframes dmg-rise {
    0%   { opacity: 0; transform: translate(-50%, 4px) scale(0.7); }
    15%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
    30%  { transform: translate(-50%, -6px) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -34px) scale(0.95); }
}

/* ── Join overlay ─────────────────────────────────────────────────────────── */
#join-overlay {
    position: absolute; inset: 0;
    background: rgba(7,7,16,0.88);
    display: flex; align-items: center; justify-content: center; z-index: 10;
}
#join-box {
    background: var(--wasm-surface); border: 1px solid var(--wasm-border);
    padding: 28px 36px; display: flex; flex-direction: column;
    gap: 14px; min-width: 260px;
}
#join-box h2 { color: #5a7a8a; font-size: 13px; letter-spacing: 0.2em; font-weight: bold; margin-bottom: 4px; }
#join-box h2 span { color: var(--wasm-gold); }
.join-row { display: flex; flex-direction: column; gap: 4px; }
.join-row label { font-size: 10px; color: #5a6a7a; letter-spacing: 0.1em; }
/* Save slots (E19 S4-3) */
.slot-row { display: flex; gap: 6px; margin: 6px 0; }
.slot-btn {
    flex: 1; padding: 5px 4px; font-size: 9px; letter-spacing: 0.08em;
    background: #080812; border: 1px solid var(--wasm-border); color: #6a7a9a;
    cursor: pointer; text-align: center;
}
.slot-btn:hover { border-color: #4a6a8a; color: #c0d0e0; }
.slot-btn.active { border-color: var(--wasm-gold); color: var(--wasm-gold); background: #181208; }
.slot-btn.has-save { color: #8ab0d8; border-color: #3a5a8a; }
.join-mode-row { display: flex; gap: 6px; margin-bottom: 8px; }
.join-mode-btn {
    flex: 1; padding: 6px; font-size: 10px; letter-spacing: 0.1em;
    background: #080812; border: 1px solid var(--wasm-border); color: #6a7a9a; cursor: pointer;
}
.join-mode-btn.active { border-color: var(--wasm-xp); color: var(--wasm-xp); background: #060e06; }
#join-section-faction { margin-top: 4px; }
.join-row select, .join-row input {
    background: #080812; border: 1px solid var(--wasm-border);
    color: #c0c8d8; font-family: 'Courier New', monospace;
    font-size: 11px; padding: 4px 8px; outline: none;
}
.join-row select:focus, .join-row input:focus { border-color: #5a7a8a; }
#join-btn {
    background: #1a2a1a; border: 1px solid #2a4a2a; color: var(--wasm-xp);
    font-family: 'Courier New', monospace; font-size: 12px;
    letter-spacing: 0.16em; padding: 7px 0; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
#join-btn:hover { background: #223322; border-color: #3a7a3a; }
#join-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Bottom Panel ─────────────────────────────────────────────────────────── */
#bottom-panel {
    height: 160px; background: var(--wasm-surface);
    border-top: 1px solid var(--wasm-border);
    display: flex; flex-shrink: 0;
}

/* Quickbar */
#quickbar {
    width: 90px; padding: 4px; border-right: 1px solid var(--wasm-border);
    display: flex; flex-direction: column; gap: 3px;
}
.qbar-title { font-size: 9px; color: var(--wasm-text-dim); letter-spacing: 0.1em; text-align: center; }
.qbar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.qbar-slot {
    width: 24px; height: 24px; background: #080812;
    border: 1px solid var(--wasm-border); display: flex; align-items: center;
    justify-content: center; font-size: 8px; color: var(--wasm-text-dim);
    cursor: pointer; position: relative;
}
.qbar-slot:hover { border-color: #5a7a8a; }
.qbar-slot .key { position: absolute; top: 0; left: 1px; font-size: 7px; color: var(--wasm-text-dim); }
.qbar-slot.active { border-color: var(--wasm-gold); }
.qbar-special { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.qbar-special-btn {
    background: #080812; border: 1px solid var(--wasm-border); color: #788898;
    font-family: inherit; font-size: 9px; padding: 2px 3px; cursor: pointer; text-align: center;
}
.qbar-special-btn:hover { border-color: #5a7a8a; color: #c0c8d8; }

/* Chat */
#chat-panel { flex: 1; display: flex; flex-direction: column; }
.chat-tabs { display: flex; background: var(--wasm-bg-alt); border-bottom: 1px solid var(--wasm-border); }
.chat-tab {
    padding: 3px 10px; font-size: 10px; color: var(--wasm-text-dim); cursor: pointer;
    border-right: 1px solid var(--wasm-border); transition: all 0.15s;
}
.chat-tab:hover { color: #c0c8d8; }
.chat-tab.active { color: var(--wasm-gold); background: var(--wasm-surface); }
#log {
    flex: 1; overflow-y: auto; padding: 3px 6px;
    color: #788898; font-size: 11px; line-height: 1.5;
}
#log div { border-bottom: 1px solid #12121a; padding: 1px 0; }
.chat-input-row { display: flex; border-top: 1px solid var(--wasm-border); }
.chat-input {
    flex: 1; background: #080812; border: none; color: #c0c8d8;
    font-family: inherit; font-size: 11px; padding: 4px 6px; outline: none;
}
.chat-input::placeholder { color: var(--wasm-text-dim); }
.chat-send {
    background: #1a2a1a; border: none; border-left: 1px solid var(--wasm-border);
    color: var(--wasm-xp); font-family: inherit; font-size: 10px;
    padding: 0 10px; cursor: pointer; letter-spacing: 0.06em;
}
.chat-send:hover { background: #223322; }

/* Minimap */
#minimap {
    width: 140px; border-left: 1px solid var(--wasm-border);
    display: flex; flex-direction: column;
}
.minimap-title {
    font-size: 9px; color: var(--wasm-text-dim); letter-spacing: 0.1em;
    padding: 3px 6px; text-align: center; border-bottom: 1px solid var(--wasm-border);
}
.minimap-canvas {
    flex: 1; background: #040408; position: relative;
    margin: 3px; border: 1px solid var(--wasm-border);
}
.mm-dot { position: absolute; width: 3px; height: 3px; border-radius: 50%; }
.mm-dot.player { background: #4ade80; }
.mm-dot.npc { background: var(--wasm-gold); }
.mm-dot.other { background: #5a7a8a; }
.minimap-zone {
    font-size: 9px; color: var(--wasm-text-dim); text-align: center;
    padding: 2px; border-top: 1px solid var(--wasm-border);
}

/* ── Keybinding footer ────────────────────────────────────────────────────── */
#controls {
    position: absolute; bottom: 3px; left: 6px;
    font-size: 9px; color: #3a4a5a; pointer-events: none; z-index: 5;
}
.key-hint {
    display: inline-block; background: #080812;
    border: 1px solid var(--wasm-border); padding: 0 2px; font-size: 8px; margin: 0 1px;
}

/* ── Tutorial hints (E19 S4-2) ────────────────────────────────────────────
   Floating hint cards shown to new players. Each dismisses on the relevant
   action. Stored as dismissed in localStorage (sw_tutorial_done). */
#tutorial-overlay {
    position: absolute; inset: 0; pointer-events: none; z-index: 25;
}
.tut-hint {
    position: absolute; pointer-events: none;
    background: rgba(4,4,12,0.88); border: 1px solid #3a5a8a;
    color: #8ab0d8; font-size: 10px; letter-spacing: 0.06em;
    padding: 5px 10px; transition: opacity 0.5s;
    max-width: 160px; line-height: 1.5;
}
.tut-hint .tut-key {
    display: inline-block; background: #0a1828; border: 1px solid #3a5a8a;
    padding: 0 4px; color: #c8dcf0; font-size: 9px; margin-right: 3px;
}
.tut-hint.dismissed { opacity: 0; }
#tut-move     { bottom: 160px; left: 12px; }
#tut-attack   { bottom: 200px; left: 12px; }
#tut-thari    { bottom: 240px; left: 12px; }
#tut-interact { bottom: 280px; left: 12px; }

/* ── Quest journal (E19 S2-8) ─────────────────────────────────────────────
   Overlay panel (top-right of game-wrap); toggled with [Q].
   Populated by quest.list_response; updated by quest_stage_update. */
#quest-journal {
    position: absolute; top: 8px; right: 8px; width: 200px;
    background: rgba(4,4,12,0.90); border: 1px solid var(--wasm-border);
    color: #8090a0; font-size: 10px; letter-spacing: 0.05em;
    display: none; flex-direction: column; z-index: 20;
    max-height: 60%; pointer-events: auto;
}
#quest-journal.visible { display: flex; }
.qj-title {
    font-size: 9px; color: var(--wasm-text-dim); letter-spacing: 0.1em;
    padding: 4px 8px; border-bottom: 1px solid var(--wasm-border); text-align: center;
}
.qj-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.qj-row { padding: 4px 8px; border-bottom: 1px solid #161620; }
.qj-row.completed { color: var(--wasm-xp); }
.qj-name { color: #c0c8d8; margin-bottom: 2px; }
.qj-bar-wrap { height: 3px; background: #0d1020; }
.qj-bar { height: 100%; background: var(--wasm-gold); transition: width 0.4s; }
.qj-empty { color: #3a4a5a; text-align: center; padding: 12px; font-style: italic; }
.qj-row { cursor: pointer; }
.qj-row.expanded .qj-desc { display: block; }
.qj-desc { display: none; font-size: 10px; color: var(--wasm-text-dim); padding: 3px 0 4px; line-height: 1.5; }

/* ── Notification stack (E24-S3-1) ────────────────────────────────────────
   Top-right corner, FIFO queue, max 4 visible, auto-dismiss 3s.
   Each toast slides in from right, fades out. Token colors only. */
#notif-stack {
    position: absolute;
    top: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 5px;
    z-index: 80;
    pointer-events: none;
    width: 220px;
}
.notif-toast {
    display: flex; align-items: center; gap: 8px;
    background: rgba(4, 4, 10, 0.92);
    border-left: 2px solid var(--wasm-gold);
    padding: 5px 10px;
    font-size: 11px; letter-spacing: 0.06em;
    color: var(--wasm-text);
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.notif-toast.notif-exit {
    opacity: 0;
    transform: translateX(16px);
}
.notif-icon { flex-shrink: 0; font-size: 13px; }
.notif-text { flex: 1; }

/* ── Death overlay (E19 S2-9) ─────────────────────────────────────────────
   Full-screen dim + faction-neutral headline + respawn countdown.
   Fades in on `thari_on_death`, fades out on `thari_on_respawn`. */
#death-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: radial-gradient(circle at center,
        rgba(30, 8, 12, 0.55) 0%, rgba(0, 0, 0, 0.92) 80%);
    color: var(--wasm-text-bright);
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    z-index: 50;
}
#death-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
#death-overlay .death-title {
    font-size: 64px;
    letter-spacing: 0.15em;
    color: #e94545;
    text-shadow: 0 0 32px rgba(255, 40, 40, 0.55),
                 0 0 96px rgba(140, 0, 0, 0.7);
    margin-bottom: 10px;
}
#death-overlay .death-sub {
    font-size: 16px; color: #a07070; letter-spacing: 0.2em;
    text-transform: uppercase;
}
#death-overlay .death-timer {
    margin-top: 36px;
    font-size: 48px; color: var(--wasm-text-bright);
    text-shadow: 0 0 18px rgba(255, 120, 120, 0.5);
    font-variant-numeric: tabular-nums;
}
#death-overlay .death-flavor {
    margin-top: 18px; font-size: 13px; color: #6a5a5a;
    font-style: italic; max-width: 420px; text-align: center;
}
#death-overlay .death-cause {
    margin-top: 8px; font-size: 9px; color: #7a4040;
    letter-spacing: 0.18em; text-transform: uppercase;
}

/* ── E26-S1-4: WD-1 Formularz ────────────────────────────────────────────── */
#wd1-form { margin-top: 22px; border-top: 1px solid #3a2a2a; padding-top: 16px; width: 100%; max-width: 380px; text-align: left; }
.wd1-header { font-size: 9px; letter-spacing: 0.2em; color: #6a5060; margin-bottom: 14px; text-align: center; }
.wd1-field { margin-bottom: 8px; }
.wd1-label { display: block; font-size: 8px; letter-spacing: 0.14em; color: #5a4050; margin-bottom: 2px; }
.wd1-value { font-size: 11px; color: #c0a8b8; letter-spacing: 0.06em; padding: 2px 0; }
.wd1-input { width: 100%; background: #0e080c; border: 1px solid #3a2030; color: #c0a8b8; font-family: monospace; font-size: 11px; padding: 5px 8px; outline: none; letter-spacing: 0.04em; box-sizing: border-box; }
.wd1-input:focus { border-color: #6a3050; }
.wd1-smierc { margin: 12px 0 8px; font-size: 11px; color: #8a6a7a; letter-spacing: 0.06em; font-style: italic; min-height: 1.4em; }
.wd1-submit { display: block; margin: 0 auto; background: none; border: 1px solid #6a3050; color: #c06080; font-family: monospace; font-size: 11px; letter-spacing: 0.12em; padding: 7px 24px; cursor: pointer; transition: background 0.15s; }
.wd1-submit:hover { background: rgba(120,40,60,0.2); }
.wd1-submit:disabled { opacity: 0.4; cursor: default; }

/* HP bar refill pulse on respawn */
@keyframes hp-refill-pulse {
    0%   { box-shadow: 0 0 0 rgba(120, 255, 140, 0); }
    30%  { box-shadow: 0 0 24px rgba(120, 255, 140, 0.8); }
    100% { box-shadow: 0 0 0 rgba(120, 255, 140, 0); }
}
.bar-fill.hp.refill {
    animation: hp-refill-pulse 1.2s ease-out;
}
/* E26 S3-4: Chat bubble over nameplate */
.np-bubble {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: rgba(20,15,35,0.92); border: 1px solid #4a3a6a;
    border-radius: 6px; padding: 3px 8px; font-size: 10px; color: #e8d8f8;
    white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none; margin-bottom: 3px;
}
.np-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #4a3a6a;
}
/* E26 S2-3: Nameplates for other walkers */
.nameplate {
    position: absolute; transform: translate(-50%, -100%);
    background: rgba(8,6,16,0.75); border: 1px solid #2a2040;
    border-radius: 3px; padding: 2px 6px; pointer-events: none;
    text-align: center; white-space: nowrap; font-size: 10px; color: #c8b8e8;
    text-shadow: 0 0 4px #6040a0;
}
.nameplate .np-class { display: block; font-size: 8px; color: #806090; font-style: italic; }
/* E26 S1-5: Zone walker list */
#zone-walkers {
    position: absolute; bottom: 220px; right: 8px;
    width: 130px; background: rgba(8,6,16,0.82); border: 1px solid #1e1a2e;
    border-radius: 4px; padding: 6px 8px; font-size: 10px; color: #a090c0;
    pointer-events: none;
}
.zw-title { font-size: 9px; color: #6050a0; letter-spacing: 0.08em; margin-bottom: 4px; }
.zw-entry { display: flex; align-items: center; gap: 4px; margin: 2px 0; color: #c0b0e0; }
.zw-icon { font-size: 11px; }
.zw-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-class { font-size: 8px; color: #706080; font-style: italic; }
.zw-empty { color: #504060; font-style: italic; }
/* E25 S2-2: Class picker cards */
/* ── Wizard step indicator ────────────────────────────────────────────── */
.wizard-steps, .wiz-progress { display: flex; flex-direction: row; align-items: center; gap: 0; margin-bottom: 12px; justify-content: center; }
.wiz-step { width: 22px; height: 22px; border-radius: 50%; background: #141420; border: 1px solid var(--wasm-border); color: #606070; font-size: 10px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; }
.wiz-step.active { border-color: var(--wasm-sc); color: var(--wasm-sc); background: #1a102a; }
.wiz-step.done { border-color: var(--wasm-xp); color: var(--wasm-xp); background: #0a140a; }
.wiz-step-line { flex: 1; height: 1px; background: var(--wasm-border); max-width: 40px; }

/* ── Wizard nav row ───────────────────────────────────────────────────── */
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.wiz-btn { background: #1a2a1a; border: 1px solid #2a4a2a; color: var(--wasm-xp); font-family: inherit; font-size: 11px; letter-spacing: 0.12em; padding: 5px 14px; cursor: pointer; }
.wiz-btn:hover { background: #223322; border-color: #3a7a3a; }
.wiz-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wiz-btn-sec { background: transparent; border: 1px solid var(--wasm-border); color: #6a7a8a; font-family: inherit; font-size: 11px; letter-spacing: 0.1em; padding: 5px 10px; cursor: pointer; }
.wiz-btn-sec:hover { border-color: #5a6a7a; color: #a0b0c0; }

/* ── Class archetype description ──────────────────────────────────────── */
.cc-desc { font-size: 9px; color: var(--wasm-text-dim); line-height: 1.5; margin-top: 6px; text-align: center; min-height: 28px; }

/* ── Faction picker cards ─────────────────────────────────────────────── */
#faction-cards { display: flex; gap: 6px; margin-top: 4px; }
.faction-card-pick { flex: 1; padding: 8px 4px; background: #080814; border: 1px solid var(--wasm-border); cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 3px; transition: border-color 0.15s, background 0.15s; }
.faction-card-pick:hover                                { border-color: #5a5a7a; }
.faction-card-pick[data-faction="luminaris"]:hover      { border-color: #b09030; }
.faction-card-pick[data-faction="shadow"]:hover         { border-color: #708898; }
.faction-card-pick[data-faction="entropia"]:hover       { border-color: #9050cc; }
.faction-card-pick.active                               { background: var(--wasm-surface); }
.faction-card-pick[data-faction="luminaris"].active     { border-color: #f0c850; }
.faction-card-pick[data-faction="shadow"].active        { border-color: #a0b8d0; }
.faction-card-pick[data-faction="entropia"].active      { border-color: #c070ff; }
.fc-icon { font-size: 20px; }
.fc-name { font-size: 9px; color: #c0b0e0; letter-spacing: 0.08em; font-weight: bold; }
.fc-phi { font-size: 7.5px; color: var(--wasm-text-sub); font-style: italic; line-height: 1.4; }
.fc-bonus { font-size: 7px; color: var(--wasm-xp); margin-top: 3px; line-height: 1.4; min-height: 22px; }

/* ── Step 3 confirm ───────────────────────────────────────────────────── */
.char-name-field { width: 100%; background: #080812; border: 1px solid var(--wasm-border); color: var(--wasm-text); font-family: inherit; font-size: 12px; padding: 5px 8px; outline: none; margin-top: 4px; }
.char-name-field:focus { border-color: #5a7a8a; }
.wiz-confirm-summary { font-size: 9px; color: var(--wasm-text-dim); margin-top: 6px; line-height: 1.6; padding: 6px 8px; background: #06060e; border: 1px solid var(--wasm-border); }

#join-section-class { margin: 8px 0; }
#class-cards { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.class-card {
    width: 76px; padding: 8px 4px; border: 1px solid var(--wasm-border); border-radius: 4px;
    background: #0d0d18; cursor: pointer; text-align: center; transition: border-color 0.15s;
    user-select: none;
}
.class-card:hover { border-color: #5a5a7a; }
.class-card.active { border-color: var(--wasm-sc); background: var(--wasm-surface); }
.cc-icon { font-size: 18px; margin-bottom: 2px; }
.cc-name { font-size: 9px; color: #c0b0e0; letter-spacing: 0.05em; margin-bottom: 3px; line-height: 1.2; }
.cc-stats { font-size: 8px; color: #807090; margin-bottom: 2px; }
.cc-sylls { font-size: 8px; color: #504060; font-style: italic; }
.class-card.class-locked { cursor: default; opacity: 0.45; position: relative; }
.class-card.class-locked:hover { border-color: var(--wasm-border); }
.class-card.class-locked:hover::after { content: 'Wkrótce'; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); background: #1a1a2a; border: 1px solid var(--wasm-border); color: #606080; font-size: 7px; padding: 2px 5px; white-space: nowrap; pointer-events: none; z-index: 10; }
.class-card { transition: border-color 0.15s, background 0.15s; }
.fc-classes-hint { font-size: 7px; color: #504868; margin-top: 2px; font-style: italic; }
/* E29: Shop panel */
/* ── NPC Dialog Panel (E34-2) ─────────────────────────────────────────── */
@keyframes ndp-dot-pulse {
    0%, 80%, 100% { opacity: 0.2; }
    40%            { opacity: 1.0; }
}
.ndp-typing-dots span {
    display: inline-block; animation: ndp-dot-pulse 1.2s infinite;
    font-size: 14px; line-height: 1; margin: 0 1px;
}
.ndp-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ndp-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

#npc-dialog-panel {
    display: none; position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
    width: 420px; max-width: 96vw; background: rgba(6,5,14,0.96);
    border: 1px solid #2a1a3a; border-radius: 6px; z-index: 220;
    box-shadow: 0 0 30px rgba(80,20,120,0.4); color: #c0b0d8;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
#ndp-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid #2a1a3a; background: rgba(20,10,35,0.6);
    border-radius: 6px 6px 0 0;
}
#ndp-portrait { font-size: 18px; color: #9060c0; }
#ndp-name { flex: 1; color: #d0b0f0; font-size: 11px; letter-spacing: 0.08em; }
.ndp-btn-close { background: none; border: none; color: #604070; cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; }
.ndp-btn-close:hover { color: #c070ff; }
#ndp-history { height: 160px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ndp-msg { line-height: 1.5; }
.ndp-msg.npc  { color: #d0b0f0; }
.ndp-msg.player { color: #a0c0a0; text-align: right; }
.ndp-msg.error  { color: #c06060; font-style: italic; }
.ndp-msg .ndp-speaker { font-size: 8px; opacity: 0.6; display: block; margin-bottom: 1px; }
#ndp-response { display: none; }
#ndp-input-row { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid #1a1028; }
#ndp-input {
    flex: 1; background: #0c0816; border: 1px solid #3a2050; color: #c0b0d8;
    font-family: inherit; font-size: 10px; padding: 5px 8px; outline: none;
}
#ndp-input:focus { border-color: #6a30a0; }
.ndp-btn-send {
    background: #1a0828; border: 1px solid #4a2060; color: #a060e0;
    font-size: 14px; padding: 4px 10px; cursor: pointer; line-height: 1;
}
.ndp-btn-send:hover { background: #240a38; border-color: #8040c0; }
#ndp-status { padding: 3px 10px 6px; font-size: 8px; color: #604080; min-height: 20px; display: flex; align-items: center; gap: 6px; }

#shop-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 380px; background: rgba(6,5,14,0.97); border: 1px solid #3a2040;
    border-radius: 6px; padding: 14px; z-index: 210; color: #c8c0d8;
    box-shadow: 0 0 40px rgba(100,40,160,0.5);
}
#shop-panel.visible { display: block; }
.shop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shop-title { font-size: 13px; letter-spacing: 0.12em; color: var(--wasm-sc); }
.shop-close { background: transparent; border: none; color: #605080; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.shop-close:hover { color: #c0a0e0; }
.shop-tabs { display: flex; gap: 0; margin-bottom: 10px; border-bottom: 1px solid #2a2040; }
.shop-tab { background: transparent; border: none; color: #706080; font-family: inherit;
    font-size: 10px; letter-spacing: 0.08em; padding: 5px 14px; cursor: pointer; }
.shop-tab.active { color: var(--wasm-sc); border-bottom: 2px solid var(--wasm-sc); }
.shop-list { max-height: 300px; overflow-y: auto; }
.shop-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 4px;
    border-bottom: 1px solid #1a1428; font-size: 11px;
}
.shop-item:last-child { border-bottom: none; }
.shop-item-icon { font-size: 18px; min-width: 22px; text-align: center; }
.shop-item-info { flex: 1; }
.shop-item-name { color: #c0b0d8; }
.shop-item-stats { font-size: 9px; color: #706080; margin-top: 1px; }
.shop-item-price { font-size: 10px; color: #c0a040; min-width: 50px; text-align: right; }
.shop-btn {
    background: rgba(60,20,100,0.5); border: 1px solid #4a2060;
    color: #c0a0e0; font-family: inherit; font-size: 9px; padding: 3px 8px;
    cursor: pointer; border-radius: 3px; letter-spacing: 0.05em; margin-left: 6px;
    min-width: 52px;
}
.shop-btn:hover { background: rgba(80,30,130,0.7); }
.shop-btn.confirming { background: rgba(120,20,20,0.6); border-color: #802020; }
/* E31: Faction panel */
#faction-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 380px; background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 16px 18px; z-index: 215; color: #c0b8d4;
    box-shadow: 0 0 44px rgba(60,20,120,0.55);
}
#faction-panel.visible { display: block; }
.fp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fp-title { font-size: 12px; letter-spacing: 0.14em; color: #a080d0; }
.fp-close { background: transparent; border: none; color: #504070; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.fp-close:hover { color: #b090d0; }
.fp-rep-section { margin-bottom: 14px; }
.fp-rep-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fp-rep-label { font-size: 9px; letter-spacing: 0.08em; min-width: 80px; }
.fp-rep-label.lum { color: var(--wasm-gold); }
.fp-rep-label.ent { color: #b060f0; }
.fp-rep-track { flex: 1; height: 6px; background: #1a1228; border-radius: 3px; overflow: hidden; }
.fp-rep-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.fp-rep-fill.lum { background: linear-gradient(90deg, var(--fac-luminaris), var(--wasm-gold)); }
.fp-rep-fill.ent { background: linear-gradient(90deg, #5020a0, #b060f0); }
.fp-rep-value { font-size: 9px; color: #706080; min-width: 36px; text-align: right; }
.fp-tier { font-size: 8px; letter-spacing: 0.06em; margin-top: -3px; margin-left: 88px; }
.fp-tier.lum { color: #c09030; }
.fp-tier.ent { color: var(--wasm-sc); }
.fp-quests-title { font-size: 10px; letter-spacing: 0.1em; color: #806890; margin-bottom: 8px; }
.fp-quest-row {
    display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px;
    border-bottom: 1px solid #1a1228; font-size: 10px;
}
.fp-quest-row:last-child { border-bottom: none; }
.fp-quest-info { flex: 1; }
.fp-quest-name { color: #c0b0d8; }
.fp-quest-desc { font-size: 8px; color: #605878; margin-top: 2px; }
.fp-quest-reward { font-size: 8px; color: #908098; margin-top: 2px; }
.fp-quest-btn {
    background: rgba(60,20,100,0.5); border: 1px solid #4a2060;
    color: #c0a0e0; font-family: inherit; font-size: 8px; padding: 3px 7px;
    cursor: pointer; border-radius: 3px; letter-spacing: 0.04em; white-space: nowrap;
}
.fp-quest-btn:hover { background: rgba(80,30,130,0.7); }
.fp-quest-btn.done { background: rgba(30,60,30,0.5); border-color: #305030;
    color: #608060; cursor: default; }
/* E37: Faction Conversion section */
.fp-convert-section { margin-top: 14px; border-top: 1px solid #1a1228; padding-top: 10px; }
.fp-convert-title { font-size: 9px; letter-spacing: 0.1em; color: #605078; margin-bottom: 8px; }
.fp-convert-pending { font-size: 9px; color: #c09030; margin-bottom: 6px; }
.fp-convert-countdown { font-size: 8px; color: #805060; margin-bottom: 8px; }
.fp-convert-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-convert-btn {
    background: rgba(30,12,60,0.6); border: 1px solid #3a1a60;
    color: #9070c0; font-family: inherit; font-size: 8px; letter-spacing: 0.06em;
    padding: 4px 8px; cursor: pointer; border-radius: 3px;
}
.fp-convert-btn:hover { background: rgba(50,20,100,0.8); color: #c0a0e0; }
.fp-convert-btn.cancel { border-color: #602020; color: #c06060; }
.fp-convert-btn.cancel:hover { background: rgba(80,20,20,0.7); }
/* E30: World Map panel */
#world-map-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 420px; background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 18px 20px; z-index: 220; color: #c0b8d4;
    box-shadow: 0 0 50px rgba(60,20,120,0.6);
}
#world-map-panel.visible { display: block; }
.wm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wm-title { font-size: 12px; letter-spacing: 0.14em; color: #a080d0; }
.wm-close { background: transparent; border: none; color: #504070; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.wm-close:hover { color: #b090d0; }
.wm-body { display: flex; flex-direction: column; align-items: center; gap: 0; }
.wm-row { display: flex; align-items: center; justify-content: center; gap: 0; }
.wm-zone {
    width: 120px; height: 52px; border: 1px solid #2a1840; border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 9px; letter-spacing: 0.06em; padding: 4px;
    transition: border-color 0.2s, opacity 0.2s;
    cursor: default;
}
.wm-zone.undiscovered { opacity: 0.30; color: #403850; border-color: #1a1030; }
.wm-zone.undiscovered .wm-zone-name { visibility: hidden; }
.wm-zone.undiscovered .wm-zone-id::after { content: "???"; }
.wm-zone.current { border-color: #c0a030; box-shadow: 0 0 12px rgba(200,160,40,0.4); }
.wm-zone-icon { font-size: 18px; margin-bottom: 3px; }
.wm-zone-id { font-size: 8px; color: #605870; margin-bottom: 1px; }
.wm-zone-name { font-size: 9px; color: #b0a0c8; text-align: center; line-height: 1.2; }
.wm-connector-v { width: 2px; height: 24px; background: #2a1840; margin: 0 auto; }
.wm-connector-h { width: 20px; height: 2px; background: #2a1840; }
.wm-legend { margin-top: 14px; font-size: 9px; color: var(--wasm-text-sub); text-align: center; }
/* E47: Kernel dots inside zone tiles */
.wm-kernel-bar { margin-top: 3px; font-size: 8px; letter-spacing: 0.03em; color: #705890; }
.wm-kernel-bar.all-done { color: #507050; }
.wm-kernel-bar.partial-lum { color: #80a0d0; }
.wm-kernel-bar.partial-ent { color: #d08070; }
.wm-kernel-bar.partial-sha { color: #9070b0; }
/* E28: Ability bar */
#ability-bar {
    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
    display: none; flex-direction: row; gap: 8px; pointer-events: auto;
}
#ability-bar.visible { display: flex; }
.ab-slot {
    width: 64px; height: 64px; background: rgba(6,5,14,0.88);
    border: 1px solid #2a2040; border-radius: 6px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; user-select: none; transition: border-color 0.15s;
}
.ab-slot:hover { border-color: #6040a0; }
.ab-slot.active { border-color: #c0a0ff; box-shadow: 0 0 8px rgba(180,120,255,0.5); }
.ab-icon { font-size: 22px; line-height: 1; }
.ab-name { font-size: 7px; color: #907090; margin-top: 3px; letter-spacing: 0.04em;
    max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.ab-key { position: absolute; top: 3px; left: 5px; font-size: 8px; color: #504060;
    font-weight: bold; }
.ab-cd-overlay {
    position: absolute; inset: 0; background: rgba(4,3,10,0.75);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #c0b0e0; font-weight: bold; border-radius: 6px;
    pointer-events: none;
}
.ab-slot.ready-flash { animation: ab-flash 0.3s ease; }
@keyframes ab-flash {
    0% { border-color: #c0a0ff; box-shadow: 0 0 16px rgba(200,150,255,0.9); }
    100% { border-color: #2a2040; box-shadow: none; }
}
/* ability_cast flash over nameplates */
.ab-cast-flash {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    font-size: 9px; color: #e0d0ff; background: rgba(60,20,100,0.85);
    padding: 2px 6px; border-radius: 3px; white-space: nowrap;
    animation: ab-cast-anim 1.5s ease forwards; pointer-events: none;
}
@keyframes ab-cast-anim {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}
/* E27: Inventory panel */
#inventory-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 340px; background: rgba(6,5,14,0.96); border: 1px solid #2a2040;
    border-radius: 6px; padding: 14px; z-index: 200; color: #c8c0d8;
    box-shadow: 0 0 32px rgba(80,40,140,0.5);
}
#inventory-panel.visible { display: block; }
.inv-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.inv-title { font-size: 12px; letter-spacing: 0.12em; color: #a090c8; }
.inv-close { background: transparent; border: none; color: #605080; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.inv-close:hover { color: #c0a0e0; }
.inv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.inv-slot {
    width: 56px; height: 56px; background: rgba(20,15,35,0.9);
    border: 1px solid #1e1a2e; border-radius: 4px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 10px; color: #908098; text-align: center; padding: 3px;
    position: relative; overflow: hidden; transition: border-color 0.15s;
    user-select: none;
}
.inv-slot:hover { border-color: #5a406a; }
.inv-slot.equipped { border-color: var(--wasm-sc); box-shadow: inset 0 0 6px rgba(120,60,200,0.3); }
.inv-slot-icon { font-size: 20px; line-height: 1; }
.inv-slot-name { font-size: 7px; color: #706080; margin-top: 2px; line-height: 1.1;
    max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rarity glows */
.rarity-1 { border-color: #1a4a2a !important; box-shadow: 0 0 4px rgba(34,197,94,0.3); }
.rarity-2 { border-color: #1a2a5a !important; box-shadow: 0 0 4px rgba(59,130,246,0.4); }
.rarity-3 { border-color: #3a1a5a !important; box-shadow: 0 0 6px rgba(168,85,247,0.5); }
/* Context menu */
.inv-context-menu {
    position: fixed; background: rgba(8,6,18,0.98); border: 1px solid #2a2040;
    border-radius: 4px; padding: 4px 0; z-index: 300; min-width: 110px;
}
.inv-ctx-btn {
    display: block; width: 100%; background: transparent; border: none;
    color: #b0a0c8; font-family: inherit; font-size: 11px; padding: 5px 12px;
    cursor: pointer; text-align: left; letter-spacing: 0.05em;
}
.inv-ctx-btn:hover { background: rgba(80,40,140,0.3); color: var(--wasm-text-bright); }
/* E32: Craft panel */
#craft-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 400px; background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 16px 18px; z-index: 210; color: #c0b8d4;
    box-shadow: 0 0 44px rgba(80,30,160,0.55);
}
#craft-panel.visible { display: block; }
.cft-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cft-title { font-size: 12px; letter-spacing: 0.14em; color: #a080d0; }
.cft-close { background: transparent; border: none; color: #504070; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.cft-close:hover { color: #b090d0; }
/* Tab bar */
.cft-tabs { display: flex; gap: 2px; margin-bottom: 14px; }
.craft-tab {
    flex: 1; background: rgba(20,12,40,0.7); border: 1px solid #2a1840;
    color: #706080; font-family: inherit; font-size: 9px; letter-spacing: 0.1em;
    padding: 5px 0; cursor: pointer; border-radius: 3px; text-align: center;
}
.craft-tab.active { background: rgba(60,20,120,0.5); border-color: #5030a0; color: #c0a0e0; }
.craft-tab:hover:not(.active) { background: rgba(40,16,70,0.6); color: #a080c0; }
/* Kuźnia tab */
#cft-tab-kuznia { }
#cft-tab-receptury { display: none; }
.craft-slots { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.craft-slot {
    width: 80px; height: 80px; background: rgba(20,12,40,0.9);
    border: 2px dashed #3a2060; border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 10px; color: #504060; cursor: pointer; text-align: center; padding: 4px;
    position: relative; transition: border-color 0.15s;
}
.craft-slot.filled { border-style: solid; border-color: #6040a0; }
.craft-slot:hover { border-color: #7050b0; }
.craft-slot-icon { font-size: 24px; line-height: 1; }
.craft-slot-name { font-size: 7px; color: #908098; margin-top: 4px; max-width: 72px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.craft-slot-clear { position: absolute; top: 2px; right: 4px; font-size: 9px;
    color: #504060; cursor: pointer; display: none; }
.craft-slot.filled .craft-slot-clear { display: block; }
.craft-plus { font-size: 18px; color: var(--wasm-sc); }
.craft-result-slot {
    width: 80px; height: 80px; background: rgba(20,12,40,0.9);
    border: 2px solid #2a1840; border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 10px; color: #504060; text-align: center; padding: 4px;
    transition: transform 0.15s ease;
}
.craft-result-slot.pulse { animation: cft-pulse 0.4s ease; }
@keyframes cft-pulse { 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
.craft-arrow { font-size: 18px; color: var(--wasm-sc); }
.craft-footer { display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #1a1228; }
.craft-hint { font-size: 9px; color: #504060; flex: 1; }
.craft-sc-cost { font-size: 10px; color: #c09030; margin-right: 10px; }
.craft-btn {
    background: rgba(60,20,100,0.6); border: 1px solid #5030a0; color: #c0a0e0;
    font-family: inherit; font-size: 10px; letter-spacing: 0.08em; padding: 6px 14px;
    cursor: pointer; border-radius: 3px;
}
.craft-btn:hover { background: rgba(80,30,140,0.7); }
.craft-btn:disabled { opacity: 0.35; cursor: default; }
/* Recipe book tab */
.craft-known-list { max-height: 160px; overflow-y: auto; margin-top: 4px; }
.craft-recipe-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 4px;
    border-bottom: 1px solid #1a1228; cursor: pointer; font-size: 10px;
}
.craft-recipe-row:last-child { border-bottom: none; }
.craft-recipe-row:hover { background: rgba(60,20,100,0.2); }
.craft-recipe-ingredients { display: flex; align-items: center; gap: 4px; color: #a090c0; }
.craft-recipe-arrow { color: var(--wasm-sc); font-size: 12px; }
.craft-recipe-result { color: var(--wasm-text-bright); }
.craft-recipe-cost { font-size: 8px; color: #c09030; margin-left: auto; }
#cft-sparkle-canvas { position: fixed; pointer-events: none; z-index: 500;
    top: 0; left: 0; width: 100%; height: 100%; }
/* E34: Archiwum panel */
#archiwum-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 400px; background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 16px 18px; z-index: 212; color: #c0b8d4;
    box-shadow: 0 0 44px rgba(40,80,180,0.5);
}
#archiwum-panel.visible { display: block; }
.arch-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.arch-title { font-size: 12px; letter-spacing: 0.14em; color: #80a0d0; }
.arch-close { background: transparent; border: none; color: var(--wasm-text-dim); font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.arch-close:hover { color: #8090c0; }
.arch-tabs { display: flex; gap: 2px; margin-bottom: 14px; }
.arch-tab {
    flex: 1; background: rgba(20,16,40,0.7); border: 1px solid #2a1840;
    color: #505878; font-family: inherit; font-size: 9px; letter-spacing: 0.1em;
    padding: 5px 0; cursor: pointer; border-radius: 3px; text-align: center;
}
.arch-tab.active { background: rgba(30,50,140,0.5); border-color: #3050a0; color: #90b0e0; }
.arch-tab:hover:not(.active) { background: rgba(24,32,80,0.6); color: #7090c0; }
.arch-form-label { font-size: 9px; letter-spacing: 0.08em; color: #607090; margin-bottom: 5px; }
.arch-input {
    width: 100%; box-sizing: border-box; background: rgba(10,12,30,0.9);
    border: 1px solid #2a2050; color: #c0c8e0; font-family: inherit; font-size: 10px;
    padding: 6px 8px; border-radius: 3px; outline: none; margin-bottom: 8px;
}
.arch-input:focus { border-color: var(--wasm-accent); }
.arch-btn {
    width: 100%; background: rgba(30,50,140,0.5); border: 1px solid #3050a0;
    color: #90b0e0; font-family: inherit; font-size: 10px; letter-spacing: 0.08em;
    padding: 7px 0; cursor: pointer; border-radius: 3px;
}
.arch-btn:hover { background: rgba(40,65,170,0.7); }
.arch-section-title { font-size: 9px; letter-spacing: 0.1em; color: #506080;
    margin: 12px 0 6px; border-top: 1px solid #1a1a2e; padding-top: 8px; }
.arch-deposit-row {
    padding: 6px 4px; border-bottom: 1px solid #1a1228; font-size: 9px;
}
.arch-deposit-row:last-child { border-bottom: none; }
.arch-dep-token { color: var(--wasm-accent); font-size: 8px; word-break: break-all; margin-bottom: 2px; }
.arch-dep-status { display: flex; justify-content: space-between; }
.arch-dep-sc { color: #c09030; }
.arch-dep-cd { color: #506080; }
.arch-dep-mature { color: #30a060; }
/* E33: Boss health bar */
#boss-bar {
    display: none; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    width: 360px; background: rgba(4,2,10,0.92); border: 1px solid #5a1a1a;
    border-radius: 5px; padding: 8px 12px; z-index: 190;
    box-shadow: 0 0 28px rgba(180,20,20,0.4);
}
#boss-bar.visible { display: block; }
.boss-name { font-size: 11px; letter-spacing: 0.1em; color: #e08080; margin-bottom: 5px;
    text-align: center; text-transform: uppercase; }
.boss-hp-track { height: 8px; background: #1a0808; border-radius: 4px; overflow: hidden; }
.boss-hp-fill { height: 100%; background: linear-gradient(90deg, #6a0000, #cc2020);
    border-radius: 4px; transition: width 0.3s ease; }
.boss-hp-text { font-size: 9px; color: #806060; text-align: center; margin-top: 3px; }
/* E35: Achievement panel */
#ach-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 420px; max-height: 80vh; overflow-y: auto;
    background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 16px 18px; z-index: 213; color: #c0b8d4;
    box-shadow: 0 0 44px rgba(100,40,200,0.5);
}
#ach-panel.visible { display: block; }
.ach-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ach-title { font-size: 12px; letter-spacing: 0.14em; color: #9060c0; }
.ach-close { background: transparent; border: none; color: var(--wasm-text-dim); font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.ach-close:hover { color: var(--wasm-sc); }
.ach-row {
    padding: 7px 4px; border-bottom: 1px solid #1a1228; display: flex;
    align-items: center; gap: 10px;
}
.ach-row:last-child { border-bottom: none; }
.ach-icon { width: 20px; text-align: center; font-size: 12px; flex-shrink: 0; }
.ach-info { flex: 1; }
.ach-name { font-size: 10px; letter-spacing: 0.06em; color: #b090d8; }
.ach-name.done { color: #60d080; }
.ach-bar-wrap { height: 4px; background: #1a0f2e; border-radius: 2px; margin-top: 3px; }
.ach-bar { height: 100%; background: linear-gradient(90deg, #4020a0, #8040e0);
    border-radius: 2px; transition: width 0.4s ease; }
.ach-bar.done { background: linear-gradient(90deg, #20a040, #40e080); }
.ach-reward { font-size: 8px; color: #806090; flex-shrink: 0; text-align: right; }
/* E35: Achievement toast */
#ach-toast {
    display: none; position: fixed; bottom: 120px; right: 20px; z-index: 300;
    background: rgba(6,4,16,0.96); border: 1px solid #6030c0;
    border-radius: 6px; padding: 10px 14px; max-width: 260px;
    box-shadow: 0 0 28px rgba(120,40,220,0.6); animation: ach-slide-in 0.3s ease;
}
@keyframes ach-slide-in {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ach-toast-label { font-size: 8px; letter-spacing: 0.14em; color: #8060a0; margin-bottom: 4px; }
.ach-toast-name { font-size: 11px; letter-spacing: 0.08em; color: #c090f0; }
.ach-toast-reward { font-size: 9px; color: #a0c060; margin-top: 3px; }
/* E38: Syllabarium panel [S] */
#syl-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 480px; max-height: 80vh; overflow-y: auto;
    background: rgba(4,3,12,0.97); border: 1px solid #1e2840;
    border-radius: 6px; padding: 16px 18px; z-index: 213; color: #b0c8d4;
    box-shadow: 0 0 44px rgba(40,80,200,0.5);
}
#syl-panel.visible { display: block; }
.syl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.syl-title { font-size: 12px; letter-spacing: 0.14em; color: #5080c0; }
.syl-close { background: transparent; border: none; color: var(--wasm-text-dim); font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.syl-close:hover { color: #4060d0; }
.syl-count { font-size: 9px; color: #506080; margin-bottom: 10px; }
.syl-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.syl-cell {
    background: #080a18; border: 1px solid #1a2030; border-radius: 4px;
    padding: 6px 4px; text-align: center; cursor: default; transition: border-color 0.2s;
}
.syl-cell.discovered { border-color: #3060a0; background: #0a0f1e; }
.syl-cell.discovered.lum { border-color: #806020; background: #0e0c04; }
.syl-cell.discovered.ent { border-color: #601030; background: #0e0406; }
.syl-cell.discovered.shadow { border-color: #203050; background: #04080e; }
.syl-key { font-size: 11px; letter-spacing: 0.06em; color: #303848; }
.syl-cell.discovered .syl-key { color: #8ab0d8; }
.syl-cell.discovered.lum .syl-key { color: #d4a840; }
.syl-cell.discovered.ent .syl-key { color: #c04060; }
.syl-cell.discovered.shadow .syl-key { color: #4080c0; }
.syl-faction { font-size: 7px; color: #282e3a; margin-top: 2px; letter-spacing: 0.04em; }
.syl-cell.discovered .syl-faction { color: var(--wasm-text-sub); }
/* E42: Shadow Weaving Panel [W] */
#weave-panel {
    display: none; position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%);
    background: #0a0c12; border: 1px solid #334; padding: 10px 14px 10px 14px;
    z-index: 310; min-width: 260px; max-width: 380px; font-family: monospace;
}
#weave-panel.visible { display: block; }
#weave-panel h4 {
    margin: 0 0 8px 0; font-size: 11px; letter-spacing: 0.12em; color: #8090b0;
    text-transform: uppercase;
}
.weave-syl-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.weave-chip {
    padding: 3px 7px; border: 1px solid #334; background: #0e1018;
    color: #8898aa; cursor: pointer; font-size: 10px; letter-spacing: 0.06em;
    user-select: none; transition: background 0.1s;
}
.weave-chip:hover { background: #1a1e28; }
.weave-chip.selected { border-color: var(--wasm-accent); background: var(--wasm-surface); color: var(--wasm-steel); }
.weave-chip.selected.shadow { border-color: var(--wasm-accent); color: #80c0e8; }
.weave-chip.selected.lum { border-color: #a07830; color: #d4a840; }
.weave-chip.selected.ent { border-color: #903050; color: #d05070; }
#weave-cost-preview { font-size: 10px; color: #607080; margin-bottom: 8px; min-height: 14px; }
#weave-cast-btn {
    padding: 5px 14px; background: var(--wasm-surface); border: 1px solid var(--wasm-accent);
    color: #80b8e0; cursor: pointer; font-size: 10px; letter-spacing: 0.08em;
    font-family: monospace;
}
#weave-cast-btn:hover { background: #1a2438; }
#weave-cast-btn:disabled { opacity: 0.4; cursor: default; }
/* E52: Layer toggle */
.weave-layer-toggle { display: flex; gap: 4px; margin-bottom: 6px; }
.wlt-btn {
    flex: 1; background: transparent; border: 1px solid #2a3040; color: #485868;
    font-family: monospace; font-size: 9px; letter-spacing: 0.06em; padding: 3px 0;
    cursor: pointer; border-radius: 2px; transition: color 0.15s, border-color 0.15s;
}
.wlt-btn:hover { border-color: #506080; color: #8090b0; }
.wlt-btn.active { border-color: #7090c0; color: #a0c0f0; background: rgba(60,80,140,0.2); }
.wlt-btn.active.l2 { border-color: #9050c0; color: #c080f0; background: rgba(80,30,120,0.2); }
.wlt-btn.active.l3 { border-color: #c06030; color: #f09060; background: rgba(120,50,20,0.2); }
#weave-close-btn {
    float: right; background: none; border: none; color: #506070;
    cursor: pointer; font-size: 10px; padding: 0; margin-top: -2px;
}
/* E46: Thari Corpus Panel [C] */
#corpus-panel {
    display: none; position: fixed; top: 60px; right: 10px; width: 300px; max-height: 460px;
    background: #080a10; border: 1px solid #2a3044; z-index: 310;
    font-family: monospace; overflow: hidden; display: none; flex-direction: column;
}
#corpus-panel.visible { display: flex; }
#corpus-header {
    padding: 8px 12px 6px; border-bottom: 1px solid #1a2030;
    display: flex; justify-content: space-between; align-items: center;
}
#corpus-title { font-size: 10px; letter-spacing: 0.12em; color: #7080a0; text-transform: uppercase; }
#corpus-count { font-size: 11px; color: #d4a840; letter-spacing: 0.06em; }
#corpus-close { background: none; border: none; color: #506070; cursor: pointer; font-size: 10px; font-family: monospace; }
#corpus-list {
    overflow-y: auto; flex: 1; padding: 6px 0;
    scrollbar-width: thin; scrollbar-color: #2a3044 #080a10;
}
.corpus-entry {
    padding: 5px 12px; border-bottom: 1px solid var(--wasm-surface);
    cursor: pointer;
}
.corpus-entry:hover { background: #0e1220; }
.corpus-frag-id { font-size: 9px; color: var(--wasm-text-sub); letter-spacing: 0.06em; margin-bottom: 2px; }
.corpus-zone { font-size: 8px; color: var(--wasm-text-sub); float: right; }
.corpus-text { font-size: 10px; color: #8898aa; line-height: 1.4; }
.corpus-empty { padding: 20px 12px; font-size: 10px; color: var(--wasm-text-dim); text-align: center; }
.corpus-deposit-btn { display: block; margin-top: 4px; padding: 2px 6px; font-size: 9px; font-family: inherit; background: transparent; border: 1px solid var(--fac-shadow); color: var(--fac-shadow); cursor: pointer; letter-spacing: 0.06em; transition: background 0.15s; }
.corpus-deposit-btn:hover:not(:disabled) { background: rgba(93,60,120,0.18); }
.corpus-deposit-btn:disabled { opacity: 0.5; cursor: default; }
.corpus-deposited-badge { margin-top: 3px; font-size: 9px; color: var(--wasm-xp); letter-spacing: 0.06em; }
/* E59: Lore expanded view modal */
#lore-modal {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 380px; max-width: 90vw; max-height: 70vh;
    background: #060810; border: 1px solid #3a4860; z-index: 500;
    font-family: monospace; display: none; flex-direction: column;
}
#lore-modal.visible { display: flex; }
#lore-modal-header {
    padding: 8px 12px 6px; border-bottom: 1px solid #1a2030;
    display: flex; justify-content: space-between; align-items: center;
}
#lore-modal-title { font-size: 10px; color: #6070a0; letter-spacing: 0.12em; text-transform: uppercase; }
#lore-modal-close { background: none; border: none; color: #506070; cursor: pointer; font-size: 10px; font-family: monospace; }
#lore-modal-body {
    padding: 12px 14px; overflow-y: auto; flex: 1;
    font-size: 11px; color: #9aacbe; line-height: 1.7;
    scrollbar-width: thin; scrollbar-color: #2a3044 #060810;
}
#lore-modal-footer {
    padding: 6px 12px; border-top: 1px solid #1a2030;
    font-size: 8px; color: #2a3848; letter-spacing: 0.08em;
}
/* E60: Daily Quest Board [Z] */
/* E72: Shadow Walker Titles */
#title-panel {
    display: none; position: fixed; top: 60px; right: 320px; width: 280px; max-height: 420px;
    background: #080a10; border: 1px solid #2a3044; z-index: 310;
    font-family: monospace; overflow: hidden; flex-direction: column;
}
#title-panel.visible { display: flex; }
#title-header {
    padding: 8px 12px 6px; border-bottom: 1px solid #1a2030;
    display: flex; justify-content: space-between; align-items: center;
}
#title-panel-label { font-size: 10px; letter-spacing: 0.12em; color: #7080a0; text-transform: uppercase; }
#title-close { background: none; border: none; color: #506070; cursor: pointer; font-size: 10px; font-family: monospace; }
#title-list { overflow-y: auto; flex: 1; padding: 6px 0; scrollbar-width: thin; scrollbar-color: #2a3044 #080a10; }
.title-entry { padding: 6px 12px; border-bottom: 1px solid #0e1220; display: flex; justify-content: space-between; align-items: center; }
.title-entry.locked { opacity: 0.45; }
.title-entry.active { border-left: 2px solid #d4a840; }
.title-info { flex: 1; }
.title-name { font-size: 11px; color: #a0b8d0; letter-spacing: 0.06em; }
.title-name.active-mark::after { content: ' ✓'; color: #d4a840; }
.title-desc { font-size: 9px; color: #506070; margin-top: 2px; line-height: 1.3; }
.title-btn { font-size: 9px; font-family: monospace; background: transparent; border: 1px solid #3a6090; color: #3a6090; cursor: pointer; padding: 2px 6px; white-space: nowrap; }
.title-btn:hover { background: rgba(58,96,144,0.2); }
.title-locked-icon { font-size: 10px; color: #2a3044; }

/* E71: Thari Resonance Journal */
#journal-panel {
    display: none; position: fixed; top: 60px; left: 260px; width: 320px; max-height: 460px;
    background: #080a10; border: 1px solid #2a3044; z-index: 310;
    font-family: monospace; overflow: hidden; flex-direction: column;
}
#journal-panel.visible { display: flex; }
#journal-header {
    padding: 8px 12px 6px; border-bottom: 1px solid #1a2030;
    display: flex; justify-content: space-between; align-items: center;
}
#journal-title { font-size: 10px; letter-spacing: 0.12em; color: #7080a0; text-transform: uppercase; }
#journal-total { font-size: 11px; color: #d4a840; letter-spacing: 0.06em; }
#journal-close { background: none; border: none; color: #506070; cursor: pointer; font-size: 10px; font-family: monospace; }
#journal-list { overflow-y: auto; flex: 1; padding: 6px 0; scrollbar-width: thin; scrollbar-color: #2a3044 #080a10; }
.journal-entry { padding: 6px 12px; border-bottom: 1px solid #0e1220; }
.journal-entry:hover { background: #0e1220; }
.journal-name { font-size: 11px; color: #a0b8d0; letter-spacing: 0.08em; }
.journal-syllables { font-size: 9px; color: #3a6090; letter-spacing: 0.06em; margin-bottom: 2px; }
.journal-meaning { font-size: 10px; color: #8898aa; line-height: 1.4; }
.journal-xp { font-size: 9px; color: #d4a840; float: right; }

/* E73: Party System */
#party-panel {
    display: none; position: fixed; top: 60px; right: 10px; width: 240px; max-height: 340px;
    background: #080a10; border: 1px solid #2a3044; z-index: 310;
    font-family: monospace; overflow: hidden; flex-direction: column;
}
#party-panel.visible { display: flex; }
#party-header {
    padding: 8px 10px 6px; border-bottom: 1px solid #1a2030;
    display: flex; align-items: center; gap: 8px;
}
#party-panel-label { font-size: 10px; letter-spacing: 0.12em; color: #a0b050; text-transform: uppercase; flex: 1; }
#party-leave-btn { background: none; border: 1px solid #503020; color: #804030; cursor: pointer; font-size: 9px; font-family: monospace; padding: 1px 5px; }
#party-leave-btn:hover { background: rgba(128,64,48,0.2); }
#party-close { background: none; border: none; color: #506070; cursor: pointer; font-size: 10px; font-family: monospace; }
#party-list { overflow-y: auto; flex: 1; padding: 4px 0; scrollbar-width: thin; scrollbar-color: #2a3044 #080a10; }
.party-entry { padding: 6px 12px; border-bottom: 1px solid #0e1220; }
.party-member-name { font-size: 11px; color: #a0c060; letter-spacing: 0.06em; margin-bottom: 4px; }
.party-hp-bar-wrap { height: 4px; background: #121824; border-radius: 2px; position: relative; }
.party-hp-bar { height: 4px; background: #40b060; border-radius: 2px; transition: width 0.3s; }
.party-hp-label { font-size: 8px; color: #506070; position: absolute; right: 0; top: 5px; }
#party-invite-notif {
    display: none; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: #0a0e18; border: 1px solid #3a6090; padding: 8px 14px; z-index: 400;
    font-family: monospace; font-size: 11px; color: #90b0d0; gap: 10px; align-items: center;
}
#party-invite-notif button { font-family: monospace; font-size: 10px; cursor: pointer; padding: 2px 8px; }
#party-invite-notif button:first-of-type { background: rgba(58,96,144,0.3); border: 1px solid #3a6090; color: #90b0d0; }
#party-invite-notif button:last-of-type { background: none; border: 1px solid #503030; color: #806050; }
.party-quest-sep { font-size: 9px; color: #304050; text-align: center; padding: 6px 0 3px; letter-spacing: 0.08em; }
.party-quest-entry { padding: 4px 12px; border-bottom: 1px solid #0e1220; }
.party-quest-entry.done .party-quest-name { color: #40b060; }
.party-quest-name { font-size: 10px; color: #8898aa; margin-bottom: 3px; }
.party-hp-bar.quest-bar { background: #3a6090; }
.party-hp-bar.quest-bar.done { background: #40b060; }
#group-quest-banner {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(4,3,12,0.95); border: 1px solid #a0c060; padding: 10px 24px;
    font-family: monospace; font-size: 13px; color: #a0c060; letter-spacing: 0.1em;
    z-index: 500; text-align: center; pointer-events: none;
}
#group-quest-banner.visible { display: block; }

/* E75: Faction War Banner */
#war-banner {
    display: none; position: fixed; top: 44px; left: 50%; transform: translateX(-50%);
    padding: 5px 20px; font-family: monospace; font-size: 12px; letter-spacing: 0.1em;
    z-index: 320; pointer-events: none; gap: 14px; align-items: center; white-space: nowrap;
}
#war-banner.war-banner-active { display: flex; }
#war-banner.war-lum {
    background: rgba(4,6,16,0.92); border: 1px solid #c0a030; color: #f0d060;
    animation: war-pulse-lum 2s ease-in-out infinite;
}
#war-banner.war-ent {
    background: rgba(4,2,12,0.92); border: 1px solid #7030a0; color: #c060e0;
    animation: war-pulse-ent 2s ease-in-out infinite;
}
#war-banner-timer { font-size: 11px; opacity: 0.75; }
@keyframes war-pulse-lum {
    0%,100% { box-shadow: 0 0 8px rgba(192,160,48,0.3); }
    50%      { box-shadow: 0 0 18px rgba(192,160,48,0.7); }
}
@keyframes war-pulse-ent {
    0%,100% { box-shadow: 0 0 8px rgba(112,48,160,0.3); }
    50%      { box-shadow: 0 0 18px rgba(112,48,160,0.7); }
}

/* ── E76: Shadow Realm Incursion ─────────────────────────────────────────── */
#incursion-vignette {
    display: none; position: fixed; inset: 0; pointer-events: none; z-index: 200;
}
#incursion-vignette.active {
    display: block;
    box-shadow: inset 0 0 80px rgba(96,0,160,0.45);
    animation: incursion-vign 3s ease-in-out infinite;
}
#incursion-banner {
    display: none; position: fixed; top: 44px; left: 50%; transform: translateX(-50%);
    padding: 5px 20px; font-family: monospace; font-size: 12px; letter-spacing: 0.1em;
    z-index: 320; pointer-events: none; gap: 14px; align-items: center; white-space: nowrap;
}
#incursion-banner.active {
    display: flex;
    background: rgba(4,2,12,0.93); border: 1px solid #7030c0; color: #c060e0;
    animation: incursion-pulse 1.5s ease-in-out infinite;
}
#incursion-banner-timer { font-size: 11px; opacity: 0.75; }
@keyframes incursion-pulse {
    0%,100% { box-shadow: 0 0 8px rgba(112,48,192,0.3); }
    50%      { box-shadow: 0 0 22px rgba(112,48,192,0.8); }
}
@keyframes incursion-vign {
    0%,100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* ── E82: Zone Loot Chest ────────────────────────────────────────────────── */
#loot-chest-banner {
    display: none; position: fixed; top: 68px; left: 50%; transform: translateX(-50%);
    padding: 5px 20px; font-family: monospace; font-size: 12px; letter-spacing: 0.1em;
    z-index: 321; gap: 12px; align-items: center; white-space: nowrap;
}
#loot-chest-banner.active {
    display: flex;
    background: rgba(12,8,0,0.95); border: 1px solid #c8860a; color: #f0c030;
    animation: loot-chest-glow 1.2s ease-in-out infinite;
}
#loot-chest-btn {
    background: none; border: 1px solid #c8860a; color: #f0c030;
    font-family: monospace; font-size: 12px; letter-spacing: 0.08em;
    padding: 2px 10px; cursor: pointer; pointer-events: all;
    transition: background 0.15s, color 0.15s;
}
#loot-chest-btn:hover { background: #c8860a; color: #0a0600; }
@keyframes loot-chest-glow {
    0%,100% { box-shadow: 0 0 8px rgba(200,134,10,0.3); }
    50%      { box-shadow: 0 0 26px rgba(200,134,10,0.9), 0 0 50px rgba(240,192,48,0.3); }
}

/* ── E83: Thari Inscription Wall ─────────────────────────────────────────── */
#inscription-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 420px; max-height: 480px; display: flex; flex-direction: column;
    background: rgba(8,5,18,0.97); border: 1px solid #8a6010;
    color: #d4a030; font-family: monospace; font-size: 12px;
    z-index: 450; box-shadow: 0 0 30px rgba(180,120,20,0.25);
}
#inscription-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #5a4010;
    background: rgba(12,8,0,0.8);
}
#inscription-title { letter-spacing: 0.12em; color: #f0c030; font-size: 13px; }
#inscription-close {
    background: none; border: none; color: #8a6010; cursor: pointer;
    font-size: 14px; padding: 0 4px;
}
#inscription-close:hover { color: #f0c030; }
#inscription-list {
    flex: 1; overflow-y: auto; padding: 10px 12px; display: flex;
    flex-direction: column; gap: 8px;
}
.inscription-entry {
    border-left: 2px solid #6a4010; padding: 4px 8px;
    background: rgba(20,12,0,0.6);
}
.inscription-author { color: #c08020; font-size: 10px; margin-bottom: 2px; }
.inscription-text { color: #e8c060; font-style: italic; }
.inscription-ts { color: #5a4010; font-size: 10px; float: right; }
.inscription-empty { color: #4a3010; font-style: italic; text-align: center; padding: 20px 0; }
#inscription-form {
    display: flex; gap: 6px; padding: 8px 12px;
    border-top: 1px solid #5a4010; background: rgba(12,8,0,0.8);
}
#inscription-input {
    flex: 1; background: rgba(20,12,0,0.9); border: 1px solid #6a4010;
    color: #e8c060; font-family: monospace; font-size: 11px;
    padding: 4px 8px; outline: none;
}
#inscription-input:focus { border-color: #c08020; }
#inscription-submit {
    background: none; border: 1px solid #8a6010; color: #c08020;
    font-family: monospace; font-size: 11px; padding: 4px 10px;
    cursor: pointer; letter-spacing: 0.06em; white-space: nowrap;
}
#inscription-submit:hover { background: #6a4010; color: #f0c030; }
#hud-inscription { transition: color 0.2s; }
#hud-inscription:hover { color: #f0c030 !important; }

/* ── E95: Walker Achievement System ─────────────────────────────────────── */
#ach-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 420px; max-height: 72vh; background: rgba(5,4,14,0.97);
    border: 1px solid #4a3080; color: #c0b0e0;
    font-family: 'Courier New', monospace; font-size: 12px;
    z-index: 625; display: none; flex-direction: column; overflow: hidden;
}
#ach-header {
    display: flex; align-items: center; padding: 8px 12px;
    border-bottom: 1px solid #3a2060; background: rgba(15,8,30,0.8); flex-shrink: 0;
}
#ach-title { color: #d0b0f0; font-size: 13px; font-weight: bold; flex: 1; }
#ach-close { background: none; border: none; color: #6a4a9a; cursor: pointer; font-size: 14px; margin-left: 8px; }
#ach-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 8px; padding: 12px; overflow-y: auto; flex: 1;
}
.ach-badge {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px; border: 1px solid #2a1a4a; border-radius: 3px;
    cursor: default; transition: border-color 0.2s; text-align: center;
}
.ach-badge.earned {
    border-color: #6a40c0; background: rgba(80,40,160,0.15);
    box-shadow: 0 0 6px rgba(160,100,255,0.3);
}
.ach-badge.locked { opacity: 0.3; filter: grayscale(80%); }
.ach-badge-icon { font-size: 22px; margin-bottom: 4px; }
.ach-badge-name { font-size: 7px; color: #9080b0; line-height: 1.2; }
.ach-badge.earned .ach-badge-name { color: #c0a0f0; }
#ach-toast {
    position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%);
    background: rgba(80,40,140,0.95); border: 1px solid #8060d0;
    color: #f0e0ff; padding: 10px 20px; font-family: 'Courier New', monospace;
    font-size: 12px; z-index: 700; pointer-events: none; text-align: center;
    animation: ach-toast-in 0.3s ease;
}
@keyframes ach-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── E94: Walker Crafting System ───────────────────────────────────────── */
#craft-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 400px; max-height: 70vh; background: rgba(3,6,3,0.97);
    border: 1px solid #2a4a1a; color: #b0d0a0;
    font-family: 'Courier New', monospace; font-size: 12px;
    z-index: 620; display: none; flex-direction: column; overflow: hidden;
}
#craft-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #2a4a1a;
    background: rgba(10,25,5,0.8); flex-shrink: 0;
}
#craft-title { color: #90d060; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
#craft-close { background: none; border: none; color: #4a7a3a; cursor: pointer; font-size: 14px; }
#craft-recipes-list { overflow-y: auto; padding: 8px 12px; flex: 1; }
.craft-recipe-card {
    border: 1px solid #2a4a1a; margin-bottom: 8px; padding: 8px;
    background: rgba(5,15,3,0.7); border-radius: 2px; transition: border-color 0.2s;
}
.craft-recipe-card:hover { border-color: #4a8a2a; }
.craft-recipe-card.locked { opacity: 0.4; }
.craft-recipe-card.on-cooldown { border-color: #3a3a1a; }
.craft-recipe-name { color: #c0f080; font-size: 12px; font-weight: bold; margin-bottom: 5px; }
.craft-recipe-meta { font-size: 9px; color: #608050; margin-bottom: 5px; letter-spacing: 0.5px; }
.craft-ingredients { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.craft-ing-slot {
    border: 1px solid #2a4a1a; padding: 2px 6px; font-size: 10px;
    color: #90b070; background: rgba(10,20,5,0.5); border-radius: 1px;
}
.craft-result-row { font-size: 10px; color: #f0c060; margin-bottom: 6px; }
.craft-actions { display: flex; align-items: center; gap: 8px; }
.craft-btn {
    background: #1a3a0a; color: #c0f080; border: 1px solid #3a6a1a;
    padding: 3px 12px; font-size: 10px; cursor: pointer;
    font-family: 'Courier New', monospace; transition: background 0.2s;
}
.craft-btn:hover { background: #2a5a1a; }
.craft-btn:disabled { opacity: 0.3; cursor: default; }
.craft-cooldown-label { font-size: 9px; color: #7a6a20; }
#hud-craft:hover { color: #90d060 !important; }

/* ── E93: Walker Reputation System ─────────────────────────────────────── */
#rep-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 380px; background: rgba(4,3,12,0.97); border: 1px solid #3a2860;
    color: #c8c0e0; font-family: 'Courier New', monospace; font-size: 12px;
    z-index: 615; display: none; flex-direction: column;
}
#rep-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #3a2860;
    background: rgba(20,10,40,0.7); color: #d4c0f0; font-size: 13px; font-weight: bold;
}
#rep-panel-header button { background: none; border: none; color: #7a5a9a; cursor: pointer; font-size: 14px; }
#rep-bars-section { padding: 10px 12px; border-bottom: 1px solid #2a1a4a; }
.rep-faction-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rep-faction-label { width: 70px; font-size: 10px; letter-spacing: 0.5px; flex-shrink: 0; }
.lum-color { color: #60a0f0; }
.ent-color { color: #f06030; }
.rep-bar-wrap { flex: 1; height: 10px; background: #0a0818; border: 1px solid #2a1a4a; border-radius: 2px; overflow: hidden; }
.rep-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #2255cc, #60a0f0); transition: width 0.5s ease; }
.rep-faction-row:last-child .rep-bar { background: linear-gradient(90deg, #cc4400, #f08040); }
.rep-tier-label { font-size: 9px; color: #8070a0; width: 70px; flex-shrink: 0; }
.rep-value { font-size: 10px; color: #a090c0; width: 40px; text-align: right; flex-shrink: 0; }
#rep-shop-section { max-height: 200px; overflow-y: auto; padding: 6px 12px; }
#rep-shop-header { font-size: 10px; color: #9080b0; letter-spacing: 1px; padding: 4px 0; border-bottom: 1px solid #2a1a4a; margin-bottom: 6px; }
.rep-shop-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid #1a1030; }
.rep-shop-item.locked { opacity: 0.45; }
.rep-item-name { flex: 1; font-size: 11px; }
.rep-item-faction { font-size: 9px; width: 55px; flex-shrink: 0; }
.rep-item-cost { font-size: 10px; color: #f0c030; width: 40px; text-align: right; flex-shrink: 0; }
.rep-item-buy { background: #2d0a4e; color: #d4c4f4; border: 1px solid #5a3a8a; padding: 2px 8px; font-size: 9px; cursor: pointer; font-family: 'Courier New', monospace; }
.rep-item-buy:disabled { opacity: 0.3; cursor: default; }
#rep-actions { padding: 8px 12px; display: flex; gap: 6px; border-top: 1px solid #2a1a4a; }
#rep-actions button { background: #1a0a30; color: #9080c0; border: 1px solid #3a2860; padding: 4px 10px; font-size: 10px; cursor: pointer; font-family: 'Courier New', monospace; }
#hud-rep:hover { color: #b090e0 !important; }

/* ── E92: Shadow Weave Resonance Dungeon ────────────────────────────────── */
#dungeon-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 360px; background: rgba(4,2,10,0.97); border: 1px solid #5a1a1a;
    color: #c8a8a8; font-family: 'Courier New', monospace; font-size: 12px;
    z-index: 610; display: none; flex-direction: column;
}
#dungeon-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #5a1a1a;
    background: rgba(40,5,5,0.7);
}
#dungeon-title { color: #f08080; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
#dungeon-close { background: none; border: none; color: #7a3a3a; cursor: pointer; font-size: 14px; }
#dungeon-rooms-row {
    display: flex; justify-content: center; gap: 20px;
    padding: 10px; border-bottom: 1px solid #3a0a0a;
}
.dungeon-pip {
    font-size: 20px; color: #4a2a2a; transition: color 0.3s;
}
.dungeon-pip.active { color: #f08080; text-shadow: 0 0 8px #f08080; }
.dungeon-pip.done   { color: #40a040; }
#dungeon-boss-row {
    padding: 8px 12px; display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid #3a0a0a;
}
#dungeon-boss-label { font-size: 10px; color: #f08080; white-space: nowrap; }
#dungeon-boss-bar-wrap {
    flex: 1; height: 12px; background: #1a0505;
    border: 1px solid #5a1a1a; border-radius: 2px; overflow: hidden;
}
#dungeon-boss-bar {
    height: 100%; width: 100%; background: #cc2020;
    transition: width 0.4s ease;
}
#dungeon-boss-hp-text { font-size: 10px; color: #d08080; white-space: nowrap; }
#dungeon-loot-log {
    min-height: 50px; max-height: 100px; overflow-y: auto;
    padding: 6px 12px; border-bottom: 1px solid #3a0a0a;
}
.dungeon-loot-entry { color: #d4a040; font-size: 10px; padding: 1px 0; }
#dungeon-actions {
    padding: 8px 12px; display: flex; gap: 6px;
}
#dungeon-actions button {
    background: #3a0a0a; color: #f08080; border: 1px solid #5a1a1a;
    padding: 4px 10px; font-size: 10px; cursor: pointer;
    font-family: 'Courier New', monospace; transition: background 0.2s;
}
#dungeon-actions button:hover { background: #5a1a1a; }
@keyframes dungeon-complete-flash {
    0%, 100% { border-color: #5a1a1a; }
    50% { border-color: #f0c030; box-shadow: 0 0 20px #f0c030; }
}
#dungeon-panel.complete { animation: dungeon-complete-flash 0.5s ease 4; }

/* ── E91: Guild Wars — Territory Bar ───────────────────────────────────── */
#territory-bar {
    display: flex; align-items: center; height: 14px; width: 90px;
    border: 1px solid #2a1a4a; border-radius: 2px; overflow: hidden;
    position: relative; margin: 0 4px; flex-shrink: 0;
}
#territory-lum-bar {
    display: block; height: 100%; background: #2255cc;
    transition: width 0.5s ease; width: 50%;
}
#territory-ent-bar {
    display: block; height: 100%; background: #cc4400;
    transition: width 0.5s ease; width: 50%;
}
#territory-label {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 8px; color: #fff; text-shadow: 0 0 3px #000;
    white-space: nowrap; pointer-events: none;
}
@keyframes territory-capture {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.7; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
#territory-bar.captured { animation: territory-capture 0.6s ease 3; }

/* ── E90: Walker Guild System ───────────────────────────────────────────── */
#guild-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 340px; background: rgba(6,3,14,0.97); border: 1px solid #3a2860;
    color: #c8b8e8; font-family: 'Courier New', monospace; font-size: 12px;
    z-index: 600; display: none; flex-direction: column;
}
#guild-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #3a2860;
    background: rgba(30,10,60,0.6);
}
#guild-panel-name { color: #d4a4f4; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
#guild-panel-close { background: none; border: none; color: #7a5a9a; cursor: pointer; font-size: 14px; }
#guild-treasury-row { padding: 6px 12px; color: #f0d060; border-bottom: 1px solid #2a1a4a; }
#guild-members-list { padding: 8px 12px; min-height: 60px; }
.guild-member-row { padding: 2px 0; color: #c0a8e0; }
.guild-member-gm { color: #f0d060; }
#guild-actions {
    padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 5px;
    border-top: 1px solid #3a2860;
}
#guild-actions input[type="text"] {
    background: #0a0816; border: 1px solid #4a2a7a; color: #c8b8e8;
    font-size: 11px; padding: 3px 6px; font-family: 'Courier New', monospace;
}
#guild-actions input[type="number"] {
    background: #0a0816; border: 1px solid #4a2a7a; color: #c8b8e8;
    font-size: 11px; padding: 3px 4px; font-family: 'Courier New', monospace;
}
#guild-actions button {
    background: #2d0a4e; color: #d4c4f4; border: 1px solid #5a3a8a;
    padding: 3px 8px; font-size: 10px; cursor: pointer; font-family: 'Courier New', monospace;
}
#guild-actions button:hover { background: #4a1a7a; }
.guild-tag { color: #b080e0; font-size: 9px; margin-left: 3px; opacity: 0.85; }

/* ── E89: Shadow Weave Combo Row ────────────────────────────────────────── */
#combo-row {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 8px; background: rgba(10,8,28,0.88);
    border-top: 1px solid #2a1a4a; border-bottom: 1px solid #2a1a4a;
    flex-shrink: 0;
}
.combo-label {
    font-size: 9px; letter-spacing: 1px; color: #9b59b6;
    font-family: 'Courier New', monospace; white-space: nowrap;
}
.combo-input {
    width: 52px; background: #0a0816; border: 1px solid #4a2a7a;
    color: #d4c4f4; font-size: 11px; padding: 3px 5px;
    font-family: 'Courier New', monospace; outline: none;
    transition: border-color 0.2s;
}
.combo-input:focus { border-color: #9b59b6; box-shadow: 0 0 6px rgba(155,89,182,0.4); }
#combo-cast-btn {
    background: #2d0a4e; color: #d4c4f4; border: 1px solid #7a3ab5;
    padding: 3px 10px; font-size: 10px; letter-spacing: 1px; cursor: pointer;
    font-family: 'Courier New', monospace; transition: background 0.2s;
}
#combo-cast-btn:hover { background: #4a1a7a; color: #f0e0ff; }
@keyframes combo-splash {
    0%   { transform: scale(0.5); opacity: 0.9; }
    70%  { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ── E88: Walker Trade System ────────────────────────────────────────────── */
#trade-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 480px; background: rgba(6,3,14,0.97); border: 1px solid #4a6080;
    color: #b0c8e0; font-family: monospace; font-size: 12px;
    z-index: 455; display: flex; flex-direction: column; gap: 0;
    box-shadow: 0 0 24px rgba(30,80,160,0.3);
}
#trade-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #2a3848;
    background: rgba(10,6,20,0.9);
}
#trade-title { color: #60a0d0; letter-spacing: 0.1em; font-size: 13px; }
#trade-cancel-btn {
    background: none; border: 1px solid #603030; color: #b06060;
    font-family: monospace; font-size: 11px; padding: 2px 8px; cursor: pointer;
}
#trade-cancel-btn:hover { background: #602020; color: #f08080; }
#trade-slots {
    display: flex; align-items: stretch; gap: 0; padding: 16px 12px;
}
.trade-side { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.trade-side-label { font-size: 10px; color: #6080a0; letter-spacing: 0.08em; text-align: center; }
.trade-slot {
    flex: 1; min-height: 64px; border: 1px solid #304060; background: rgba(20,12,36,0.8);
    display: flex; align-items: center; justify-content: center; padding: 8px;
    text-align: center;
}
.trade-slot.has-item { border-color: #c8a030; color: #f0c040; }
.trade-slot-empty { color: #304060; font-style: italic; font-size: 11px; }
#trade-arrow { color: #4a6080; font-size: 22px; display: flex; align-items: center; padding: 0 12px; }
#trade-status-msg { text-align: center; color: #8090a0; font-size: 11px; padding: 4px 12px; min-height: 18px; }
#trade-actions { display: flex; justify-content: center; padding: 0 12px 8px; }
#trade-confirm-btn {
    background: none; border: 1px solid #206040; color: #40c080;
    font-family: monospace; font-size: 12px; padding: 5px 24px; cursor: pointer;
    letter-spacing: 0.08em;
}
#trade-confirm-btn:hover { background: #183828; }
#trade-input-row {
    display: flex; gap: 6px; padding: 8px 12px;
    border-top: 1px solid #2a3848; background: rgba(10,6,20,0.8);
}
#trade-entry-input {
    flex: 1; background: rgba(20,12,36,0.9); border: 1px solid #304060;
    color: #b0c8e0; font-family: monospace; font-size: 11px; padding: 3px 8px; outline: none;
}
#trade-input-row button {
    background: none; border: 1px solid #304060; color: #8090a0;
    font-family: monospace; font-size: 11px; padding: 3px 10px; cursor: pointer;
}
#trade-input-row button:hover { border-color: #c8a030; color: #f0c040; }

/* ── E87: Thari Resonance Storm ──────────────────────────────────────────── */
#resonance-storm-banner {
    display: none; position: fixed; top: 92px; left: 50%; transform: translateX(-50%);
    padding: 5px 20px; font-family: monospace; font-size: 12px; letter-spacing: 0.1em;
    z-index: 322; gap: 12px; align-items: center; white-space: nowrap;
}
#resonance-storm-banner.active {
    display: flex;
    background: rgba(8,2,18,0.96); border: 1px solid #b030d0;
    color: #e060ff;
    animation: resonance-storm-pulse 0.9s ease-in-out infinite;
}
#resonance-storm-timer { font-size: 10px; opacity: 0.75; }
@keyframes resonance-storm-pulse {
    0%,100% { box-shadow: 0 0 10px rgba(176,48,208,0.4), 0 0 3px rgba(0,220,255,0.2); }
    50%      { box-shadow: 0 0 28px rgba(176,48,208,0.9), 0 0 14px rgba(0,220,255,0.5); }
}

/* ── E86: Walker Status Effects ──────────────────────────────────────────── */
#status-bar {
    display: flex; gap: 4px; align-items: center; margin: 0 4px;
}
.status-icon {
    font-size: 13px; cursor: default; position: relative;
    animation: status-pulse 1s ease-in-out infinite;
}
.status-icon .status-timer {
    position: absolute; top: -6px; right: -4px;
    font-size: 8px; color: #c0c0c0; font-family: monospace;
    background: rgba(0,0,0,0.7); padding: 0 2px; border-radius: 2px;
    pointer-events: none;
}
@keyframes status-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* Vignette overlays via ::before on body */
body.status-burn::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(220,80,10,0.35) 100%);
    animation: burn-flicker 0.4s ease-in-out infinite alternate;
}
body.status-freeze::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(40,120,220,0.3) 100%);
}
body.status-poison::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(30,160,50,0.3) 100%);
    animation: poison-pulse 1.5s ease-in-out infinite;
}
body.status-blind::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8;
    background: rgba(0,0,0,0.55);
}
/* canvas desaturate when blinded */
body.status-blind canvas#game { filter: brightness(0.4) saturate(0); }
@keyframes burn-flicker {
    from { opacity: 0.8; }
    to   { opacity: 1; }
}
@keyframes poison-pulse {
    0%,100% { opacity: 0.8; }
    50%      { opacity: 1.0; }
}

/* ── E79: Zone Darkness System ───────────────────────────────────────────── */
#darkness-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 5;
    background: transparent;
    transition: background 3s ease-in-out;
}
body.phase-dusk  #darkness-overlay { background: rgba(20,10,40,0.30); }
body.phase-night #darkness-overlay { background: rgba(4,2,20,0.65); }
body.phase-dawn  #darkness-overlay { background: rgba(10,5,30,0.22); }

/* Canvas brightness via filter — GPU-accelerated, 3s transition */
#game, #walkers-overlay {
    transition: filter 3s ease-in-out;
}
body.phase-night #game, body.phase-night #walkers-overlay { filter: brightness(0.65) saturate(0.75); }
body.phase-dusk  #game, body.phase-dusk  #walkers-overlay { filter: brightness(0.80) saturate(0.88); }
body.phase-dawn  #game, body.phase-dawn  #walkers-overlay { filter: brightness(0.82) saturate(0.90); }
body.phase-day   #game, body.phase-day   #walkers-overlay { filter: brightness(1.00) saturate(1.00); }

/* Night star shimmer on darkness overlay */
body.phase-night #darkness-overlay::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 75%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 45%, rgba(255,255,255,0.5) 0%, transparent 100%);
    animation: star-twinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes star-twinkle {
    0%   { opacity: 0.4; }
    50%  { opacity: 0.9; }
    100% { opacity: 0.5; }
}

/* HUD phase indicator colours */
#hud-phase { transition: color 2s ease; }
body.phase-day   #hud-phase { color: #e0c840; }
body.phase-dawn  #hud-phase { color: #e08040; }
body.phase-dusk  #hud-phase { color: #a06070; }
body.phase-night #hud-phase { color: #6080c0; }

/* ── E81: Walker Emotes ──────────────────────────────────────────────────── */
#emote-bar {
    display: flex; align-items: center; gap: 3px;
    padding: 4px 6px; background: rgba(4,2,12,0.70);
    border-right: 1px solid #1a1228; flex-shrink: 0;
}
.emote-btn {
    background: none; border: 1px solid #1e1530; font-size: 16px;
    padding: 3px 5px; cursor: pointer; border-radius: 3px;
    transition: background 0.15s, transform 0.1s;
    line-height: 1;
}
.emote-btn:hover  { background: rgba(80,32,128,0.25); transform: scale(1.15); }
.emote-btn:active { transform: scale(0.92); }

/* Emote bubble — floats above nameplate element */
.emote-bubble {
    position: absolute; bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%);
    font-size: 18px; pointer-events: none; z-index: 500;
    animation: emote-pop 2.5s ease-in-out forwards;
    white-space: nowrap;
}
@keyframes emote-pop {
    0%   { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.7); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1.1); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.9); }
}

/* ── E80: Dynamic Weather ────────────────────────────────────────────────── */
#weather-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 6;
    transition: opacity 2s ease-in-out;
    opacity: 0;
    will-change: transform, opacity;
}

/* Rain — animated diagonal streaks */
body.weather-rain #weather-overlay,
body.weather-storm #weather-overlay {
    opacity: 1;
    background-image: repeating-linear-gradient(
        100deg,
        transparent,
        transparent 2px,
        rgba(160,200,255,0.08) 2px,
        rgba(160,200,255,0.08) 3px
    );
    background-size: 6px 80px;
    animation: rain-fall 0.4s linear infinite;
}
body.weather-storm #weather-overlay {
    background-image: repeating-linear-gradient(
        100deg,
        transparent,
        transparent 2px,
        rgba(180,220,255,0.14) 2px,
        rgba(180,220,255,0.14) 3px
    );
    animation: rain-fall 0.25s linear infinite, storm-flash 8s ease-in-out infinite;
}
@keyframes rain-fall {
    0%   { background-position: 0 0; }
    100% { background-position: -20px 80px; }
}
@keyframes storm-flash {
    0%, 92%, 94%, 100% { filter: brightness(1); }
    93%                 { filter: brightness(1.6); }
}

/* Fog — bottom-up mist gradient */
body.weather-fog #weather-overlay {
    opacity: 1;
    background: linear-gradient(
        to top,
        rgba(200,210,230,0.40) 0%,
        rgba(200,210,230,0.18) 30%,
        transparent 70%
    );
    animation: fog-drift 12s ease-in-out infinite alternate;
}
@keyframes fog-drift {
    0%   { transform: translateX(-6px); opacity: 0.75; }
    100% { transform: translateX(6px);  opacity: 1.00; }
}

/* HUD weather icon (shared #hud-phase element, appended after darkness icon) */
#hud-weather {
    font-size: 12px; margin: 0 3px; cursor: default; letter-spacing: 0.05em;
    transition: color 1.5s ease;
}
body.weather-rain  #hud-weather { color: #80a8c8; }
body.weather-fog   #hud-weather { color: #a0b0c0; }
body.weather-storm #hud-weather { color: #6080b0; }
body.weather-clear #hud-weather { color: #304050; }

/* Canvas adjustments per weather */
body.weather-rain  #game { filter: brightness(0.92) saturate(0.85); }
body.weather-storm #game { filter: brightness(0.78) saturate(0.70); }
body.weather-fog   #game { filter: brightness(0.88) saturate(0.65) blur(0.4px); }

/* ── E78: Walker Companion HUD ───────────────────────────────────────────── */
#companion-hud {
    position: fixed; bottom: 12px; right: 12px; z-index: 400;
    display: flex; align-items: center; gap: 6px;
    background: rgba(4,2,12,0.88); border: 1px solid #2a1050;
    padding: 5px 10px; font-family: monospace; font-size: 10px;
    letter-spacing: 0.08em; color: #9070c0;
    box-shadow: 0 0 12px rgba(80,32,128,0.3);
}
#companion-hud.luminaris { border-color: #806020; color: #f0d060;
    box-shadow: 0 0 12px rgba(192,160,48,0.35); }
#companion-hud.entropia  { border-color: #601090; color: #c060e0;
    box-shadow: 0 0 12px rgba(160,48,224,0.35); }
#companion-hud.shadow    { border-color: #203850; color: #80a8c8;
    box-shadow: 0 0 12px rgba(64,128,192,0.25); }
#companion-icon { font-size: 14px; }
#companion-name { font-size: 10px; }
#companion-dismiss-btn {
    background: none; border: none; color: #3a2058; font-size: 9px;
    cursor: pointer; padding: 0 2px; margin-left: 4px;
}
#companion-dismiss-btn:hover { color: #c060e0; }

/* ── E77: Thari Codex Panel ──────────────────────────────────────────────── */
#codex-panel {
    position: fixed; right: 12px; top: 54px; width: 340px; max-height: 72vh;
    background: #06040e; border: 1px solid #3a1a6a;
    box-shadow: 0 0 32px rgba(96,32,160,0.25); z-index: 800;
    display: flex; flex-direction: column; font-family: monospace;
    overflow: hidden;
}
#codex-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-bottom: 1px solid #2a1050;
    background: rgba(48,8,96,0.35);
}
#codex-title { font-size: 11px; letter-spacing: 0.15em; color: #b070e0; }
#codex-close { background: none; border: 1px solid #3a2060; color: #604880;
    font-family: monospace; font-size: 9px; padding: 2px 8px; cursor: pointer;
    letter-spacing: 0.08em; }
#codex-close:hover { border-color: #b070e0; color: #b070e0; }
#codex-tabs { display: flex; border-bottom: 1px solid #1e0e38; }
.codex-tab {
    flex: 1; background: none; border: none; border-right: 1px solid #1e0e38;
    color: #503870; font-family: monospace; font-size: 9px; letter-spacing: 0.1em;
    padding: 6px 0; cursor: pointer;
}
.codex-tab:last-child { border-right: none; }
.codex-tab.active { color: #c070e0; background: rgba(80,16,140,0.2); }
.codex-tab:hover { color: #9050c0; }
#codex-body { flex: 1; overflow-y: auto; padding: 10px 12px; }
.codex-syl-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0; border-bottom: 1px solid #100820; font-size: 10px;
}
.codex-syl { color: #d0a0ff; font-weight: bold; min-width: 32px; }
.codex-syl-faction { font-size: 8px; letter-spacing: 0.08em; min-width: 52px; }
.codex-syl-faction.luminaris { color: #c0a030; }
.codex-syl-faction.entropia  { color: #8030c0; }
.codex-syl-faction.shadow    { color: #6090b0; }
.codex-syl-faction.universal { color: #506070; }
.codex-syl-meaning { color: #8878a8; font-size: 9px; line-height: 1.4; }
.codex-phrase-row {
    padding: 6px 0; border-bottom: 1px solid #100820; font-size: 10px;
}
.codex-phrase-key { color: #d0a0ff; margin-bottom: 3px; letter-spacing: 0.08em; }
.codex-phrase-effect { color: #8878a8; font-size: 9px; line-height: 1.4; }
.codex-lore-entry { padding: 10px 0; border-bottom: 1px solid #100820; }
.codex-lore-title { color: #c090e0; font-size: 10px; letter-spacing: 0.1em; margin-bottom: 6px; }
.codex-lore-text { color: #706888; font-size: 9px; line-height: 1.6; font-style: italic; }
.codex-empty { color: #302848; font-size: 9px; text-align: center; padding: 16px 0; }

#dq-panel {
    display: none; position: fixed; top: 60px; left: 10px; width: 240px;
    background: #080a10; border: 1px solid #2a3044; z-index: 310;
    font-family: monospace; flex-direction: column;
}
#dq-panel.visible { display: flex; }
#dq-header {
    padding: 7px 12px 5px; border-bottom: 1px solid #1a2030;
    display: flex; justify-content: space-between; align-items: center;
}
#dq-title { font-size: 10px; letter-spacing: 0.12em; color: #7080a0; text-transform: uppercase; }
#dq-close { background: none; border: none; color: #506070; cursor: pointer; font-size: 10px; font-family: monospace; }
#dq-list { padding: 6px 0; }
.dq-row {
    padding: 6px 12px; border-bottom: 1px solid #10182a;
}
.dq-name { font-size: 10px; color: #8898aa; letter-spacing: 0.06em; }
.dq-bar-wrap { height: 3px; background: #121824; margin: 4px 0 2px; border-radius: 1px; }
.dq-bar { height: 3px; background: #3a6090; border-radius: 1px; transition: width 0.3s; }
.dq-bar.done { background: #40b060; }
.dq-meta { font-size: 8px; color: var(--wasm-text-sub); display: flex; justify-content: space-between; }
.dq-reward { color: #d4a840; }
.dq-claimed { color: #40b060; }
/* E48: Character Sheet Panel [P] */
#charsheet-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 320px; background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 16px 18px; z-index: 220; color: #c0b8d4;
    box-shadow: 0 0 50px rgba(60,20,120,0.6);
}
#charsheet-panel.visible { display: block; }
.cs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cs-title { font-size: 12px; letter-spacing: 0.14em; color: #a080d0; }
.cs-close { background: transparent; border: none; color: #504070; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.cs-close:hover { color: #b090d0; }
.cs-identity { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #1a1030; }
.cs-name { font-size: 13px; color: #e0d8f0; letter-spacing: 0.05em; }
.cs-class { font-size: 10px; margin-top: 3px; }
.cs-section { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #140e28; }
.cs-section:last-child { border-bottom: none; margin-bottom: 0; }
.cs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 10px; }
.cs-label { width: 80px; color: #605878; flex-shrink: 0; }
.cs-track { flex: 1; height: 5px; background: #12102a; border-radius: 2px; overflow: hidden; }
.cs-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.cs-fill.hp { background: linear-gradient(90deg,#205020,#40b040); }
.cs-fill.sc { background: linear-gradient(90deg,#202050,#4040c0); }
.cs-fill.fl { background: linear-gradient(90deg,#402060,#9040d0); }
.cs-fill.lum { background: linear-gradient(90deg,#203050,#3080c0); }
.cs-fill.ent { background: linear-gradient(90deg,#502020,#c04030); }
.cs-val { width: 64px; text-align: right; color: #9088a8; font-size: 9px; flex-shrink: 0; }
.cs-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 9px; color: #706888; }
.cs-stat-val { color: #a89ab8; }
/* E39: Fluency Milestone overlay */
#fl-milestone-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(2,1,8,0.82); z-index: 400; align-items: center; justify-content: center;
}
#fl-milestone-overlay.visible { display: flex; }
#fl-milestone-box {
    background: rgba(6,4,20,0.98); border: 1px solid #3060a0;
    border-radius: 8px; padding: 32px 40px; max-width: 420px; text-align: center;
    box-shadow: 0 0 80px rgba(40,80,200,0.5); animation: fl-ms-in 0.5s ease;
}
@keyframes fl-ms-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
.fl-ms-tier { font-size: 9px; letter-spacing: 0.22em; color: var(--wasm-accent); margin-bottom: 10px; }
.fl-ms-level { font-size: 36px; letter-spacing: 0.04em; color: #3080d0; margin-bottom: 6px; }
.fl-ms-title { font-size: 16px; letter-spacing: 0.12em; color: #80c0f0; margin-bottom: 14px; }
.fl-ms-desc { font-size: 10px; color: #607888; line-height: 1.6; margin-bottom: 18px; }
.fl-ms-sylls { font-size: 9px; color: #406080; margin-bottom: 20px; letter-spacing: 0.1em; }
.fl-ms-dismiss {
    background: transparent; border: 1px solid #203860; color: #406080;
    font-family: inherit; font-size: 9px; letter-spacing: 0.1em; padding: 6px 18px;
    cursor: pointer; border-radius: 3px;
}
.fl-ms-dismiss:hover { border-color: #4080c0; color: #80b0d8; }
/* E53: Thari Phrase Book Panel [B] */
#phrasebook-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 340px; max-height: 500px; background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 16px 18px; z-index: 220; color: #c0b8d4;
    box-shadow: 0 0 50px rgba(60,20,120,0.6); display: none; flex-direction: column;
}
#phrasebook-panel.visible { display: flex; }
.pb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pb-title { font-size: 12px; letter-spacing: 0.14em; color: #a080d0; }
.pb-close { background: transparent; border: none; color: #504070; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.pb-close:hover { color: #b090d0; }
.pb-progress { font-size: 9px; color: var(--wasm-text-sub); margin-bottom: 10px; letter-spacing: 0.06em; }
.pb-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pb-entry {
    border: 1px solid var(--wasm-surface); border-radius: 3px; padding: 7px 10px;
    background: rgba(10,8,24,0.6);
}
.pb-entry.discovered { border-color: #2a1850; background: rgba(20,10,40,0.7); }
.pb-entry.discovered:hover { border-color: #4a2880; }
.pb-phrase-name { font-size: 11px; letter-spacing: 0.08em; color: #b090d0; margin-bottom: 3px; }
.pb-entry:not(.discovered) .pb-phrase-name { color: #302848; }
.pb-phrase-key { font-size: 8px; color: #405070; letter-spacing: 0.04em; margin-bottom: 3px; font-family: monospace; }
.pb-entry:not(.discovered) .pb-phrase-key { color: #20202a; }
.pb-meaning { font-size: 9px; color: #706080; line-height: 1.4; }
.pb-entry:not(.discovered) .pb-meaning { color: #282030; }
.pb-xp { float: right; font-size: 8px; color: #504060; }
.pb-entry.discovered .pb-xp { color: #7060a0; }
/* E49: Leaderboard Panel [L] */
#lb-panel {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 340px; background: rgba(4,3,12,0.97); border: 1px solid #2a1840;
    border-radius: 6px; padding: 16px 18px; z-index: 220; color: #c0b8d4;
    box-shadow: 0 0 50px rgba(60,20,120,0.6);
}
#lb-panel.visible { display: block; }
.lb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lb-title { font-size: 12px; letter-spacing: 0.14em; color: #a080d0; }
.lb-close { background: transparent; border: none; color: #504070; font-family: inherit;
    font-size: 11px; cursor: pointer; padding: 0 4px; }
.lb-close:hover { color: #b090d0; }
.lb-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.lb-tab {
    flex: 1; background: transparent; border: 1px solid #2a1840; color: var(--wasm-text-sub);
    font-family: inherit; font-size: 9px; letter-spacing: 0.06em; padding: 4px 0;
    cursor: pointer; border-radius: 3px; transition: color 0.15s, border-color 0.15s;
}
.lb-tab:hover { border-color: #604890; color: #a080d0; }
.lb-tab.active { border-color: #7050b0; color: #c090f0; background: rgba(80,40,140,0.15); }
.lb-list { max-height: 320px; overflow-y: auto; }
.lb-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px;
    border-bottom: 1px solid #10102a; font-size: 10px;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.self { background: rgba(80,40,120,0.18); }
.lb-rank { width: 20px; text-align: right; font-size: 9px; color: var(--wasm-text-sub); flex-shrink: 0; }
.lb-rank.top3 { color: #c0a030; font-weight: bold; }
.lb-name { flex: 1; color: #b0a0c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-faction-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lb-val { width: 52px; text-align: right; color: #706088; font-size: 9px; flex-shrink: 0; }
.lb-empty { padding: 24px 0; font-size: 10px; color: #334055; text-align: center; }
.lb-legend { margin-top: 8px; font-size: 8px; color: var(--wasm-text-sub); text-align: center; }

/* ── E64: Enemy HUD ──────────────────────────────────────────────────────── */
/* ── E26-S1-1: Combat target indicator ───────────────────────────────────── */
#combat-target { position:fixed; bottom:90px; left:12px; width:180px; background:rgba(4,4,10,0.92); border:1px solid var(--wasm-steel); border-radius:4px; padding:6px 8px; z-index:810; font-family:monospace; display:flex; align-items:center; gap:6px; }
.ct-faction-icon { font-size:16px; flex-shrink:0; width:20px; text-align:center; }
.ct-info { flex:1; min-width:0; }
.ct-name { font-size:10px; color:var(--wasm-text-main); letter-spacing:0.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.ct-hp-wrap { height:3px; background:#0e0e1a; border-radius:2px; overflow:hidden; margin-bottom:2px; }
.ct-hp-bar { height:100%; background:var(--wasm-hp); border-radius:2px; transition:width 0.3s; }
.ct-hp-label { font-size:8px; color:var(--wasm-text-dim); }
.ct-close { background:none; border:none; color:#504060; font-size:11px; cursor:pointer; padding:0 2px; flex-shrink:0; }
.ct-close:hover { color:var(--wasm-hp); }

/* ── E26-S1-2: Floating damage numbers ───────────────────────────────────── */
#dmg-float-layer { position:absolute; inset:0; pointer-events:none; z-index:75; overflow:hidden; }
.dmg-float { position:absolute; font-size:13px; font-family:monospace; font-weight:bold; letter-spacing:0.04em; pointer-events:none; animation:dmg-rise 1.2s ease-out forwards; white-space:nowrap; }
.dmg-float.dmg-dealt  { color:var(--wasm-gold); text-shadow:0 0 6px rgba(212,166,58,0.5); }
.dmg-float.dmg-recv   { color:var(--wasm-hp);   text-shadow:0 0 6px rgba(180,40,40,0.5); }
.dmg-float.dmg-sc     { color:var(--wasm-sc);   text-shadow:0 0 6px rgba(60,120,200,0.5); }
@keyframes dmg-rise { 0%{opacity:1;transform:translateY(0) scale(1)} 60%{opacity:0.8;transform:translateY(-28px) scale(1.1)} 100%{opacity:0;transform:translateY(-48px) scale(0.9)} }

/* ── E26-S1-3: Cooldown bars ─────────────────────────────────────────────── */
.hbtn-wrap { display:flex; flex-direction:column; align-items:center; margin:0 1px; }
.cd-bar-wrap { width:100%; height:2px; background:#0e0e1a; border-radius:1px; overflow:hidden; margin-top:1px; }
.cd-bar { height:100%; border-radius:1px; transition:width 0.1s linear; }
.cd-bar-med   { background:var(--wasm-sc); }
.cd-bar-weave { background:var(--fac-shadow); }

#enemy-hud { position:fixed; bottom:90px; right:12px; width:160px; background:#0a060e; border:1px solid #3a1520; border-radius:4px; padding:6px 8px; z-index:800; font-family:monospace; }
.enemy-row { display:flex; align-items:center; gap:4px; margin-bottom:3px; }
.enemy-label { font-size:9px; color:#d04040; width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.enemy-bar-wrap { flex:1; height:4px; background:#1a0a10; border-radius:2px; overflow:hidden; }
.enemy-bar { height:100%; border-radius:2px; transition:width 0.2s; }
.enemy-hp { font-size:8px; color:#804050; min-width:32px; text-align:right; }

/* ── E65: S1 Ending Epilogue Overlay ─────────────────────────────────────── */
#s1-ending-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:12000; display:flex; align-items:center; justify-content:center; }
#s1-ending-inner { max-width:680px; width:90vw; background:#07070e; border:1px solid #2a1a3a; padding:40px 48px; box-shadow:0 0 60px rgba(180,140,255,0.15); }
#s1-ending-header { color:#b090e0; font-size:11px; letter-spacing:0.22em; text-align:center; margin-bottom:6px; font-family:'Courier New',monospace; }
#s1-ending-subtitle { color:#5a4a6a; font-size:9px; letter-spacing:0.18em; text-align:center; margin-bottom:32px; font-family:'Courier New',monospace; }
#s1-ending-text { color:#c8c0d8; font-size:12px; line-height:1.8; white-space:pre-wrap; font-family:'Courier New',monospace; background:none; border:none; width:100%; margin:0 0 28px 0; }
#s1-ending-title { text-align:center; color:var(--wasm-gold); font-size:13px; letter-spacing:0.18em; margin-bottom:28px; font-family:'Courier New',monospace; }
#s1-ending-close { display:block; margin:0 auto; background:none; border:1px solid #4a3a5a; color:#8a7a9a; padding:10px 32px; font-family:'Courier New',monospace; font-size:11px; letter-spacing:0.14em; cursor:pointer; }
#s1-ending-close:hover { border-color:#b090e0; color:#b090e0; }

/* ── Accessibility: Focus states (WCAG 2.1 AA) ───────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--wasm-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
button:focus-visible, .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(110, 138, 168, 0.4);
}

/* Skip link — hidden until focused */
.skip-link {
    position: absolute; top: -40px; left: 0; z-index: 99999;
    background: var(--wasm-surface2); color: var(--wasm-text-bright);
    padding: 8px 12px; font-size: var(--fs-sm);
    text-decoration: none; border: 1px solid var(--wasm-border);
}
.skip-link:focus { top: 0; }

/* ── E96: Daily Quest Board v2 ───────────────────────────────────────────── */
#dq-v2-panel {
    position:fixed; top:120px; right:16px; width:280px; background:#0d0a18;
    border:1px solid #4a3010; z-index:3200; display:none; padding:10px;
    font-family:'Courier New',monospace; font-size:10px; color:#d0b070;
}
#dq-v2-panel.visible { display:block; }
#dq-v2-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#e0c080; letter-spacing:0.1em; }
#dq-v2-header button { background:none; border:none; color:#7a6030; cursor:pointer; font-size:11px; }
#dq-v2-header button:hover { color:#e0c080; }
.dq-v2-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; padding:3px 4px; border-left:2px solid #4a3010; }
.dq-v2-row.favor-luminaris { border-left-color:#4070b0; }
.dq-v2-row.favor-entropia  { border-left-color:#b04030; }
.dq-v2-row.favor-neutral   { border-left-color:#506030; }
.dq-v2-row.completed { opacity:0.45; }
.dq-v2-name { flex:1; color:#d0b070; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dq-v2-bar-wrap { width:60px; height:5px; background:#1a1520; border-radius:2px; }
.dq-v2-bar { height:5px; background:#a07820; border-radius:2px; transition:width 0.3s; }
.dq-v2-row.favor-luminaris .dq-v2-bar { background:#4090d0; }
.dq-v2-row.favor-entropia  .dq-v2-bar { background:#d05040; }
.dq-v2-prog { color:#806040; min-width:28px; text-align:right; }

/* ── E97: World Map Panel ────────────────────────────────────────────────── */
#world-map-panel {
    position:fixed; top:60px; left:50%; transform:translateX(-50%);
    width:420px; background:#080a14; border:1px solid #203050;
    z-index:3300; display:none; padding:10px;
    font-family:'Courier New',monospace; font-size:10px; color:#a0b8d0;
}
#world-map-panel.visible { display:block; }
#world-map-header { display:flex; justify-content:space-between; align-items:center;
    margin-bottom:10px; color:#c0d8f0; letter-spacing:0.1em; }
#world-map-header button { background:none; border:none; color:#405070; cursor:pointer; font-size:11px; }
#world-map-header button:hover { color:#c0d8f0; }
#world-map-canvas { position:relative; height:200px; }
.wm-zone-node {
    position:absolute; width:64px; height:64px; border-radius:4px;
    border:1px solid #203050; cursor:pointer; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    transition:border-color 0.2s; font-size:9px; text-align:center;
}
.wm-zone-node:hover { border-color:#6090c0; }
.wm-zone-node.faction-lum { border-color:#305080; background:#0a1020; }
.wm-zone-node.faction-ent { border-color:#502010; background:#120a08; }
.wm-zone-node.faction-neu { border-color:#303030; background:#0d0d0d; }
.wm-zone-node.owned-lum { box-shadow:0 0 6px rgba(60,120,200,0.4); }
.wm-zone-node.owned-ent { box-shadow:0 0 6px rgba(180,60,30,0.4); }
.wm-zone-name { color:#a0b8d0; font-size:8px; line-height:1.1; padding:0 4px; }
.wm-zone-owner { color:#6090c0; font-size:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60px; }
.wm-zone-count { color:#506070; font-size:7px; }
.wm-poi-row { font-size:7px; color:#405060; }
#world-map-tooltip {
    position:absolute; bottom:0; left:0; right:0; background:#0c1020;
    border-top:1px solid #203050; padding:6px 8px; display:none;
}
#world-map-tooltip.visible { display:block; }
#wmt-name { color:#c0d8f0; font-size:10px; margin-bottom:2px; }
#wmt-guild { color:#4080c0; font-size:9px; }
#wmt-players, #wmt-weather { color:#506070; font-size:8px; display:inline; margin-right:8px; }
#wmt-pois { color:#405060; font-size:8px; margin:2px 0; }
#wmt-travel { float:right; background:none; border:1px solid #304060;
    color:#6090c0; padding:3px 8px; cursor:pointer; font-family:'Courier New',monospace; font-size:9px; }
#wmt-travel:hover { border-color:#6090c0; color:#a0c0e0; }

/* ── E98: Season Pass Panel ──────────────────────────────────────────────── */
#season-pass-panel {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
    width:500px; background:#0a0812; border:1px solid #4a2070;
    z-index:3400; display:none; padding:10px;
    font-family:'Courier New',monospace; font-size:10px; color:#c0a0e0;
}
#season-pass-panel.visible { display:block; }
#season-pass-header { display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px; color:#d0b0f0; letter-spacing:0.12em; }
#season-pass-header button { background:none; border:none; color:#5a3080; cursor:pointer; font-size:11px; }
#season-pass-header button:hover { color:#d0b0f0; }
#season-pass-info { color:#7a5090; font-size:9px; margin-bottom:8px; }
#season-pass-track { display:flex; flex-wrap:wrap; gap:4px; }
.sp-node {
    width:28px; height:28px; border-radius:3px; border:1px solid #2a1040;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:8px; color:#4a3060; cursor:default; position:relative;
}
.sp-node.reached { border-color:#6a40a0; color:#a080c0; background:#12091e; }
.sp-node.current { border-color:#c090e0; color:#d0b0f0; background:#1a0f2a; box-shadow:0 0 4px rgba(180,120,240,0.4); }
.sp-node.reward { border-color:#9060c0; }
.sp-node.reward.reached { border-color:#d090f0; }
.sp-node-lv { font-size:7px; line-height:1; }
.sp-node-icon { font-size:9px; line-height:1; }
.sp-node.claimed .sp-node-icon::after { content:'✓'; font-size:6px; color:#a0f0a0; position:absolute; bottom:1px; right:1px; }

/* ── E99: PvP Duel System ────────────────────────────────────────────────── */
#duel-challenge-toast {
    position:fixed; top:100px; left:50%; transform:translateX(-50%);
    background:#180a0a; border:1px solid #803030; padding:12px 18px;
    z-index:5000; font-family:'Courier New',monospace; font-size:11px; color:#e08080;
    min-width:280px; text-align:center;
}
#dct-buttons { display:flex; gap:10px; justify-content:center; margin-top:8px; }
#dct-buttons button { background:none; border:1px solid #803030; color:#c06060;
    padding:4px 14px; cursor:pointer; font-family:'Courier New',monospace; font-size:10px; }
#dct-buttons button:first-child { border-color:#308030; color:#60c060; }
#dct-buttons button:hover { opacity:0.8; }
#duel-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:320px; background:#0e080a; border:1px solid #602020;
    z-index:4000; padding:12px; font-family:'Courier New',monospace; font-size:10px; color:#d0a0a0;
}
#duel-panel-header { display:flex; justify-content:space-between; align-items:center;
    color:#e08080; letter-spacing:0.1em; margin-bottom:8px; }
#duel-panel-header button { background:none; border:none; color:#602020; cursor:pointer; }
#duel-vs-row { text-align:center; color:#a07070; margin-bottom:8px; letter-spacing:0.08em; }
.duel-hp-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.duel-hp-label { min-width:60px; font-size:9px; color:#906060; }
.duel-hp-bar-wrap { flex:1; height:8px; background:#1a0a0a; border-radius:2px; }
.duel-hp-bar { height:8px; border-radius:2px; transition:width 0.3s; }
.duel-hp-bar.self { background:#4080c0; }
.duel-hp-bar.opp  { background:#c04040; }
#duel-log { max-height:70px; overflow-y:auto; font-size:8px; color:#705050;
    border-top:1px solid #2a1010; padding-top:4px; margin:6px 0; }
#duel-weave-row { display:flex; gap:4px; align-items:center; margin-top:6px; }
#duel-syll-input { flex:1; background:#0a0506; border:1px solid #401010;
    color:#c08080; padding:3px 5px; font-family:'Courier New',monospace; font-size:9px; }
#duel-weave-row button { background:none; border:1px solid #602020; color:#c06060;
    padding:3px 8px; cursor:pointer; font-size:9px; font-family:'Courier New',monospace; }
#duel-weave-row button:hover { border-color:#e08080; color:#e08080; }
#duel-wager-info { font-size:8px; color:#604040; margin-top:4px; text-align:center; }

/* ── E100: Milestone Celebration Overlay ─────────────────────────────────── */
#e100-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:20000;
    display:flex; align-items:center; justify-content:center;
}
#e100-inner {
    max-width:580px; width:92vw; background:#07050f;
    border:1px solid #6030a0; padding:36px 44px;
    box-shadow:0 0 80px rgba(160,100,255,0.2), 0 0 30px rgba(200,160,255,0.1);
    text-align:center; font-family:'Courier New',monospace;
}
#e100-number {
    font-size:72px; font-weight:bold; letter-spacing:0.06em;
    background:linear-gradient(135deg,#d0a040,#c080f0,#d0a040);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; margin-bottom:4px;
    animation:e100glow 3s ease-in-out infinite alternate;
}
@keyframes e100glow {
    from { filter:drop-shadow(0 0 8px rgba(200,160,80,0.6)); }
    to   { filter:drop-shadow(0 0 20px rgba(180,120,255,0.8)); }
}
#e100-title-line {
    font-size:16px; color:#c0a060; letter-spacing:0.22em; margin-bottom:4px;
}
#e100-subtitle {
    font-size:10px; color:#5a4070; letter-spacing:0.18em; margin-bottom:20px;
}
#e100-award {
    font-size:11px; color:#c090e0; letter-spacing:0.1em;
    border:1px solid #4a2070; padding:8px 16px; display:inline-block;
    margin-bottom:18px; background:#0e0818;
}
#e100-title-name { color:#e0b0f0; font-weight:bold; }
#e100-systems-header {
    font-size:9px; color:#4a3060; letter-spacing:0.18em;
    text-transform:uppercase; margin-bottom:8px;
}
#e100-systems-list {
    display:grid; grid-template-columns:1fr 1fr; gap:4px;
    margin-bottom:20px; text-align:left;
}
.e100-system-row {
    font-size:8px; color:#7a6090; padding:3px 6px;
    border-left:2px solid #2a1a40;
}
.e100-system-row .e100-ms { color:#a080c0; margin-right:4px; }
.e100-system-row .e100-name { color:#9070a0; }
#e100-close {
    background:none; border:1px solid #6030a0; color:#c090e0;
    padding:10px 32px; font-family:'Courier New',monospace;
    font-size:11px; letter-spacing:0.14em; cursor:pointer;
    transition:all 0.2s;
}
#e100-close:hover { border-color:#d0a0f0; color:#e0c0f0; box-shadow:0 0 12px rgba(160,80,240,0.3); }

/* E101: Walker Lore Library */
#lore-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:480px; max-height:560px; background:#1a1408;
    border:1px solid #6a4a20; color:#d4b870; font-family:'Courier New',monospace;
    display:flex; flex-direction:column; z-index:200; box-shadow:0 0 30px rgba(160,100,30,0.3);
}
#lore-panel-header {
    display:flex; justify-content:space-between; align-items:center;
    background:#120e04; padding:8px 12px;
    border-bottom:1px solid #5a3a10; font-size:13px; letter-spacing:0.1em;
}
#lore-panel-header button {
    background:none; border:none; color:#8a6030; cursor:pointer; font-size:14px;
}
#lore-tabs {
    display:flex; border-bottom:1px solid #4a3010;
}
.lore-tab {
    flex:1; padding:7px 4px; background:none; border:none; border-right:1px solid #3a2010;
    color:#8a6830; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; transition:all 0.15s;
}
.lore-tab:last-child { border-right:none; }
.lore-tab:hover { background:#251a08; color:#c4983a; }
.lore-tab.active { background:#201608; color:#e8c060; border-bottom:2px solid #c4983a; }
#lore-body {
    flex:1; overflow:hidden; display:flex; flex-direction:column;
    min-height:0;
}
#lore-list {
    flex:1; overflow-y:auto; padding:8px;
}
.lore-entry-row {
    padding:7px 10px; border-bottom:1px solid #2a1e08; cursor:pointer;
    transition:background 0.12s;
}
.lore-entry-row:hover { background:#251808; }
.lore-entry-row .lor-title { font-size:11px; color:#d4a840; }
.lore-entry-row .lor-author { font-size:9px; color:#7a5820; margin-top:2px; letter-spacing:0.06em; }
#lore-reading-pane {
    flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;
    background:#130f04;
}
#lore-back {
    background:none; border:1px solid #4a3010; color:#8a6030;
    padding:3px 10px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:9px; letter-spacing:0.08em; align-self:flex-start;
}
#lore-back:hover { border-color:#c4983a; color:#e8c060; }
#lore-entry-title {
    font-size:14px; color:#e8c060; letter-spacing:0.1em;
    border-bottom:1px solid #4a3010; padding-bottom:6px;
}
#lore-entry-author { font-size:9px; color:#7a5820; letter-spacing:0.1em; }
#lore-entry-content {
    font-size:11px; color:#c4a050; line-height:1.7; white-space:pre-wrap;
}
#lore-write-section {
    border-top:1px solid #4a3010; padding:10px; background:#100d03;
    display:flex; flex-direction:column; gap:6px;
}
#lore-write-header { font-size:10px; color:#8a6030; letter-spacing:0.1em; }
#lore-write-title {
    background:#1a1408; border:1px solid #4a3010; color:#d4b870;
    padding:5px 8px; font-family:'Courier New',monospace; font-size:11px; width:100%; box-sizing:border-box;
}
#lore-write-content {
    background:#1a1408; border:1px solid #4a3010; color:#c4a050;
    padding:5px 8px; font-family:'Courier New',monospace; font-size:10px;
    width:100%; box-sizing:border-box; resize:vertical;
}
#lore-write-submit {
    background:none; border:1px solid #6a4a20; color:#c4983a;
    padding:6px 16px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.1em; align-self:flex-end; transition:all 0.15s;
}
#lore-write-submit:hover { border-color:#e8c060; color:#e8c060; box-shadow:0 0 8px rgba(200,160,50,0.2); }

/* E102: Walker Notification Center */
#notif-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:360px; max-height:480px; background:#0c0c10;
    border:1px solid #303040; color:#b0b0c0; font-family:'Courier New',monospace;
    display:flex; flex-direction:column; z-index:210; box-shadow:0 0 20px rgba(50,50,80,0.5);
}
#notif-panel-header {
    display:flex; justify-content:space-between; align-items:center;
    background:#080810; padding:8px 12px;
    border-bottom:1px solid #202030; font-size:12px; letter-spacing:0.08em;
}
#notif-panel-header button {
    background:none; border:1px solid #303040; color:#606080; cursor:pointer;
    font-family:'Courier New',monospace;
}
#notif-panel-header button:hover { border-color:#6060a0; color:#9090c0; }
#notif-filter-tabs {
    display:flex; border-bottom:1px solid #202030; flex-wrap:wrap;
}
.notif-ftab {
    flex:1; min-width:50px; padding:5px 2px; background:none; border:none;
    border-right:1px solid #1a1a28; color:#505068; cursor:pointer;
    font-family:'Courier New',monospace; font-size:8px; letter-spacing:0.06em;
    transition:all 0.12s;
}
.notif-ftab:last-child { border-right:none; }
.notif-ftab:hover { background:#121220; color:#8080a0; }
.notif-ftab.active { background:#10101e; color:#a0a0d0; border-bottom:2px solid #5050a0; }
#notif-list {
    flex:1; overflow-y:auto; padding:6px;
}
.notif-row {
    display:flex; gap:8px; align-items:flex-start;
    padding:6px 8px; border-bottom:1px solid #141420; font-size:10px;
}
.notif-row .ni { font-size:13px; line-height:1.2; }
.notif-row .nm { flex:1; }
.notif-row .nm-msg { color:#a0a0c0; }
.notif-row .nm-time { font-size:8px; color:#404058; margin-top:2px; }
.notif-type-quest .ni { color:#40a040; }
.notif-type-achievement .ni { color:#c0a030; }
.notif-type-duel .ni { color:#c04040; }
.notif-type-season .ni { color:#a060d0; }
.notif-type-lore .ni { color:#a08050; }
.notif-type-system .ni { color:#606080; }

/* Toast queue */
#notif-toast-container {
    position:fixed; bottom:60px; right:16px;
    display:flex; flex-direction:column; gap:6px; z-index:300; pointer-events:none;
}
.notif-toast {
    background:#0e0e18; border:1px solid #303048; color:#a0a0c0;
    padding:8px 12px; font-family:'Courier New',monospace; font-size:10px;
    max-width:260px; display:flex; gap:8px; align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.5); pointer-events:all;
    animation:notif-slide-in 0.2s ease-out;
    cursor:pointer;
}
@keyframes notif-slide-in {
    from { opacity:0; transform:translateX(20px); }
    to   { opacity:1; transform:translateX(0); }
}
.notif-toast.fade-out { animation:notif-fade-out 0.3s ease forwards; }
@keyframes notif-fade-out {
    to { opacity:0; transform:translateX(20px); }
}
.notif-toast .nt-icon { font-size:14px; }
.notif-toast .nt-msg { flex:1; line-height:1.4; }

/* E104: Walker Trade Post */
#market-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:460px; max-height:540px; background:#080e08;
    border:1px solid #204020; color:#80c080; font-family:'Courier New',monospace;
    display:flex; flex-direction:column; z-index:200; box-shadow:0 0 24px rgba(30,80,30,0.4);
}
#market-panel-header {
    display:flex; justify-content:space-between; align-items:center;
    background:#050a05; padding:8px 12px;
    border-bottom:1px solid #183018; font-size:13px; letter-spacing:0.08em;
}
#market-panel-header button {
    background:none; border:none; color:#407040; cursor:pointer; font-size:14px;
}
#market-tabs { display:flex; border-bottom:1px solid #183018; }
.market-tab {
    flex:1; padding:7px 4px; background:none; border:none; border-right:1px solid #122012;
    color:#406040; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; transition:all 0.12s;
}
.market-tab:last-child { border-right:none; }
.market-tab:hover { background:#0c140c; color:#70b070; }
.market-tab.active { background:#0a120a; color:#90d090; border-bottom:2px solid #408040; }
.market-pane { flex:1; overflow-y:auto; padding:8px; }
.market-row {
    display:flex; align-items:center; gap:8px; padding:7px 8px;
    border-bottom:1px solid #101810; font-size:10px;
}
.market-row .mr-name { flex:1; color:#80c080; }
.market-row .mr-seller { color:#406040; font-size:9px; }
.market-row .mr-price { color:#c0d050; font-weight:bold; min-width:50px; text-align:right; }
.market-row .mr-btn {
    background:none; border:1px solid #204020; color:#60a060;
    padding:3px 8px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:9px; transition:all 0.12s;
}
.market-row .mr-btn:hover { border-color:#80d080; color:#90e090; }
.market-row .mr-btn.cancel { border-color:#402020; color:#a06060; }
.market-row .mr-btn.cancel:hover { border-color:#d08080; color:#e09090; }
#market-sell-header { font-size:10px; color:#406040; letter-spacing:0.1em; margin-bottom:8px; }
#market-entry-id, #market-price {
    background:#080e08; border:1px solid #204020; color:#80c080;
    padding:5px 8px; font-family:'Courier New',monospace; font-size:11px;
    margin-bottom:6px;
}
#market-sell-btn {
    background:none; border:1px solid #408040; color:#80d080;
    padding:6px 16px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.1em; transition:all 0.15s;
}
#market-sell-btn:hover { border-color:#90e090; color:#a0f0a0; box-shadow:0 0 8px rgba(60,160,60,0.2); }

/* E105: Weather System */
#hud-weather { transition: color 0.4s; }
#hud-weather-icon { font-size: 12px; }
.weather-fog  #hud-weather { color: #888899; }
.weather-rain #hud-weather { color: #6090c0; }
.weather-storm #hud-weather { color: #8060b0; }
.weather-aurora #hud-weather { color: #60c0d0; }
.weather-clear #hud-weather { color: #c0a030; }

/* E106: Walker Mentor System */
#mentor-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:380px; max-height:480px; background:#080e10;
    border:1px solid #205060; color:#80c0c8; font-family:'Courier New',monospace;
    display:flex; flex-direction:column; z-index:200; box-shadow:0 0 24px rgba(30,80,100,0.4);
}
#mentor-panel-header {
    display:flex; justify-content:space-between; align-items:center;
    background:#050a0c; padding:8px 12px;
    border-bottom:1px solid #183040; font-size:13px; letter-spacing:0.08em;
}
#mentor-panel-header button { background:none; border:none; color:#407080; cursor:pointer; font-size:14px; }
#mentor-tabs { display:flex; border-bottom:1px solid #183040; }
.mentor-tab {
    flex:1; padding:7px 4px; background:none; border:none; border-right:1px solid #122030;
    color:#406070; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; transition:all 0.12s;
}
.mentor-tab:last-child { border-right:none; }
.mentor-tab:hover { background:#0c1418; color:#70b0c0; }
.mentor-tab.active { background:#0a1214; color:#90d0d8; border-bottom:2px solid #408090; }
.mentor-pane { flex:1; overflow-y:auto; padding:10px; }
#mentor-status-content { font-size:11px; color:#60a0b0; line-height:1.7; }
.mentor-btn {
    background:none; border:1px solid #205060; color:#60a0b0;
    padding:6px 12px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; transition:all 0.12s; width:100%;
}
.mentor-btn:hover { border-color:#80d0e0; color:#90e0f0; }
.mentor-btn.danger { border-color:#602020; color:#c06060; }
.mentor-btn.danger:hover { border-color:#e08080; color:#f09090; }
#mentor-request-name {
    background:#080e10; border:1px solid #205060; color:#80c0c8;
    padding:5px 8px; font-family:'Courier New',monospace; font-size:10px;
}
.mentor-lb-row {
    display:flex; gap:10px; align-items:center; padding:5px 8px;
    border-bottom:1px solid #101820; font-size:10px;
}
.mentor-lb-rank { color:#405060; min-width:24px; }
.mentor-lb-name { flex:1; color:#80c0c8; }
.mentor-lb-score { color:#40a0b0; }

/* ── E107: Walker Event System ─────────────────────────────────────────── */
#event-banner {
    position:fixed; top:0; left:0; right:0; z-index:9999;
    background:linear-gradient(135deg,#1a1000,#2a1800);
    border-bottom:2px solid #c0a000;
    animation:event-pulse 3s ease-in-out infinite;
}
@keyframes event-pulse {
    0%,100% { border-color:#c0a000; }
    50%      { border-color:#ffe060; box-shadow:0 0 18px rgba(255,224,60,0.4); }
}
#event-banner-inner {
    display:flex; align-items:center; gap:10px; padding:7px 16px;
    font-family:'Courier New',monospace; font-size:11px; color:#e0c040;
    letter-spacing:0.06em;
}
#event-banner-icon { font-size:16px; }
#event-banner-name { font-weight:bold; color:#ffe060; }
#event-banner-desc { flex:1; color:#b09030; font-size:10px; }
#event-banner-countdown { color:#80e080; min-width:80px; text-align:right; }
#event-banner-close {
    background:none; border:none; color:#806020; cursor:pointer;
    font-size:14px; padding:0 4px;
}
#event-banner-close:hover { color:#e0c040; }
/* Type theming */
body.event-faction_war   #event-banner { background:linear-gradient(135deg,#180a0a,#280a0a); border-color:#c04040; }
body.event-faction_war   #event-banner { animation:war-pulse 2s ease-in-out infinite; }
@keyframes war-pulse {
    0%,100% { border-color:#c04040; }
    50%      { border-color:#ff8060; box-shadow:0 0 18px rgba(255,100,80,0.4); }
}
body.event-haunted_zone  #event-banner { background:linear-gradient(135deg,#050a08,#060f08); border-color:#40c060; }
body.event-haunted_zone  #event-banner { animation:haunt-pulse 4s ease-in-out infinite; }
@keyframes haunt-pulse {
    0%,100% { border-color:#40c060; }
    50%      { border-color:#60ff90; box-shadow:0 0 18px rgba(80,255,130,0.3); }
}

/* Event Panel */
#event-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#0d1218; border:1px solid #504010; color:#c0a030;
    font-family:'Courier New',monospace; font-size:11px; z-index:9000;
    min-width:340px; max-width:440px; box-shadow:0 0 30px rgba(200,160,0,0.2);
}
#event-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid #302800;
    background:#0a0e12; font-size:13px; color:#e0c040; letter-spacing:0.1em;
}
#event-panel-header button {
    background:none; border:none; color:#504010; cursor:pointer; font-size:14px;
}
#event-panel-header button:hover { color:#e0c040; }
#event-panel-body { padding:12px 14px; }
#event-status-display { color:#c0a030; line-height:1.8; }
.event-section-title { color:#806020; font-size:10px; letter-spacing:0.1em; margin:10px 0 6px; text-transform:uppercase; }
#event-admin-section { margin-top:12px; border-top:1px solid #302800; padding-top:10px; }
#event-admin-key, #event-admin-minutes {
    background:#080e10; border:1px solid #403010; color:#c0a030;
    padding:5px 8px; font-family:'Courier New',monospace; font-size:10px;
    margin-bottom:6px; display:block; width:100%;
}
.event-btn {
    background:none; border:1px solid #504010; color:#c0a030;
    padding:6px 12px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; margin-bottom:4px; width:100%;
    transition:all 0.12s;
}
.event-btn:hover { border-color:#e0c040; color:#ffe060; }
.event-btn-danger { border-color:#602020; color:#c06060; }
.event-btn-danger:hover { border-color:#e08080; color:#f09090; }

/* ── E108: Walker Guild System ─────────────────────────────────────────── */
#guild-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#0d0812; border:1px solid #4a1880; color:#b080e0;
    font-family:'Courier New',monospace; font-size:11px; z-index:8800;
    min-width:340px; max-width:440px; box-shadow:0 0 30px rgba(130,60,200,0.25);
}
#guild-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid #2a0e50;
    background:#090610; font-size:13px; color:#c090f0; letter-spacing:0.1em;
}
#guild-panel-header button {
    background:none; border:none; color:#4a1880; cursor:pointer; font-size:14px;
}
#guild-panel-header button:hover { color:#c090f0; }
#guild-panel-tabs {
    display:flex; border-bottom:1px solid #2a0e50;
}
.guild-tab {
    flex:1; background:none; border:none; border-right:1px solid #2a0e50;
    color:#6040a0; padding:7px 4px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:9px; letter-spacing:0.08em; transition:all 0.12s; text-transform:uppercase;
}
.guild-tab:last-child { border-right:none; }
.guild-tab:hover, .guild-tab.active { background:#150825; color:#c090f0; }
#guild-panel-body { padding:12px 14px; max-height:320px; overflow-y:auto; }
#guild-info-display { color:#b080e0; line-height:1.8; }
.guild-section-title { color:#6040a0; font-size:9px; letter-spacing:0.1em; margin:6px 0 4px; text-transform:uppercase; }
#guild-create-section input, #guild-join-name, #guild-deposit-amount, #guild-withdraw-amount, #guild-xp-amount {
    background:#060410; border:1px solid #2a0e50; color:#b080e0;
    padding:5px 8px; font-family:'Courier New',monospace; font-size:10px;
    margin-bottom:5px; display:block; width:100%;
}
.guild-btn {
    background:none; border:1px solid #4a1880; color:#b080e0;
    padding:6px 12px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; margin-bottom:4px; width:100%;
    transition:all 0.12s;
}
.guild-btn:hover { border-color:#c090f0; color:#d0a0ff; }
.guild-btn-danger { border-color:#602040; color:#c06080; }
.guild-btn-danger:hover { border-color:#e080a0; color:#f090b0; }
.guild-member-row {
    display:flex; gap:8px; align-items:center; padding:5px 8px;
    border-bottom:1px solid #130820; font-size:10px;
}
.gm-role { min-width:50px; color:#6040a0; font-size:9px; text-transform:uppercase; }
.gm-name { flex:1; color:#b080e0; }
.guild-lb-row {
    display:flex; gap:10px; align-items:center; padding:5px 8px;
    border-bottom:1px solid #130820; font-size:10px;
}
.glb-rank { color:#4a1880; min-width:24px; }
.glb-tag { color:#8040c0; min-width:40px; }
.glb-name { flex:1; color:#b080e0; }
.glb-score { color:#a060d0; }
#guild-bank-display { color:#c090f0; font-size:12px; padding:6px 0; }

/* ── E109: Achievement Gallery ─────────────────────────────────────────── */
#ach-gallery-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#0d0d0a; border:1px solid #504010; color:#c0a030;
    font-family:'Courier New',monospace; font-size:11px; z-index:8700;
    width:540px; max-width:96vw; box-shadow:0 0 30px rgba(200,160,0,0.2);
}
#ach-gallery-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid #302800;
    background:#090908; font-size:13px; color:#e0c040; letter-spacing:0.1em;
}
#ach-gallery-stats { font-size:10px; color:#806020; }
#ach-gallery-header button {
    background:none; border:none; color:#504010; cursor:pointer; font-size:14px;
}
#ach-gallery-header button:hover { color:#e0c040; }
#ach-gallery-filters {
    display:flex; flex-wrap:wrap; gap:3px; padding:7px 10px;
    border-bottom:1px solid #201800; background:#0a0900;
}
.ach-ftab {
    background:none; border:1px solid #302000; color:#605010;
    padding:3px 8px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:9px; letter-spacing:0.06em; transition:all 0.1s;
}
.ach-ftab:hover, .ach-ftab.active { border-color:#c0a030; color:#e0c040; }
.ach-ftab.ach-rare     { border-color:#2050a0; color:#4080d0; }
.ach-ftab.ach-rare:hover, .ach-ftab.ach-rare.active { border-color:#80b0ff; color:#a0d0ff; }
.ach-ftab.ach-epic     { border-color:#502080; color:#9040d0; }
.ach-ftab.ach-epic:hover, .ach-ftab.ach-epic.active { border-color:#c080ff; color:#d0a0ff; }
.ach-ftab.ach-legendary { border-color:#805000; color:#c08000; }
.ach-ftab.ach-legendary:hover, .ach-ftab.ach-legendary.active { border-color:#ffd040; color:#ffe070; }
#ach-search {
    background:#060604; border:1px solid #302000; color:#c0a030;
    padding:3px 8px; font-family:'Courier New',monospace; font-size:9px;
    flex:1; min-width:80px;
}
#ach-gallery-progress {
    height:4px; background:#100e00;
}
#ach-gallery-bar-fill {
    height:100%; background:linear-gradient(90deg,#605010,#e0c040);
    width:0%; transition:width 0.4s;
}
#ach-gallery-grid {
    display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
    padding:10px 12px; max-height:340px; overflow-y:auto;
}
.ach-cell {
    position:relative; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start;
    background:#0a0900; border:1px solid #302000;
    padding:8px 4px 6px; cursor:default; transition:all 0.12s;
    min-height:70px;
}
.ach-cell.unlocked { border-color:#504010; }
.ach-cell.locked   { opacity:0.45; filter:grayscale(80%); }
.ach-cell.rarity-rare      { border-color:#2050a0; }
.ach-cell.rarity-epic      { border-color:#502080; }
.ach-cell.rarity-legendary { border-color:#c09000; box-shadow:0 0 8px rgba(200,160,0,0.35); }
.ach-cell:hover { transform:scale(1.04); }
.ach-cell.unlocked:hover .ach-share-btn { display:block; }
.ach-badge { font-size:22px; line-height:1; margin-bottom:4px; }
.ach-name  { font-size:8px; color:#a08020; text-align:center; line-height:1.3; word-break:break-word; }
.ach-cell.locked .ach-name { color:#303020; }
.ach-rarity-dot {
    position:absolute; top:3px; right:4px; font-size:7px; color:#504010;
}
.ach-cell.rarity-rare .ach-rarity-dot      { color:#4080d0; }
.ach-cell.rarity-epic .ach-rarity-dot      { color:#9040d0; }
.ach-cell.rarity-legendary .ach-rarity-dot { color:#e0c040; }
.ach-share-btn {
    display:none; position:absolute; bottom:3px; right:3px;
    background:#201800; border:1px solid #504010; color:#c0a030;
    font-size:8px; padding:1px 4px; cursor:pointer;
}
.ach-share-btn:hover { background:#302000; color:#ffe060; }

/* ── E110: Daily Login Rewards ─────────────────────────────────────────── */
#login-reward-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#080e0a; border:1px solid #205040; color:#60c080;
    font-family:'Courier New',monospace; font-size:11px; z-index:8600;
    min-width:380px; max-width:460px; box-shadow:0 0 30px rgba(60,200,100,0.2);
}
#login-reward-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid #103020;
    background:#050a06; font-size:13px; color:#80e0a0; letter-spacing:0.1em;
}
#login-reward-streak-label { font-size:10px; color:#306050; }
#login-reward-header button {
    background:none; border:none; color:#205040; cursor:pointer; font-size:14px;
}
#login-reward-header button:hover { color:#80e0a0; }
#login-reward-body { padding:12px 14px; }
#login-reward-today {
    text-align:center; padding:10px 0 8px;
    font-size:13px; color:#a0e0b0; letter-spacing:0.05em;
    border-bottom:1px solid #103020; margin-bottom:10px;
}
#login-reward-calendar {
    display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:10px;
}
.daily-cell {
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:6px 2px; border:1px solid #102018; min-height:62px; font-size:9px;
    transition:all 0.15s;
}
.daily-cell.claimed  { border-color:#205040; background:#050f08; opacity:0.6; }
.daily-cell.today    { border-color:#40c080; background:#081408; box-shadow:0 0 8px rgba(60,200,100,0.4); animation:daily-pulse 2s ease-in-out infinite; }
.daily-cell.locked   { border-color:#101810; opacity:0.35; }
.daily-cell.recovery { border-color:#80a000; background:#0a0f00; }
@keyframes daily-pulse {
    0%,100% { box-shadow:0 0 8px rgba(60,200,100,0.3); }
    50%      { box-shadow:0 0 16px rgba(60,200,100,0.7); }
}
.daily-cell-day  { font-size:8px; color:#305040; margin-bottom:3px; text-transform:uppercase; }
.daily-cell.today .daily-cell-day { color:#40c080; }
.daily-cell-sc   { color:#80c060; font-size:9px; font-weight:bold; }
.daily-cell-xp   { color:#6090a0; font-size:8px; }
.daily-cell-title{ font-size:7px; color:#a0c060; margin-top:2px; text-align:center; }
.daily-cell.claimed .daily-cell-sc::before { content:"✓ "; color:#306050; }
#login-recovery-section { text-align:center; margin-bottom:8px; }
.daily-btn {
    background:none; border:1px solid #205040; color:#60c080;
    padding:6px 16px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; transition:all 0.12s;
}
.daily-btn:hover { border-color:#80e0a0; color:#a0f0c0; }
.daily-btn-recovery { border-color:#607010; color:#a0c020; }
.daily-btn-recovery:hover { border-color:#c0e040; color:#d0f060; }
#login-reward-next { font-size:10px; color:#305040; text-align:center; padding-top:6px; border-top:1px solid #103020; }

/* ── E111: Player Profile Panel ─────────────────────────────────────────── */
#profile-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#0d1117; border:1px solid #1e3050; color:#90b0d0;
    font-family:'Courier New',monospace; font-size:11px;
    padding:0; z-index:320; min-width:280px; max-width:340px;
    box-shadow:0 0 32px rgba(30,80,160,0.4);
}
#profile-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#111c2a; border-bottom:1px solid #1e3050;
    font-size:12px; color:#6090d0; letter-spacing:0.1em;
}
#profile-header button {
    background:none; border:none; color:#305060; cursor:pointer; font-size:13px;
}
#profile-header button:hover { color:#6090d0; }
#profile-body { padding:12px; }
.profile-name-row {
    font-size:16px; color:#a0c8f0; letter-spacing:0.12em;
    text-align:center; margin-bottom:6px; font-weight:bold;
}
.profile-stat-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:3px 0; border-bottom:1px solid #111c2a;
    color:#6080a0; font-size:10px;
}
.profile-label { color:#304050; text-transform:uppercase; letter-spacing:0.08em; font-size:9px; }
#profile-faction-bar-wrap { margin:8px 0; }
#profile-faction-bar {
    height:6px; background:#111c2a; border:1px solid #1e3050;
    border-radius:3px; overflow:hidden; margin:4px 0;
}
#profile-faction-fill { height:100%; transition:width 0.4s; }
.faction-fill-luminaris { background:linear-gradient(90deg,#806000,#d0a000); }
.faction-fill-entropia  { background:linear-gradient(90deg,#600000,#c00030); }
.faction-fill-shadow    { background:linear-gradient(90deg,#003040,#006070); }
#profile-faction-labels { display:flex; justify-content:space-between; font-size:8px; color:#304050; }
#profile-ach-section { margin:8px 0; }
#profile-ach-strip { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.profile-ach-badge {
    background:#111c2a; border:1px solid #1e3050; padding:4px 7px;
    border-radius:3px; font-size:10px; cursor:default;
    color:#6090d0; letter-spacing:0.06em;
}
#profile-share-row { text-align:center; margin-top:8px; padding-top:8px; border-top:1px solid #1e3050; }
#profile-share-btn {
    background:none; border:1px solid #1e3050; color:#6090d0;
    padding:5px 16px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; transition:all 0.12s;
}
#profile-share-btn:hover { border-color:#4080c0; color:#90c0f0; }

/* ── E112: Leaderboard Panel ─────────────────────────────────────────────── */
#leaderboard-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#110f00; border:1px solid #3a2800; color:#c09030;
    font-family:'Courier New',monospace; font-size:11px;
    padding:0; z-index:320; min-width:300px; max-width:360px;
    box-shadow:0 0 32px rgba(180,120,0,0.3);
}
#lb-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#1a1400; border-bottom:1px solid #3a2800;
    font-size:12px; color:#c08020; letter-spacing:0.1em;
}
#lb-header button { background:none; border:none; color:#5a3800; cursor:pointer; font-size:13px; }
#lb-header button:hover { color:#c08020; }
#lb-tabs {
    display:flex; background:#150f00; border-bottom:1px solid #3a2800;
}
.lb-tab {
    flex:1; background:none; border:none; border-right:1px solid #3a2800;
    color:#604010; cursor:pointer; padding:5px 0; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.06em; transition:all 0.12s;
}
.lb-tab:last-child { border-right:none; }
.lb-tab:hover { background:#1f1600; color:#c08020; }
.lb-tab.active { background:#201800; color:#e0b040; border-bottom:2px solid #c08020; }
#lb-body { padding:8px 12px; }
#lb-table { width:100%; border-collapse:collapse; }
#lb-table th {
    color:#5a3800; font-size:9px; text-transform:uppercase;
    letter-spacing:0.08em; padding:4px 6px; text-align:left;
    border-bottom:1px solid #2a1800;
}
#lb-table td { padding:4px 6px; color:#906020; font-size:10px; }
.lb-row-own td { color:#e0c060 !important; background:#201800; }
.lb-rank-badge {
    display:inline-block; min-width:18px; text-align:center;
    background:#2a1800; border-radius:2px; font-size:9px; color:#c08020;
}
.lb-rank-1 { color:#ffd700; }
.lb-rank-2 { color:#c0c0c0; }
.lb-rank-3 { color:#cd7f32; }
#lb-own-row {
    margin-top:6px; padding-top:6px; border-top:1px solid #2a1800;
    font-size:10px; color:#806010; text-align:center;
}

/* ── E113: Seasonal Events Panel ─────────────────────────────────────────── */
#season-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#080d0c; border:1px solid #104030; color:#60c0a0;
    font-family:'Courier New',monospace; font-size:11px;
    padding:0; z-index:320; min-width:280px; max-width:340px;
    box-shadow:0 0 32px rgba(0,160,120,0.3);
}
#season-header {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; background:#0d1a16; border-bottom:1px solid #104030;
    font-size:12px; letter-spacing:0.1em; color:#40c0a0;
}
#season-header button { background:none; border:none; color:#205040; cursor:pointer; font-size:13px; margin-left:auto; }
#season-header button:hover { color:#40c0a0; }
#season-body { padding:12px; }
#season-banner {
    text-align:center; font-size:13px; letter-spacing:0.12em;
    padding:10px; margin-bottom:10px; border-radius:3px;
    border:1px solid #104030;
}
/* Faction themes */
#season-panel.shadow  #season-banner { background:#061210; border-color:#206050; color:#40e0b0; }
#season-panel.luminaris #season-banner { background:#130f00; border-color:#504010; color:#e0c040; }
#season-panel.luminaris { border-color:#504010; box-shadow:0 0 32px rgba(180,140,0,0.3); }
#season-panel.luminaris #season-header { background:#1a1500; border-color:#504010; color:#d0a030; }
#season-panel.entropia  #season-banner { background:#130006; border-color:#500020; color:#e04060; }
#season-panel.entropia  { border-color:#500020; box-shadow:0 0 32px rgba(160,0,40,0.3); }
#season-panel.entropia  #season-header { background:#1a000a; border-color:#500020; color:#c02040; }
.season-reward-row {
    display:flex; justify-content:space-between;
    padding:4px 0; border-bottom:1px solid #0d1a16;
    font-size:10px;
}
.season-label { color:#205040; text-transform:uppercase; letter-spacing:0.08em; font-size:9px; }
#season-claim-section { text-align:center; margin-top:10px; padding-top:8px; border-top:1px solid #104030; }
#season-claim-btn {
    background:none; border:1px solid #206050; color:#40c0a0;
    padding:6px 18px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.08em; transition:all 0.12s;
}
#season-claim-btn:hover { border-color:#40e0b0; color:#80f0d0; }
#season-claim-btn:disabled { opacity:0.4; cursor:default; }
#season-claim-msg { margin-top:6px; font-size:10px; color:#40a080; }

/* ── E114: Faction War Panel ──────────────────────────────────────────────── */
#faction-war-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#0e0000; border:1px solid #401010; color:#c06060;
    font-family:'Courier New',monospace; font-size:11px;
    padding:0; z-index:320; min-width:300px; max-width:380px;
    box-shadow:0 0 32px rgba(180,0,0,0.3);
}
#fw-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#1a0000; border-bottom:1px solid #401010;
    font-size:12px; color:#e04040; letter-spacing:0.1em;
}
#fw-header button { background:none; border:none; color:#601010; cursor:pointer; font-size:13px; }
#fw-header button:hover { color:#e04040; }
#fw-body { padding:12px; }
.fw-faction-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fw-faction-label { font-size:9px; text-transform:uppercase; letter-spacing:0.08em; min-width:60px; }
.fw-faction-label.luminaris { color:#d0a000; }
.fw-faction-label.entropia  { color:#c02040; }
.fw-bar-wrap { flex:1; height:8px; background:#1a0000; border:1px solid #401010; border-radius:2px; overflow:hidden; }
.fw-bar { height:100%; transition:width 0.5s; }
.fw-bar-lum { background:linear-gradient(90deg,#806000,#e0b000); }
.fw-bar-ent { background:linear-gradient(90deg,#600010,#c00030); }
.fw-score { font-size:10px; min-width:50px; text-align:right; }
.fw-section-label { font-size:9px; color:#401010; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; }
#fw-territory-rows { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.fw-territory-row {
    display:flex; justify-content:space-between; padding:3px 6px;
    background:#130000; border:1px solid #2a0808; font-size:10px;
}
.fw-ctrl-lum { color:#d0a000; }
.fw-ctrl-ent { color:#c02040; }
.fw-ctrl-con { color:#506060; }
#fw-contribute-section input { background:#110000; border:1px solid #401010; color:#c06060; font-family:monospace; padding:4px; font-size:10px; }
#fw-contribute-section button {
    background:none; border:1px solid #601010; color:#c04040;
    padding:4px 12px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.06em;
}
#fw-contribute-section button:hover { border-color:#e04040; color:#f06060; }
#fw-top-rows { display:flex; gap:12px; }
.fw-top-col { flex:1; }
.fw-top-col-title { font-size:9px; color:#401010; text-transform:uppercase; margin-bottom:3px; }
.fw-top-row { font-size:10px; padding:2px 0; color:#805030; display:flex; justify-content:space-between; }

/* ── E115: Companion Panel ────────────────────────────────────────────────── */
#companion2-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#0a0d1a; border:1px solid #2a1a50; color:#8070c0;
    font-family:'Courier New',monospace; font-size:11px;
    padding:0; z-index:320; min-width:280px; max-width:340px;
    box-shadow:0 0 32px rgba(80,40,160,0.35);
}
#companion2-header {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; background:#110d22; border-bottom:1px solid #2a1a50;
    font-size:12px; letter-spacing:0.1em; color:#9070d0;
}
#companion2-header button { background:none; border:none; color:#301a50; cursor:pointer; font-size:13px; margin-left:auto; }
#companion2-header button:hover { color:#9070d0; }
#companion2-body { padding:12px; }
.companion2-stat-row {
    display:flex; justify-content:space-between; padding:3px 0;
    border-bottom:1px solid #110d22; font-size:10px;
}
.companion2-label { color:#301a50; text-transform:uppercase; letter-spacing:0.08em; font-size:9px; }
#companion2-loyalty-wrap { margin:8px 0; }
#companion2-loyalty-bar {
    height:6px; background:#110d22; border:1px solid #2a1a50; border-radius:3px; overflow:hidden; margin:4px 0;
}
#companion2-loyalty-fill { height:100%; background:linear-gradient(90deg,#3a1880,#8040e0); transition:width 0.4s; }
#companion2-loyalty-xp { font-size:9px; color:#401a60; text-align:right; }
#companion2-bond-btn {
    background:none; border:1px solid #2a1a50; color:#7060b0;
    padding:5px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.06em; transition:all 0.12s;
}
#companion2-bond-btn:hover { border-color:#8060d0; color:#c090f0; }
#companion2-ability-btns { display:flex; flex-wrap:wrap; gap:4px; }
.companion2-ability-btn {
    background:none; border:1px solid #2a1a50; color:#6050a0;
    padding:4px 10px; cursor:pointer; font-family:'Courier New',monospace;
    font-size:9px; letter-spacing:0.06em; border-radius:2px;
}
.companion2-ability-btn:hover { border-color:#8060d0; color:#a080e0; }
.companion2-ability-btn.locked { opacity:0.35; cursor:not-allowed; }
#companion2-rename-input {
    background:#110d22; border:1px solid #2a1a50; color:#8070c0;
    font-family:monospace; padding:4px; font-size:10px;
}
#companion2-body button:not(#companion2-bond-btn):not(.companion2-ability-btn) {
    background:none; border:1px solid #2a1a50; color:#6050a0;
    padding:4px 10px; cursor:pointer; font-family:'Courier New',monospace; font-size:9px;
}

/* ── E116: Housing Panel ──────────────────────────────────────────────────── */
#room-panel {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#141210; border:1px solid #3a3020; color:#a09070;
    font-family:'Courier New',monospace; font-size:11px;
    padding:0; z-index:320; min-width:300px; max-width:380px;
    box-shadow:0 0 28px rgba(100,80,40,0.3);
}
#room-header {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; background:#1c1810; border-bottom:1px solid #3a3020;
    font-size:12px; color:#c0a060; letter-spacing:0.1em;
}
#room-header button { background:none; border:none; color:#504030; cursor:pointer; font-size:13px; margin-left:auto; }
#room-header button:hover { color:#c0a060; }
.room-tier-badge {
    font-size:8px; background:#2a2010; border:1px solid #504030;
    padding:1px 6px; border-radius:2px; color:#c0a040; text-transform:uppercase; letter-spacing:0.1em;
}
#room-tabs { display:flex; background:#1a1600; border-bottom:1px solid #3a3020; }
.room-tab {
    flex:1; background:none; border:none; border-right:1px solid #3a3020;
    color:#504030; cursor:pointer; padding:5px 0; font-family:'Courier New',monospace;
    font-size:10px; letter-spacing:0.06em;
}
.room-tab:last-child { border-right:none; }
.room-tab:hover { background:#221c10; color:#c0a060; }
.room-tab.active { background:#201800; color:#e0c070; border-bottom:2px solid #c0a040; }
#room-body { padding:10px 12px; }
#room-slot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.room-slot {
    height:54px; border:1px solid #3a3020; background:#1a1600;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; font-size:9px; color:#504030; border-radius:2px;
    transition:border-color 0.12s;
}
.room-slot:hover { border-color:#c0a040; color:#c0a060; }
.room-slot.filled { border-color:#6a5020; color:#c0a060; background:#201800; }
.room-slot-icon { font-size:18px; }
.room-slot-name { font-size:8px; color:#706040; margin-top:2px; }
#room-catalog-grid { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
.room-catalog-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:4px 8px; border:1px solid #2a2010; background:#1a1600;
}
.room-catalog-item-name { color:#c0a060; font-size:10px; }
.room-catalog-item-effect { font-size:9px; color:#504030; }
.room-catalog-buy-btn {
    background:none; border:1px solid #3a3020; color:#906040;
    padding:3px 8px; cursor:pointer; font-size:9px; font-family:'Courier New',monospace;
}
.room-catalog-buy-btn:hover { border-color:#c0a040; color:#e0c070; }
.room-upgrade-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; border-bottom:1px solid #2a2010; font-size:10px;
}
.room-upgrade-row button {
    background:none; border:1px solid #3a3020; color:#906040;
    padding:3px 10px; cursor:pointer; font-size:9px; font-family:'Courier New',monospace;
}
.room-upgrade-row button:hover { border-color:#c0a040; color:#e0c070; }
#room-body button:not(.room-catalog-buy-btn):not(.room-upgrade-row button) {
    background:none; border:1px solid #3a3020; color:#806040;
    padding:4px 10px; cursor:pointer; font-family:'Courier New',monospace; font-size:9px;
}

/* ── E117: Bounty System ────────────────────────────────────────────────────── */
#bounty-panel {
    position:fixed; bottom:60px; right:14px; width:340px; max-height:480px;
    background:#160a0a; border:1px solid #5a1a1a; border-radius:6px;
    display:flex; flex-direction:column; overflow:hidden; z-index:1400;
    font-family:'JetBrains Mono',monospace; color:#d0b090; font-size:12px;
}
#bounty-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#2a0808; border-bottom:1px solid #5a1a1a;
}
#bounty-title { font-family:'Cinzel',serif; color:#e05050; font-size:13px; }
#bounty-close { background:none; border:none; color:#806060; cursor:pointer; font-size:14px; }
#bounty-tabs { display:flex; background:#1e0606; border-bottom:1px solid #5a1a1a; }
.bounty-tab {
    flex:1; padding:6px; background:none; border:none; border-bottom:2px solid transparent;
    color:#906060; cursor:pointer; font-size:11px; font-family:'JetBrains Mono',monospace;
}
.bounty-tab.active { color:#e05050; border-bottom-color:#e05050; }
.bounty-tab-content { padding:10px; overflow-y:auto; flex:1; }
.bounty-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 8px; margin-bottom:4px; background:#1e0a0a;
    border:1px solid #4a1818; border-radius:4px; font-size:11px;
}
.bounty-row-amount { color:#e05050; font-weight:bold; }
.bounty-row-names { color:#b09080; flex:1; margin:0 8px; }
.bounty-row-date { color:#706050; font-size:10px; }
.bounty-badge {
    display:inline-block; background:#5a1a1a; color:#e05050;
    border-radius:3px; padding:1px 5px; font-size:10px; margin-left:4px;
}
.bounty-btn {
    margin-top:8px; padding:5px 12px; background:#3a1010; border:1px solid #6a2020;
    color:#d07070; border-radius:4px; cursor:pointer; font-size:11px; width:100%;
}
.bounty-btn:hover { background:#501818; }
.bounty-btn-danger { background:#501010; border-color:#8a2020; color:#e05050; }
.bounty-input {
    width:100%; margin:4px 0 8px; padding:4px 6px; background:#120606;
    border:1px solid #5a1a1a; color:#d0b090; border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:11px; box-sizing:border-box;
}

/* ── E118: Guild Wars ───────────────────────────────────────────────────────── */
#gw2-panel {
    position:fixed; bottom:60px; left:14px; width:340px; max-height:480px;
    background:#080c1a; border:1px solid #1a2a6a; border-radius:6px;
    display:flex; flex-direction:column; overflow:hidden; z-index:1400;
    font-family:'JetBrains Mono',monospace; color:#90a0d0; font-size:12px;
}
#gw2-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#0a1030; border-bottom:1px solid #1a2a6a;
}
#gw2-title { font-family:'Cinzel',serif; color:#6080e0; font-size:13px; }
#gw2-close { background:none; border:none; color:#506080; cursor:pointer; font-size:14px; }
#gw2-tabs { display:flex; background:#0c1428; border-bottom:1px solid #1a2a6a; }
.gw2-tab {
    flex:1; padding:6px; background:none; border:none; border-bottom:2px solid transparent;
    color:#506080; cursor:pointer; font-size:11px; font-family:'JetBrains Mono',monospace;
}
.gw2-tab.active { color:#6080e0; border-bottom-color:#6080e0; }
.gw2-tab-content { padding:10px; overflow-y:auto; flex:1; }
.gw2-zone-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:5px 8px; margin-bottom:4px; background:#0c1428;
    border:1px solid #1a2a5a; border-radius:4px; font-size:11px;
}
.gw2-siege-bar {
    height:8px; background:#1a2a5a; border-radius:4px; margin:4px 0; overflow:hidden;
}
.gw2-siege-bar-fill { height:100%; background:#4060c0; transition:width 0.3s; }
.gw2-input {
    width:100%; margin:4px 0 8px; padding:4px 6px; background:#060c20;
    border:1px solid #1a2a6a; color:#90a0d0; border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:11px; box-sizing:border-box;
}
.gw2-btn {
    padding:5px 12px; background:#0c1840; border:1px solid #2a3a80;
    color:#7090d0; border-radius:4px; cursor:pointer; font-size:11px; width:100%;
}
.gw2-btn:hover { background:#142060; }
.gw2-btn-attack { background:#1a0c30; border-color:#4a2a80; color:#9070d0; }
.gw2-btn-accept { background:#0c1a10; border-color:#2a6040; color:#70c090; }

/* ── E119: Auction House ─────────────────────────────────────────────────────── */
#ah-panel {
    position:fixed; top:60px; right:14px; width:380px; max-height:520px;
    background:#100e02; border:1px solid #4a3a10; border-radius:6px;
    display:flex; flex-direction:column; overflow:hidden; z-index:1400;
    font-family:'JetBrains Mono',monospace; color:#c0a860; font-size:12px;
}
#ah-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#1a1604; border-bottom:1px solid #4a3a10;
}
#ah-title { font-family:'Cinzel',serif; color:#d0a020; font-size:13px; }
#ah-close { background:none; border:none; color:#806040; cursor:pointer; font-size:14px; }
#ah-tabs { display:flex; background:#140e02; border-bottom:1px solid #4a3a10; }
.ah-tab {
    flex:1; padding:6px; background:none; border:none; border-bottom:2px solid transparent;
    color:#806040; cursor:pointer; font-size:11px; font-family:'JetBrains Mono',monospace;
}
.ah-tab.active { color:#d0a020; border-bottom-color:#d0a020; }
.ah-tab-content { padding:10px; overflow-y:auto; flex:1; }
.ah-listing-row {
    display:grid; grid-template-columns:1fr auto auto;
    padding:6px 8px; margin-bottom:4px; background:#0e0c02;
    border:1px solid #3a2a08; border-radius:4px; font-size:11px;
    cursor:pointer; gap:6px; align-items:center;
}
.ah-listing-row:hover { background:#181402; border-color:#6a4a10; }
.ah-listing-name { color:#c0a860; }
.ah-listing-bid { color:#d0a020; font-weight:bold; }
.ah-listing-buyout { color:#80c070; font-size:10px; }
.ah-listing-time { color:#706040; font-size:10px; }
.ah-cat-btn {
    padding:3px 8px; background:#0e0c02; border:1px solid #3a2a08;
    color:#806040; border-radius:3px; cursor:pointer; font-size:10px;
    font-family:'JetBrains Mono',monospace;
}
.ah-cat-btn.active { background:#1a1404; border-color:#6a4a10; color:#d0a020; }
.ah-input {
    width:100%; margin:4px 0 8px; padding:4px 6px; background:#080600;
    border:1px solid #4a3a10; color:#c0a860; border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:11px; box-sizing:border-box;
    resize:vertical;
}
.ah-btn {
    padding:5px 12px; background:#1a1404; border:1px solid #5a4010;
    color:#c09030; border-radius:4px; cursor:pointer; font-size:11px; width:100%;
}
.ah-btn:hover { background:#241c08; }
.ah-btn-buyout { background:#0a1404; border-color:#2a5010; color:#70c050; }

/* ── E120: Advanced Crafting ─────────────────────────────────────────────────── */
#craft2-panel {
    position:fixed; top:60px; left:14px; width:340px; max-height:480px;
    background:#060e08; border:1px solid #1a4a20; border-radius:6px;
    display:flex; flex-direction:column; overflow:hidden; z-index:1400;
    font-family:'JetBrains Mono',monospace; color:#80c090; font-size:12px;
}
#craft2-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#0a1a0c; border-bottom:1px solid #1a4a20;
}
#craft2-title { font-family:'Cinzel',serif; color:#40c060; font-size:13px; }
#craft2-close { background:none; border:none; color:#406050; cursor:pointer; font-size:14px; }
#craft2-tabs { display:flex; background:#080e0a; border-bottom:1px solid #1a4a20; }
.craft2-tab {
    flex:1; padding:6px; background:none; border:none; border-bottom:2px solid transparent;
    color:#406050; cursor:pointer; font-size:11px; font-family:'JetBrains Mono',monospace;
}
.craft2-tab.active { color:#40c060; border-bottom-color:#40c060; }
.craft2-tab-content { padding:10px; overflow-y:auto; flex:1; }
.craft2-node-row {
    padding:7px 10px; margin-bottom:4px; background:#0a1a0c;
    border:1px solid #1a4020; border-radius:4px; font-size:11px;
}
.craft2-node-row.on-cooldown { opacity:0.5; }
.craft2-node-name { color:#60d080; font-weight:bold; }
.craft2-node-outputs { color:#508060; font-size:10px; margin-top:2px; }
.craft2-queue-slot {
    display:flex; justify-content:space-between; align-items:center;
    padding:5px 8px; margin-bottom:4px; background:#0a1a0c;
    border:1px solid #1a4020; border-radius:4px; font-size:11px;
}
.craft2-quality-badge {
    display:inline-block; padding:1px 5px; border-radius:3px; font-size:10px; font-weight:bold;
}
.craft2-quality-badge.common    { background:#1a2a1a; color:#80c080; }
.craft2-quality-badge.uncommon  { background:#1a2a3a; color:#6090d0; }
.craft2-quality-badge.rare      { background:#2a1a3a; color:#c080e0; }
.craft2-quality-badge.epic      { background:#3a2a08; color:#e0b020; }
.craft2-input {
    width:100%; margin:4px 0 8px; padding:4px 6px; background:#040a06;
    border:1px solid #1a4a20; color:#80c090; border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:11px; box-sizing:border-box;
}
.craft2-btn {
    padding:5px 12px; background:#0a1a0c; border:1px solid #2a6030;
    color:#60c070; border-radius:4px; cursor:pointer; font-size:11px; width:100%;
}
.craft2-btn:hover { background:#142010; }
.craft2-btn-collect { background:#0a1a10; border-color:#2a7040; color:#60d080; }

/* ── E121: Pet System ────────────────────────────────────────────────────────── */
#pet-panel {
    position:fixed; bottom:60px; left:14px; width:330px; max-height:480px;
    background:#060e0e; border:1px solid #104a40; border-radius:6px;
    display:flex; flex-direction:column; overflow:hidden; z-index:1400;
    font-family:'JetBrains Mono',monospace; color:#80c0b0; font-size:12px;
}
#pet-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:#0a1a18; border-bottom:1px solid #104a40;
}
#pet-title { font-family:'Cinzel',serif; color:#20d0b0; font-size:13px; }
#pet-close { background:none; border:none; color:#406060; cursor:pointer; font-size:14px; }
#pet-tabs { display:flex; background:#080e0e; border-bottom:1px solid #104a40; }
.pet-tab {
    flex:1; padding:6px; background:none; border:none; border-bottom:2px solid transparent;
    color:#406060; cursor:pointer; font-size:11px; font-family:'JetBrains Mono',monospace;
}
.pet-tab.active { color:#20d0b0; border-bottom-color:#20d0b0; }
.pet-tab-content { padding:10px; overflow-y:auto; flex:1; }
.pet-card {
    padding:8px 10px; margin-bottom:6px; background:#0a1a18;
    border:1px solid #104a40; border-radius:5px;
}
.pet-card-name { color:#20d0b0; font-weight:bold; font-size:12px; }
.pet-card-stats { color:#508070; font-size:10px; margin:3px 0; }
.pet-xp-bar { height:6px; background:#082018; border-radius:3px; margin:4px 0; overflow:hidden; }
.pet-xp-fill { height:100%; background:#20d0b0; transition:width 0.4s; }
.pet-tier-badge {
    display:inline-block; padding:1px 5px; border-radius:3px; font-size:10px;
    margin-left:4px;
}
.pet-tier-badge.common   { background:#082018; color:#40a080; }
.pet-tier-badge.uncommon { background:#081828; color:#4080c0; }
.pet-tier-badge.rare     { background:#180828; color:#a060d0; }
.pet-tier-badge.epic     { background:#281808; color:#d0a020; }
.pet-card-actions { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; }
.pet-action-btn {
    padding:2px 8px; background:#0a1a18; border:1px solid #206050;
    color:#40b090; border-radius:3px; cursor:pointer; font-size:10px;
}
.pet-species-row {
    padding:6px 8px; margin-bottom:3px; background:#0a1a18;
    border:1px solid #104040; border-radius:4px; cursor:pointer; font-size:11px; color:#80c0b0;
}
.pet-species-row:hover { background:#102820; border-color:#206050; }
.pet-input {
    width:100%; margin:4px 0 8px; padding:4px 6px; background:#040c0c;
    border:1px solid #104a40; color:#80c0b0; border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:11px; box-sizing:border-box;
}
.pet-btn {
    padding:5px 12px; background:#0a1a18; border:1px solid #206050;
    color:#40b090; border-radius:4px; cursor:pointer; font-size:11px; width:100%;
}
.pet-btn:hover { background:#142820; }
.pet-btn-capture { background:#08180e; border-color:#207040; color:#40d070; }
.pet-btn-battle  { background:#180808; border-color:#602020; color:#d04040; }
.pet-battle-line { font-size:10px; color:#608070; margin:1px 0; }

/* E122: Reputation System */
#rep2-panel {
    position:fixed; top:80px; right:20px; width:320px;
    background:#0e0814; border:1px solid #5030a0;
    border-radius:6px; padding:10px; z-index:2000;
    font-family:monospace; color:#d0b0f0; font-size:11px;
    box-shadow:0 4px 20px rgba(180,80,255,0.2);
}
#rep2-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#rep2-title { color:#b060e0; font-size:13px; font-weight:bold; letter-spacing:0.08em; }
#rep2-tabs { display:flex; gap:4px; margin-bottom:8px; }
.rep2-tab-btn {
    background:#1a0a2a; color:#9070b0; border:1px solid #4020a0;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.rep2-tab-btn.active, .rep2-tab-btn:hover { background:#3a1060; color:#d0b0f0; border-color:#7040d0; }
.rep2-tab-body { min-height:80px; }
.rep2-faction-block { margin-bottom:10px; }
.rep2-faction-name { color:#c080f0; font-size:11px; margin-bottom:3px; font-weight:bold; }
.rep2-tier-bar { background:#1a0a2a; height:8px; border-radius:4px; overflow:hidden; border:1px solid #4020a0; }
.rep2-tier-fill { height:100%; background:linear-gradient(90deg,#7030d0,#c060f0); transition:width 0.4s; }
.rep2-tier-info { color:#9070b0; font-size:10px; margin-top:2px; }
#rep2-milestones { margin-top:8px; }
.rep2-milestone-row { display:flex; justify-content:space-between; font-size:10px; padding:2px 0; border-bottom:1px solid #2a1040; }
.rep2-milestone-row.claimed { color:#6040a0; text-decoration:line-through; }
.rep2-milestone-row.available { color:#c080f0; }
.rep2-vendor-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:4px 0; border-bottom:1px solid #2a1040;
}
.rep2-vendor-name { color:#c080f0; }
.rep2-vendor-cost { color:#f0c040; font-size:10px; }
.rep2-vendor-btn {
    background:#3a1060; color:#d0b0f0; border:1px solid #6040b0;
    font-size:10px; padding:2px 6px; cursor:pointer; border-radius:2px;
}
.rep2-vendor-btn:hover { background:#5020a0; }
.rep2-vendor-btn:disabled { opacity:0.4; cursor:default; }
.rep2-dialogue-line { padding:3px 0; border-bottom:1px solid #2a1040; color:#d0b0f0; font-size:10px; }
.rep2-dialogue-req { color:#9070b0; font-size:9px; }

/* E123: Fishing System */
#fish-panel {
    position:fixed; top:80px; left:20px; width:300px;
    background:#060e14; border:1px solid #205080;
    border-radius:6px; padding:10px; z-index:2000;
    font-family:monospace; color:#80d0e0; font-size:11px;
    box-shadow:0 4px 20px rgba(30,160,200,0.2);
}
#fish-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#fish-title { color:#30a0c0; font-size:13px; font-weight:bold; letter-spacing:0.08em; }
#fish-tabs { display:flex; gap:4px; margin-bottom:8px; }
.fish-tab-btn {
    background:#061014; color:#407080; border:1px solid #205060;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.fish-tab-btn.active, .fish-tab-btn:hover { background:#0a2030; color:#80d0e0; border-color:#30a0c0; }
.fish-tab-body { min-height:80px; }
.fish-cast-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.fish-label { color:#507090; font-size:10px; width:65px; }
.fish-cast-btn {
    background:#0a2030; color:#80d0e0; border:1px solid #30a0c0;
    font-size:11px; padding:4px 10px; cursor:pointer; border-radius:3px; width:100%;
}
.fish-cast-btn:hover { background:#0e3040; }
#fish-last-catch { margin-top:6px; font-size:10px; min-height:20px; }
.fish-card {
    display:flex; justify-content:space-between; align-items:center;
    padding:3px 0; border-bottom:1px solid #0a2030;
}
.fish-name { color:#80d0e0; }
.fish-weight { color:#507090; font-size:10px; }
.fish-value { color:#f0c040; font-size:10px; }
.fish-sell-btn {
    background:#0a2030; color:#80d0e0; border:1px solid #205060;
    font-size:9px; padding:1px 5px; cursor:pointer;
}
.fish-trophy-card { padding:4px 0; border-bottom:1px solid #0a2030; }
.fish-trophy-name { color:#f0c040; font-size:11px; }
.fish-trophy-glow { text-shadow:0 0 6px #f0c040; }
.fish-tournament-row { display:flex; justify-content:space-between; padding:2px 0; font-size:10px; border-bottom:1px solid #0a2030; }
.fish-tournament-rank1 { color:#f0c040; font-weight:bold; }

/* E124: Weather Extended */
#wx-panel {
    position:fixed; top:80px; right:350px; width:280px;
    background:#080c10; border:1px solid #304060;
    border-radius:6px; padding:10px; z-index:2000;
    font-family:monospace; color:#90b0d0; font-size:11px;
    box-shadow:0 4px 20px rgba(80,120,200,0.2);
}
#wx-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#wx-title { color:#80a0c0; font-size:13px; font-weight:bold; letter-spacing:0.08em; }
#wx-tabs { display:flex; gap:4px; margin-bottom:8px; }
.wx-tab-btn {
    background:#080c10; color:#405070; border:1px solid #203050;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.wx-tab-btn.active, .wx-tab-btn:hover { background:#0e1830; color:#90b0d0; border-color:#5080b0; }
.wx-tab-body { min-height:80px; }
.wx-zone-row {
    display:flex; align-items:center; gap:6px;
    padding:4px 0; border-bottom:1px solid #0e1830;
}
.wx-zone-id { color:#405070; font-size:10px; width:16px; }
.wx-zone-icon { font-size:14px; width:18px; }
.wx-zone-name { color:#90b0d0; flex:1; }
.wx-zone-effect { color:#506080; font-size:9px; }
.wx-zone-faction { color:#70a070; font-size:9px; }
.wx-quest-card {
    padding:5px; margin-bottom:5px; border:1px solid #1a2a3a;
    border-radius:3px; background:#0a1018;
}
.wx-quest-name { color:#90b0d0; font-size:11px; }
.wx-quest-weather { color:#507090; font-size:9px; margin:2px 0; }
.wx-quest-reward { color:#f0c040; font-size:10px; }
.wx-btn {
    background:#0a1828; color:#80a0c0; border:1px solid #304060;
    font-size:10px; padding:3px 10px; cursor:pointer; border-radius:3px;
}
.wx-btn:hover { background:#0e2038; }
.wx-btn-claim {
    background:#0e2030; color:#90b0d0; border:1px solid #405070;
    font-size:10px; padding:2px 8px; cursor:pointer; border-radius:2px; margin-top:4px;
}
.wx-btn-claim:hover { background:#142840; }

/* E125: Alchemy System */
#alch-panel {
    position:fixed; top:80px; left:340px; width:300px;
    background:#0e0a00; border:1px solid #503010;
    border-radius:6px; padding:10px; z-index:2000;
    font-family:monospace; color:#d0a040; font-size:11px;
    box-shadow:0 4px 20px rgba(200,140,20,0.2);
}
#alch-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#alch-title { color:#d0a040; font-size:13px; font-weight:bold; letter-spacing:0.08em; }
#alch-tabs { display:flex; gap:4px; margin-bottom:8px; }
.alch-tab-btn {
    background:#0e0a00; color:#705020; border:1px solid #402010;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.alch-tab-btn.active, .alch-tab-btn:hover { background:#201000; color:#d0a040; border-color:#a06020; }
.alch-tab-body { min-height:80px; }
.alch-gather-row { display:flex; gap:6px; align-items:center; margin-bottom:4px; }
.alch-ing-row { display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px solid #201000; font-size:10px; }
.alch-ing-name { color:#c09030; }
.alch-ing-qty  { color:#f0c040; font-weight:bold; }
.alch-recipe-card {
    padding:5px; margin-bottom:5px; border:1px solid #302010;
    border-radius:3px; background:#120c00;
}
.alch-recipe-name { color:#d0a040; font-size:11px; font-weight:bold; }
.alch-recipe-ing  { color:#806030; font-size:9px; margin:2px 0; }
.alch-recipe-effect { color:#a0c060; font-size:10px; }
.alch-btn {
    background:#201000; color:#d0a040; border:1px solid #a06020;
    font-size:10px; padding:3px 10px; cursor:pointer; border-radius:3px;
}
.alch-btn:hover { background:#302010; }
.alch-brew-btn {
    background:#180e00; color:#d0a040; border:1px solid #704010;
    font-size:10px; padding:2px 8px; cursor:pointer; border-radius:2px; margin-top:4px;
}
.alch-brew-btn:hover { background:#281800; }
.alch-effect-badge {
    display:inline-block; background:#1a1200; color:#a0c060;
    border:1px solid #407020; border-radius:3px;
    font-size:9px; padding:1px 5px; margin:2px 2px 2px 0;
}
.alch-trans-card {
    padding:5px; margin-bottom:5px; border:1px solid #302010; border-radius:3px; background:#120c00;
}
.alch-trans-name   { color:#d0a040; font-size:11px; }
.alch-trans-locked { color:#504030; font-style:italic; font-size:9px; }

/* E126: Dungeon Delve */
#delve-panel {
    position:fixed; top:80px; right:20px; width:300px;
    background:#0e0208; border:1px solid #602020;
    border-radius:6px; padding:10px; z-index:2000;
    font-family:monospace; color:#e08080; font-size:11px;
    box-shadow:0 4px 20px rgba(200,40,40,0.2);
}
#delve-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#delve-title { color:#c04040; font-size:13px; font-weight:bold; letter-spacing:0.08em; }
#delve-tabs { display:flex; gap:4px; margin-bottom:8px; }
.delve-tab-btn {
    background:#0e0208; color:#703030; border:1px solid #401010;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.delve-tab-btn.active, .delve-tab-btn:hover { background:#200808; color:#e08080; border-color:#c04040; }
.delve-tab-body { min-height:80px; }
#delve-status-bar { font-size:10px; color:#c08080; }
.delve-boss-track { background:#200808; height:10px; border-radius:5px; overflow:hidden; border:1px solid #602020; }
.delve-boss-fill  { height:100%; background:linear-gradient(90deg,#800000,#c04040); transition:width 0.4s; }
#delve-log { max-height:100px; overflow-y:auto; font-size:10px; }
.delve-log-line { padding:1px 0; border-bottom:1px solid #1a0808; color:#d07070; }
.delve-log-line.combat   { color:#e04040; }
.delve-log-line.treasure { color:#f0c040; }
.delve-log-line.trap     { color:#d06020; }
.delve-log-line.shrine   { color:#60c080; }
.delve-log-line.boss     { color:#ff6060; font-weight:bold; }
.delve-btn {
    background:#200808; color:#e08080; border:1px solid #802020;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.delve-btn:hover { background:#300c0c; }
.delve-btn-boss  { background:#400010; border-color:#c00020; color:#ff8080; }
.delve-btn-flee  { background:#101010; border-color:#404040; color:#808080; }
.delve-tier-row  { display:flex; flex-direction:column; gap:5px; }
.delve-tier-card {
    padding:6px; border:1px solid #401010; border-radius:3px;
    background:#180606; cursor:pointer;
}
.delve-tier-card:hover { background:#280a0a; border-color:#803020; }
.delve-tier-name { color:#e08080; font-size:11px; }
.delve-tier-info { color:#704040; font-size:9px; margin-top:2px; }

/* E127: Crafting Station */
#cs-panel {
    position:fixed; top:80px; left:20px; width:310px;
    background:#080a0e; border:1px solid #304060;
    border-radius:6px; padding:10px; z-index:2000;
    font-family:monospace; color:#90b8d0; font-size:11px;
    box-shadow:0 4px 20px rgba(60,120,180,0.2);
}
#cs-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#cs-title  { color:#70a0c0; font-size:13px; font-weight:bold; letter-spacing:0.08em; }
#cs-tabs   { display:flex; gap:4px; margin-bottom:8px; }
.cs-tab-btn {
    background:#080a0e; color:#405870; border:1px solid #203040;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.cs-tab-btn.active, .cs-tab-btn:hover { background:#0e1828; color:#90b8d0; border-color:#5080a0; }
.cs-tab-body { min-height:80px; }
.cs-station-card {
    padding:6px; margin-bottom:5px; border:1px solid #1a2a3a;
    border-radius:3px; background:#0c1420;
}
.cs-station-name  { color:#70a0c0; font-size:11px; font-weight:bold; }
.cs-station-meta  { color:#405870; font-size:9px; margin:2px 0; }
.cs-tier-pips     { display:inline-flex; gap:2px; margin-left:4px; }
.cs-tier-pip      { width:8px; height:8px; border-radius:50%; background:#203040; border:1px solid #304060; }
.cs-tier-pip.filled { background:#5080a0; }
.cs-queue-slots   { display:flex; gap:3px; margin-top:4px; flex-wrap:wrap; }
.cs-slot {
    font-size:9px; padding:2px 5px; border-radius:2px;
    border:1px solid #203040; background:#0a1020; color:#607080;
}
.cs-slot.ready   { border-color:#40c060; color:#60e080; cursor:pointer; }
.cs-slot.running { border-color:#a06020; color:#d08040; }
.cs-slot.empty   { opacity:0.4; }
.cs-btn {
    background:#0e1828; color:#70a0c0; border:1px solid #304060;
    font-size:10px; padding:3px 8px; cursor:pointer; border-radius:3px;
}
.cs-btn:hover { background:#142030; }
.cs-place-row  { display:flex; flex-direction:column; gap:5px; }
.cs-place-card {
    padding:6px; border:1px solid #203040; border-radius:3px;
    background:#0c1420; cursor:pointer;
}
.cs-place-card:hover { background:#101e30; border-color:#5080a0; }
.cs-place-name { color:#90b8d0; font-size:11px; }
.cs-place-cost { color:#507090; font-size:9px; margin-top:2px; }
.cs-recipe-btn {
    background:#0a1420; color:#80b0d0; border:1px solid #304860;
    font-size:9px; padding:1px 6px; cursor:pointer; border-radius:2px; margin:1px;
}
.cs-recipe-btn:hover { background:#102030; }

/* ── E128: Lore Archive ──────────────────────────────────────────────────── */
#la-panel {
    position:fixed; top:60px; right:10px; width:320px; max-height:480px;
    background:#1a1208; border:1px solid #504030; border-radius:4px;
    overflow-y:auto; z-index:900; font-family:'JetBrains Mono',monospace;
    font-size:11px; color:#c0a060; padding:8px;
    box-shadow:0 4px 24px rgba(0,0,0,0.7);
}
#la-header { display:flex; justify-content:space-between; align-items:center;
    margin-bottom:8px; border-bottom:1px solid #403020; padding-bottom:6px; }
#la-title { color:#d4b870; font-size:13px; letter-spacing:0.08em; }
#la-tabs { display:flex; gap:4px; margin-bottom:8px; }
.la-tab-btn {
    background:#100c04; color:#907050; border:1px solid #403020;
    font-size:10px; padding:2px 8px; cursor:pointer; border-radius:2px;
    font-family:'JetBrains Mono',monospace;
}
.la-tab-btn.active { background:#2a1e0c; color:#d4b870; border-color:#705030; }
.la-tab-body { display:block; }
.la-btn {
    background:#100c04; color:#c0a060; border:1px solid #504030;
    font-size:10px; padding:2px 10px; cursor:pointer; border-radius:2px;
    font-family:'JetBrains Mono',monospace;
}
.la-btn:hover { background:#201408; }
.la-fragment-card {
    background:#100c04; border:1px solid #403020; border-radius:3px;
    padding:5px 8px; margin-bottom:5px;
}
.la-fragment-name { color:#d4b870; font-size:11px; font-weight:600; }
.la-fragment-faction { color:#907050; font-size:9px; margin-bottom:3px; }
.la-fragment-lore { color:#a09060; font-size:10px; font-style:italic; margin:4px 0; }
.la-fragment-actions { display:flex; gap:4px; margin-top:4px; }
.la-deposit-btn {
    background:#0c1004; color:#80c060; border:1px solid #305020;
    font-size:9px; padding:1px 6px; cursor:pointer; border-radius:2px;
}
.la-deposit-btn:hover { background:#142010; }
.la-tree-bar { background:#100c04; border:1px solid #403020; border-radius:3px;
    height:10px; margin:4px 0; overflow:hidden; }
.la-tree-fill { height:100%; background:#c0a060; transition:width 0.3s; }

/* ── E129: Guild Quests ──────────────────────────────────────────────────── */
#gq-panel {
    position:fixed; top:60px; right:340px; width:300px; max-height:460px;
    background:#080c14; border:1px solid #203050; border-radius:4px;
    overflow-y:auto; z-index:900; font-family:'JetBrains Mono',monospace;
    font-size:11px; color:#80b0e0; padding:8px;
    box-shadow:0 4px 24px rgba(0,0,0,0.7);
}
#gq-header { display:flex; justify-content:space-between; align-items:center;
    margin-bottom:8px; border-bottom:1px solid #182840; padding-bottom:6px; }
#gq-title { color:#60a0e0; font-size:13px; letter-spacing:0.08em; }
#gq-tabs { display:flex; gap:4px; margin-bottom:8px; }
.gq-tab-btn {
    background:#060a10; color:#405080; border:1px solid #182840;
    font-size:10px; padding:2px 8px; cursor:pointer; border-radius:2px;
    font-family:'JetBrains Mono',monospace;
}
.gq-tab-btn.active { background:#101c30; color:#60a0e0; border-color:#304870; }
.gq-btn {
    background:#060a10; color:#80b0e0; border:1px solid #203050;
    font-size:10px; padding:2px 10px; cursor:pointer; border-radius:2px;
    font-family:'JetBrains Mono',monospace;
}
.gq-btn:hover { background:#0c1420; }
.gq-quest-card {
    background:#060a10; border:1px solid #182840; border-radius:3px;
    padding:5px 8px; margin-bottom:5px;
}
.gq-quest-name { color:#60a0e0; font-size:11px; font-weight:600; }
.gq-quest-meta { color:#405070; font-size:9px; margin-bottom:3px; }
.gq-progress-bar { background:#0a1020; border:1px solid #182840; border-radius:2px;
    height:8px; margin:3px 0; overflow:hidden; }
.gq-progress-fill { height:100%; background:#3070b0; transition:width 0.3s; }
.gq-diff-easy { color:#40b060; }
.gq-diff-medium { color:#c0a030; }
.gq-diff-hard { color:#c04040; }