/* Newborn - 3D Isometric Online RPG Theme */


:root {
    --bg-dark: #0a0c10;
    --bg-panel: rgba(14, 18, 26, 0.88);
    --bg-panel-border: rgba(184, 146, 74, 0.35);
    --gold-primary: #d4a34b;
    --gold-light: #fbe38f;
    --gold-dark: #8c6721;
    --hp-red: #e63946;
    --hp-dark: #7a151e;
    --mp-blue: #00b4d8;
    --mp-dark: #005f73;
    --ap-holy: #ffd166;
    --ap-dread: #9d4edd;
    --ap-neutral: #a8dadc;
    --text-main: #f1faee;
    --text-muted: #9aa5b1;
    --font-fantasy: Arial, 'Liberation Sans', sans-serif;
    --font-ui: Arial, 'Liberation Sans', sans-serif;
    --admin-gold: #ffbe0b;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-dark);
    font-family: var(--font-ui);
    color: var(--text-main);
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* UI Overlay Layer */
#ui-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clickable {
    pointer-events: auto;
}

/* TOP BAR */
#top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px;
}

/* Character Crest & Vitals */
.player-vitals-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--bg-panel-border);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.crest-badge {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid var(--gold-primary);
    background: radial-gradient(circle, #2b2d42 0%, #11141c 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(212, 163, 75, 0.4);
}

.crest-level-tag {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--gold-light);
    font-family: var(--font-fantasy);
    letter-spacing: 1px;
}

.crest-level-val {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-fantasy);
    line-height: 1;
}

.vitals-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.char-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.char-title {
    font-family: var(--font-fantasy);
    font-weight: 700;
    font-size: 16px;
    color: var(--gold-light);
    letter-spacing: 0.5px;
}

.admin-tag {
    background: linear-gradient(135deg, #ffd000, #ff8800);
    color: #000;
    font-weight: 900;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: none;
}

/* Stat Bars */
.stat-bar-wrapper {
    position: relative;
    height: 16px;
    background: rgba(0,0,0,0.6);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.stat-bar-fill {
    height: 100%;
    transition: width 0.3s ease-out;
}

.hp-fill {
    background: linear-gradient(90deg, var(--hp-dark), var(--hp-red));
    box-shadow: 0 0 8px rgba(230, 57, 70, 0.6);
}

.mp-fill {
    background: linear-gradient(90deg, var(--mp-dark), var(--mp-blue));
    box-shadow: 0 0 8px rgba(0, 180, 216, 0.6);
}

.stat-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    text-shadow: 0 1px 3px #000;
    letter-spacing: 0.5px;
}

/* Alignment Gauge (AP) */
.ap-gauge-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
}

.ap-label {
    color: var(--text-muted);
}

.ap-value-display {
    font-weight: 700;
    color: var(--ap-holy);
}

.ap-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ap-dread) 0%, #3a3a4a 50%, var(--ap-holy) 100%);
    border: 1px solid rgba(255,255,255,0.15);
}

.ap-pointer {
    position: absolute;
    top: -3px;
    width: 6px;
    height: 14px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 6px #fff;
    transform: translateX(-50%);
    transition: left 0.3s ease;
}

/* Climate & World Status */
#world-status-card {
    background: var(--bg-panel);
    border: 1px solid var(--bg-panel-border);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.world-biome-title {
    font-family: var(--font-fantasy);
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.world-climate-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
}

.climate-badge {
    color: #48cae4;
    font-weight: 600;
}

.clock-badge {
    color: var(--gold-primary);
    font-weight: 600;
}

.announcement-banner {
    color: #ffbe0b;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 190, 11, 0.1);
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 190, 11, 0.3);
    margin-top: 4px;
    max-width: 320px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Top Right Action Buttons */
.top-controls-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hud-btn {
    background: var(--bg-panel);
    border: 1px solid var(--bg-panel-border);
    backdrop-filter: blur(8px);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.hud-btn:hover {
    background: rgba(212, 163, 75, 0.2);
    border-color: var(--gold-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 163, 75, 0.3);
}

.hud-btn.admin-glow {
    border-color: var(--admin-gold);
    color: var(--admin-gold);
    box-shadow: 0 0 12px rgba(255, 190, 11, 0.4);
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 190, 11, 0.3); }
    50% { box-shadow: 0 0 18px rgba(255, 190, 11, 0.7); }
}

/* BOTTOM BAR & ACTION HOTBAR */
#bottom-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    position: relative;
}

/* XP Bar */
.xp-bar-container {
    width: 60%;
    max-width: 680px;
    position: relative;
    height: 10px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #588157, #a3b18a, #dad7cd);
    box-shadow: 0 0 8px rgba(163, 177, 138, 0.6);
    width: 0%;
    transition: width 0.3s ease;
}

.xp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px #000;
}

/* Action & Menus Bar */
.action-dock {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--bg-panel-border);
    backdrop-filter: blur(12px);
    padding: 8px 16px;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.7);
}

.hotbar-slots {
    display: flex;
    gap: 8px;
}

.action-slot {
    position: relative;
    width: 48px;
    height: 48px;
    background: rgba(20, 24, 34, 0.9);
    border: 1px solid rgba(212, 163, 75, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-slot:hover {
    border-color: var(--gold-light);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(212, 163, 75, 0.3);
}

.action-slot.active-weapon {
    border-color: var(--gold-primary);
    box-shadow: 0 0 12px rgba(212, 163, 75, 0.5);
    background: rgba(212, 163, 75, 0.15);
}

.slot-icon {
    font-size: 20px;
}

.slot-hotkey {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--gold-light);
}

.slot-name-sub {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 1px;
}

.dock-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.15);
}

/* MODAL WINDOWS (Paper Doll, Inventory, Skills, Stats, Admin, Achievements) */
.game-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-panel);
    border: 1px solid var(--bg-panel-border);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.85);
    z-index: 50;
    display: none;
    flex-direction: column;
    min-width: 360px;
    max-height: 85vh;
    overflow: hidden;
}

.game-modal.visible {
    display: flex;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(212, 163, 75, 0.1);
    border-bottom: 1px solid var(--bg-panel-border);
}

.modal-title {
    font-family: var(--font-fantasy);
    font-size: 17px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: #fff;
}

.modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* PAPER DOLL SPECIFIC STYLING */
#modal-paperdoll {
    width: 680px;
}

.paperdoll-layout {
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    gap: 16px;
    align-items: center;
}

.paperdoll-slots-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.equip-slot {
    position: relative;
    width: 74px;
    height: 74px;
    background: rgba(10, 14, 22, 0.85);
    border: 1px solid rgba(212, 163, 75, 0.35);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.equip-slot:hover {
    border-color: var(--gold-light);
    box-shadow: 0 0 12px rgba(212, 163, 75, 0.4);
}

.equip-slot.filled {
    border-color: var(--gold-primary);
    background: rgba(212, 163, 75, 0.1);
}

.equip-slot-label {
    position: absolute;
    top: 4px;
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.equip-item-icon {
    font-size: 26px;
    margin-top: 6px;
}

.equip-item-name {
    font-size: 9px;
    color: var(--gold-light);
    text-align: center;
    max-width: 66px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 3D Paper Doll Preview Canvas */
.paperdoll-preview-box {
    position: relative;
    width: 100%;
    height: 380px;
    background: radial-gradient(circle, #1a202c 0%, #0d1117 100%);
    border: 1px solid rgba(212, 163, 75, 0.3);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#paperdoll-canvas {
    width: 100%;
    height: 100%;
}

.paperdoll-controls-overlay {
    position: absolute;
    bottom: 10px;
    display: flex;
    gap: 8px;
    background: rgba(0,0,0,0.6);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
}

.customizer-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: all 0.2s;
}

.customizer-btn:hover, .customizer-btn.active {
    background: var(--gold-primary);
    color: #000;
    font-weight: 700;
}

/* Hair Customization Palette */
.hair-custom-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0,0,0,0.3);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}

.hair-styles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hair-colors-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.color-swatch:hover, .color-swatch.selected {
    transform: scale(1.2);
    border-color: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,0.8);
}

/* INVENTORY GRID */
#modal-inventory {
    width: 440px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.inv-slot {
    width: 58px;
    height: 58px;
    background: rgba(14, 18, 26, 0.9);
    border: 1px solid rgba(212, 163, 75, 0.25);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.inv-slot:hover {
    border-color: var(--gold-light);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(212, 163, 75, 0.35);
}

/* SKILLS PROGRESSION WINDOW */
#modal-skills {
    width: 540px;
}

.skill-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skill-card {
    background: rgba(18, 22, 32, 0.7);
    border: 1px solid rgba(212, 163, 75, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.skill-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skill-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(212, 163, 75, 0.15);
    border: 1px solid var(--gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.skill-title-meta {
    display: flex;
    flex-direction: column;
}

.skill-title {
    font-family: var(--font-fantasy);
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-light);
}

.skill-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.skill-progress-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.skill-val-display {
    font-size: 18px;
    font-weight: 900;
    color: #48cae4;
    font-family: var(--font-fantasy);
}

.skill-multiplier-badge {
    font-size: 10px;
    color: var(--gold-light);
    background: rgba(212, 163, 75, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ATTRIBUTES WINDOW */
#modal-attributes {
    width: 420px;
}

.attr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(18, 22, 32, 0.7);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.attr-name-meta {
    display: flex;
    flex-direction: column;
}

.attr-name {
    font-family: var(--font-fantasy);
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-light);
}

.attr-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.attr-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attr-val {
    font-size: 18px;
    font-weight: 800;
    min-width: 28px;
    text-align: right;
}

.attr-plus-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--gold-primary);
    color: #000;
    border: none;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.attr-plus-btn:hover:not(:disabled) {
    background: var(--gold-light);
    transform: scale(1.1);
}

.attr-plus-btn:disabled {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3);
    cursor: not-allowed;
}

/* ACHIEVEMENTS WINDOW */
#modal-achievements {
    width: 520px;
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(18, 22, 32, 0.6);
    border: 1px solid rgba(255,255,255,0.06);
    opacity: 0.5;
    transition: all 0.3s;
}

.achievement-card.unlocked {
    opacity: 1;
    border-color: var(--gold-primary);
    background: rgba(212, 163, 75, 0.1);
}

.achieve-icon {
    font-size: 26px;
}

.achieve-meta {
    display: flex;
    flex-direction: column;
}

.achieve-title {
    font-family: var(--font-fantasy);
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-light);
}

.achieve-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* ADMIN LIVE EDITOR SUITE */
#modal-admin {
    width: 640px;
    border-color: var(--admin-gold);
    box-shadow: 0 0 30px rgba(255, 190, 11, 0.3);
}

.admin-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.admin-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 190, 11, 0.3);
    color: var(--admin-gold);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.admin-tab-btn.active {
    background: var(--admin-gold);
    color: #000;
}

.admin-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-input-group label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.admin-input {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 190, 11, 0.4);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-ui);
}

.admin-action-btn {
    background: linear-gradient(135deg, var(--admin-gold), #ff8800);
    color: #000;
    border: none;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.admin-action-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

/* CHAT BOX */
#chat-container {
    position: absolute;
    bottom: 24px;
    left: 24px;
    width: 340px;
    height: 220px;
    background: var(--bg-panel);
    border: 1px solid var(--bg-panel-border);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    pointer-events: auto;
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.chat-msg {
    line-height: 1.3;
}

.chat-author {
    font-weight: 700;
    color: var(--gold-light);
}

.chat-author.admin-author {
    color: var(--admin-gold);
}

.chat-sys {
    color: #48cae4;
    font-style: italic;
}

#chat-input-row {
    display: flex;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
}

#chat-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 12px;
    color: #fff;
    font-size: 12px;
    outline: none;
}

#chat-send-btn {
    background: transparent;
    border: none;
    color: var(--gold-primary);
    padding: 0 12px;
    cursor: pointer;
    font-weight: 700;
}

/* Floating combat numbers */
.combat-text {
    position: absolute;
    font-family: var(--font-fantasy);
    font-weight: 900;
    font-size: 20px;
    color: #ff4d4d;
    text-shadow: 0 2px 4px #000;
    pointer-events: none;
    z-index: 100;
    animation: floatDamage 1s forwards ease-out;
}

@keyframes floatDamage {
    0% { opacity: 1; transform: translate(-50%, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(0.9); }
}

/* Tooltip */
#item-tooltip {
    position: absolute;
    background: rgba(10, 14, 22, 0.95);
    border: 1px solid var(--gold-primary);
    border-radius: 8px;
    padding: 10px 14px;
    pointer-events: none;
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 4px;
    max-width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
}


/* Shared full-body character preview in armory and inventory. */
#modal-inventory { width: min(850px, 94vw); }
.inventory-character-layout { display: grid; grid-template-columns: 400px minmax(200px, 1fr); gap: 18px; align-items: center; }
.inventory-character-label { position: absolute; bottom: 10px; color: #d4a34b; font-size: 11px; }
@media (max-width: 720px) {
    .inventory-character-layout { grid-template-columns: 1fr; }
    .inventory-character-layout .paperdoll-preview-box { height: 300px; }
}


/* Username/PIN entry and human-only creation. */
[hidden] { display: none !important; }
.not-playing #ui-root { visibility: hidden; pointer-events: none; }
.start-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(5,10,18,.88); overflow: auto; padding: 24px; }
.start-card { width: min(860px,94vw); max-height: 92vh; overflow: auto; background: #101a28; border: 1px solid #ac8742; border-radius: 16px; padding: 28px; color: #edf2f6; }
.start-card h1 { color: #e8c16b; font-size: 36px; letter-spacing: .15em; margin: 0; }
.start-card h2 { font-size: 20px; margin: 20px 0 12px; }
.start-card form { display: grid; gap: 10px; }
.start-card label { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; font-size: 13px; }
.start-card input,.start-card select { width: 100%; min-width: 0; padding: 10px; background: #1b2b3e; border: 1px solid #455772; border-radius: 6px; color: white; }
.start-card button { padding: 12px; border: 1px solid #aa8742; border-radius: 6px; background: #4e3d1e; color: #ffe8b0; cursor: pointer; }
#auth-section { max-width: 560px; }
#auth-switch { background: #1b2b3e; border-color: #455772; }
.creation-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.creation-preview { height: 470px; background: #07101b; border-radius: 12px; position: relative; overflow: hidden; }
#creation-canvas { width: 100%; height: 100%; }
.creation-preview p { position: absolute; bottom: 8px; width: 100%; text-align: center; color: #dfbd70; pointer-events: none; }
#start-status { color: #a8cedd; font-size: 13px; min-height: 20px; }
@media (max-width: 680px) { .creation-layout { grid-template-columns: 1fr; } .creation-preview { height: 320px; } .start-card label { grid-template-columns: 110px 1fr; } }

button, input, select, textarea { font-family: Arial, "Liberation Sans", sans-serif; }

#modal-options { z-index: 2000; width: min(480px, 92vw); min-width: 0; }
.options-settings { padding: 24px; display: flex; flex-direction: column; gap: 18px; color: #eceff4; }
.options-settings select { padding: 12px; color: #eceff4; background: #202a3b; border: 1px solid #8c7951; }
.options-settings input { accent-color: #dab467; }
.options-settings p { color: #a4adbf; font-size: 12px; }

/* Editor Mode */
#modal-editor { width: min(900px, calc(100vw - 32px)); }
.editor-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.editor-card { display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.45); padding: 14px; border-radius: 10px; border: 1px solid rgba(255,190,11,0.35); }
.editor-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.editor-card input, .editor-card select { background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 6px 8px; font: inherit; }
.editor-heading { font-size: 13px; font-weight: 700; color: #ffd166; }
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-list { display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow-y: auto; }
.editor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; padding: 6px; border-radius: 6px; background: rgba(255,255,255,0.04); }
.editor-row span { flex: 1 1 200px; }
.editor-row .customizer-btn { padding: 3px 8px; font-size: 11px; }
.editor-note { font-size: 12px; color: var(--text-muted); min-height: 1em; margin: 0; }
.editor-catalog { display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; }
.editor-land { background: var(--land); border-radius: 8px; padding: 8px; }
.editor-land-title { font-size: 12px; font-weight: 700; color: #ffe8b0; margin-bottom: 6px; }
.editor-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.editor-card-object { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: #fff; font: inherit; font-size: 11px; cursor: pointer; }
.editor-card-object canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.editor-card-object.selected { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,0.5); }
.editor-size { display: flex; align-items: center; gap: 10px; }
.editor-size input[type=range] { flex: 1; accent-color: #ffd166; }
.action-slot.action-mode { border-color: #ff6b4a; box-shadow: 0 0 10px rgba(255,107,74,0.45); }
.action-slot.calm-mode { border-color: #7fd4a8; }

/* =====================================================================
   Fantasy HUD (2.2.0): portrait, target, mini-map, party, quests,
   chat console, hotbar orbs and system menu around the 3D world.
   ===================================================================== */
:root {
    --hud-wood: #2a2116;
    --hud-wood-2: #3a2d1d;
    --hud-moss: #1f3322;
    --hud-gold: #c9a24a;
    --hud-gold-light: #f2d58a;
    --hud-parchment: #e9d9b0;
    --hud-parchment-ink: #3b2a15;
    --hud-frame-shadow: 0 6px 18px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,230,160,0.12);
}
#ui-root { display: block; }
.hud-frame {
    background: linear-gradient(180deg, rgba(42,33,22,0.94), rgba(24,30,22,0.94));
    border: 2px solid var(--hud-gold);
    border-radius: 14px;
    box-shadow: var(--hud-frame-shadow);
    position: absolute;
}
.hud-frame::before {
    content: ""; position: absolute; inset: 3px; border-radius: 11px; pointer-events: none;
    border: 1px solid rgba(242,213,138,0.25);
}
.panel-title {
    font-family: Georgia, 'DejaVu Serif', serif; font-weight: 700; font-size: 14px; color: var(--hud-gold-light);
    text-align: center; letter-spacing: 0.5px; text-shadow: 0 1px 2px #000; margin-bottom: 6px;
}

/* Portrait */
#hud-portrait { top: 14px; left: 14px; display: flex; gap: 10px; padding: 10px 14px 10px 10px; align-items: center; width: 400px; }
.portrait-ring {
    position: relative; width: 132px; height: 132px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 50% 40%, #2f4f36, #13201a 70%);
    border: 4px solid var(--hud-gold); box-shadow: 0 0 0 3px #3a2d1d, 0 0 14px rgba(120,220,140,0.35), inset 0 0 18px #000;
    overflow: visible;
}
#portrait-canvas { width: 124px; height: 124px; border-radius: 50%; display: block; }
#hud-portrait .crest-badge {
    position: absolute; left: -6px; bottom: -4px; width: 42px; height: 42px; border-radius: 50%;
    background: radial-gradient(circle, #3e6b45, #1d3324); border: 2px solid var(--hud-gold);
    display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 6px #000;
}
.portrait-mode {
    position: absolute; right: -6px; bottom: -4px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px; border: 2px solid var(--hud-gold);
    background: radial-gradient(circle, #3b5c7a, #1a2836); box-shadow: 0 2px 6px #000;
}
.portrait-mode.action { background: radial-gradient(circle, #a63c2c, #4a140d); box-shadow: 0 0 12px rgba(255,90,60,0.7); }
.portrait-info { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.portrait-info .char-header { display: flex; align-items: center; gap: 6px; }
.portrait-info .char-title { font-family: Georgia, 'DejaVu Serif', serif; color: var(--hud-gold-light); font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row { display: flex; align-items: center; gap: 6px; }
.bar-label { width: 22px; font-size: 11px; font-weight: 700; color: var(--hud-gold-light); text-shadow: 0 1px 1px #000; }
.bar-row .stat-bar-wrapper {
    flex: 1; height: 14px; position: relative; border-radius: 8px; overflow: hidden;
    background: rgba(0,0,0,0.65); border: 1px solid rgba(201,162,74,0.7); box-shadow: inset 0 1px 3px #000;
}
.bar-row .stat-bar-fill { height: 100%; border-radius: 8px; transition: width 0.25s; }
.bar-row .hp-fill { background: linear-gradient(180deg, #ff6b6b, #b3141f 60%, #7a0d14); }
.bar-row .mp-fill { background: linear-gradient(180deg, #6fd3ff, #1677c9 60%, #0b3f73); }
.bar-row .xp-fill { background: linear-gradient(180deg, #ffe08a, #c99a28 60%, #8a6414); }
.bar-row .stat-bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#hud-portrait .ap-gauge-container { margin-top: 1px; }
.leaf-ornament {
    height: 14px; margin: 2px auto 0; width: 70px; border-radius: 50% 50% 50% 50% / 100% 100% 0 0;
    background: linear-gradient(90deg, transparent, #4f8f45 30%, #8fd17a 50%, #4f8f45 70%, transparent);
    opacity: 0.85;
}

/* Target display */
#hud-target { top: 14px; left: 50%; transform: translateX(-50%); width: 320px; padding: 8px 14px 10px; }
#hud-target[hidden] { display: none; }
.target-name { text-align: center; font-family: Georgia, 'DejaVu Serif', serif; font-weight: 700; color: var(--hud-gold-light); font-size: 15px; margin-bottom: 4px; text-shadow: 0 1px 2px #000; }
.target-meta { text-align: center; font-size: 11px; color: #c8d5c0; margin-top: 4px; }

/* Mini-map */
#hud-minimap { position: absolute; top: 14px; right: 14px; width: 210px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.minimap-ring {
    position: relative; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, #e9d9b0, #c9b07a); border: 5px solid #7a5527;
    box-shadow: 0 0 0 3px var(--hud-gold), 0 6px 18px rgba(0,0,0,0.7), inset 0 0 14px rgba(60,40,10,0.6);
}
#minimap-canvas { width: 190px; height: 190px; border-radius: 50%; display: block; }
.minimap-north { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #3a2d1d; color: var(--hud-gold-light); border: 2px solid var(--hud-gold); border-radius: 50%; width: 22px; height: 22px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#hud-minimap #world-status-card { padding: 5px 12px; border: 2px solid var(--hud-gold); background: linear-gradient(180deg, rgba(42,33,22,0.94), rgba(24,30,22,0.94)); border-radius: 10px; }
#hud-minimap .announcement-banner { max-width: 210px; }

/* Party window */
#hud-party { top: 290px; right: 14px; width: 250px; padding: 10px; }
#hud-party.collapsed .party-members, #hud-party.collapsed .party-actions, #hud-party.collapsed .party-invite { display: none; }
.party-members { display: flex; flex-direction: column; gap: 6px; }
.party-card { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid rgba(201,162,74,0.25); }
.party-card.me { border-color: rgba(242,213,138,0.6); }
.party-badge { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; border: 2px solid var(--hud-gold); background: radial-gradient(circle, #4b4b4b, #1c1c1c); }
.party-badge.role-healer { background: radial-gradient(circle, #3f9a4a, #143b1a); }
.party-badge.role-tank { background: radial-gradient(circle, #6b6f80, #262833); }
.party-badge.role-dps { background: radial-gradient(circle, #a8442f, #3e140b); }
.party-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.party-name { font-size: 12px; font-weight: 700; color: #f3ead2; display: flex; justify-content: space-between; gap: 4px; }
.party-role { font-weight: 400; color: var(--hud-gold-light); font-size: 11px; }
.mini-bar { height: 6px; border-radius: 4px; background: rgba(0,0,0,0.6); overflow: hidden; }
.mini-bar div { height: 100%; }
.mini-bar.hp div { background: linear-gradient(90deg, #b3141f, #ff6b6b); }
.mini-bar.mp div { background: linear-gradient(90deg, #1677c9, #6fd3ff); }
.party-solo { font-size: 11px; color: #c8bfa6; text-align: center; padding: 4px; }
.party-actions { display: flex; gap: 4px; margin-top: 8px; }
.party-actions select { flex: 1; min-width: 0; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(201,162,74,0.5); border-radius: 6px; font-size: 11px; padding: 3px; }
.party-actions .customizer-btn, .party-invite .customizer-btn { padding: 3px 8px; font-size: 11px; }
.party-invite { background: rgba(60,120,60,0.35); border: 1px solid #6fbf6f; border-radius: 8px; padding: 6px; font-size: 12px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 5px; }
.party-invite[hidden] { display: none; }
.party-invite-buttons { display: flex; gap: 6px; justify-content: center; }

/* Quest tracker (parchment) */
.parchment {
    position: absolute; color: var(--hud-parchment-ink);
    background: linear-gradient(180deg, #efe1ba, #dcc796); border: 3px solid #7a5527; border-radius: 10px;
    box-shadow: 0 0 0 2px var(--hud-gold), 0 6px 18px rgba(0,0,0,0.65), inset 0 0 22px rgba(120,80,30,0.35);
}
#hud-quests { top: 500px; right: 14px; width: 250px; padding: 10px 12px 12px; }
.quest-title { text-align: center; font-family: Georgia, 'DejaVu Serif', serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; color: #4a3115; border-bottom: 1px solid rgba(90,60,20,0.4); padding-bottom: 4px; margin-bottom: 6px; }
.quest-list { display: flex; flex-direction: column; gap: 7px; }
.quest-row { font-size: 11.5px; }
.quest-head { display: flex; justify-content: space-between; gap: 6px; font-weight: 700; }
.quest-xp { font-weight: 400; color: #6a4a1f; white-space: nowrap; }
.quest-bar { height: 6px; border-radius: 4px; background: rgba(60,40,10,0.35); margin-top: 3px; overflow: hidden; }
.quest-bar div { height: 100%; background: linear-gradient(90deg, #3f8f3a, #7fd16a); }
.quest-row.done .quest-head { color: #2f6b2a; }
.quest-hint { font-size: 11px; color: #c8bfa6; margin-top: 2px; }
.quest-none { font-size: 12px; text-align: center; }
.journal-list { display: flex; flex-direction: column; gap: 10px; min-width: 380px; }
.journal-list .quest-row { color: #f1e6c8; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.3); }
.journal-list .quest-xp { color: var(--hud-gold-light); }

/* Chat console */
#chat-container { left: 14px; bottom: 14px; width: 360px; height: 250px; padding: 8px; display: flex; flex-direction: column; gap: 6px; backdrop-filter: none; }
.chat-tabs { display: flex; gap: 4px; }
.chat-tab {
    flex: 1; padding: 4px 0; font-size: 12px; font-weight: 700; cursor: pointer; color: #d8c9a0;
    background: linear-gradient(180deg, #3a2d1d, #241b11); border: 1px solid rgba(201,162,74,0.55); border-radius: 7px 7px 3px 3px;
}
.chat-tab.active { color: #fff6da; background: linear-gradient(180deg, #5b7a3f, #2c4220); border-color: var(--hud-gold-light); }
#chat-container #chat-messages { background: rgba(0,0,0,0.35); border-radius: 6px; border: 1px solid rgba(201,162,74,0.25); }
.chat-msg[hidden] { display: none; }
.chat-author.party-author { color: #7fe39a; }
.chat-author.combat-author { color: #ff9b7a; }
#chat-container #chat-input-row { border-top: none; padding: 0; gap: 6px; display: flex; }
#chat-container #chat-input { flex: 1; background: rgba(0,0,0,0.5); border: 1px solid rgba(201,162,74,0.45); border-radius: 6px; color: #fff; padding: 6px 8px; }

/* Hotbar with health and mana orbs */
#bottom-bar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: row; align-items: flex-end; gap: 0; padding: 0; }
.hotbar-frame {
    position: relative; padding: 18px 18px 12px; margin: 0 -14px; z-index: 1;
    background: linear-gradient(180deg, rgba(42,33,22,0.96), rgba(24,30,22,0.96));
    border: 2px solid var(--hud-gold); border-radius: 16px 16px 10px 10px; box-shadow: var(--hud-frame-shadow);
}
.hotbar-title { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #3a2d1d; border: 2px solid var(--hud-gold); border-radius: 10px; padding: 1px 12px; font-family: Georgia, 'DejaVu Serif', serif; font-weight: 700; font-size: 12px; color: var(--hud-gold-light); }
.hotbar-frame .hotbar-slots { display: flex; gap: 6px; }
.hotbar-frame .action-slot { width: 52px; height: 52px; border-radius: 8px; border: 2px solid rgba(201,162,74,0.65); background: radial-gradient(circle at 50% 35%, #33402c, #161c14); }
.hotbar-frame .bag-slot { margin-left: 10px; background: radial-gradient(circle at 50% 35%, #5a3f22, #241608); color: inherit; font: inherit; }
.orb { position: relative; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; z-index: 2; border: 5px solid var(--hud-gold); box-shadow: 0 0 0 3px #3a2d1d, 0 6px 18px rgba(0,0,0,0.75), inset 0 0 20px rgba(0,0,0,0.8); background: #120808; }
.orb-mp { background: #070b14; }
.orb-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transition: height 0.3s; }
.orb-hp .orb-fill { background: radial-gradient(circle at 40% 30%, #ff7a7a, #b3141f 55%, #5a0a10); }
.orb-mp .orb-fill { background: radial-gradient(circle at 40% 30%, #8fe2ff, #1677c9 55%, #082b55); }
.orb::after { content: ""; position: absolute; top: 10%; left: 22%; width: 34%; height: 22%; border-radius: 50%; background: rgba(255,255,255,0.28); filter: blur(2px); }
.orb-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; text-shadow: 0 2px 3px #000; z-index: 1; }

/* System menu */
#hud-system { right: 14px; bottom: 14px; width: 300px; padding: 10px; }
.system-icons { display: flex; justify-content: space-between; gap: 4px; }
.system-small { margin-top: 6px; }
.system-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; background: rgba(0,0,0,0.25); border: 1px solid rgba(201,162,74,0.3); border-radius: 8px; color: #f1e6c8; font-size: 10.5px; cursor: pointer; }
.system-btn span:first-child { font-size: 20px; }
.system-small .system-btn span:first-child { font-size: 15px; }
.system-btn:hover { border-color: var(--hud-gold-light); background: rgba(90,120,60,0.35); }
.system-status { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: #d8c9a0; padding: 0 4px; }
.system-status .good { color: #7fe39a; } .system-status .fair { color: #ffd166; } .system-status .poor { color: #ff7a7a; }
.system-mail { background: none; border: 1px solid rgba(201,162,74,0.4); border-radius: 6px; color: #f1e6c8; font-size: 11px; padding: 2px 8px; cursor: pointer; }

/* Smaller windows: tighten and stack the side panels. */
@media (max-width: 1280px), (max-height: 760px) {
    #hud-portrait { width: 340px; }
    .portrait-ring { width: 104px; height: 104px; } #portrait-canvas { width: 96px; height: 96px; }
    .minimap-ring { width: 150px; height: 150px; } #minimap-canvas { width: 140px; height: 140px; } #hud-minimap { width: 160px; }
    #hud-party { top: 236px; width: 220px; } #hud-quests { top: 420px; width: 220px; }
    .orb { width: 84px; height: 84px; } .hotbar-frame .action-slot { width: 42px; height: 42px; }
    #chat-container { width: 300px; height: 200px; } #hud-system { width: 250px; }
}
@media (max-height: 760px) { #hud-quests { display: none; } }
.bar-row .stat-bar-wrapper .stat-bar-text { top: 0; left: 0; right: 0; bottom: 0; transform: none; height: 100%; line-height: 14px; margin: 0; padding: 0; }
.bar-row .stat-bar-wrapper .stat-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; }

/* Editor Mode tabs and the Enemy Editor */
.editor-tabs { display:flex; gap:8px; margin-bottom:6px; }
.editor-tab.active { background:linear-gradient(180deg,#8a6a2a,#5a4318); color:#fff3d0; border-color:#f2c463; }
.editor-tab-body[hidden] { display:none !important; }
.editor-tab-body { display:flex; flex-direction:column; gap:8px; }
.editor-check { flex-direction:row !important; align-items:center; gap:6px; }
#enemy-catalog { grid-template-columns:repeat(5,minmax(0,1fr)); }
.enemy-swatch { width:14px; min-width:14px; max-width:14px; height:14px; border-radius:3px; border:1px solid #f2c463; flex:0 0 auto; }

/* ---- Game viewport framed by the GUI (2.4) ----
 * While playing, the 3D canvas sits inside --vp-* insets; every panel lives in the frame around it. */
:root { --vp-top: 34px; --vp-left: 340px; --vp-right: 300px; --vp-bottom: 184px; }
@media (max-width: 1280px), (max-height: 760px) { :root { --vp-left: 300px; --vp-right: 262px; --vp-bottom: 152px; } }
@media (max-width: 1100px) { :root { --vp-left: 262px; --vp-right: 236px; } }
body:not(.not-playing) {
    background:
        repeating-linear-gradient(0deg, rgba(255,220,160,0.035) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, #1d160e, #120d08);
}
body:not(.not-playing) #canvas-container {
    top: var(--vp-top); left: var(--vp-left); right: var(--vp-right); bottom: var(--vp-bottom);
    width: auto; height: auto;
}
#viewport-frame { display: none; }
body:not(.not-playing) #viewport-frame {
    display: block; position: absolute; pointer-events: none; z-index: 2;
    top: calc(var(--vp-top) - 4px); left: calc(var(--vp-left) - 4px); right: calc(var(--vp-right) - 4px); bottom: calc(var(--vp-bottom) - 4px);
    border: 4px solid var(--hud-gold); border-radius: 4px;
    box-shadow: 0 0 0 2px #3a2d1d, inset 0 0 0 1px rgba(242,213,138,0.6), inset 0 0 24px rgba(0,0,0,0.55);
}
.vf-corner { position: absolute; width: 16px; height: 16px; background: radial-gradient(circle, #a33a2a 35%, var(--hud-gold) 40%); border: 2px solid #3a2d1d; transform: rotate(45deg); }
.vf-corner.tl { top: -11px; left: -11px; } .vf-corner.tr { top: -11px; right: -11px; }
.vf-corner.bl { bottom: -11px; left: -11px; } .vf-corner.br { bottom: -11px; right: -11px; }
#hud-topbar {
    position: absolute; top: 0; left: 0; right: 0; height: calc(var(--vp-top) - 6px); z-index: 3;
    display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
    border-bottom: 1px solid rgba(201,162,74,0.55); font-family: Georgia, 'DejaVu Serif', serif;
}
.topbar-title { color: var(--hud-gold-light); font-weight: 700; letter-spacing: 3px; }
.topbar-location { color: #eadfc2; font-size: 13px; }
.topbar-version { color: #c9c9d2; font-size: 11px; }
/* Left column: character, target, party, location */
#hud-portrait { top: calc(var(--vp-top) + 4px); left: 8px; width: calc(var(--vp-left) - 16px); box-sizing: border-box; }
#hud-target { top: calc(var(--vp-top) + 178px); left: 8px; transform: none; width: calc(var(--vp-left) - 16px); box-sizing: border-box; }
#hud-target.empty .target-name { color: #bfb391; font-weight: 400; font-size: 13px; }
#hud-party { top: calc(var(--vp-top) + 308px); left: 8px; right: auto; width: calc(var(--vp-left) - 16px); box-sizing: border-box; }
#hud-location { top: calc(var(--vp-top) + 480px); left: 8px; width: calc(var(--vp-left) - 16px); bottom: calc(var(--vp-bottom) + 8px); box-sizing: border-box; padding: 10px 12px; overflow: hidden; }
.location-land { color: #f3ead2; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.location-layers { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: #d8dcc8; }
.location-layers .bar { height: 4px; border-radius: 3px; background: linear-gradient(90deg, #4f8f45, #9ad17a); }
.location-ground { margin-top: 6px; font-size: 11.5px; color: #9fcdf2; }
/* Right column: map, climate, quests */
#hud-minimap { top: calc(var(--vp-top) + 4px); right: 8px; width: calc(var(--vp-right) - 16px); }
#hud-quests { top: calc(var(--vp-top) + 292px); right: 8px; width: calc(var(--vp-right) - 16px); bottom: calc(var(--vp-bottom) + 8px); box-sizing: border-box; overflow: auto; }
/* Bottom bar: chat | orbs + hotbar (under the viewport centre) | system menu */
#bottom-bar { left: calc(var(--vp-left) + (100vw - var(--vp-left) - var(--vp-right)) / 2); bottom: calc((var(--vp-bottom) - 118px) / 2); }
#chat-container { left: 8px; bottom: 8px; height: calc(var(--vp-bottom) - 16px); box-sizing: border-box;
    width: calc(var(--vp-left) + (100vw - var(--vp-left) - var(--vp-right)) / 2 - 362px - 18px); }
#hud-system { right: 8px; bottom: 8px; height: calc(var(--vp-bottom) - 16px); box-sizing: border-box; overflow: hidden;
    width: calc(100vw - var(--vp-left) - (100vw - var(--vp-left) - var(--vp-right)) / 2 - 362px - 18px); }
@media (max-width: 1280px), (max-height: 760px) {
    #bottom-bar { bottom: calc((var(--vp-bottom) - 92px) / 2); }
    #chat-container { width: calc(var(--vp-left) + (100vw - var(--vp-left) - var(--vp-right)) / 2 - 300px - 18px); }
    #hud-system { width: calc(100vw - var(--vp-left) - (100vw - var(--vp-left) - var(--vp-right)) / 2 - 300px - 18px); }
    #hud-target { top: calc(var(--vp-top) + 150px); } #hud-party { top: calc(var(--vp-top) + 280px); } #hud-location { top: calc(var(--vp-top) + 450px); }
    #hud-quests { top: calc(var(--vp-top) + 232px); display: block; }
    .system-btn span:first-child { font-size: 15px; } .system-btn { font-size: 9.5px; }
}
@media (max-height: 700px) { #hud-location { display: none; } }

.start-version { margin-top: 4px; font-size: 12px; color: #c9c9d2; letter-spacing: 1px; }
.site-name { margin: 2px 0 6px; font-size: 15px; font-weight: 600; letter-spacing: 2px; color: #f0c674; text-shadow: 0 0 10px rgba(240,198,116,0.45); }

/* ---- Newborn 2.5 life: prompt, chips, darkness, shops, dialogs, manual, story quests ---- */
.life-chips { position: absolute; z-index: 12; top: calc(var(--vp-top) + 8px); left: calc(var(--vp-left) + 10px); right: calc(var(--vp-right) + 10px);
    display: flex; flex-wrap: wrap; gap: 5px; pointer-events: auto; }
.not-playing .life-chips { display: none; }
.life-chip { font-size: 11.5px; padding: 2px 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); border-radius: 9px; background: rgba(30,26,18,0.85); border: 1px solid rgba(201,162,74,0.45); color: #eadfc2; white-space: nowrap; }
.life-chip.good { border-color: #7fd4a8; color: #c9f5da; }
.life-chip.warn { border-color: #f0b23a; color: #ffe0a0; }
.life-chip.bad { border-color: #ff6b4a; color: #ffc0b0; background: rgba(60,16,10,0.85); }
.life-prompt, .life-activity, .life-toast {
    position: absolute; z-index: 12; pointer-events: none; opacity: 0; transition: opacity 0.2s;
    left: calc(var(--vp-left) + (100vw - var(--vp-left) - var(--vp-right)) / 2); transform: translateX(-50%);
}
.not-playing .life-prompt, .not-playing .life-activity, .not-playing .life-toast { display: none; }
.life-prompt { bottom: calc(var(--vp-bottom) + 14px); display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: calc(100vw - var(--vp-left) - var(--vp-right) - 40px); }
.life-prompt.show { opacity: 1; pointer-events: auto; }
.life-prompt-btn { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 6px; cursor: pointer;
    background: linear-gradient(180deg, rgba(48,38,22,0.94), rgba(22,17,10,0.94)); border: 1px solid var(--hud-gold, #c9a24a); color: #f3ead2;
    font: 600 13px Georgia, 'DejaVu Serif', serif; box-shadow: 0 3px 10px rgba(0,0,0,0.6); }
.life-prompt-btn.minor { font-size: 11.5px; opacity: 0.85; padding: 3px 10px 3px 6px; }
.life-prompt-btn:hover { border-color: #fbe38f; color: #fff; }
.life-prompt-btn kbd { min-width: 20px; padding: 1px 5px; border-radius: 4px; background: #f2d58a; color: #2a1d0c; font: 700 12px monospace; text-align: center; }
.life-activity { bottom: calc(var(--vp-bottom) + 170px); min-width: 220px; padding: 6px 10px; border-radius: 6px; background: rgba(16,12,8,0.88); border: 1px solid #c9a24a; color: #f3ead2; font: 600 12px Georgia, serif; text-align: center; }
.life-activity.show { opacity: 1; }
.life-activity-bar { height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.life-activity-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #c9a24a, #fbe38f); transition: width 0.2s linear; }
.life-toast { top: calc(var(--vp-top) + 54px); max-width: min(560px, calc(100vw - var(--vp-left) - var(--vp-right) - 40px)); padding: 8px 16px; border-radius: 8px;
    background: rgba(20,15,8,0.9); border: 1px solid #c9a24a; color: #fbe38f; font: 600 13.5px Georgia, serif; text-align: center; text-shadow: 0 1px 2px #000; }
.life-toast.show { opacity: 1; }
.life-darkness, .life-flash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.life-darkness { opacity: 0; transition: opacity 0.6s; }
.life-flash { background: #eef4ff; opacity: 0; mix-blend-mode: screen; }
#canvas-container { overflow: hidden; }
.inventory-column { display: flex; flex-direction: column; gap: 8px; }
.inventory-gold { color: #fbe38f; font-weight: 700; font-size: 13px; }
.inv-icon { font-size: 20px; }
.inv-name { font-size: 8px; color: #fbe38f; text-align: center; max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-count { position: absolute; right: 3px; bottom: 2px; font: 700 10px monospace; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.equip-slot[id="eq-hands"], .equip-slot[id="eq-shield"] { margin-top: 0; }
/* shops */
#modal-shop .modal-body { max-height: 70vh; overflow: auto; min-width: min(560px, 92vw); }
.shop-note { color: #eadfc2; font-size: 12.5px; margin: 0 0 8px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; margin-bottom: 10px; }
.shop-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(14,18,26,0.85); border: 1px solid rgba(212,163,75,0.25); }
.shop-row.muted { opacity: 0.5; }
.shop-icon { font-size: 18px; width: 22px; text-align: center; }
.shop-name { flex: 1; font-size: 12.5px; color: #f3ead2; }
.shop-qty { width: 64px; background: #0b0f16; color: #fff; border: 1px solid #5a4a2a; border-radius: 4px; padding: 2px 4px; }
.shop-craft { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* dialog & manual */
.dialog-text { font: italic 15px Georgia, serif; color: #f6e7b8; line-height: 1.5; max-width: 420px; }
.dialog-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.manual-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; max-height: 64vh; overflow: auto; }
.manual-keys kbd { justify-self: end; padding: 2px 8px; border-radius: 4px; background: #f2d58a; color: #2a1d0c; font: 700 12px monospace; white-space: nowrap; }
.manual-keys span { color: #eadfc2; font-size: 13px; }
/* story quests */
.story-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.story-level { color: #fbe38f; font-weight: 700; font-size: 13px; }
.quest-row.story { border-left: 3px solid #c9a24a; padding-left: 8px; }
.quest-row.story.active { border-left-color: #fbe38f; }
.quest-row.story.done { opacity: 0.6; }
.quest-hint { font-size: 11.5px; color: #c9b98f; }
.quest-xp { font-size: 11px; color: #9fcdf2; margin-left: 8px; }
.quest-row.story-track .quest-head { color: #7a4a10; }
.skill-card.life-skill .skill-multiplier-badge { background: rgba(127,212,168,0.18); color: #c9f5da; }
.audio-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.audio-status { font-size: 12px; color: #c9b98f; }
/* Item pictures cut from textures/icons_rpg.jpeg */
.inv-slot img.inv-icon { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px rgba(212,163,75,0.35); }
.shop-row img.shop-icon { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; }
.equip-item-icon img.item-picture { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; vertical-align: middle; }

/* Player profile window and the creation-form profile fields */
#modal-profile { width: min(460px, 94vw); }
.profile-card { display: flex; flex-direction: column; gap: 8px; color: #e8e2d0; font-size: 14px; }
.profile-character { font-size: 18px; font-weight: bold; color: var(--gold-light); }
.profile-rows { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; margin: 0; }
.profile-rows dt { color: var(--gold-primary); }
.profile-rows dd { margin: 0; overflow-wrap: anywhere; }
.profile-rows dd.empty, .profile-bio.empty { color: #7d8597; font-style: italic; }
.profile-card h3 { margin: 6px 0 0; font-size: 14px; color: var(--gold-primary); }
.profile-bio { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto; }
.profile-note { margin: 0; color: #9aa3b5; font-size: 12px; }
.profile-card label { display: flex; flex-direction: column; gap: 3px; color: var(--gold-primary); }
.profile-card input, .profile-card textarea, .profile-fields input, .profile-fields textarea { background: #10182a; color: #e8e2d0; border: 1px solid var(--gold-dark); border-radius: 4px; padding: 6px; font: inherit; resize: vertical; }
.profile-buttons { display: flex; gap: 8px; }
.profile-fields { border: 1px solid var(--gold-dark); border-radius: 6px; padding: 6px 10px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.profile-fields legend { color: var(--gold-primary); font-size: 12px; padding: 0 6px; }
.profile-fields small { color: #7d8597; }

/* System Menu pictures (cut from Sprite Sheets/system_menu.png by scripts/build_menu_icons.py) */
.menu-icon { display: inline-flex; align-items: center; justify-content: center; }
.menu-icon img { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; }
.system-small .menu-icon img { width: 24px; height: 24px; }
.menu-icon.off img { filter: grayscale(1) brightness(0.6); }

/* Connection light (bulb icons: blue good, green fair, red poor) and the sign-in "Newborn light" */
.conn { display: inline-flex; align-items: center; gap: 4px; }
.conn-bulb { width: 18px; height: 18px; object-fit: contain; }
.conn.good .conn-bulb { filter: drop-shadow(0 0 4px #4a9bff); } .conn.fair .conn-bulb { filter: drop-shadow(0 0 4px #4ade70); } .conn.poor .conn-bulb { filter: drop-shadow(0 0 4px #ff5a4a); }
.system-status .conn.good { color: #8fc4ff; } .system-status .conn.fair { color: #8fe6a3; } .system-status .conn.poor { color: #ff8a7a; } .conn.off { color: #8b93a6; }
.start-conn { margin: 4px 0 0; font-size: 12px; justify-content: center; color: #cfd6e6; }
.start-conn.good { color: #8fc4ff; } .start-conn.fair { color: #8fe6a3; } .start-conn.poor { color: #ff8a7a; }
.start-conn .conn-bulb { width: 22px; height: 22px; }
.auth-badge { display: flex; justify-content: center; margin: 0 0 4px; }
.auth-light { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255, 200, 100, 0.6)); animation: auth-glow 3.2s ease-in-out infinite; }
@keyframes auth-glow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 200, 100, 0.45)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(255, 215, 130, 0.85)); } }

/* Illustrated hotbar sprites: one unchanged atlas shared with the native client. */
.hotbar-frame .slot-icon[data-hotbar-icon] {
    position: absolute; inset: 1px; border-radius: 5px;
    background-image: url('../icons/hotbar_atlas.png'); background-size: 400% 200%;
    background-repeat: no-repeat; pointer-events: none;
}
.slot-icon[data-hotbar-icon="calm"] { background-position: 0% 0%; }
.slot-icon[data-hotbar-icon="swing"] { background-position: 33.333333% 0%; }
.slot-icon[data-hotbar-icon="stab"] { background-position: 66.666667% 0%; }
.slot-icon[data-hotbar-icon="bolt"] { background-position: 100% 0%; }
.slot-icon[data-hotbar-icon="eat"] { background-position: 0% 100%; }
.slot-icon[data-hotbar-icon="torch"] { background-position: 33.333333% 100%; }
.slot-icon[data-hotbar-icon="use"] { background-position: 66.666667% 100%; }
.slot-icon[data-hotbar-icon="bag"] { background-position: 100% 100%; }
.hotbar-frame .slot-hotkey { z-index: 1; text-shadow: 0 1px 3px #000, 0 0 4px #000; }
.hotbar-frame .slot-name-sub { position: absolute; bottom: 1px; z-index: 1; color: #a9d9e6; text-shadow: 0 1px 3px #000, 0 0 4px #000; }

/* View button on the compass ring: isometric -> third person -> first person */
.minimap-view { position: absolute; bottom: -6px; right: -6px; z-index: 2; min-width: 54px; height: 26px; padding: 0 8px; border-radius: 13px;
  background: linear-gradient(180deg, #4a3923, #2a1f12); color: var(--hud-gold-light); border: 2px solid var(--hud-gold); font-size: 12px; font-weight: 700; cursor: pointer; }
.minimap-view:hover { filter: brightness(1.25); }

/* 3.3 Social tab */
#modal-social .social-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#modal-social .social-tab.active { outline: 2px solid #f2d58a; }
#modal-social .social-row { display: flex; gap: 6px; margin: 6px 0; }
#modal-social .social-input { flex: 1; min-width: 0; padding: 6px 8px; background: rgba(0,0,0,0.35); color: #f4ead2; border: 1px solid #8a6d3b; border-radius: 4px; font: inherit; }
#modal-social textarea.social-input { width: 100%; box-sizing: border-box; margin: 6px 0; resize: vertical; }
#modal-social .social-friend { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#modal-social .social-friend .social-name { flex: 1; font-weight: bold; }
#modal-social .social-friend .social-where { opacity: 0.75; font-size: 0.85em; min-width: 120px; }
#modal-social .social-friend .social-dot { color: #7a7a7a; }
#modal-social .social-friend.online .social-dot { color: #6fe06f; }
.telepathy-author { color: #c9a8ff; }
#modal-profile .profile-buttons { flex-wrap: wrap; margin-top: 10px; }

/* 3.4 spell bar and target alignment */
#spell-bar { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: none; gap: 6px; z-index: 6; pointer-events: auto; }
#spell-bar.show { display: flex; }
#spell-bar .spell-btn { position: relative; width: 46px; height: 46px; border-radius: 8px; border: 2px solid #8a6d3b; background: rgba(20,14,8,0.82); color: #fff; font-size: 22px; cursor: pointer; }
#spell-bar .spell-btn kbd { position: absolute; left: 2px; top: 1px; font-size: 10px; color: #f2d58a; }
#spell-bar .spell-btn em { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-style: normal; color: #cfe8ff; }
.target-evil { color: #ff9c92; }
.target-good { color: #8fe89a; }

/* 3.7 Undogrownd shooting gallery */
.gallery-hud { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: none; padding: 8px 18px; background: rgba(12,9,6,0.78); color: #ffe6a0; font: bold 18px Arial, sans-serif; letter-spacing: 1px; border: 1px solid #8a6d3b; border-radius: 6px; z-index: 12; pointer-events: none; }
.gallery-hud.show { display: block; }
.gallery-cross { position: fixed; left: 50%; top: 50%; width: 0; height: 0; display: none; z-index: 30; pointer-events: none; }
.gallery-cross.show { display: block; }
.gallery-cross i { position: absolute; background: #ff4433; box-shadow: 0 0 3px #000; }
.gallery-cross i:nth-child(1) { left: -16px; top: -1px; width: 11px; height: 3px; }
.gallery-cross i:nth-child(2) { left: 6px; top: -1px; width: 11px; height: 3px; }
.gallery-cross i:nth-child(3) { left: -1px; top: -16px; width: 3px; height: 11px; }
.gallery-cross i:nth-child(4) { left: -1px; top: 6px; width: 3px; height: 11px; }
#modal-prizes .shop-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* 3.7 Bestiary */
#modal-bestiary .bestiary-body { display: grid; grid-template-columns: 200px 1fr; gap: 12px; max-width: 760px; }
#modal-bestiary .bestiary-list { display: flex; flex-direction: column; gap: 4px; }
#modal-bestiary .bestiary-row.active { outline: 2px solid #f2d58a; }
#modal-bestiary .bestiary-row.unseen { opacity: 0.7; }
#modal-bestiary .bestiary-scry { grid-column: 1 / -1; }

#modal-dungeonary { width: min(920px, 96vw); background: #dcd0aa; color: #352716; }
#modal-dungeonary .modal-header { background: #43311e; color: #f6e8be; }
.dungeonary-book { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
.dungeonary-list { display: flex; flex-direction: column; gap: 6px; border-right: 2px solid #99805a; padding-right: 14px; }
.dungeonary-list .active { outline: 2px solid #66503b; }
.dungeonary-page p { line-height: 1.5; }
.dungeonary-picture canvas { width: 100%; height: auto; border-radius: 6px; }
.dungeonary-note { padding: 0 20px 16px; font-size: .85rem; }
@media(max-width: 650px) { .dungeonary-book { grid-template-columns: 1fr; } .dungeonary-list { border-right: 0; max-height: 120px; overflow-y: auto; } }

/* 3.14 Editor Mode 4: the arrow's HUD, the panel's fly bar and the teleport map (web/js/editor_arrow.js) */
#editor-arrow-hud { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: min(880px, calc(100% - 20px)); z-index: 20;
    background: rgba(13, 15, 26, 0.86); border: 1px solid #ffc740; border-radius: 8px; padding: 8px 12px; pointer-events: none;
    font-family: var(--font-ui); color: #ececec; font-size: 12px; line-height: 1.5; }
#editor-arrow-hud[hidden] { display: none; }
#editor-arrow-hud .ea-title { color: #ffd95a; font-weight: bold; font-size: 14px; letter-spacing: 0.04em; }
#editor-arrow-hud .ea-where.below { color: #9cd9ff; }
#editor-arrow-hud .ea-build { color: #9cffb3; }
#editor-arrow-hud .ea-build.misfit { color: #ffb873; }
#editor-arrow-hud .ea-keys { margin-top: 4px; color: #b8c2d6; font-size: 11px; }
.ea-panel-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0 10px; }
.ea-panel-bar .ea-version { color: var(--gold-light); font-size: 12px; }
#editor-arrow-map { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); z-index: 80; display: none; }
#editor-arrow-map.visible { display: flex; }
#editor-arrow-map[hidden] { display: none; }
.ea-map-card { display: flex; flex-direction: column; width: 100%; padding: 14px 16px; gap: 10px; color: var(--text-main); overflow: auto; }
.ea-map-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ea-map-title { color: var(--gold-light); font-weight: bold; font-size: 16px; }
.ea-map-help { color: var(--text-muted); font-size: 12px; flex: 1; }
.ea-map-body { display: flex; gap: 16px; flex-wrap: wrap; }
.ea-map-canvas { width: min(560px, 100%); aspect-ratio: 1; border: 1px solid var(--gold-dark); border-radius: 50%; cursor: crosshair; background: #0a0d14; }
.ea-map-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.ea-map-filter { color: var(--text-muted); font-size: 12px; }
.ea-map-list { display: flex; flex-direction: column; gap: 2px; }
.ea-map-row { display: flex; align-items: center; gap: 8px; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid transparent;
    color: var(--text-main); border-radius: 4px; padding: 3px 6px; font-size: 12px; cursor: pointer; }
.ea-map-row:hover { border-color: var(--gold-primary); background: rgba(212,163,75,0.15); }
.ea-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ea-map-page { color: var(--text-muted); font-size: 11px; padding-top: 4px; }

.target-tools{display:flex;align-items:center;gap:3px;margin-top:4px}.target-tools[hidden]{display:none}.target-tools button{font-size:11px;padding:3px 6px}.examination-icon{object-fit:contain;vertical-align:middle;border-radius:5px}.editor-card-object>.examination-icon{position:absolute;left:4px;top:4px;width:40px;height:40px}.editor-card-object{position:relative}
.death-panel{position:fixed;z-index:2000;left:50%;bottom:100px;transform:translateX(-50%);width:min(560px,90vw);padding:28px;background:rgba(8,22,38,.98);border:2px solid #97d9ff;border-radius:12px;color:#d9f0ff;box-shadow:0 0 60px #4797c966;text-align:center}.death-panel[hidden]{display:none}.death-panel button{margin:8px;padding:12px}

/* the XP meter: one readable line inside the bar (the level sits on the crest badge, the full line is the tooltip) */
.bar-row .stat-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; color: #fff;
    -webkit-text-stroke: 0.2px #000; text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 3px #000; z-index: 1; letter-spacing: 0.2px; }
.bar-row .xp-wrapper .stat-bar-text { color: #fffbe8; }

/* the world Map */
.world-map-modal { width: min(980px, 96vw); max-height: 94vh; }
.world-map-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
#world-map-canvas { width: min(640px, 90vw); height: auto; aspect-ratio: 1; border: 1px solid #c9a24a; border-radius: 4px; background: #14110d; }
.world-map-legend { flex: 1; min-width: 200px; font-size: 12px; color: #e8dcc0; }
.world-map-legend h4 { margin: 6px 0 4px; color: #f2cc59; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.world-map-legend div { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.world-map-legend i { width: 12px; height: 12px; border: 1px solid #000; display: inline-block; flex: none; }
.world-map-legend i.dot { width: 8px; height: 8px; margin: 0 2px; }
.world-map-legend i.coast { height: 2px; border: 0; background: #f2cc59; }
.world-map-legend .found { color: #a8f0a8; font-weight: 700; margin-top: 8px; }
.world-map-legend .you { color: #ff9a8c; }
.map-icon { font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

.play-counts { margin: 12px 0 18px; padding: 12px; border: 1px solid #c8a86855; border-radius: 10px; background: #10201d88; }
.play-counts h3 { margin: 0 0 10px; color: #ebd6a1; font-size: 1rem; }
.play-counts dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(76px,1fr)); gap: 8px; margin: 0; }
.play-counts dl div { text-align: center; }
.play-counts dt { font-size: .75rem; color: #c4c8bd; }
.play-counts dd { margin: 4px 0 0; font-size: 1.2rem; color: #fff1c7; font-variant-numeric: tabular-nums; }
.play-counts p { margin: 10px 0 0; font-size: .7rem; line-height: 1.4; color: #b8bcae; }