/* ==========================================================================
   ⚠️ TYPOGRAPHY SCALE - ALWAYS USE var(--fs-XXX) ⚠️
   Hardcoded font-size (e.g., font-size: 14px) bypasses the user's font size
   setting. See AGENTS.md section 13 for the full scale table.
   ========================================================================== */

/* Font loading is handled in index.html (Google Sans for Latin, M PLUS 1 for Japanese). */

:root {
    --bg-dark: #1a1612;
    --bg-card: rgba(240, 230, 211, 0.06);
    --border-color: rgba(201, 168, 76, 0.25);
    --text-primary: #e8ddd0;
    --text-secondary: #a09080;
    
    --primary-color: #c9a84c;
    
    --success-color: #7a9e5c;
    --danger-color: #8b2020;
    --warning-color: #c9a84c;
    --accent-purple: #8e6b9e;

    /* Combat log color tokens (light-mode readable variants defined in body.light-mode) */
    --log-color-heal: #00b894;          /* auto-heal, monster heal */
    --log-color-attack-player: #2ecc71; /* player damage, poison start */
    --log-color-attack-enemy: #e74c3c;  /* enemy damage, bleed start */
    --log-color-thorns: #e67e22;        /* thorns reflect, burn start */
    --log-color-crit: #f1c40f;          /* crit hit, revive, dungeon clear */
    --log-color-victory: #f39c12;       /* monster defeated */
    --log-color-defeat: #c0392b;        /* player death */

    /* UI semantic color tokens (light-mode readable variants defined in body.light-mode) */
    --color-buff-purple: #9b59b6;   /* recipe buff descriptions */
    --color-error-red: #e53935;     /* skilltree lock warnings */
    --color-jewel-green: #00e676;   /* jewel name emphasis */
    --color-link-blue: #3498db;     /* farming shop link */

    /* --font-title: Latin display first, M PLUS 1 as Japanese fallback. */
    --font-title: 'Google Sans', 'M PLUS 1', sans-serif;
    /* --font-body: M PLUS 1 for Japanese-dominant content, Google Sans for Latin fallback. */
    --font-body: 'M PLUS 1', 'Google Sans', sans-serif;

    /* Typography scale (base values for "Large" / 1.2x baseline) */
    --fs-2xs:  10px;  /* 8-9px equivalent */
    --fs-xs:   12px;  /* 10-11px equivalent */
    --fs-sm:   14px;  /* 12-13px equivalent */
    --fs-base: 16px;  /* 14-15px equivalent */
    --fs-md:   19px;  /* 16-18px equivalent */
    --fs-lg:   22px;  /* 20-22px equivalent */
    --fs-xl:   26px;  /* 24-25px equivalent */
    --fs-2xl:  30px;  /* 26-28px equivalent */
    --fs-3xl:  34px;  /* 32px+ equivalent */
    
    --transition-speed: 0.25s;

    /* Sidebar default width (single source of truth) */
    --sidebar-width: 320px;

    /* Button specific variables */
    --bg-button: #b8943e;
    --text-button: var(--text-primary);
    --bg-button-hover: #c9a84c;
    --bg-button-active: #7a2a2a;
    --bg-button-disabled: rgba(255, 255, 255, 0.05);
    --text-button-disabled: rgba(255, 255, 255, 0.2);
    --border-button-disabled: rgba(255, 255, 255, 0.05);

    /* Brutalist button shared tokens (DRY across 3 class systems) */
    --brutal-shadow: #000000;
    --brutal-shadow-primary: #6a4e0a;
    --brutal-shadow-danger: #4a1010;
    --brutal-bg-dark: #1a1a1a;
    --brutal-chip-border: #0a1220;
    --brutal-chip-shadow: #0a1220;
    --brutal-group-border: #0a1a1e;
    --brutal-group-shadow: #0a0a0a;
    --brutal-group-active-bg: #2a4a4e;
    --brutal-group-active-border: #4a8a8e;
    --brutal-gold-bg: #8a6e1a;
    --brutal-gold-border: #6a4e0a;
    --brutal-red-bg: #6a2020;
    --brutal-red-border: #4a1010;

    /* Light-mode Brutalist palette — bright variants for parchment background */
    --brutal-bg-light: #f0ead6;        /* light parchment */
    --brutal-bg-light-hover: #e0d8b8;  /* slightly darker on hover */
    --brutal-text-light: #1a1a1a;      /* dark text on light bg */
    --brutal-primary-light: #f4d76e;   /* bright gold */
    --brutal-primary-light-hover: #e8c850;
    --brutal-danger-light: #d65a5a;    /* bright red */
    --brutal-danger-light-hover: #c64a4a;
    --brutal-success-light: #9bbe7b;   /* bright green */
    --brutal-success-light-hover: #8aae6c;

    /* ==========================================================================
       Global Brutalist design tokens — applied across the whole site
       (sidebar, header, cards, modals, tooltips, etc.) for site-wide consistency.
       - Pure 0px corners, hard offset shadows, thick solid borders.
       - No glassmorphism / no gradient surfaces in the global brutalist layer.
       ========================================================================== */
    --brutal-border-width: 3px;
    --brutal-border-width-lg: 4px;
    --brutal-border-color: #000000;
    --brutal-shadow-offset-sm: 3px;
    --brutal-shadow-offset-md: 5px;
    --brutal-shadow-offset-lg: 6px;
    --brutal-surface-dark: #141414;      /* elevated surface in dark mode */
    --brutal-surface-darker: #0a0a0a;   /* sunken surface in dark mode */
    --brutal-surface-light: #f5f5f0;    /* elevated surface in light mode */
    --brutal-surface-lighter: #ffffff;  /* base surface in light mode */
    --brutal-text-light-on-dark: #f5f5f0;  /* near-white text on dark surface */
    --brutal-text-dark-on-light: #0a0a0a;  /* near-black text on light surface */
    --brutal-text-muted-on-dark: #b0b0b0;
    --brutal-text-muted-on-light: #3a3a3a;
    --brutal-accent-gold: #ffd700;       /* pure high-contrast gold */
    --brutal-accent-red: #ff3030;        /* pure high-contrast red */
    --brutal-accent-green: #00d050;      /* pure high-contrast green */
    --brutal-accent-blue: #3b82f6;       /* pure high-contrast blue */
}

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

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    height: 100vh;
    overflow: hidden;
    font-weight: 400;
}

/* Parchment panel base style (replacing glassmorphism) */
.glass-panel {
    background: var(--bg-card);
    position: relative;
}

/* Layout Framework */
.app-container {
    position: relative; /* Context for absolute positioned sidebar-resizer */
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar Styling - Brutalist stacked panels with thick black borders */
.sidebar {
    background: var(--brutal-surface-dark);
    border-right: var(--brutal-border-width-lg) solid var(--brutal-border-color);
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    overflow-y: auto;
}

/* Sidebar resize handle */
.sidebar-resizer {
    position: absolute;
    top: 0;
    left: calc(var(--sidebar-width) - 4px); /* Positioned relative to app-container */
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 100; /* Place on top of everything */
    user-select: none;
    transition: background 0.15s ease;
}

.sidebar-resizer:hover,
.sidebar-resizer.resizing {
    background: rgba(255, 215, 0, 0.35); /* Glow matching brutal accent gold */
}

/* State applied during resize operation */
body.resizing {
    user-select: none !important;
    cursor: col-resize !important;
}


.logo-container {
    margin-bottom: 32px;
    text-align: center;
}

.logo-title {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-2xl);
    letter-spacing: 3px;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
}

.logo-subtitle {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 6px;
    font-weight: 500;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--brutal-surface-darker);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
    /* position context and clip for the ::after EXP progress bar */
    position: relative;
    overflow: hidden;
}

/* Per-skill EXP progress bar: thin overlay at bottom edge, no height impact.
   Uses a pseudo-element to avoid adding DOM nodes and reflow. */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    width: var(--exp-pct, 0%);
    background: var(--exp-color, rgba(201, 168, 76, 0.85));
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-shadow: 0 0 6px var(--exp-color, rgba(201, 168, 76, 0.4));
}

/* Skill-specific colours reuse the existing .progress-* palette */
.nav-link[data-target="mining"]    { --exp-color: #c9a84c; }
.nav-link[data-target="logging"]   { --exp-color: #7a9e5c; }
.nav-link[data-target="smithing"]  { --exp-color: #cd7f32; }
.nav-link[data-target="farming"]   { --exp-color: #5a9e7a; }
.nav-link[data-target="ranching"]  { --exp-color: #b8943e; }
.nav-link[data-target="gathering"] { --exp-color: #6b8e4e; }
.nav-link[data-target="cooking"]   { --exp-color: #8b5a3a; }
.nav-link[data-target="brewing"]   { --exp-color: #a85a4a; }
.nav-link[data-target="trading"]   { --exp-color: #8e6b9e; }
.nav-link[data-target="combat"]    { --exp-color: #8b2020; }

.nav-link:hover {
    color: var(--brutal-text-light-on-dark);
    background: var(--brutal-surface-dark);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.nav-link.active {
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.nav-icon {
    font-size: var(--fs-lg);
}

/* --- App Version Badge --- */
.logo-version {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    font-size: var(--fs-xs);
    font-weight: 800;
    font-family: var(--font-title);
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    border-radius: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.2s ease;
}
.logo-version:hover {
    background: var(--brutal-border-color);
    color: var(--brutal-bg-light);
}

.nav-badge {
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: 800;
    padding: 2px 8px;
    background: var(--brutal-surface-dark);
    color: var(--text-primary);
    border: 2px solid var(--brutal-border-color);
    transition: background var(--transition-speed) ease;
}

.nav-link:hover .nav-badge {
    color: var(--brutal-text-light-on-dark);
    background: var(--brutal-surface-light);
    color: var(--brutal-text-dark-on-light);
}

.nav-link.active .nav-badge {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
}

.nav-badge.has-points {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

/* Sidebar categories — Brutalist: solid black bar with high-contrast text */
.nav-category {
    display: block;
    margin: 0.75rem 0 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-base, 16px);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    list-style: none;
    cursor: default;
    user-select: none;
}

body.light-mode .nav-category {
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
}

/* Sidebar Footer Actions */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: var(--brutal-border-width) solid var(--brutal-border-color);
}

.footer-btn {
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
    padding: 8px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: var(--brutal-shadow-offset-sm) var(--brutal-shadow-offset-sm) 0 0 var(--brutal-border-color);
}

.footer-btn:hover {
    background: var(--brutal-surface-dark);
    color: var(--brutal-accent-gold);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

.reset-btn {
    color: var(--brutal-accent-red);
    border-color: var(--brutal-border-color);
}

.reset-btn:hover {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
}

/* Main Display Area */
.main-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top Dashboard Header */
.dashboard-header {
    background: var(--brutal-surface-dark);
    border-bottom: var(--brutal-border-width-lg) solid var(--brutal-border-color);
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.header-active-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease;
}

.header-active-status.clickable {
    cursor: pointer;
}

.header-active-status.clickable:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.15);
}

.header-active-status.clickable:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.95);
}

.active-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.status-value {
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-value.glowing {
    color: var(--brutal-accent-gold);
}

.header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

.header-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
    padding: 6px 12px;
    font-size: var(--fs-md);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.gold-stat {
    color: var(--brutal-accent-gold);
}

/* Tab Display Panels */
.tab-content {
    flex-grow: 1;
    padding: 32px;
    overflow-y: auto;
    display: none;
    height: calc(100vh - 73px);
    background: var(--bg-dark);
}

.tab-content.active {
    display: block;
}

/* Tab Title */
.tab-header {
    margin-bottom: 24px;
    border-bottom: var(--brutal-border-width) solid var(--brutal-border-color);
    padding-bottom: 12px;
}

.tab-header h1 {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-3xl);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.tab-header p {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-weight: 600;
}

/* Aethersted town map */
.aethersted-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px;
    align-items: start;
}

.aethersted-map-panel {
    padding: 18px;
    border-color: #6d4826;
    background:
        radial-gradient(circle at 12% 18%, rgba(112, 63, 24, 0.18), transparent 22%),
        radial-gradient(circle at 88% 12%, rgba(112, 63, 24, 0.14), transparent 20%),
        radial-gradient(circle at 80% 92%, rgba(112, 63, 24, 0.16), transparent 24%),
        linear-gradient(135deg, #ead6a8 0%, #d7b982 48%, #b8864f 100%);
    box-shadow:
        0 18px 28px rgba(0, 0, 0, 0.35),
        inset 0 0 0 2px rgba(255, 244, 204, 0.45),
        inset 0 0 34px rgba(75, 40, 14, 0.34);
}

.aethersted-detail-panel {
    padding: 16px;
}

.aethersted-map-shell {
    position: relative;
    overflow: visible;
    padding: 16px;
    border: 3px double #5b371b;
    background:
        linear-gradient(90deg, rgba(87, 48, 18, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(87, 48, 18, 0.06) 1px, transparent 1px),
        linear-gradient(145deg, #f1dfb9 0%, #dec18a 50%, #c49357 100%);
    background-size: 34px 34px, 34px 34px, auto;
    box-shadow:
        inset 0 0 0 6px rgba(95, 54, 22, 0.18),
        inset 0 0 42px rgba(78, 42, 18, 0.36),
        0 8px 18px rgba(39, 22, 10, 0.28);
}

.aethersted-map-shell::before,
.aethersted-map-shell::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    pointer-events: none;
    z-index: 3;
}

.aethersted-map-shell::before {
    top: -8px;
    left: -8px;
    border-top: 4px solid rgba(83, 45, 17, 0.65);
    border-left: 4px solid rgba(83, 45, 17, 0.65);
    box-shadow: -8px -8px 18px rgba(72, 36, 10, 0.2);
}

.aethersted-map-shell::after {
    right: -8px;
    bottom: -8px;
    border-right: 4px solid rgba(83, 45, 17, 0.65);
    border-bottom: 4px solid rgba(83, 45, 17, 0.65);
    box-shadow: 8px 8px 18px rgba(72, 36, 10, 0.2);
}

.aethersted-map-image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
    border: 2px solid rgba(63, 36, 17, 0.68);
    filter: sepia(0.12) contrast(1.04);
    box-shadow:
        0 0 0 6px rgba(255, 239, 194, 0.28),
        0 12px 24px rgba(54, 30, 12, 0.32);
}

.aethersted-hotspots {
    position: absolute;
    inset: 16px;
    z-index: 2;
}

.aethersted-hotspot {
    position: absolute;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid rgba(42, 31, 22, 0.92);
    border-radius: 50%;
    background: #c58a2e;
    color: #231a13;
    font-family: var(--font-title);
    font-size: var(--fs-sm);
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 3px rgba(243, 218, 150, 0.36),
        2px 2px 0 rgba(0, 0, 0, 0.45);
    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease,
        z-index 0.15s ease;
}

.aethersted-hotspot:hover,
.aethersted-hotspot:focus-visible {
    background: #ffd75f;
    transform: translate(-50%, -50%) scale(1.14);
    box-shadow:
        0 0 0 5px rgba(243, 218, 150, 0.46),
        3px 3px 0 rgba(0, 0, 0, 0.55);
    z-index: 5;
}

.aethersted-hotspot.active {
    background: #1f9f91;
    color: #f7fff7;
    transform: translate(-50%, -50%) scale(1.14);
    box-shadow:
        0 0 0 5px rgba(31, 159, 145, 0.42),
        3px 3px 0 rgba(0, 0, 0, 0.55);
    z-index: 5;
}

.aethersted-hotspot-icon {
    display: block;
    font-size: var(--fs-base);
    line-height: 1;
    pointer-events: none;
}

.aethersted-hotspot-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    display: block;
    width: max-content;
    max-width: 132px;
    padding: 5px 8px;
    border: 2px solid rgba(42, 31, 22, 0.85);
    background: rgba(238, 219, 174, 0.96);
    color: #231a13;
    font-size: var(--fs-xs);
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.36);
}

.aethersted-hotspot:hover .aethersted-hotspot-label,
.aethersted-hotspot:focus-visible .aethersted-hotspot-label,
.aethersted-hotspot.active .aethersted-hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
}

.aethersted-detail-panel {
    position: sticky;
    top: 16px;
}

.aethersted-detail-heading {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.aethersted-detail-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    background: var(--brutal-surface-darker);
    font-size: var(--fs-xl);
    flex: 0 0 auto;
}

.aethersted-detail-heading h2 {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-family: var(--font-title);
    font-size: var(--fs-xl);
    font-weight: 900;
}

.aethersted-detail-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.5;
}

.aethersted-action-list {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.aethersted-action {
    width: 100%;
    min-height: 42px;
    font-size: var(--fs-base);
}

.aethersted-request-section h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-family: var(--font-title);
    font-size: var(--fs-lg);
}

.aethersted-request-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aethersted-request,
.aethersted-empty {
    padding: 12px;
    border: 2px solid rgba(201, 168, 76, 0.45);
    background: rgba(0, 0, 0, 0.18);
}

.aethersted-request-head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.aethersted-request-rank {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    border: 2px solid var(--brutal-border-color);
    background: var(--brutal-accent-gold);
    color: #1f160e;
    font-family: var(--font-title);
    font-size: var(--fs-sm);
    font-weight: 900;
}

.aethersted-request-name {
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 800;
}

.aethersted-request-meta {
    display: grid;
    gap: 4px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.aethersted-empty {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    font-weight: 600;
}

@media (max-width: 1100px) {
    .aethersted-layout {
        grid-template-columns: 1fr;
    }

    .aethersted-detail-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .aethersted-hotspot {
        width: 32px;
        height: 32px;
    }

    .aethersted-hotspot-label {
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Actions components buttons - embossed metal clasp style */
.action-btn {
    background: var(--bg-button);
    color: var(--text-button);
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    font-size: var(--fs-base);
    width: 100%;
    transition: background 0.2s ease;
    letter-spacing: 0.5px;
    outline: 1px solid rgba(201, 168, 76, 0.4);
}

.action-btn:hover:not(.disabled) {
    background: var(--bg-button-hover);
    outline-color: rgba(201, 168, 76, 0.7);
}

.action-btn.active {
    background: var(--bg-button-active);
    outline-color: rgba(139, 32, 32, 0.6);
}

.action-btn.disabled, button:disabled {
    background: var(--bg-button-disabled);
    color: var(--text-button-disabled);
    cursor: not-allowed;
    outline: 1px solid var(--border-button-disabled);
}

.danger-btn {
    background: #8b2020;
    outline-color: rgba(139, 32, 32, 0.6);
}

.danger-btn:hover:not(.disabled) {
    background: #a53030;
}

/* Progress bar outer structure */
.progress-bar-outer {
    width: 100%;
    height: 10px;
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    overflow: hidden;
    margin: 12px 0;
}

.progress-bar-inner {
    height: 100%;
    width: 0%;
    background: var(--brutal-accent-gold);
    transition: width 0.08s linear;
}

/* ==========================================================================
   Brutalist Card Surface — shared across all card types
   ========================================================================== */
.mining-card,
.smith-card,
.logging-card,
.gathering-card,
.trading-card,
.ranching-card,
.cooking-card,
.shop-card,
.farming-card,
.recipe-card,
.monster-card,
.dungeon-card,
.plot-card,
.cooking-station,
.coop-upgrade,
.upgrade-card,
.action-card,
.inventory-slot,
.equipment-panel,
.glass-panel,
.card,
.panel {
    background: var(--brutal-surface-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    border-radius: 0;
    box-shadow: var(--brutal-shadow-offset-md) var(--brutal-shadow-offset-md) 0 0 var(--brutal-border-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ==========================================================================
   MINING TAB
   ========================================================================== */
.mining-grid,
.gathering-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.mining-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
}

.mining-card:hover:not(.locked) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-border-color);
}

.mining-card.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.mining-card.locked {
    opacity: 0.5;
}

.card-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-weight: 900;
    color: var(--brutal-text-light-on-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--fs-md);
}

.mining-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.ore-dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 2px solid var(--brutal-border-color);
}

.ore-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.owned-count {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    padding: 3px 8px;
    font-weight: 800;
}

.mining-card-body {
    display: flex;
    flex-direction: column;
}

.mining-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 600;
}

.mining-stat-row span:last-child {
    color: var(--text-primary);
    font-weight: 800;
}

/* ==========================================================================
   SMITHING TAB
   ========================================================================== */
.smithing-subnav,
.dungeon-subnav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 10px;
    background: var(--brutal-surface-darker);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.subnav-btn {
    background: var(--brutal-surface-dark);
    color: var(--text-primary);
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs-md);
    transition: background 0.15s ease, transform 0.1s ease;
    border: 2px solid var(--brutal-border-color);
}

.subnav-btn:hover {
    background: var(--brutal-surface-darker);
    color: var(--brutal-accent-gold);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.subnav-btn.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.tier-select-container {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tier-select-container select {
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.smith-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.smith-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
}

.smith-card.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.smith-card.locked {
    opacity: 0.5;
}

.smith-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.smith-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ingredients-list {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    padding: 10px;
    font-size: var(--fs-sm);
    margin-bottom: 14px;
}

.ingredients-list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.smith-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.smith-stat-row span:last-child {
    color: var(--text-primary);
    font-weight: 600;
}

/* ==========================================================================
   INVENTORY & EQUIPMENT TAB — Premium Dark Fantasy Redesign
   ========================================================================== */

/* --- Rarity Shimmer Keyframes --- */
@keyframes shimmerRare {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes slotPulse {
    0%, 100% { box-shadow: 0 0 6px var(--glow-color, transparent); }
    50%      { box-shadow: 0 0 14px var(--glow-color, transparent); }
}

@keyframes dragPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(201, 168, 76, 0.4); }
    50%      { box-shadow: 0 0 20px rgba(201, 168, 76, 0.7); }
}

/* --- Inventory Layout --- */
.inventory-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
}

.inventory-grid-container {
    display: flex;
    flex-direction: column;
}

/* --- Sort Controls (pill-bar) --- */
.inventory-sort-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    background: var(--brutal-surface-darker);
    padding: 8px 14px;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.inventory-sort-controls .sort-label {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 4px;
}

.inventory-sort-controls .sort-btn {
    background: var(--brutal-surface-dark);
    color: var(--text-primary);
    padding: 5px 14px;
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
    border: 2px solid var(--brutal-border-color);
}

.inventory-sort-controls .sort-btn:hover {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 0 var(--brutal-border-color);
}

.inventory-sort-controls .sort-btn.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    font-weight: 900;
    border-color: var(--brutal-border-color);
    box-shadow: 2px 2px 0 0 var(--brutal-border-color);
}

/* --- Inventory Expansion --- */
.expand-slots-btn {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
    padding: 5px 14px;
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
    display: inline-flex;
    align-items: center;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.expand-slots-btn:hover {
    background: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
    transform: translate(-2px, -2px);
}

.expand-slots-btn:disabled {
    background: var(--brutal-surface-darker);
    color: var(--text-secondary);
    cursor: not-allowed;
    border: 2px solid var(--brutal-border-color);
    box-shadow: none;
    transform: none;
    opacity: 0.4;
}

.slots-info-label {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- Help Button --- */
.help-btn {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    font-size: var(--fs-md);
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, background 0.15s ease;
    border: 2px solid var(--brutal-border-color);
}

.help-btn:hover {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-gold);
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 0 var(--brutal-border-color);
}

/* --- Help Modal Content --- */
.help-modal-content {
    max-width: 500px;
}

.help-modal-content h3 {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-xl);
    margin-bottom: 20px;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: var(--brutal-border-width) solid var(--brutal-border-color);
    padding-bottom: 12px;
}

.help-section {
    margin-bottom: 16px;
    padding: 14px;
    background: var(--brutal-surface-darker);
    border-radius: 0;
    border: 2px solid var(--brutal-border-color);
    border-left: 6px solid var(--brutal-accent-gold);
}

.help-section h4 {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: var(--fs-md);
    margin-bottom: 8px;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.help-section p {
    font-size: var(--fs-base);
    color: var(--text-primary);
    line-height: 1.5;
}

/* --- Inventory Hint --- */
.inventory-hint {
    font-size: var(--fs-xs);
    color: var(--text-tertiary, rgba(255, 255, 255, 0.3));
    text-align: right;
    padding: 2px 6px 6px;
    user-select: none;
    letter-spacing: 0.3px;
}

/* --- Inventory Grid --- */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 12px;
}

/* --- Inventory Slot Base --- */
.inventory-slot {
    --glow-color: transparent;
    aspect-ratio: 1;
    background: var(--brutal-surface-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    padding: 6px 4px;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    border: 3px solid var(--brutal-border-color);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 2px 2px 0 0 var(--brutal-border-color);
}

/* Subtle inner highlight for non-empty slots */
.inventory-slot:not(.empty-slot)::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: none;
    pointer-events: none;
}

.inventory-slot:hover:not(.empty-slot) {
    background: var(--brutal-surface-darker);
    transform: translate(-2px, -2px) scale(1.04);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
    border-color: var(--brutal-accent-gold);
    z-index: 2;
}

/* --- Rarity Glow Classes --- */
.inventory-slot.rarity-common {
    --glow-color: transparent;
}

.inventory-slot.rarity-uncommon {
    --glow-color: transparent;
    border-color: var(--brutal-accent-green);
}

.inventory-slot.rarity-rare {
    --glow-color: transparent;
    border-color: var(--brutal-accent-blue);
}

.inventory-slot.rarity-epic {
    --glow-color: transparent;
    border-color: var(--brutal-accent-purple, #9b59b6);
}

.inventory-slot.rarity-epic::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: none;
    pointer-events: none;
}

.inventory-slot.rarity-legendary {
    --glow-color: transparent;
    border-color: var(--brutal-accent-gold);
}

.inventory-slot.rarity-legendary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: none;
    pointer-events: none;
}

/* --- Empty Slot --- */
.inventory-slot.empty-slot {
    cursor: default;
    background: var(--brutal-surface-darker);
    border: 3px dashed var(--brutal-border-color);
    box-shadow: none;
}

.inventory-slot.empty-slot:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--brutal-text-muted-on-dark);
}

/* --- Drag and Drop --- */
.inventory-slot.dragging {
    opacity: 0.35;
    transform: scale(0.92);
    filter: grayscale(0.5);
}

.inventory-slot.drag-over {
    background: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
    transform: translate(-2px, -2px) scale(1.05);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

.inventory-slot[draggable="true"] {
    cursor: grab;
}

.inventory-slot[draggable="true"]:active {
    cursor: grabbing;
}

/* --- Slot Icon --- */
.slot-icon {
    width: 40px;
    height: 40px;
    margin-bottom: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 0 var(--brutal-border-color));
    transition: transform 0.15s ease;
}

.inventory-slot:hover:not(.empty-slot) .slot-icon {
    transform: scale(1.1);
}

.slot-icon img.slot-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* --- Slot Name --- */
.slot-name {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 2px;
    transition: color 0.15s ease;
    text-transform: uppercase;
}

.inventory-slot:hover:not(.empty-slot) .slot-name {
    color: var(--brutal-accent-gold);
}

/* --- Shop Card Icon (shared) --- */
.shop-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.shop-card-icon .fas {
    font-size: var(--fs-xl);
}

/* --- Slot Quantity Badge --- */
.slot-qty {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    font-size: var(--fs-xs);
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 0;
    border: 2px solid var(--brutal-border-color);
    line-height: 1.2;
    min-width: 1.2em;
    text-align: center;
}

/* ==========================================================================
   EQUIPMENT PANEL — Brutalist
   ========================================================================== */
.equipment-panel {
    padding: 20px;
    border-radius: 0;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    background: var(--brutal-surface-dark);
    box-shadow: var(--brutal-shadow-offset-md) var(--brutal-shadow-offset-md) 0 0 var(--brutal-border-color);
}

.equipment-panel h2 {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-xl);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: var(--brutal-border-width) solid var(--brutal-border-color);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brutal-accent-gold);
}

.eq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.eq-slot {
    height: 72px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    border: 2px solid var(--brutal-border-color);
    background: var(--brutal-surface-dark);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.eq-slot:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

/* --- Empty Equipment Placeholder --- */
.eq-empty-placeholder {
    width: 100%;
    height: 100%;
    background: var(--brutal-surface-darker);
    border: 2px dashed var(--brutal-border-color);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.eq-slot:hover .eq-empty-placeholder {
    border-color: var(--brutal-accent-gold);
    background: var(--brutal-surface-dark);
}

.placeholder-icon {
    font-size: var(--fs-lg);
    opacity: 0.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.15s ease;
    color: var(--brutal-accent-gold);
}

.eq-slot:hover .placeholder-icon {
    opacity: 0.7;
}

.placeholder-icon .fas {
    font-size: inherit;
}

.placeholder-text {
    font-size: var(--fs-2xs);
    font-weight: 800;
    color: var(--text-primary);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Filled Equipment Container --- */
.eq-filled-container {
    width: 100%;
    height: 100%;
    background: var(--brutal-surface-darker);
    display: flex;
    align-items: center;
    padding: 8px 32px 8px 14px;
    gap: 10px;
    position: relative;
    border-radius: 0;
    transition: background 0.15s ease;
}

.eq-slot:hover .eq-filled-container {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.eq-icon {
    font-size: var(--fs-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.eq-icon .fas {
    font-size: var(--fs-xl);
    color: inherit;
}

.eq-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.unequip-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    cursor: pointer;
    font-size: var(--fs-xs);
    padding: 3px 6px;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.1s ease;
    border-radius: 0;
    border: 2px solid var(--brutal-border-color);
}

.eq-slot:hover .unequip-btn {
    opacity: 1;
}

.unequip-btn:hover {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-red);
    transform: translateY(-50%) translate(-1px, -1px);
}

/* ==========================================================================
   CHARACTER STATS — Brutalist
   ========================================================================== */
.stats-list {
    background: var(--brutal-surface-darker);
    padding: 16px;
    border-radius: 0;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.stats-list h3 {
    font-family: var(--font-title);
    font-size: var(--fs-md);
    margin-bottom: 14px;
    color: var(--brutal-accent-gold);
    letter-spacing: 0.05em;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brutal-border-color);
    text-transform: uppercase;
    font-weight: 900;
}

.stat-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    margin-bottom: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--brutal-border-color);
}

.stat-line:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.stat-line span:first-child {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.stat-line span:last-child {
    font-weight: 900;
    color: var(--brutal-accent-gold);
    font-family: var(--font-title);
    font-size: var(--fs-base);
}

/* ==========================================================================
   AUTO-HEAL SECTION
   ========================================================================== */
.auto-heal-section {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--brutal-surface-darker);
    border-radius: 0;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.auto-heal-section h3 {
    font-family: var(--font-title);
    font-size: var(--fs-md);
    margin-bottom: 8px;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 900;
}

.auto-heal-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-sm);
    color: var(--brutal-accent-green);
    padding: 6px 0;
    font-weight: 800;
    text-transform: uppercase;
}

.auto-heal-empty {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    opacity: 0.7;
    padding: 6px 0;
    font-weight: 700;
}

.auto-heal-clear-btn {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    border: 2px solid var(--brutal-border-color);
    padding: 4px 12px;
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-body);
    border-radius: 0;
    transition: transform 0.1s ease, background 0.15s ease;
}

.auto-heal-clear-btn:hover {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-red);
    transform: translate(-1px, -1px);
}

.auto-heal-threshold {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.auto-heal-threshold label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auto-heal-threshold input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--brutal-surface-dark);
    border: 2px solid var(--brutal-border-color);
    border-radius: 0;
    outline: none;
}

.auto-heal-threshold input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: var(--brutal-accent-gold);
    border: 2px solid var(--brutal-border-color);
    cursor: pointer;
}

/* Auto-Heal status in battle screen */
.auto-heal-status {
    font-size: var(--fs-xs);
    color: var(--brutal-accent-green);
    text-align: center;
    padding: 2px 0;
    min-height: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Modal Auto-Heal Button */
.modal-autoheal-btn {
    background: var(--brutal-accent-purple, #9b59b6);
    color: var(--brutal-text-light-on-dark);
    font-weight: 800;
    border: 2px solid var(--brutal-border-color);
    outline: none;
}

.modal-autoheal-btn:hover {
    background: #a07db0;
}

.modal-autoheal-unset-btn {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    font-weight: 800;
    border: 2px solid var(--brutal-border-color);
    outline: none;
}

.modal-autoheal-unset-btn:hover {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-red);
}

/* ==========================================================================
   ITEM TOOLTIP — Brutalist
   ========================================================================== */
.item-tooltip {
    position: fixed;
    z-index: 200;
    min-width: 220px;
    max-width: 300px;
    padding: 12px 14px;
    background: var(--brutal-surface-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    border-radius: 0;
    box-shadow: var(--brutal-shadow-offset-md) var(--brutal-shadow-offset-md) 0 0 var(--brutal-border-color);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.item-tooltip .tooltip-header {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-md);
    margin-bottom: 0;
    padding-bottom: 6px;
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* 8-direction black outline (cardinal + diagonal) for legibility on any background */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
        -1.4px -1.4px 0 #000,
         1.4px -1.4px 0 #000,
        -1.4px  1.4px 0 #000,
         1.4px  1.4px 0 #000,
         0 0 2px rgba(0, 0, 0, 0.85);
    border-bottom: 2px solid var(--brutal-accent-gold);
    color: var(--brutal-text-light-on-dark);
}

.item-tooltip .tooltip-type {
    font-size: var(--fs-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brutal-accent-gold);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brutal-border-color);
}

.item-tooltip .tooltip-qty {
    font-size: var(--fs-base);
    font-weight: 900;
    color: var(--brutal-accent-gold);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.item-tooltip .tooltip-desc {
    font-size: var(--fs-base);
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 8px;
    font-style: normal;
    font-weight: 600;
}

.item-tooltip .tooltip-stats {
    background: var(--brutal-surface-darker);
    padding: 8px 10px;
    border-radius: 0;
    margin-bottom: 8px;
    border: 2px solid var(--brutal-border-color);
}

.item-tooltip .tooltip-stat-line {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-base);
    margin-bottom: 4px;
}

.item-tooltip .tooltip-stat-line:last-child {
    margin-bottom: 0;
}

.item-tooltip .tooltip-stat-line span:first-child {
    color: var(--text-secondary);
}

.item-tooltip .tooltip-stat-line span:last-child {
    font-weight: 800;
    color: var(--brutal-accent-green);
    text-transform: uppercase;
}

.item-tooltip .tooltip-mods {
    background: var(--brutal-surface-darker);
    padding: 8px 10px;
    border-radius: 0;
    margin-bottom: 8px;
    border: 2px solid var(--brutal-border-color);
}

.item-tooltip .mod-section-label {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px dashed var(--brutal-border-color);
}

.item-tooltip .mod-section-label:not(:first-child) {
    margin-top: 6px;
}

.item-tooltip .mod-prefix {
    font-size: var(--fs-sm);
    color: #3498db;
    font-weight: 700;
    padding: 2px 0;
    line-height: 1.4;
}

.item-tooltip .mod-suffix {
    font-size: var(--fs-sm);
    color: #f1c40f;
    font-weight: 700;
    padding: 2px 0;
    line-height: 1.4;
}

.item-tooltip .tooltip-value {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--brutal-accent-gold);
    padding-top: 6px;
    border-top: 2px solid var(--brutal-border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   ITEM DETAIL MODAL — Brutalist
   ========================================================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);

    /* Centralize modal and enable scrolling */
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Force flex display when JS sets style.display = "block" */
.modal[style*="display: block"] {
    display: flex !important;
}

/* Ensure hidden state is honored when JS sets style.display = "none" */
.modal[style*="display: none"],
.modal[style*="display:none"] {
    display: none !important;
}

.modal-content {
    position: relative;
    margin: auto;
    width: 400px;
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--brutal-surface-dark);
    border: var(--brutal-border-width-lg) solid var(--brutal-border-color);
    border-radius: 0;
    box-shadow: var(--brutal-shadow-offset-lg) var(--brutal-shadow-offset-lg) 0 0 var(--brutal-border-color);
    animation: modalSlideIn 0.15s ease-out;
}

/* Sharp corners for inventory-related modals only */
#item-modal .modal-content,
#inventory-help-modal .modal-content {
    border-radius: 0;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.close-modal {
    position: absolute;
    right: 12px;
    top: 12px;
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    font-size: var(--fs-md);
    cursor: pointer;
    border: 2px solid var(--brutal-border-color);
    border-radius: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    line-height: 1;
}

/* Sharp corners for inventory-related modals only */
#item-modal .close-modal,
#inventory-help-modal .close-modal {
    border-radius: 0;
}

.modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#modal-item-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-xl);
    margin-bottom: 4px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* 8-direction black outline (cardinal + diagonal) for legibility on any background */
    text-shadow:
        -1.5px -1.5px 0 #000,
         1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
         1.5px  1.5px 0 #000,
        -2.1px -2.1px 0 #000,
         2.1px -2.1px 0 #000,
        -2.1px  2.1px 0 #000,
         2.1px  2.1px 0 #000,
         0 0 3px rgba(0, 0, 0, 0.85);
}

#modal-item-type {
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brutal-accent-gold);
    margin-bottom: 4px;
}

.modal-ilvl {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--brutal-accent-gold);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: var(--brutal-border-width) solid var(--brutal-border-color);
}

#modal-item-desc {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 16px;
    font-style: normal;
    font-weight: 600;
}

.modal-item-stats {
    background: var(--brutal-surface-darker);
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 0;
    border: 2px solid var(--brutal-border-color);
}

.modal-stat-line {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-sm);
    margin-bottom: 8px;
    padding: 2px 0;
    border-bottom: 1px dashed var(--brutal-border-color);
    font-weight: 700;
}

.modal-stat-line:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.modal-stat-line span:first-child {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modal-stat-line span:last-child {
    font-weight: 900;
    color: var(--brutal-accent-green);
    text-transform: uppercase;
}

#modal-item-value {
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    margin-bottom: 20px;
    padding: 8px 12px;
    border: 2px solid var(--brutal-border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#modal-item-mods .modal-mods {
    background: var(--brutal-surface-darker);
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 2px solid var(--brutal-border-color);
}

#modal-item-mods .mod-section-label {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px dashed var(--brutal-border-color);
}

#modal-item-mods .mod-section-label:not(:first-child) {
    margin-top: 6px;
}

#modal-item-mods .mod-prefix {
    font-size: var(--fs-sm);
    color: #3498db;
    font-weight: 700;
    padding: 2px 0;
    line-height: 1.4;
}

#modal-item-mods .mod-suffix {
    font-size: var(--fs-sm);
    color: #f1c40f;
    font-weight: 700;
    padding: 2px 0;
    line-height: 1.4;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-action-btn {
    padding: 11px 16px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
}

.modal-action-btn:hover {
    background: var(--brutal-surface-dark);
    border-color: var(--brutal-border-color);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.modal-equip-btn {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.modal-equip-btn:hover {
    background: var(--brutal-text-light-on-dark);
    color: var(--brutal-accent-gold);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

.modal-eat-btn {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.modal-eat-btn:hover {
    background: var(--brutal-text-light-on-dark);
    color: var(--brutal-accent-green);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

.modal-sell-btn {
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
    border-color: var(--brutal-border-color);
}

.modal-sell-btn:hover {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
}

/* ==========================================================================
   COMBAT TAB
   ========================================================================== */
.monster-selector-header {
    margin-bottom: 24px;
}

.monster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.monster-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.monster-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.monster-card-header h3 {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.monster-lvl {
    font-size: var(--fs-sm);
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    padding: 2px 8px;
    font-weight: 900;
    text-transform: uppercase;
    border: 2px solid var(--brutal-border-color);
    letter-spacing: 0.05em;
}

.monster-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    font-size: var(--fs-base);
    margin-bottom: 16px;
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
}

.monster-loot-preview {
    padding-top: 12px;
    margin-bottom: 16px;
    flex-grow: 1;
    border-top: 2px dashed var(--brutal-border-color);
}

.monster-loot-preview strong {
    font-size: var(--fs-sm);
    color: var(--brutal-accent-gold);
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 900;
}

.loot-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.loot-tag {
    font-size: var(--fs-2xs);
    background: var(--brutal-surface-darker);
    padding: 2px 8px;
    color: var(--text-primary);
    border: 2px solid var(--brutal-border-color);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fight-btn {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fight-btn:hover {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-red);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

/* Battle Screen Arena style */
.dungeon-stage-indicator {
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 900;
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    padding: 8px 16px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.battle-arena {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 20px;
    min-height: 380px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    background: var(--brutal-surface-darker);
    border: var(--brutal-border-width-lg) solid var(--brutal-border-color);
    box-shadow: var(--brutal-shadow-offset-lg) var(--brutal-shadow-offset-lg) 0 0 var(--brutal-border-color);
}

.arena-fighter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px;
    background: var(--brutal-surface-dark);
    border: 2px solid var(--brutal-border-color);
}

.player-column {
}

.monster-column {
}

.fighter-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    margin-bottom: 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brutal-accent-gold);
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 8px;
    width: 100%;
}

.hp-bar-container {
    width: 100%;
    height: 28px;
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.hp-bar-fill {
    height: 100%;
    background: var(--brutal-accent-green);
    width: 100%;
    transition: width 0.15s ease-out;
}

.hp-bar-fill.monster-hp {
    background: var(--brutal-accent-red);
}

.hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-sm);
    font-weight: 900;
    width: 100%;
    text-align: center;
    color: var(--brutal-text-light-on-dark);
    text-shadow:
        -1px 0 0 var(--brutal-border-color),
         1px 0 0 var(--brutal-border-color),
         0 -1px 0 var(--brutal-border-color),
         0 1px 0 var(--brutal-border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fighter-stats {
    width: 100%;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fighter-stats div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--brutal-border-color);
    padding: 2px 0;
}

.fighter-stats span {
    color: var(--brutal-accent-gold);
    font-weight: 900;
}

.mini-bar {
    height: 8px;
    margin: 4px 0 16px 0;
    border: 2px solid var(--brutal-border-color);
}

.attack-timer {
    background: var(--brutal-accent-gold);
}

.attack-timer.monster-timer {
    background: #e67e22;
}

.arena-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.quick-eat-btn {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
    padding: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.quick-eat-btn:hover:not(.disabled) {
    background: var(--brutal-text-light-on-dark);
    color: var(--brutal-accent-green);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

.run-btn {
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
    padding: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: transform 0.1s ease, background 0.15s ease;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.run-btn:hover {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

.spawn-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--fs-md);
}

/* Battle logs middle window */
.arena-middle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    contain: size;
}

.battle-log {
    flex-grow: 1;
    background: var(--brutal-surface-dark);
    border: 2px solid var(--brutal-border-color);
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.log-line {
    font-size: var(--fs-sm);
    line-height: 1.4;
    padding-bottom: 6px;
    word-break: break-all;
    overflow-wrap: break-word;
    border-bottom: 1px dashed var(--brutal-border-color);
    font-weight: 600;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Combat Loot Drawer */
.loot-drawer-container {
    padding: 20px;
    position: sticky;
    bottom: -32px;
    background: var(--brutal-surface-dark);
    border-top: var(--brutal-border-width-lg) solid var(--brutal-border-color);
    box-shadow: 0 -6px 0 0 var(--brutal-border-color);
    z-index: 10;
}

.loot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brutal-border-color);
}

.loot-header h3 {
    font-family: var(--font-title);
    font-size: var(--fs-lg);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brutal-accent-gold);
}

.loot-all-btn {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    padding: 6px 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: transform 0.1s ease, background 0.15s ease;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.loot-all-btn:hover {
    background: var(--brutal-text-light-on-dark);
    color: var(--brutal-accent-gold);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

.loot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.loot-slot {
    background: var(--brutal-surface-darker);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background 0.15s ease, transform 0.1s ease;
    border: 2px solid var(--brutal-border-color);
}

.loot-slot:hover {
    background: var(--brutal-surface-dark);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.empty-loot-msg {
    grid-column: 1 / -1;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    padding: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px dashed var(--brutal-border-color);
}

/* ==========================================================================
   SKILL TREE TAB
   ========================================================================== */
#skilltree-tab.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.skilltree-layout-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Drag pan logic will scroll, hide native scrollbars */
    background: var(--brutal-surface-darker);
    border: var(--brutal-border-width-lg) solid var(--brutal-border-color);
    box-shadow: var(--brutal-shadow-offset-lg) var(--brutal-shadow-offset-lg) 0 0 var(--brutal-border-color);
    flex-grow: 1;
    height: 0;
    min-height: 350px;
}

/* Background Space Grid and Stars */
.skilltree-layout-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

#skilltree-viewport {
    position: absolute;
    width: 2000px;
    height: 2000px;
    transform-origin: 0 0;
    cursor: grab;
    will-change: transform;
}

.skill-tree-layout {
    position: relative;
    width: 2000px;
    height: 2000px;
}

#skill-tree-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.skill-nodes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Base Node Element (Width 50px bounds) */
.skill-node-element {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.25s, opacity 0.25s;
    z-index: 5;
    border-radius: 50%;
}

.skill-node-element:hover {
    z-index: 10;
}

/* 1. Small/Normal Node */
.skill-node-element.normal-node {
    width: 32px;
    height: 32px;
    margin-left: 9px;
    margin-top: 9px;
    background: var(--brutal-surface-dark);
    outline: 3px solid #3c4257;
}
.skill-node-element.normal-node.unlocked {
    background: #092015;
    outline-color: var(--brutal-accent-green);
}
.skill-node-element.normal-node.unlockable {
    outline-color: var(--brutal-accent-gold);
}

/* 2. Notable Node (Golden Star) */
.skill-node-element.notable-node {
    width: 44px;
    height: 44px;
    margin-left: 3px;
    margin-top: 3px;
    background: #181510;
    outline: 4px solid #ffb300;
}
.skill-node-element.notable-node .node-icon {
    font-size: var(--fs-lg);
}
.skill-node-element.notable-node.unlocked {
    background: #2b1f0d;
    outline-color: var(--brutal-accent-gold);
}
.skill-node-element.notable-node.unlockable {
    outline-color: var(--brutal-accent-gold);
}

/* 3. Keystone Node (Crimson/Purple Giant) */
.skill-node-element.keystone-node {
    width: 58px;
    height: 58px;
    margin-left: -4px;
    margin-top: -4px;
    background: #170d1a;
    outline: 5px solid #d500f9;
}
.skill-node-element.keystone-node .node-icon {
    font-size: var(--fs-xl);
}
.skill-node-element.keystone-node.unlocked {
    background: #260a2b;
    outline-color: #e040fb;
}
.skill-node-element.keystone-node.unlockable {
    outline-color: #e040fb;
}

/* 4. Socket Node (Hollow ring with dash borders) */
.skill-node-element.socket-node {
    width: 40px;
    height: 40px;
    margin-left: 5px;
    margin-top: 5px;
    background: var(--brutal-surface-darker);
    outline: 3px solid #9e9e9e;
}
.skill-node-element.socket-node.unlocked {
    background: #1a1a1a;
    outline-color: var(--brutal-text-light-on-dark);
}
.skill-node-element.socket-node.unlocked.unlockable {
    outline-color: var(--brutal-accent-gold);
}

/* Jeweled Sockets */
.skill-node-element.socket-node.jeweled {
    outline-style: solid;
    outline-width: 4px;
}
.skill-node-element.socket-node.gem-ruby {
    outline-color: var(--brutal-accent-red);
}
.skill-node-element.socket-node.gem-sapphire {
    outline-color: var(--brutal-accent-blue);
}
.skill-node-element.socket-node.gem-emerald {
    outline-color: var(--brutal-accent-green);
}
.skill-node-element.socket-node.gem-diamond {
    outline-color: #00e5ff;
}
.skill-node-element.socket-node.gem-onyx {
    outline-color: var(--brutal-accent-gold);
}

/* 5. Root Node */
.skill-node-element.root-node {
    width: 50px;
    height: 50px;
    margin-left: 0;
    margin-top: 0;
    background: #e65100;
    outline: 4px solid var(--brutal-accent-gold);
}

/* Search Highlights */
.skill-node-element.search-matched {
    opacity: 1;
    filter: none;
}
.skill-node-element.search-unmatched {
    opacity: 0.12;
    filter: grayscale(85%);
    pointer-events: none;
}

/* Controls header styling */
.skilltree-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 16px;
    flex-wrap: wrap;
}
.skilltree-controls .search-box {
    flex: 1;
    min-width: 250px;
}
#skill-search-input {
    width: 100%;
    max-width: 320px;
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    font-size: var(--fs-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#skill-search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 700;
}
#skill-search-input:focus {
    background: var(--brutal-surface-dark);
    border-color: var(--brutal-accent-gold);
}
.skilltree-controls .control-buttons {
    display: flex;
    gap: 8px;
}
.small-btn {
    padding: 6px 12px;
    font-size: var(--fs-sm);
}

/* Action tabs selectors */
.skilltree-selector-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
    padding: 10px;
    background: var(--brutal-surface-darker);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.skilltree-selector-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--brutal-surface-dark);
    color: var(--text-primary);
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs-md);
    transition: background 0.15s ease, transform 0.1s ease;
    position: relative;
    border: 2px solid var(--brutal-border-color);
}

.skilltree-selector-tab:hover {
    background: var(--brutal-surface-darker);
    color: var(--brutal-accent-gold);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.skilltree-selector-tab.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.skilltree-selector-tab .tab-points-badge {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    font-size: var(--fs-xs);
    padding: 2px 6px;
    margin-left: 4px;
    font-weight: 900;
    border: 1px solid var(--brutal-border-color);
    text-transform: uppercase;
}

/* Jewel details section */
.skill-jewel-section {
    background: var(--brutal-surface-darker);
    padding: 12px;
    margin: 12px 0;
    border: 2px solid var(--brutal-border-color);
}
.skill-jewel-section h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.05em;
}
.panel-divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 16px 0;
}
.jewel-craft-select-wrapper {
    margin: 12px 0;
}
.jewel-craft-select-wrapper label {
    display: block;
    font-size: var(--fs-sm);
    margin-bottom: 4px;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.jewel-cost-info {
    margin-bottom: 12px;
    background: var(--brutal-surface-dark);
    border: 2px solid var(--brutal-border-color);
    padding: 8px;
    font-weight: 700;
}

.node-icon {
    font-size: var(--fs-xl);
}

.node-lvl-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    padding: 1px 4px;
    font-size: var(--fs-2xs);
    font-weight: 900;
    border: 2px solid var(--brutal-border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.node-hover-name {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-text-light-on-dark);
    padding: 2px 8px;
    font-size: var(--fs-2xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    border: 2px solid var(--brutal-border-color);
    text-transform: uppercase;
    font-weight: 800;
}

.skill-node-element:hover .node-hover-name {
    opacity: 1;
}

/* Detail panel on bottom or side of tree */
.skill-details-panel {
    position: absolute;
    z-index: 100;
    width: 320px;
    max-width: 90%;
    margin-top: 0;
    padding: 16px 20px;
    background: var(--brutal-surface-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: var(--brutal-shadow-offset-md) var(--brutal-shadow-offset-md) 0 0 var(--brutal-border-color);
    pointer-events: auto;
    transition: opacity 0.15s ease-out;
}

.skill-details-panel.position-above {
}

.skill-details-panel.position-below {
}

/* Selected Node Highlight */
.skill-node-element.selected-node {
    z-index: 12;
}

.close-panel {
    position: absolute;
    right: 12px;
    top: 12px;
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    cursor: pointer;
    font-size: var(--fs-md);
    border: 2px solid var(--brutal-border-color);
    padding: 2px 8px;
    font-weight: 900;
    line-height: 1.2;
}

.close-panel:hover {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-red);
}

#skill-node-name {
    font-family: var(--font-title);
    font-size: var(--fs-lg);
    margin-bottom: 4px;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.skill-level {
    font-size: var(--fs-sm);
    color: var(--brutal-accent-gold);
    font-weight: 800;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#skill-node-desc {
    font-size: var(--fs-base);
    color: var(--text-primary);
    margin-bottom: 16px;
    font-weight: 600;
}

.skill-cost {
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    color: var(--brutal-accent-purple, #9b59b6);
    border-top: 2px solid var(--brutal-border-color);
    border-bottom: 2px solid var(--brutal-border-color);
    padding: 6px 0;
}

.buy-node-btn {
    width: 200px;
}

/* ==========================================================================
   RARITY DECORATIONS — Brutalist: solid border accent, no soft glows
   ========================================================================== */
.rarity-common {
    border-color: var(--brutal-text-muted-on-dark);
}
.rarity-uncommon {
    border-color: var(--brutal-accent-green);
}
.rarity-rare {
    border-color: var(--brutal-accent-blue);
}
.rarity-epic {
    border-color: var(--brutal-accent-purple, #9b59b6);
}
.rarity-legendary {
    border-color: var(--brutal-accent-gold);
}
.rarity-mythical {
    border-color: var(--brutal-accent-red);
}
.rarity-artifact {
    border-color: #e67e22;
}
.rarity-arcane {
    border-color: #00cec9;
}
.rarity-cosmic {
    border-color: #fd79a8;
}
.rarity-godly {
    border-color: #6c5ce7;
}

/* ==========================================================================
   FLOATING NOTIFICATION CENTER
   ========================================================================== */
.notification-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
    pointer-events: none;
}

.notification-toast {
    background: var(--brutal-surface-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: var(--brutal-shadow-offset-md) var(--brutal-shadow-offset-md) 0 0 var(--brutal-border-color);
    padding: 12px 24px;
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: auto;
    animation: slideIn 0.15s ease-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification-toast.fade-out {
    opacity: 0;
    transform: translateY(20px);
}

@keyframes slideIn {
    from { transform: translateX(100%) translateY(0); opacity: 0; }
    to { transform: translateX(0) translateY(0); opacity: 1; }
}

/* ==========================================================================
   LOGGING, TRADING, RANCHING, COOKING & SHOP TAB STYLES
   ========================================================================== */

/* Logging Tab */
.logging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.logging-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
}

.logging-card:hover:not(.locked) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-border-color);
}

.logging-card.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.logging-card.locked {
    opacity: 0.5;
}

.logging-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.logging-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.logging-card-body {
    display: flex;
    flex-direction: column;
}

.logging-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 600;
}

.logging-stat-row span:last-child {
    color: var(--text-primary);
    font-weight: 800;
}

/* Trading Tab */
.trading-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.trading-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
}

.trading-card:hover:not(.locked) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-border-color);
}

.trading-card.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.trading-card.locked {
    opacity: 0.5;
}

.trading-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.trading-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.trading-card-body {
    display: flex;
    flex-direction: column;
}

/* Ranching Tab */
.ranching-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.ranching-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
}

.ranching-card:hover:not(.locked) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-border-color);
}

.ranching-card.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.ranching-card.locked {
    opacity: 0.5;
}

.ranching-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.ranching-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ranching-card-body {
    display: flex;
    flex-direction: column;
}

/* Cooking Tab */
.cooking-container-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.cooking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.cooking-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
}

.cooking-card:hover:not(.locked) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-border-color);
}

.cooking-card.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.cooking-card.locked {
    opacity: 0.5;
}

.cooking-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cooking-name {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.recipe-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cooking-card-body {
    display: flex;
    flex-direction: column;
}

/* Shop Tab */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.shop-card {
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.shop-card:hover:not(.purchased) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-border-color);
}

.shop-card.purchased {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
}

.shop-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.shop-item-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    flex-grow: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shop-item-desc {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: 16px;
    flex-grow: 1;
    font-weight: 600;
}

.shop-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.shop-cost {
    font-size: var(--fs-md);
    font-weight: 900;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--brutal-text-dark-on-light);
    padding: 4px 8px;
    border: 2px solid var(--brutal-border-color);
}

.buy-shop-btn {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    width: auto;
    padding: 8px 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.buy-shop-btn:hover {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-gold);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

/* Farming Tab & Cards */
.farming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.farming-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.1s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.farming-card:hover:not(.locked) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-border-color);
}

.farming-card.locked {
    opacity: 0.5;
}

.farming-card.empty {
    background: var(--brutal-surface-darker);
    border-style: dashed;
}

.farming-card.growing {
    border-color: var(--brutal-accent-gold);
}

.farming-card.ready {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.plot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 10px;
}

.plot-number {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plot-status-badge {
    font-size: var(--fs-xs);
    font-weight: 900;
    padding: 2px 8px;
    text-transform: uppercase;
    border: 2px solid var(--brutal-border-color);
    letter-spacing: 0.05em;
}

.plot-status-badge.empty {
    background: var(--brutal-surface-darker);
    color: var(--text-secondary);
}

.plot-status-badge.growing {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.plot-status-badge.ready {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
}

.plot-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 16px;
}

.plot-crop-name {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-lg);
    text-align: center;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plot-time-left {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Seed Selection Modal Styles */
.seed-modal-content {
    width: 640px;
}

.seed-modal-title {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: var(--fs-xl);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Filter Bar */
.seed-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 10px;
    background: var(--brutal-surface-darker);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}

.seed-filter-btn {
    background: var(--brutal-surface-dark);
    color: var(--text-primary);
    padding: 8px 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs-sm);
    cursor: pointer;
    border: 2px solid var(--brutal-border-color);
    transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease, box-shadow 0.1s ease;
}

.seed-filter-btn:hover {
    background: var(--brutal-surface-darker);
    color: var(--brutal-accent-gold);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

.seed-filter-btn.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

/* Seed Grid */
.seed-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 4px 8px 4px 4px;
    margin-bottom: 4px;
}

/* Seed Card */
.seed-card {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
    position: relative;
    min-height: 170px;
    overflow: hidden;
}

.seed-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--brutal-border-color);
}

.seed-card.available {
    border-color: var(--brutal-accent-green);
}

.seed-card.available:hover {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-accent-green);
}

.seed-card.available:hover .seed-card-yield,
.seed-card.available:hover .seed-card-xp,
.seed-card.available:hover .seed-card-time,
.seed-card.available:hover .seed-card-level {
    color: var(--brutal-text-dark-on-light);
}

.seed-card.no-seeds {
    opacity: 0.6;
}

.seed-card.no-seeds:hover {
    background: var(--brutal-accent-gold);
    border-color: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    opacity: 1;
}

.seed-card.no-seeds:hover .seed-card-level,
.seed-card.no-seeds:hover .seed-card-details,
.seed-card.no-seeds:hover .seed-card-xp,
.seed-card.no-seeds:hover .seed-card-owned {
    color: var(--brutal-text-dark-on-light);
}

.seed-card.no-seeds:hover .seed-card-owned {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
}

.seed-card.level-locked {
    cursor: not-allowed;
}

.seed-card.level-locked:hover {
    border-color: var(--log-color-attack-player);
    background: var(--brutal-surface-light);
}

.seed-card .seed-card-icon {
    font-size: var(--fs-2xl);
    line-height: 1;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seed-card .seed-card-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.seed-card-name {
    font-weight: 800;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    max-width: 100%;
    word-break: break-word;
}

.seed-card-level {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.seed-card.level-locked .seed-card-level {
    color: var(--log-color-attack-player);
}

.seed-card-owned {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    padding: 1px 8px;
    border: 2px solid var(--brutal-border-color);
    display: inline-block;
    line-height: 1.2;
    min-width: 1.2em;
    text-align: center;
}

.seed-card-details {
    display: flex;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: 600;
    flex-wrap: wrap;
    justify-content: center;
}

.seed-card-yield,
.seed-card-xp,
.seed-card-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.seed-card-xp {
    color: #5a9e7a;
}

.seed-card-lock-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: var(--fs-md);
    opacity: 0.7;
}

.seed-card-shop-link {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: var(--fs-xs);
    color: var(--brutal-accent-gold);
    text-decoration: none;
    cursor: pointer;
    font-weight: 800;
    line-height: 1.2;
    background: var(--brutal-surface-dark);
    padding: 2px 8px;
    border: 1px solid var(--brutal-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.15s ease, color 0.15s ease;
}

.seed-card.no-seeds:hover .seed-card-shop-link {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
}

/* Empty state when filter returns nothing */
.seed-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 20px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Buff Badges Header Container */
#active-buffs-container {
    display: flex;
    gap: 8px;
}

.buff-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid var(--brutal-border-color);
}

.buff-speed {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

.buff-attack {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
}

.buff-royal {
    background: #f1c40f;
    color: var(--brutal-text-dark-on-light);
}

/* Skill Progress Bar Container & Elements */
.skill-progress-container {
    margin-top: 16px;
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    padding: 12px 16px;
    max-width: 600px;
}

.skill-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--fs-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.skill-progress-level {
    color: var(--brutal-accent-gold);
    font-family: var(--font-title);
    font-size: var(--fs-md);
}

.skill-progress-xp {
    color: var(--text-secondary);
}

.skill-progress-bar-bg {
    width: 100%;
    height: 10px;
    background: var(--brutal-surface-dark);
    border: 2px solid var(--brutal-border-color);
    overflow: hidden;
}

.skill-progress-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Flat Colors for Each Skill Progress Bar */
.progress-mining {
    background: #c9a84c;
}

.progress-logging {
    background: #7a9e5c;
}

.progress-smithing {
    background: #cd7f32;
}

.progress-farming {
    background: #5a9e7a;
}

.progress-ranching {
    background: #b8943e;
}

.progress-cooking {
    background: #8b5a3a;
}

.progress-trading {
    background: #8e6b9e;
}

.progress-combat {
    background: #8b2020;
}

.progress-gathering {
    background: #6b8e4e;
}

.progress-brewing {
    background: #a85a4a;
}

/* Global Action Progress Bar */
.active-progress-bar-bg {
    width: 200px;
    height: 8px;
    background: var(--brutal-surface-dark);
    border: 2px solid var(--brutal-border-color);
    overflow: hidden;
    margin: 2px 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.active-progress-bar-bg.visible {
    visibility: visible;
    opacity: 1;
}

.active-progress-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.05s linear;
}

/* ==========================================================================
   AUTO SAVE TOGGLE & SLEEK INDICATOR
   ========================================================================== */
.settings-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 2px dashed var(--brutal-border-color);
}

.settings-option:last-child {
    border-bottom: none;
}

.settings-option span {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Backup & Restore section inside Settings modal */
.settings-backup-section {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

.settings-backup-title {
    font-size: var(--fs-base);
    font-weight: 900;
    color: var(--brutal-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.settings-backup-desc {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
}

.settings-backup-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.settings-backup-buttons .modal-action-btn {
    flex: 1;
}

.backup-textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: var(--fs-sm);
    padding: 8px;
    background: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    resize: vertical;
    line-height: 1.4;
    word-break: break-all;
}

/* Brutalist toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--brutal-surface-darker);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border-radius: 0;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--brutal-text-muted-on-dark);
    transition: transform 0.2s ease, background-color 0.2s ease;
    border-radius: 0;
}

input:checked + .slider {
    background-color: var(--brutal-accent-green);
}

input:checked + .slider:before {
    transform: translateX(24px);
    background-color: #fff;
}

/* Auto Save Indicator */
.autosave-indicator {
    position: fixed;
    top: 24px;
    left: 50%;
    background: var(--brutal-surface-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: var(--brutal-shadow-offset-md) var(--brutal-shadow-offset-md) 0 0 var(--brutal-border-color);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
}

.autosave-indicator.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.autosave-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--brutal-accent-gold);
    border-top-color: transparent;
    animation: autosave-spin 0.8s linear infinite;
}

@keyframes autosave-spin {
    to { transform: rotate(360deg); }
}

/* Custom scrollbar - Brutalist */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--brutal-surface-darker);
    border-left: 2px solid var(--brutal-border-color);
}
::-webkit-scrollbar-thumb {
    background: var(--brutal-accent-gold);
    border: 2px solid var(--brutal-border-color);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brutal-text-light-on-dark);
}

/* ==========================================================================
   ITEM TOOLTIP SYSTEM
   ========================================================================== */
.item-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: var(--brutal-surface-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: var(--brutal-shadow-offset-md) var(--brutal-shadow-offset-md) 0 0 var(--brutal-border-color);
    padding: 12px;
    color: var(--text-primary);
    max-width: 280px;
    min-width: 200px;
    width: max-content;
    font-family: inherit;
    transition: opacity 0.15s ease-out;
}

.tooltip-header {
    font-family: var(--font-title);
    font-size: var(--fs-md);
    font-weight: 900;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* 8-direction black outline (cardinal + diagonal) for legibility on any background */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
        -1.4px -1.4px 0 #000,
         1.4px -1.4px 0 #000,
        -1.4px  1.4px 0 #000,
         1.4px  1.4px 0 #000,
         0 0 2px rgba(0, 0, 0, 0.85);
    color: var(--brutal-accent-gold);
}

.tooltip-type {
    font-size: var(--fs-base);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.tooltip-ilvl {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--brutal-accent-gold);
    margin-bottom: 8px;
}

.tooltip-desc {
    font-size: var(--fs-base);
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 10px;
    font-style: normal;
    font-weight: 600;
}

.tooltip-stats {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
    padding: 8px;
    margin-bottom: 10px;
}

.tooltip-stat-line {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-base);
    margin-bottom: 4px;
    font-weight: 700;
    border-bottom: 1px dashed var(--brutal-border-color);
    padding: 2px 0;
}

.tooltip-stat-line:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.tooltip-stat-line span:first-child {
    color: var(--text-secondary);
    text-transform: uppercase;
}

.tooltip-stat-line span:last-child {
    font-weight: 800;
    color: var(--brutal-accent-green);
    text-transform: uppercase;
}

.tooltip-value {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--brutal-accent-gold);
    padding-top: 8px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: 2px solid var(--brutal-border-color);
}

/* Shared rarity tag for tooltip & modal (matches chest result .result-rarity-tag style) */
.rarity-tag {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-size: 0.8em;
    color: var(--bg-dark);
    border: 2px solid var(--brutal-border-color);
}

/* ==========================================
   LIGHT MODE OVERRIDES
   ========================================== */
body.light-mode {
    --bg-dark: #f5f5f0;        /* high-contrast near-white base */
    --bg-card: #ffffff;        /* opaque white for surfaces */
    --border-color: #000000;   /* pure black borders */
    --text-primary: #0a0a0a;   /* near-black for max contrast */
    --text-secondary: #3a3a3a; /* muted dark gray */

    --primary-color: #c9a84c;
    --success-color: #405c2a;
    --danger-color: #8c2222;
    --warning-color: #7a5d1c;
    --accent-purple: #5c426b;

    /* Combat log color tokens -- high-contrast dark for legibility on light bg */
    --log-color-heal: #2d7d5f;
    --log-color-attack-player: #405c2a;
    --log-color-attack-enemy: #8c2222;
    --log-color-thorns: #8b4513;
    --log-color-crit: #7a5d1c;
    --log-color-victory: #8b5a1c;
    --log-color-defeat: #6b1414;

    /* UI semantic color tokens -- high-contrast variants */
    --color-buff-purple: #5c426b;
    --color-error-red: #8c2222;
    --color-jewel-green: #2d7d5f;
    --color-link-blue: #1f4e79;

    /* Light mode button specific variables */
    --bg-button: #c9a84c;          /* bright gold (preserved for test compat) */
    --text-button: #0a0a0a;        /* near-black text */
    --bg-button-hover: #d4b85c;
    --bg-button-active: #705315;
    --bg-button-disabled: #e0e0d8;
    --text-button-disabled: #888;
    --border-button-disabled: #aaa;

    /* Brutalist surface tokens (light-mode brutalist palette) */
    --brutal-surface-dark: #ffffff;
    --brutal-surface-darker: #f0f0e8;
    --brutal-text-light-on-dark: #0a0a0a;
    --brutal-text-dark-on-light: #0a0a0a;
    --brutal-text-muted-on-dark: #3a3a3a;
    --brutal-accent-gold: #ffd700;
    --brutal-accent-red: #d60000;
    --brutal-accent-green: #00a040;
    --brutal-accent-blue: #1f4e79;
}

/* Test hooks used by tests/light-mode.test.js to verify light-mode color overrides */
body.light-mode .light-mode-test-log-heal { color: var(--log-color-heal); }
body.light-mode .light-mode-test-log-attack-player { color: var(--log-color-attack-player); }
body.light-mode .light-mode-test-log-attack-enemy { color: var(--log-color-attack-enemy); }
body.light-mode .light-mode-test-log-thorns { color: var(--log-color-thorns); }
body.light-mode .light-mode-test-log-crit { color: var(--log-color-crit); }
body.light-mode .light-mode-test-log-victory { color: var(--log-color-victory); }
body.light-mode .light-mode-test-log-defeat { color: var(--log-color-defeat); }
body.light-mode .light-mode-test-color-buff-purple { color: var(--color-buff-purple); }
body.light-mode .light-mode-test-color-error-red { color: var(--color-error-red); }
body.light-mode .light-mode-test-color-jewel-green { color: var(--color-jewel-green); }
body.light-mode .light-mode-test-color-link-blue { color: var(--color-link-blue); }

/* Sidebar styling for light mode */
body.light-mode .sidebar {
    background: #c2af84; /* 全体背景よりさらに一段暗いベージュ（装丁風） */
    border-right: 1px solid rgba(100, 78, 25, 0.45);
}

body.light-mode .logo-title {
    color: #7a5d1c;
}

body.light-mode .logo-subtitle {
    color: #635240;
}

body.light-mode .nav-link {
    color: #635240;
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    background: rgba(100, 78, 25, 0.15);
    color: #33271b;
}

body.light-mode .nav-link .nav-badge {
    background: rgba(100, 78, 25, 0.12);
    color: #635240;
}

body.light-mode .nav-link.active .nav-badge {
    background: #7a5d1c;
    color: #d2c095;
}

/* Light-mode: bump EXP bar contrast (no shadow, full opacity) */
body.light-mode .nav-link::after {
    box-shadow: none;
    opacity: 0.95;
}

/* Override the existing active-indicator ::after to use skill EXP colour
   so that the progress bar stays visible with the correct skill colour. */
body.light-mode .nav-link.active::after {
    background: var(--exp-color, rgba(201, 168, 76, 0.85));
}

/* Glass panel */
body.light-mode .glass-panel {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Header styling */
body.light-mode .dashboard-header {
    background: #cbb98f; /* ヘッダーも落ち着いた古羊皮紙色に */
    border-bottom: 1px solid var(--border-color);
}

body.light-mode .header-stat-value {
    color: #33271b;
}

body.light-mode .header-stat-label {
    color: #635240;
}

body.light-mode .header-action-btn {
    background: #c2af84;
    border: 1px solid var(--border-color);
    color: #33271b;
}

body.light-mode .header-action-btn:hover {
    background: #7a5d1c;
    color: #d2c095;
}

/* Tabs */
body.light-mode .tab-content {
    background: #d2c095;
}

body.light-mode #skilltree-tab.active {
    background: radial-gradient(circle at center, #d2c095 0%, #c2af84 100%);
}

body.light-mode #combat-tab.active {
    background: radial-gradient(circle at center, #d2c095 0%, #c2af84 100%);
}

/* Cards & Panels */
body.light-mode .card,
body.light-mode .panel,
body.light-mode .action-card,
body.light-mode .upgrade-card,
body.light-mode .inventory-slot,
body.light-mode .recipe-card,
body.light-mode .shop-item-card,
body.light-mode .dungeon-card,
body.light-mode .plot-card,
body.light-mode .cooking-station,
body.light-mode .coop-upgrade,
body.light-mode .stats-list {
    background: #dfcfad; /* 地色より少し明るめの柔らかい古羊皮紙ベージュ */
    border: 1px solid var(--border-color);
}

body.light-mode .inventory-slot:hover {
    border-color: #7a5d1c;
    background: rgba(100, 78, 25, 0.1);
}

body.light-mode .inventory-slot.equipped {
    background: #cfbc92;
    border-color: #7a5d1c;
}

/* Text and Titles */
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4, 
body.light-mode h5, 
body.light-mode h6 {
    color: #33271b;
}

body.light-mode .section-title {
    color: #7a5d1c;
}

/* Progress bar wrapper */
body.light-mode .progress-bar-wrapper {
    background: rgba(100, 78, 25, 0.18);
    border-color: rgba(100, 78, 25, 0.28);
}

/* Modals */
body.light-mode .modal-content {
    background: #d2c095; /* モダルの背景も合わせる */
    border: 2px solid #7a5d1c;
    color: #33271b;
    box-shadow: 0 10px 30px rgba(51, 39, 27, 0.45);
}

body.light-mode .close-modal {
    color: #635240;
}

body.light-mode .close-modal:hover {
    color: #33271b;
}

/* Select, input elements inside light mode */
body.light-mode select,
body.light-mode input[type="text"],
body.light-mode input[type="number"],
body.light-mode textarea {
    background: #dfcfad !important; /* 暗めの古羊皮紙色 */
    color: #33271b !important;
    border: 1px solid var(--border-color) !important;
}

/* Settings modal overrides */
body.light-mode .settings-backup-section {
    background: rgba(100, 78, 25, 0.1);
    border: 1px solid var(--border-color);
}

body.light-mode .settings-option {
    border-bottom: 1px solid var(--border-color);
}

/* Scrollbar overrides */
body.light-mode ::-webkit-scrollbar-track {
    background: #c2af84;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: #af9c73;
    border: 3px solid #c2af84;
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #7a5d1c;
}

/* Tables and logs in combat */
body.light-mode .combat-log-container {
    background: #dfcfad;
    border: 1px solid var(--border-color);
    color: #33271b;
}

body.light-mode .combat-log-line {
    border-bottom: 1px solid rgba(100, 78, 25, 0.18);
}

/* Tooltips */
body.light-mode .tooltip {
    background: #d2c095;
    color: #33271b;
    border: 1px solid #7a5d1c;
}

/* Locked card overlays */
body.light-mode .card-lock-overlay {
    background: rgba(210, 192, 149, 0.9);
    color: #33271b;
}

/* Notification toast for light mode */
body.light-mode .notification-toast {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(80, 60, 25, 0.18);
}

/* ==========================================
   LIGHT MODE OVERRIDES - Sidebar / Header
   ========================================== */
body.light-mode .footer-btn {
    background: rgba(100,78,25,0.12);
    color: #33271b;
    outline-color: rgba(100,78,25,0.4);
}

body.light-mode .footer-btn:hover {
    background: rgba(100,78,25,0.22);
    color: #33271b;
}

body.light-mode .reset-btn:hover {
    background: rgba(140,34,34,0.18);
}

body.light-mode .header-stat-item {
    background: rgba(100,78,25,0.12);
}

body.light-mode .nav-badge.has-points {
    background: rgba(92,66,107,0.3);
    color: #33271b;
}

body.light-mode .logo-version {
    color: #8a6a1a;
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}
body.light-mode .logo-version:hover {
    background: rgba(201, 168, 76, 0.3);
}

/* ==========================================
   LIGHT MODE OVERRIDES - Buttons
   ========================================== */
body.light-mode .danger-btn {
    background: #8c2222;
    color: #f4e8cf;
    outline-color: rgba(140,34,34,0.6);
}

body.light-mode .danger-btn:hover:not(.disabled) {
    background: #a83838;
}

body.light-mode .subnav-btn {
    background: rgba(100,78,25,0.1);
    color: #635240;
}

body.light-mode .subnav-btn:hover {
    background: rgba(100,78,25,0.2);
    color: #33271b;
}

body.light-mode .subnav-btn.active {
    background: #7a5d1c;
    color: #f4e8cf;
}

/* ==========================================
   LIGHT MODE OVERRIDES - Combat UI
   ========================================== */
body.light-mode .arena-fighter {
    background: rgba(100,78,25,0.12);
}

body.light-mode .hp-bar-container {
    background: rgba(100,78,25,0.25);
    border: 1px solid rgba(100,78,25,0.3);
}

body.light-mode .hp-bar-fill {
    background: #405c2a;
}

body.light-mode .hp-bar-fill.monster-hp {
    background: #8c2222;
}

body.light-mode .attack-timer.monster-timer {
    background: #b85a1a;
}

body.light-mode .quick-eat-btn {
    background: rgba(64,92,42,0.18);
    color: #405c2a;
    outline-color: rgba(64,92,42,0.45);
}

body.light-mode .quick-eat-btn:hover:not(.disabled) {
    background: rgba(64,92,42,0.3);
}

body.light-mode .run-btn {
    background: rgba(100,78,25,0.12);
    color: #33271b;
    outline-color: rgba(100,78,25,0.35);
}

body.light-mode .run-btn:hover {
    background: rgba(140,34,34,0.22);
}

body.light-mode .fight-btn {
    background: #8c2222;
    color: #f4e8cf;
    outline-color: rgba(140,34,34,0.6);
}

body.light-mode .fight-btn:hover {
    background: #a83838;
}

body.light-mode .spawn-overlay {
    background: rgba(100,78,25,0.45);
    color: #f4e8cf;
}

body.light-mode .battle-log {
    background: rgba(100,78,25,0.12);
}

body.light-mode .dungeon-stage-indicator {
    background: rgba(122,85,28,0.18);
    color: #33271b;
    border: 1px solid rgba(100,78,25,0.3);
}

body.light-mode .monster-card-header h3 {
    color: inherit;
}

body.light-mode .loot-drawer-container {
    background: #c2af84;
    color: #33271b;
    border-top-color: #7a5d1c;
    box-shadow: 0 -12px 32px rgba(80,60,25,0.25);
}

body.light-mode .loot-all-btn {
    background: rgba(122,85,28,0.18);
    color: #33271b;
    outline-color: rgba(122,85,28,0.45);
}

body.light-mode .loot-all-btn:hover {
    background: rgba(122,85,28,0.3);
}

body.light-mode .loot-slot {
    background: rgba(100,78,25,0.1);
    border: 1px solid rgba(100,78,25,0.2);
}

body.light-mode .loot-slot:hover {
    background: rgba(100,78,25,0.2);
}

body.light-mode .monster-lvl {
    background: #ff3030;
    color: #fff;
}

body.light-mode .loot-tag {
    background: rgba(100,78,25,0.12);
    color: #635240;
}

/* ==========================================
   LIGHT MODE OVERRIDES - Inventory / Equipment
   ========================================== */
body.light-mode .inventory-sort-controls {
    background: rgba(100,78,25,0.1);
    border-color: rgba(100,78,25,0.2);
}

body.light-mode .sort-label {
    color: #635240;
}

body.light-mode .sort-btn {
    background: rgba(100,78,25,0.12);
    color: #33271b;
    border-color: rgba(100,78,25,0.25);
}

body.light-mode .sort-btn:hover {
    background: rgba(100,78,25,0.2);
    border-color: rgba(100,78,25,0.4);
}

body.light-mode .sort-btn.active {
    background: linear-gradient(135deg, #7a5d1c, #5a4310);
    color: #f4e8cf;
    border-color: #5a4310;
    box-shadow: 0 2px 6px rgba(100,78,25,0.3);
}

body.light-mode .slots-info-label {
    color: #33271b;
}

body.light-mode .expand-slots-btn {
    background: linear-gradient(135deg, #405c2a, #355020);
    color: #f4e8cf;
    border-color: rgba(64,92,42,0.6);
}

body.light-mode .expand-slots-btn:hover {
    background: linear-gradient(135deg, #506d36, #405c2a);
    box-shadow: 0 2px 8px rgba(64,92,42,0.3);
}

body.light-mode .expand-slots-btn:disabled {
    background: rgba(100,78,25,0.08);
    color: rgba(100,78,25,0.35);
    border-color: rgba(100,78,25,0.12);
    box-shadow: none;
}

body.light-mode .inventory-slot {
    border-width: 3px;
    border-color: rgba(100,78,25,0.15);
}

body.light-mode .inventory-slot.empty-slot {
    background: rgba(100,78,25,0.04);
    border-width: 3px;
    border-color: rgba(100,78,25,0.12);
}

body.light-mode .inventory-slot:hover:not(.empty-slot) {
    background: rgba(100,78,25,0.15);
    border-color: #7a5d1c;
}

body.light-mode .inventory-slot.rarity-uncommon {
    border-color: rgba(72,128,72,0.3);
}

body.light-mode .inventory-slot.rarity-rare {
    border-color: rgba(56,120,181,0.35);
}

body.light-mode .inventory-slot.rarity-epic {
    border-color: rgba(143,56,181,0.35);
}

body.light-mode .inventory-slot.rarity-legendary {
    border-color: rgba(198,145,12,0.5);
}

body.light-mode .eq-empty-placeholder {
    background: rgba(100,78,25,0.08);
    border: 1px dashed rgba(100,78,25,0.25);
}

body.light-mode .eq-filled-container {
    background: rgba(122,85,28,0.1);
}

body.light-mode .equipment-panel {
    background: rgba(100,78,25,0.06);
    border-color: rgba(100,78,25,0.2);
}

body.light-mode .ingredients-list {
    background: rgba(100,78,25,0.1);
}

body.light-mode .slot-qty {
    background: #7a5d1c;
    color: #f4e8cf;
    border-color: rgba(100,78,25,0.4);
}

body.light-mode .slot-name {
    color: #635240;
}

body.light-mode .owned-count {
    background: rgba(100,78,25,0.15);
    color: #33271b;
}

body.light-mode .inventory-slot.drag-over {
    background: rgba(122,85,28,0.2);
    border-color: #7a5d1c;
}

body.light-mode .inventory-hint {
    color: rgba(100,78,25,0.5);
}

body.light-mode .stats-list {
    border-color: rgba(100,78,25,0.15);
}

body.light-mode .stat-line span:last-child {
    color: #7a5d1c;
}

body.light-mode .auto-heal-section {
    background: rgba(100,78,25,0.08);
    border-color: rgba(100,78,25,0.15);
}

body.light-mode .auto-heal-clear-btn {
    background: rgba(140,34,34,0.15);
    border-radius: 6px;
}

body.light-mode .auto-heal-clear-btn:hover {
    background: rgba(140,34,34,0.28);
}

body.light-mode .auto-heal-threshold input[type="range"] {
    background: rgba(100,78,25,0.25);
}

body.light-mode .modal-autoheal-btn:hover {
    background: #6b4f7a;
}

body.light-mode .item-tooltip {
    background: rgba(223,207,173,0.95);
    border-color: rgba(100,78,25,0.3);
    border-top-color: #7a5d1c;
    box-shadow: 0 8px 32px rgba(51,39,27,0.35);
    color: #33271b;
}

body.light-mode .item-tooltip .tooltip-header {
    /* text-shadow removed: base rule's black outline works in both themes */
    border-bottom-color: rgba(122, 93, 28, 0.4);
}

body.light-mode .item-tooltip .tooltip-type {
    color: #635240;
    border-bottom-color: rgba(100,78,25,0.15);
}

body.light-mode .item-tooltip .tooltip-ilvl {
    color: #7a5d1c;
}

body.light-mode .item-tooltip .tooltip-desc {
    color: #635240;
}

body.light-mode .item-tooltip .tooltip-stats {
    background: rgba(100,78,25,0.1);
    border-color: rgba(100,78,25,0.15);
}

body.light-mode .item-tooltip .tooltip-stat-line span:first-child {
    color: #635240;
}

body.light-mode .item-tooltip .tooltip-stat-line span:last-child {
    color: #405c2a;
}

body.light-mode .item-tooltip .tooltip-value {
    color: #7a5d1c;
    border-top-color: rgba(100,78,25,0.15);
}

/* ==========================================
   LIGHT MODE OVERRIDES - Modal
   ========================================== */
body.light-mode .modal-item-stats {
    background: rgba(100,78,25,0.1);
    border-color: rgba(100,78,25,0.15);
}

body.light-mode .modal-action-btn {
    border-color: rgba(100,78,25,0.25);
}

body.light-mode .modal-action-btn:hover {
    border-color: rgba(122,85,28,0.5);
}

body.light-mode .modal-equip-btn {
    color: #f4e8cf;
    background: linear-gradient(135deg, #7a5d1c, #5a4310);
    border-color: rgba(100,78,25,0.5);
}

body.light-mode .modal-equip-btn:hover {
    background: linear-gradient(135deg, #8a6d2c, #7a5d1c);
}

body.light-mode .modal-eat-btn {
    color: #f4e8cf;
    background: linear-gradient(135deg, #405c2a, #355020);
    border-color: rgba(64,92,42,0.5);
}

body.light-mode .modal-eat-btn:hover {
    background: linear-gradient(135deg, #506d36, #405c2a);
}

body.light-mode .modal-sell-btn {
    background: rgba(100,78,25,0.1);
    color: #33271b;
    border-color: rgba(100,78,25,0.2);
}

body.light-mode .modal-sell-btn:hover {
    background: rgba(100,78,25,0.18);
    border-color: rgba(100,78,25,0.35);
}

body.light-mode #modal-item-value {
    background: rgba(100,78,25,0.08);
    border-color: rgba(100,78,25,0.15);
    color: #7a5d1c;
}

body.light-mode #modal-item-type {
    border-bottom-color: rgba(100,78,25,0.15);
}

body.light-mode .modal-ilvl {
    color: #7a5d1c;
    border-bottom-color: rgba(100,78,25,0.15);
}

/* ==========================================
   LIGHT MODE OVERRIDES - Skill Tree
   ========================================== */
body.light-mode .skilltree-layout-wrapper {
    background: radial-gradient(circle at center, #d2c095 0%, #b8a273 100%);
}

body.light-mode .skilltree-layout-wrapper::before {
    background: radial-gradient(rgba(100,78,25,0.4), transparent 1px);
    opacity: 0.18;
}

body.light-mode .skill-node-element.normal-node {
    background: #dfcfad;
    outline-color: rgba(100,78,25,0.5);
}

body.light-mode .skill-node-element.normal-node.unlocked {
    background: rgba(64,92,42,0.25);
    outline-color: #405c2a;
}

body.light-mode .skill-node-element.notable-node {
    background: #c2af84;
    outline-color: #7a5d1c;
}

body.light-mode .skill-node-element.notable-node.unlocked {
    background: #b8943e;
    outline-color: #7a5d1c;
}

body.light-mode .skill-node-element.keystone-node {
    background: #5c426b;
    outline-color: #5c426b;
}

body.light-mode .skill-node-element.keystone-node.unlocked {
    background: #6b4f7a;
    outline-color: #5c426b;
}

body.light-mode .skill-node-element.keystone-node.unlockable {
    outline-color: #5c426b;
}

body.light-mode .skill-node-element.socket-node {
    background: rgba(100,78,25,0.18);
    outline-color: rgba(100,78,25,0.5);
}

body.light-mode .skill-node-element.socket-node.unlocked {
    background: rgba(100,78,25,0.28);
    outline-color: rgba(100,78,25,0.7);
}

body.light-mode .skill-node-element.socket-node.gem-ruby {
    outline-color: #8c2222;
}

body.light-mode .skill-node-element.socket-node.gem-sapphire {
    outline-color: #2c4a6b;
}

body.light-mode .skill-node-element.socket-node.gem-emerald {
    outline-color: #405c2a;
}

body.light-mode .skill-node-element.socket-node.gem-diamond {
    outline-color: #5a5550;
}

body.light-mode .skill-node-element.socket-node.gem-onyx {
    outline-color: #33271b;
}

body.light-mode .skill-node-element.root-node {
    background: #7a5d1c;
    outline-color: #b8943e;
}

body.light-mode #skill-search-input {
    background: rgba(100,78,25,0.15);
    color: #33271b;
    border: 1px solid rgba(100,78,25,0.3);
}

body.light-mode #skill-search-input::placeholder {
    color: rgba(100,78,25,0.5);
}

body.light-mode #skill-search-input:focus {
    background: rgba(100,78,25,0.25);
}

body.light-mode .skilltree-selector-tabs {
    background: rgba(100,78,25,0.12);
}

body.light-mode .skilltree-selector-tab {
    background: rgba(100,78,25,0.1);
    color: #635240;
}

body.light-mode .skilltree-selector-tab:hover {
    background: rgba(100,78,25,0.2);
    color: #33271b;
}

body.light-mode .skilltree-selector-tab.active {
    background: #7a5d1c;
    color: #f4e8cf;
}

body.light-mode .skilltree-selector-tab .tab-points-badge {
    background: #8c2222;
    color: #f4e8cf;
}

body.light-mode .skill-jewel-section {
    background: rgba(100,78,25,0.12);
}

body.light-mode .skill-jewel-section h4 {
    color: #7a5d1c;
}

body.light-mode .panel-divider {
    background: rgba(100,78,25,0.3);
}

body.light-mode .jewel-cost-info {
    background: rgba(100,78,25,0.1);
}

body.light-mode .node-lvl-badge {
    background: #7a5d1c;
    color: #f4e8cf;
}

body.light-mode .node-hover-name {
    background: #33271b;
    color: #f4e8cf;
}

body.light-mode .skill-details-panel {
    background: #d2c095;
    color: #33271b;
    border: 1px solid #7a5d1c;
    box-shadow: 0 4px 16px rgba(80,60,25,0.3);
}

body.light-mode .close-panel {
    color: #635240;
    outline-color: rgba(100,78,25,0.4);
}

body.light-mode .close-panel:hover {
    outline-color: rgba(122,85,28,0.7);
}

body.light-mode .skill-level {
    color: #33271b;
    font-weight: 700;
}

/* ==========================================
   LIGHT MODE OVERRIDES - Notifications / Tooltips / Toggle
   ========================================== */
body.light-mode .autosave-indicator {
    background: rgba(255,255,255,0.92);
    color: #33271b;
    border: 1px solid rgba(100,78,25,0.3);
    box-shadow: 0 4px 12px rgba(80,60,25,0.2);
}

body.light-mode .autosave-spinner {
    border: 2px solid #7a5d1c;
    border-top-color: transparent;
}

body.light-mode .item-tooltip {
    background: #d2c095;
    color: #33271b;
    border: 1px solid #7a5d1c;
    border-top: 3px solid var(--primary-color);
    box-shadow: 0 4px 16px rgba(80,60,25,0.3);
}

body.light-mode .tooltip-stats {
    background: rgba(100,78,25,0.1);
}

body.light-mode .switch .slider {
    background-color: rgba(100,78,25,0.18);
}

body.light-mode .switch input:checked + .slider {
    background-color: rgba(64,92,42,0.5);
}

body.light-mode .slider:before {
    background-color: rgba(255,255,255,0.85);
}

body.light-mode input:checked + .slider:before {
    background-color: #fff;
}

/* ==========================================
   LIGHT MODE OVERRIDES - Farming / Brewing / Shop
   ========================================== */
body.light-mode .shop-card.purchased {
    background: rgba(64,92,42,0.12);
}

body.light-mode .farming-card.empty {
    background: rgba(100,78,25,0.08);
    border: 1px dashed rgba(100,78,25,0.3);
}

body.light-mode .plot-status-badge.empty {
    background: rgba(100,78,25,0.15);
    color: #635240;
}

body.light-mode .plot-status-badge.growing {
    background: rgba(122,85,28,0.2);
    color: #7a5d1c;
}

body.light-mode .plot-status-badge.ready {
    background: rgba(64,92,42,0.22);
    color: #405c2a;
}

body.light-mode .seed-select-card {
    background: rgba(100,78,25,0.08);
}

body.light-mode .seed-select-card:hover:not(.disabled) {
    background: rgba(122,85,28,0.18);
}

body.light-mode .buff-speed {
    background: rgba(122,85,28,0.22);
    color: #7a5d1c;
}

body.light-mode .buff-attack {
    background: rgba(140,34,34,0.18);
    color: #8c2222;
}

body.light-mode .buff-royal {
    background: rgba(122,85,28,0.18);
    color: #7a5d1c;
}

/* ==========================================
   LIGHT MODE OVERRIDES - Brutalist refinements
   Applies brutalist borders/shadows/textures on top
   of the existing parchment overrides above.
   ========================================== */
body.light-mode .sidebar {
    background: var(--brutal-surface-light);
    border-right: 4px solid var(--brutal-border-color);
}

body.light-mode .nav-link {
    background: var(--brutal-surface-lighter);
    color: var(--text-primary);
    border: 3px solid var(--brutal-border-color);
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-border-color);
}

body.light-mode .nav-link .nav-badge {
    background: var(--brutal-surface-light);
    color: var(--text-primary);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .nav-link.active .nav-badge {
    background: var(--brutal-text-dark-on-light);
    color: var(--brutal-accent-gold);
    border-color: var(--brutal-border-color);
}

body.light-mode .nav-category {
    color: var(--brutal-text-dark-on-light);
    background: var(--brutal-accent-gold);
    border: 3px solid var(--brutal-border-color);
}

body.light-mode .dashboard-header {
    background: var(--brutal-surface-light);
    border-bottom: 4px solid var(--brutal-border-color);
}

body.light-mode .header-stat-item {
    background: var(--brutal-surface-lighter);
    color: var(--text-primary);
    border: 3px solid var(--brutal-border-color);
}

body.light-mode .footer-btn {
    background: var(--brutal-surface-lighter);
    color: var(--text-primary);
    border: 3px solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

body.light-mode .footer-btn:hover {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

body.light-mode .tab-content {
    background: var(--brutal-surface-light);
}

body.light-mode .tab-header h1 {
    color: var(--text-primary);
}

body.light-mode .modal-content {
    background: var(--brutal-surface-light);
    border: 4px solid var(--brutal-border-color);
    color: var(--text-primary);
    box-shadow: 6px 6px 0 0 var(--brutal-border-color);
}

body.light-mode .modal-item-stats {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode #modal-item-value {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .card,
body.light-mode .panel,
body.light-mode .action-card,
body.light-mode .upgrade-card,
body.light-mode .recipe-card,
body.light-mode .shop-item-card,
body.light-mode .dungeon-card,
body.light-mode .plot-card,
body.light-mode .cooking-station,
body.light-mode .coop-upgrade,
body.light-mode .stats-list {
    background: var(--brutal-surface-light);
    border: 3px solid var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

body.light-mode .modal-autoheal-btn {
    background: var(--brutal-accent-purple, #9b59b6);
    color: var(--brutal-text-light-on-dark);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .item-tooltip {
    background: var(--brutal-surface-light);
    border: 3px solid var(--brutal-border-color);
    color: var(--text-primary);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

body.light-mode .item-tooltip .tooltip-header {
    color: var(--brutal-accent-gold);
    border-bottom: 2px solid var(--brutal-accent-gold);
}

body.light-mode .item-tooltip .tooltip-type {
    color: var(--text-primary);
    border-bottom: none;
}

body.light-mode .item-tooltip .tooltip-ilvl {
    color: #7a5d1c;
}

body.light-mode .item-tooltip .tooltip-stats {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .tooltip-stats {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .sort-btn.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 3px solid var(--brutal-border-color);
    box-shadow: 2px 2px 0 0 var(--brutal-border-color);
}

body.light-mode .slot-qty {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .inventory-slot:hover:not(.empty-slot) {
    background: var(--brutal-accent-gold);
}

body.light-mode .auto-heal-clear-btn {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    border: 2px solid var(--brutal-border-color);
    border-radius: 0;
}

body.light-mode .buff-speed,
body.light-mode .buff-attack,
body.light-mode .buff-royal {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 2px solid var(--brutal-border-color);
    font-weight: 800;
    text-transform: uppercase;
}

body.light-mode .buff-attack {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
}

body.light-mode .loot-drawer-container {
    background: var(--brutal-surface-light);
    border-top: 4px solid var(--brutal-border-color);
    box-shadow: 0 -6px 0 0 var(--brutal-border-color);
}

body.light-mode .loot-all-btn {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 3px solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
}

body.light-mode .dungeon-stage-indicator {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 3px solid var(--brutal-border-color);
}

body.light-mode .notification-toast {
    background: var(--brutal-surface-light);
    color: var(--text-primary);
    border: 3px solid var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

body.light-mode .autosave-indicator {
    background: var(--brutal-surface-light);
    color: var(--text-primary);
    border: 3px solid var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

body.light-mode .autosave-spinner {
    border: 2px solid var(--brutal-accent-gold);
    border-top-color: transparent;
}

body.light-mode .settings-backup-section {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .settings-option {
    border-bottom: 2px dashed var(--brutal-border-color);
}

body.light-mode ::-webkit-scrollbar-track {
    background: var(--brutal-surface-darker);
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: var(--brutal-accent-gold);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--brutal-text-dark-on-light);
}

body.light-mode .skilltree-layout-wrapper {
    background: var(--brutal-surface-darker);
    border: 4px solid var(--brutal-border-color);
    box-shadow: 6px 6px 0 0 var(--brutal-border-color);
}

body.light-mode .skill-details-panel {
    background: var(--brutal-surface-light);
    color: var(--text-primary);
    border: 3px solid var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-border-color);
}

body.light-mode .close-panel {
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .skilltree-selector-tabs {
    background: var(--brutal-surface-darker);
    border: 3px solid var(--brutal-border-color);
}

body.light-mode .skilltree-selector-tab {
    background: var(--brutal-surface-light);
    color: var(--text-primary);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .skilltree-selector-tab.active {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border-color: var(--brutal-border-color);
}

body.light-mode .skill-jewel-section {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .node-lvl-badge {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .jewel-cost-info {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode #skill-search-input {
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
    border: 2px solid var(--brutal-border-color);
    border-radius: 0;
}

body.light-mode .shop-card.purchased {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
}

body.light-mode .farming-card.empty {
    background: var(--brutal-surface-darker);
    border: 3px dashed var(--brutal-border-color);
}

body.light-mode .plot-status-badge.empty {
    background: var(--brutal-surface-darker);
    color: var(--text-primary);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .plot-status-badge.growing {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .plot-status-badge.ready {
    background: var(--brutal-accent-green);
    color: var(--brutal-text-dark-on-light);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .seed-select-card {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--brutal-border-color);
}

body.light-mode .seed-select-card:hover:not(.disabled) {
    background: var(--brutal-accent-gold);
    color: var(--brutal-text-dark-on-light);
}

/* ==========================================
   LIGHT MODE OVERRIDES - Skill Progress Bars
   ========================================== */
body.light-mode .skill-progress-container {
    background: rgba(100,78,25,0.1);
}

body.light-mode .skill-progress-level {
    color: #7a5d1c;
}

body.light-mode .skill-progress-bar-bg {
    background: rgba(100,78,25,0.3);
}

body.light-mode .active-progress-bar-bg {
    background: rgba(100,78,25,0.3);
}

body.light-mode .progress-combat {
    background: #8c2222;
}

body.light-mode .progress-bar-outer {
    background: rgba(100,78,25,0.2);
}

/* ==========================================================================
   BRUTALIST BUTTONS — 3 Class Systems
   Adapted from examples/button-brutalist-variants/ (variations 01, 08, 09)
   All maintain Brutalist DNA: 0px corners, hard offset shadows, thick borders.
   ========================================================================== */

/* Shared button reset — applied to all Brutalist button types */
[class*="btn-brutal"],
[class*="btn-chip-brutal"],
[class*="btn-segment-brutal"],
.btn-brutal,
.btn-chip-brutal,
.btn-segment-brutal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-style: solid;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Disabled state shared across all Brutalist types */
[class*="btn-brutal"]:disabled,
[class*="btn-chip-brutal"]:disabled,
[class*="btn-segment-brutal"]:disabled,
[class*="btn-brutal"].disabled,
[class*="btn-chip-brutal"].disabled,
[class*="btn-segment-brutal"].disabled {
    opacity: 0.35;
    pointer-events: none;
    transform: none !important;
    filter: grayscale(0.7);
    box-shadow: none !important;
}

/* Reduced motion: disable transforms for vestibular safety */
@media (prefers-reduced-motion: reduce) {
    [class*="btn-brutal"]:hover,
    [class*="btn-chip-brutal"]:hover,
    [class*="btn-segment-brutal"]:hover,
    [class*="btn-brutal"]:active,
    [class*="btn-chip-brutal"]:active,
    [class*="btn-segment-brutal"]:active {
        transform: none !important;
        opacity: 0.85;
    }
}

/* ==========================================================================
   Variation 01 — Basic Square (.btn-brutal)
   The canonical Brutalist Cut: zero radius, 3px black border, 5px hard shadow.
   ========================================================================== */
.btn-brutal {
    padding: 0.65em 1.4em;
    color: var(--text-primary);
    background: var(--brutal-bg-dark);
    border: 3px solid var(--brutal-shadow);
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
}

.btn-brutal:hover {
    background: #2a2a2a;
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-shadow);
}

.btn-brutal:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 0 var(--brutal-shadow);
    background: #111111;
}

.btn-brutal--primary {
    background: var(--primary-color);
    border-color: var(--brutal-shadow-primary);
    color: #1a1a1a;
    box-shadow: 5px 5px 0 0 var(--brutal-shadow-primary);
}

.btn-brutal--primary:hover {
    background: #dbb95e;
    box-shadow: 7px 7px 0 0 var(--brutal-shadow-primary);
}

.btn-brutal--primary:active {
    background: #b8943e;
    box-shadow: 2px 2px 0 0 var(--brutal-shadow-primary);
}

.btn-brutal--danger {
    background: var(--danger-color);
    border-color: var(--brutal-shadow-danger);
    box-shadow: 5px 5px 0 0 var(--brutal-shadow-danger);
}

.btn-brutal--danger:hover {
    background: #a53030;
    box-shadow: 7px 7px 0 0 var(--brutal-shadow-danger);
}

.btn-brutal--danger:active {
    background: #6e1818;
    box-shadow: 2px 2px 0 0 var(--brutal-shadow-danger);
}

/* Success variant — green (consume/food/heal actions) */
.btn-brutal--success {
    background: linear-gradient(135deg, #7a9e5c, #6b8e4e);
    color: #fff;
    border-color: #000;
}
.btn-brutal--success:hover {
    background: linear-gradient(135deg, #8aae6c, #7a9e5c);
}
.btn-brutal--success:active {
    background: linear-gradient(135deg, #6a8e4c, #5a7e3e);
}

.btn-brutal:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Size modifiers */
.btn-brutal--sm {
    font-size: var(--fs-sm);
    padding: 0.45em 1em;
    box-shadow: 3px 3px 0 0 var(--brutal-shadow);
}
.btn-brutal--sm:hover { box-shadow: 5px 5px 0 0 var(--brutal-shadow); }
.btn-brutal--sm:active { box-shadow: 1px 1px 0 0 var(--brutal-shadow); }

.btn-brutal--lg {
    font-size: var(--fs-lg);
    padding: 0.85em 2em;
    box-shadow: 7px 7px 0 0 var(--brutal-shadow);
}
.btn-brutal--lg:hover { box-shadow: 9px 9px 0 0 var(--brutal-shadow); }
.btn-brutal--lg:active { box-shadow: 4px 4px 0 0 var(--brutal-shadow); }

/* ==========================================================================
   Variation 08 — Tag Chip (.btn-chip-brutal)
   Compact pill-like button with a single angled corner (bottom-right).
   Designed for tags, labels, badges, and inline metadata actions.
   ========================================================================== */
.btn-chip-brutal {
    padding: 0.3em 0.8em;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--text-primary);
    background: var(--brutal-bg-dark);
    border: 2px solid var(--brutal-chip-border);
    box-shadow: 3px 3px 0 0 var(--brutal-chip-shadow);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}

.btn-chip-brutal:hover {
    background: #2a2a2a;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 var(--brutal-chip-shadow);
}

.btn-chip-brutal:active {
    background: #111111;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--brutal-chip-shadow);
}

.btn-chip-brutal:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Color variants for tag chips */
.btn-chip-brutal--gold {
    background: var(--brutal-gold-bg);
    border-color: var(--brutal-gold-border);
    box-shadow: 3px 3px 0 0 var(--brutal-gold-border);
    color: #1a1a1a;
}
.btn-chip-brutal--gold:hover {
    background: #a08030;
}

.btn-chip-brutal--red {
    background: var(--brutal-red-bg);
    border-color: var(--brutal-red-border);
    box-shadow: 3px 3px 0 0 var(--brutal-red-border);
}
.btn-chip-brutal--red:hover {
    background: #8a3030;
}

/* ==========================================================================
   Variation 09 — Action Group (.btn-segment-brutal)
   Multi-button segmented control where adjacent buttons share borders.
   Best for toggle groups, filter bars, and segmented navigation.
   ========================================================================== */

/* Container that wraps the group */
.btn-segment-brutal-group {
    display: inline-flex; /* Note: inline-flex (not flex) is intentional — segments size to content, not full-width. */
    box-shadow: 5px 5px 0 0 var(--brutal-group-shadow);
}

.btn-segment-brutal {
    padding: 0.5em 1.2em;
    color: var(--text-secondary);
    background: #1a1a1a;
    border: 2px solid var(--brutal-group-border);
    border-right-width: 1px;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: none;
}

.btn-segment-brutal:first-child {
    border-left-width: 2px;
}

.btn-segment-brutal:last-child {
    border-right-width: 2px;
}

.btn-segment-brutal:hover {
    background: #2a2a2a;
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 0 0 var(--brutal-group-border);
    z-index: 1;
}

.btn-segment-brutal:active {
    background: #0e0e0e;
    transform: translateY(1px);
    box-shadow: none;
}

.btn-segment-brutal--active,
.btn-segment-brutal.active {
    background: var(--brutal-group-active-bg);
    border-color: var(--brutal-group-active-border);
    color: var(--text-primary);
}

.btn-segment-brutal:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
    z-index: 2;
}

/* Override Brutalist cascade for help-btn — restore 28×28 gold identity */
button.help-btn.btn-chip-brutal,
.help-btn.btn-chip-brutal {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    font-size: var(--fs-md);
    background: rgba(201, 168, 76, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: var(--primary-color);
    clip-path: none;
    box-shadow: none;
    border-radius: 0;
    line-height: 1;
}

/* ==========================================================================
   Light-mode overrides for Brutalist button systems
   Parchment background needs bright button colors + dark text for contrast
   ========================================================================== */
body.light-mode .btn-brutal {
    background: var(--brutal-bg-light);
    color: var(--brutal-text-light);
    border-color: #000;
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal:hover {
    background: var(--brutal-bg-light-hover);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal:active {
    background: #d4c9a3;
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--primary {
    background: var(--brutal-primary-light);
    color: #1a1a1a;
    border-color: #000;
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--primary:hover {
    background: var(--brutal-primary-light-hover);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-shadow-primary);
}
body.light-mode .btn-brutal--primary:active {
    background: #d4b840;
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 0 var(--brutal-shadow-primary);
}
body.light-mode .btn-brutal--danger {
    background: var(--brutal-danger-light);
    color: #fff;
    border-color: #000;
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--danger:hover {
    background: var(--brutal-danger-light-hover);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-shadow-danger);
}
body.light-mode .btn-brutal--danger:active {
    background: #b03a3a;
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 0 var(--brutal-shadow-danger);
}
body.light-mode .btn-brutal--success {
    background: var(--brutal-success-light);
    color: #1a1a1a;
    border-color: #000;
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--success:hover {
    background: var(--brutal-success-light-hover);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--success:active {
    background: #7a9e5b;
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--sm:hover {
    background: var(--brutal-bg-light-hover);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--sm:active {
    background: #d4c9a3;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--lg:hover {
    background: var(--brutal-bg-light-hover);
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-brutal--lg:active {
    background: #d4c9a3;
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-chip-brutal {
    background: var(--brutal-bg-light);
    color: var(--brutal-text-light);
    border-color: #000;
    box-shadow: 3px 3px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-chip-brutal:hover {
    background: var(--brutal-bg-light-hover);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-chip-brutal:active {
    background: #d4c9a3;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-chip-brutal--gold {
    background: var(--brutal-primary-light);
    color: #1a1a1a;
    border-color: #000;
}
body.light-mode .btn-chip-brutal--red {
    background: var(--brutal-danger-light);
    color: #fff;
    border-color: #000;
}
body.light-mode .btn-segment-brutal-group {
    background: var(--brutal-bg-light);
    border-color: #000;
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
}
body.light-mode .btn-segment-brutal {
    background: var(--brutal-bg-light);
    color: var(--brutal-text-light);
    border-color: #000;
}
body.light-mode .btn-segment-brutal:hover {
    background: var(--brutal-bg-light-hover);
}
body.light-mode .btn-segment-brutal--active,
body.light-mode .btn-segment-brutal.active {
    background: var(--brutal-primary-light);
    color: #1a1a1a;
    border-color: #000;
}
body.light-mode .help-btn.btn-chip-brutal {
    background: rgba(201, 168, 76, 0.25);
    color: #8a6e1c;
    border-color: rgba(138, 110, 28, 0.4);
}

/* --- Patchnotes Styles --- */
.patchnotes-content {
    color: var(--text-primary);
    padding-top: 10px;
}
.patchnote-version {
    font-size: var(--fs-xl);
    font-weight: 800;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--brutal-accent-gold);
    border-bottom: var(--brutal-border-width) solid var(--brutal-border-color);
    padding-bottom: 5px;
}
.patchnote-title {
    font-size: var(--fs-md);
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.patchnote-text {
    font-size: var(--fs-base);
    margin-bottom: 8px;
    line-height: 1.5;
}
.patchnote-list {
    margin-bottom: 15px;
    padding-left: 20px;
    list-style-type: square;
}
.patchnote-list li {
    font-size: var(--fs-base);
    margin-bottom: 4px;
}
.patchnote-divider {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 20px 0;
}
.patchnote-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: var(--fs-sm);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
}
.patchnote-table th,
.patchnote-table td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}
.patchnote-table th {
    background: var(--bg-dark);
    color: var(--brutal-accent-gold);
    font-weight: 800;
    text-transform: uppercase;
}
.patchnote-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.patchnotes-content code {
    background: var(--bg-dark);
    color: var(--brutal-accent-gold);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--fs-sm);
}

/* Light mode overrides for patchnotes */
body.light-mode .patchnotes-content {
    color: var(--brutal-text-light);
}
body.light-mode .patchnote-version {
    color: #8a6e1c;
    border-bottom-color: var(--brutal-border-color);
}
body.light-mode .patchnote-title {
    color: var(--brutal-text-light);
}
body.light-mode .patchnote-text {
    color: var(--brutal-text-light);
}
body.light-mode .patchnote-list li {
    color: var(--brutal-text-light);
}
body.light-mode .patchnote-divider {
    border-top-color: rgba(0, 0, 0, 0.15);
}
body.light-mode .patchnotes-content code {
    background: rgba(0, 0, 0, 0.05);
    color: #8c2222;
}

body.light-mode .patchnote-table {
    border-color: var(--brutal-border-color);
}
body.light-mode .patchnote-table th,
body.light-mode .patchnote-table td {
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--brutal-text-light);
}
body.light-mode .patchnote-table th {
    background: rgba(0, 0, 0, 0.05);
    color: #8a6e1c;
}
body.light-mode .patchnote-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

/* Copy Prevention (Text Selection disable) */
body.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.disable-select input,
body.disable-select textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ==========================================================================
   OFFLINE PROCESSING LOADING MODAL
   ========================================================================== */
.offline-processing-content {
    text-align: center;
    width: 360px;
    pointer-events: none;
}

.offline-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color, #444);
    border-top-color: var(--brutal-accent-blue, #3498db);
    border-radius: 50%;
    animation: offline-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes offline-spin {
    to { transform: rotate(360deg); }
}

.offline-processing-text {
    font-size: var(--fs-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

/* ==========================================================================
   DEBUG CONSOLE (Ctrl+Shift+D)
   ========================================================================== */
.debug-console-content {
    width: 520px;
    max-width: 95vw;
}

.debug-console-content h3 {
    font-size: var(--fs-lg);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.debug-output {
    background: var(--brutal-surface-darker);
    border: 2px solid var(--border-color, #000);
    padding: 10px;
    max-height: 260px;
    overflow-y: auto;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-bottom: 10px;
    min-height: 60px;
}

.debug-log {
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

.debug-log-error {
    color: var(--danger-color);
    font-weight: 700;
    white-space: pre-wrap;
    word-break: break-all;
}

.debug-input-row {
    display: flex;
    gap: 8px;
}

.debug-input {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
}

.debug-exec-btn {
    white-space: nowrap;
    font-size: var(--fs-sm);
}

.debug-close-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    background: var(--brutal-accent-red);
    color: var(--brutal-text-light-on-dark);
    font-size: var(--fs-md);
    cursor: pointer;
    border: 2px solid var(--border-color, #000);
    border-radius: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    line-height: 1;
}

/* Light-mode overrides for debug console */
body.light-mode .offline-spinner {
    border-color: #ccc;
    border-top-color: var(--brutal-accent-blue, #1f4e79);
}

body.light-mode .debug-output {
    background: #f8f8f0;
    border-color: #000;
}

body.light-mode .debug-close-btn {
    background: var(--brutal-accent-red);
    color: #fff;
}

/* ==========================================================================
   CHEST OPENING OVERLAY (used by InventoryModule.openChest)
   Full-screen overlay with animation stage + result panel.
   ========================================================================== */
.chest-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chest-overlay-stage {
    position: relative;
    width: min(90vw, 640px);
    height: min(80vh, 640px);
    background: var(--bg-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chest-char {
    position: relative;
    width: 140px;
    height: 120px;
    font-size: 6.875em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    z-index: 2;
    will-change: transform, opacity;
    transform-origin: center bottom;
}

.chest-char-lid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    overflow: hidden;
    transform-origin: top center;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.chest-char-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chest-overlay .result-panel {
    position: absolute;
    inset: 12px;
    background: var(--bg-card);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
    z-index: 6;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
}

.chest-overlay .result-scroll-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
}

.chest-overlay .result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--brutal-border-color);
    padding-bottom: 8px;
}

.chest-overlay .result-title {
    font-size: var(--fs-md);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brutal-accent-gold);
}

.chest-overlay .result-rarity-tag {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    background: var(--brutal-accent-gold);
    color: var(--bg-dark);
    border: 2px solid var(--brutal-border-color);
}

.chest-overlay .result-gold-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--brutal-bg-dark);
    border: 2px solid var(--brutal-border-color);
    padding: 10px 14px;
    font-size: var(--fs-lg);
    font-weight: 900;
    color: var(--brutal-accent-gold);
}

.chest-overlay .result-gold-row .icon {
    font-size: 1.4em;
}

.chest-overlay .result-gold-row .value {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.chest-overlay .result-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chest-overlay .result-section-label {
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.chest-overlay .result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.chest-overlay .result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--brutal-bg-dark);
    border: 2px solid var(--brutal-border-color);
    padding: 10px 8px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(0.85);
    cursor: pointer;
}

.chest-overlay .result-item:hover {
    filter: brightness(1.3);
}

.chest-overlay .result-item .sym {
    font-size: 2.5em;
    line-height: 1;
}

.chest-overlay .result-item .name {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chest-overlay .result-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chest-overlay .result-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--brutal-bg-dark);
    border: 2px solid var(--brutal-border-color);
    padding: 8px 12px;
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateX(-12px);
    cursor: pointer;
}

.chest-overlay .result-list-row:hover {
    filter: brightness(1.3);
}

.chest-overlay .result-list-row .sym {
    font-size: 1.6em;
}

.chest-overlay .result-list-row .name {
    flex: 1;
    color: var(--text-primary);
}

.chest-overlay .result-list-row .qty {
    font-weight: 700;
    color: var(--brutal-accent-gold);
    font-variant-numeric: tabular-nums;
}

.chest-overlay .result-cta {
    margin-top: auto;
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bg-dark);
    background: var(--brutal-accent-gold);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
    cursor: pointer;
}

.chest-overlay .result-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--brutal-shadow);
}

.chest-overlay .result-cta:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 0 var(--brutal-shadow);
}

.chest-overlay .result-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.chest-overlay .result-actions .result-cta {
    flex: 1;
}

.chest-overlay .result-cta--secondary {
    color: var(--text-primary);
    background: var(--brutal-bg-dark);
    border: var(--brutal-border-width) solid var(--brutal-border-color);
    box-shadow: 3px 3px 0 0 var(--brutal-shadow);
}

.chest-overlay .result-cta--secondary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brutal-shadow);
    filter: brightness(1.3);
}

.chest-overlay .result-cta--secondary:active {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 0 var(--brutal-shadow);
}

.chest-overlay .result-gold-row {
    cursor: pointer;
}

.chest-overlay .result-gold-row:hover {
    filter: brightness(1.3);
}

.chest-overlay .result-gold-row.claimed,
.chest-overlay .result-item.claimed,
.chest-overlay .result-list-row.claimed {
    display: none;
}

.chest-overlay .result-panel--viewing {
    opacity: 1;
    pointer-events: auto;
}

.chest-overlay .result-panel--viewing .result-item,
.chest-overlay .result-panel--viewing .result-list-row {
    opacity: 1;
    transform: none;
}

/* Light-mode overrides for chest overlay */
body.light-mode .chest-overlay-stage {
    background: var(--bg-dark);
    border-color: var(--brutal-border-color);
}

body.light-mode .chest-overlay .result-panel {
    background: var(--bg-card);
}

body.light-mode .chest-overlay .result-scroll-area {
    background: transparent;
}

body.light-mode .chest-overlay .result-title {
    color: var(--brutal-accent-gold);
}

body.light-mode .chest-overlay .result-gold-row {
    background: var(--brutal-bg-dark);
}

body.light-mode .chest-overlay .result-item {
    background: var(--brutal-bg-dark);
}

body.light-mode .chest-overlay .result-list-row {
    background: var(--brutal-bg-dark);
}

body.light-mode .chest-overlay .result-cta {
    color: var(--bg-dark);
    background: var(--brutal-accent-gold);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chest-overlay .result-cta {
        transition: none;
    }
}

/* ==========================================================================
   RARITY CANVAS EFFECTS & TEXT GLOW STYLES
   ========================================================================== */

/* Canvas particle support */
.inventory-slot,
.loot-slot,
.eq-slot,
.eq-filled-container {
    overflow: visible !important;
}

/* Ensure slot contents (icon, name, qty) stay on top of the background canvas */
.inventory-slot .slot-icon,
.loot-slot .slot-icon,
.eq-filled-container .eq-icon {
    position: relative;
    z-index: 2;
}

.inventory-slot .slot-name,
.loot-slot .slot-name,
.eq-filled-container .eq-name {
    position: relative;
    z-index: 3;
}

.inventory-slot .slot-qty,
.loot-slot .slot-qty,
.eq-filled-container .unequip-btn {
    z-index: 3;
}

/* --- Keyframe Animations --- */
@keyframes rarity-shine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes rarity-epic-wave {
    0%, 100% {
        text-shadow: 
            -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
            0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 #000, 1.5px 0 #000,
            0 0 8px rgba(155, 89, 182, 0.65), 0 0 15px rgba(155, 89, 182, 0.4);
    }
    50% {
        text-shadow: 
            -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
            0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 #000, 1.5px 0 #000,
            0 0 16px rgba(155, 89, 182, 0.95), 0 0 25px rgba(155, 89, 182, 0.6);
    }
}

@keyframes rarity-mythical-flame {
    0%, 100% {
        filter: drop-shadow(0 0 3px #e74c3c) drop-shadow(0 -2px 6px #e67e22) drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000);
    }
    50% {
        filter: drop-shadow(0 0 6px #e74c3c) drop-shadow(0 -4px 10px #f1c40f) drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000);
    }
}

@keyframes rarity-artifact-pulse {
    0%, 100% {
        text-shadow: 0 0 4px rgba(230, 126, 34, 0.7), 0 0 8px rgba(230, 126, 34, 0.4);
        letter-spacing: 0.05em;
        filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000);
    }
    50% {
        text-shadow: 0 0 12px rgba(230, 126, 34, 0.9), 0 0 22px rgba(230, 126, 34, 0.6);
        letter-spacing: 0.1em;
        filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000);
    }
}

@keyframes rarity-cosmic-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- Rarity Specific Text Effects --- */
.rarity-effect-epic {
    animation: rarity-epic-wave 3s ease-in-out infinite;
    color: #9b59b6 !important;
    font-weight: inherit !important;
}

.rarity-effect-legendary {
    background: linear-gradient(90deg, #f1c40f, #fffdf0 25%, #f1c40f 50%, #fffdf0 75%, #f1c40f);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none !important;
    animation: rarity-shine 3s linear infinite;
    filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.6)) drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000);
    font-weight: inherit !important;
}

.rarity-effect-mythical {
    background: linear-gradient(0deg, #e74c3c, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none !important;
    animation: rarity-mythical-flame 2s ease-in-out infinite;
    font-weight: inherit !important;
}

.rarity-effect-artifact {
    color: #e67e22 !important;
    animation: rarity-artifact-pulse 2s ease-in-out infinite;
    font-weight: inherit !important;
}

.rarity-effect-arcane {
    background: linear-gradient(90deg, #00cec9, #0984e3 25%, #74b9ff 50%, #a29bfe 75%, #00cec9);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none !important;
    animation: rarity-shine 2s linear infinite;
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 6px rgba(0, 206, 201, 0.95)) drop-shadow(0 0 12px rgba(108, 92, 231, 0.75));
    font-weight: inherit !important;
}

.rarity-effect-cosmic {
    background: linear-gradient(120deg, #fd79a8, #9b59b6, #00cec9, #fd79a8);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none !important;
    animation: rarity-cosmic-shift 5s ease infinite;
    filter: drop-shadow(0 0 3px rgba(253, 121, 168, 0.5)) drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000);
    font-weight: inherit !important;
}

.rarity-effect-godly {
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26a69a, #d4e157, #ef5350);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none !important;
    animation: rarity-shine 4s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000);
    font-weight: inherit !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Force container visibility so large glows are never clipped by boundaries */
.modal-body,
.item-tooltip,
#modal-item-name,
.item-tooltip .tooltip-header {
    overflow: visible !important;
}

/* Ensure the close button is always on top of any animation stack contexts */
.close-modal {
    z-index: 10 !important;
}

/* --- Light Mode Visibility Optimizations for High Rarity Effects --- */
body.light-mode div.inventory-slot.rarity-epic,
body.light-mode div.inventory-slot.rarity-legendary,
body.light-mode div.inventory-slot.rarity-mythical,
body.light-mode div.inventory-slot.rarity-artifact,
body.light-mode div.inventory-slot.rarity-arcane,
body.light-mode div.inventory-slot.rarity-cosmic,
body.light-mode div.inventory-slot.rarity-godly,
body.light-mode div.loot-slot.rarity-epic,
body.light-mode div.loot-slot.rarity-legendary,
body.light-mode div.loot-slot.rarity-mythical,
body.light-mode div.loot-slot.rarity-artifact,
body.light-mode div.loot-slot.rarity-arcane,
body.light-mode div.loot-slot.rarity-cosmic,
body.light-mode div.loot-slot.rarity-godly,
body.light-mode div.eq-filled-container.rarity-epic,
body.light-mode div.eq-filled-container.rarity-legendary,
body.light-mode div.eq-filled-container.rarity-mythical,
body.light-mode div.eq-filled-container.rarity-artifact,
body.light-mode div.eq-filled-container.rarity-arcane,
body.light-mode div.eq-filled-container.rarity-cosmic,
body.light-mode div.eq-filled-container.rarity-godly {
    background: var(--brutal-surface-dark); /* Keep light mode background (white/light-beige) */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.08); /* Minimal inset shadow for particles */
}

/* Light mode specific text effect optimizations for visibility on white background (no !important) */
body.light-mode .rarity-effect-epic {
    text-shadow: 
        -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
        0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 #000, 1.5px 0 #000,
        0 0 10px rgba(142, 68, 173, 0.7);
}

body.light-mode .rarity-effect-legendary {
    filter: drop-shadow(0 0 5px rgba(211, 84, 0, 0.75)) drop-shadow(1.5px 1.5px 0 #000) drop-shadow(-1.5px -1.5px 0 #000) drop-shadow(1.5px -1.5px 0 #000) drop-shadow(-1.5px 1.5px 0 #000);
}

body.light-mode .rarity-effect-mythical {
    filter: drop-shadow(0 0 5px rgba(192, 41, 43, 0.8)) drop-shadow(1.5px 1.5px 0 #000) drop-shadow(-1.5px -1.5px 0 #000);
}

body.light-mode .rarity-effect-artifact {
    filter: drop-shadow(0 0 6px rgba(211, 84, 0, 0.85)) drop-shadow(1.5px 1.5px 0 #000) drop-shadow(-1.5px -1.5px 0 #000);
}

body.light-mode .rarity-effect-arcane {
    filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 8px rgba(9, 132, 227, 0.9));
}

body.light-mode .rarity-effect-cosmic {
    filter: drop-shadow(0 0 4px rgba(108, 92, 231, 0.85)) drop-shadow(1.5px 1.5px 0 #000) drop-shadow(-1.5px -1.5px 0 #000) drop-shadow(1.5px -1.5px 0 #000) drop-shadow(-1.5px 1.5px 0 #000);
}

body.light-mode .rarity-effect-godly {
    filter: drop-shadow(0 0 6px rgba(44, 62, 80, 0.85)) drop-shadow(1.5px 1.5px 0 #000) drop-shadow(-1.5px -1.5px 0 #000) drop-shadow(1.5px -1.5px 0 #000) drop-shadow(-1.5px 1.5px 0 #000);
}